import Moveable from "lit-moveable";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("lit-app")
export default class App extends LitElement {
    render() {
        return html `<div class="container">
    <p>No Stop</p>
    <input
        type="input"
        class="target1"
    ></input>
    <p>Stop Drag</p>
    <input
        type="input"
        class="target2"
    ></input>
    <p>Stop Drag</p>
    <select class="target3">
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <lit-moveable
        .target=${".target1"}
        .litDraggable=${true}
        @litDrag=${this.onDrag}
    ></lit-moveable>
    <lit-moveable
        .target=${".target2"}
        .litDraggable=${true}
        @litDragStart=${this.onDragStart}
        @litDrag=${this.onDrag$0}
    ></lit-moveable>
    <lit-moveable
        .target=${".target3"}
        .litDraggable=${true}
        @litDragStart=${this.onDragStart$0}
        @litDrag=${this.onDrag$1}
    ></lit-moveable>
</div>`;
    }
    onDrag(e) {
        e.target.style.cssText += e.cssText;
    }
    onDragStart(e) {
        if ([
            "input",
            "select"
        ].indexOf(e.target.tagName.toLowerCase()) > -1) {
            e.stopDrag();
        }
    }
    onDrag$0(e) {
        e.target.style.cssText += e.cssText;
    }
    onDragStart$0(e) {
        if ([
            "input",
            "select"
        ].indexOf(e.target.tagName.toLowerCase()) > -1) {
            e.stopDrag();
        }
    }
    onDrag$1(e) {
        e.target.style.cssText += e.cssText;
    }
}