/** @license Copyright (c) 2022 trading_peter This program is available under Apache License Version 2.0 */ import { LitElement, html, css } from 'lit'; import Sortable from 'sortablejs/modular/sortable.core.esm.js'; class TpSortable extends LitElement { static get styles() { return [ css` :host { display: block; user-select: none; } ` ]; } render() { return html` `; } static get properties() { return { selector: { type: String }, handle: { type: String }, // Use long press gesture to activate dragging. longPress: { type: Boolean }, sorting: { type: Boolean, reflect: true }, _sortables: { type: Array } }; } constructor() { super(); this.selector = 'div'; this.handle = null; this.longPress = false; this.sorting = false; this._sortables = []; } firstUpdated() { this.sortable = Sortable.create(this.querySelector('[slot="list"]'), { animation: 150, draggable: this.selector, handle: this.handle, onSort: e => { this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true })); } }); } } window.customElements.define('tp-sortable', TpSortable);