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

@customElement("lit-app")
export default class App extends LitElement {
    @state()
    target: HTMLSelectElement = undefiend;
    render() {
        return html `<div class="root">
    <select style="position: relative;width: 200px;height: 100px;">
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>
    </select>
    <lit-moveable
        .target=${this.target}
        .litDraggable=${true}
        @litRender=${this.onRender}
    ></lit-moveable>
</div>`;
    }
    firstUpdated() {
        this.target = document.querySelector<HTMLSelectElement>("select")!;
    }
    onRender(e) {
        e.target.style.transform = e.transform;
    }
}