@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/collection/components/stzh-sortable/stzh-sortable.js

@@ -1,501 +1,530 @@
-import { Host, h } from "@stencil/core";
-import scrollIntoView from "scroll-into-view-if-needed";
-import Sortable from "sortablejs";
-import { fetchTranslations } from "../../utils/translation-utils";
-const CLASS_ITEM = 'is-sortable-item';
-const CLASS_GHOST = "is-ghost";
-const CLASS_SELECTED = "is-selected";
-const CLASS_CHOSEN = "is-chosen";
-const CLASS_DRAG = "is-drag";
-const CLASS_PARENT_SELECTED = "has-item-selected";
-let sortableCounter = 0;
-/**
- * @slot - Slot for any elements
- */
-export class StzhSortable {
-  constructor() {
-    /** Wether sorting is disabled or not */
-    this.disabled = false;
-    /** HTML attribute that is used by the `toArray()` method */
-    this.dataIdAttribute = "data-id";
-    /** Container  */
-    this.container = () => {
-      var _a;
-      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
-    };
-    /** Filtered elements that should prevent dragging inside the drag item elements */
-    this.filterElements = [
-      "[data-stzh-sortable-filtered]",
-      "[sortable-disabled]",
-      "button",
-      "a[href]",
-      "input",
-      "select",
-      "textarea",
-      "label",
-      "iframe",
-      "details",
-      "area",
-      "stzh-sortable"
-    ];
-    this.selectedItem = null;
-    this.resetItemOnBlur = false;
-    this.init = () => {
-      if (!this.getContainer()) {
-        return;
-      }
-      Array.from(this.getContainer().children).forEach((child) => {
-        child.classList.add(CLASS_ITEM);
-        child.addEventListener('blur', this.onBlur);
-        child.addEventListener('keydown', this.onKeydown);
-        child.setAttribute('tabindex', '0');
-        child.setAttribute('aria-describedby', `${this.sortableId}-description`);
-      });
-    };
-    this.updated = async (event) => {
-      let newIndex;
-      let oldIndex;
-      let item;
-      if (event) {
-        newIndex = event.newIndex;
-        oldIndex = event.oldIndex;
-        item = event.item;
-      }
-      else {
-        newIndex = this.getIndexOfSelectedItem();
-        oldIndex = this.lastIndex;
-        item = this.selectedItem;
-      }
-      if (newIndex !== oldIndex) {
-        this.stzhUpdate.emit({
-          component: "stzh-sortable",
-          data: await this.toArray(),
-          item,
-          newIndex,
-          oldIndex
-        });
-      }
-    };
-    this.onKeydown = (event) => {
-      const currentTarget = event.currentTarget;
-      if (!this.getContainer() || this.disabled) {
-        return;
-      }
-      if (event.key === " "
-        || (event.key === "Tab"
-          && this.selectedItem
-          && this.selectedItem === event.currentTarget)) {
-        event.preventDefault();
-      }
-      const isFilteredElement = currentTarget.matches(this._filterElements.join(', '));
-      if (event.key === " " && !isFilteredElement) {
-        if (!this.selectedItem) {
-          this.selectedItem = currentTarget;
-          this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);
-          this.selectedItem.classList.add(CLASS_SELECTED);
-          this.lastIndex = this.getIndexOfSelectedItem();
-          this.resetItemOnBlur = true;
-          this.updateAriaLive(this.localization.started);
-        }
-        else {
-          this.resetItemOnBlur = false;
-          this.updateAriaLive(this.localization.dropped);
-          this.updated();
-          this.resetActiveItem();
-        }
-      }
-      else if (event.key === "Escape" && this.selectedItem) {
-        this.resetItemOnBlur = false;
-        this.updateAriaLive(this.localization.canceled);
-        this.resetActiveItem(true);
-      }
-      else if (event.key === "ArrowUp") {
-        if (this.selectedItem) {
-          this.moveItem(this.selectedItem, "up");
-        }
-        else {
-          this.focusItem(currentTarget.previousElementSibling);
-        }
-      }
-      else if (event.key === "ArrowDown") {
-        if (this.selectedItem) {
-          this.moveItem(this.selectedItem, "down");
-        }
-        else {
-          this.focusItem(currentTarget.nextElementSibling);
-        }
-      }
-    };
-    this.onBlur = () => {
-      if (this.resetItemOnBlur) {
-        this.resetItemOnBlur = false;
-        this.updateAriaLive(this.localization.dropped);
-        this.updated();
-        this.resetActiveItem();
-      }
-    };
-  }
-  /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
-  async toArray() {
-    return this.sortable.toArray();
-  }
-  /** Sorts the elements according to the array */
-  async sort(order, useAnimation = true) {
-    return this.sortable.sort(order, useAnimation);
-  }
-  /** Move item */
-  async moveItem(item, direction) {
-    if (!item
-      || !item.nextElementSibling && direction === "down"
-      || !item.previousElementSibling && direction === "up") {
-      return;
-    }
-    this.resetItemOnBlur = false;
-    if (direction === "up") {
-      item.previousElementSibling.before(item);
-    }
-    else if (direction === "down") {
-      item.nextElementSibling.after(item);
-    }
-    this.updateAriaLive(this.localization.moved, item);
-    this.focusItem(item);
-    this.resetItemOnBlur = true;
-  }
-  filterElementsWatcher(newValue) {
-    if (typeof newValue === "string") {
-      this._filterElements = JSON.parse(newValue);
-    }
-    else {
-      this._filterElements = newValue;
-    }
-  }
-  getContainer() {
-    return typeof this.container === "function"
-      ? this.container()
-      : this.container;
-  }
-  updateAriaLive(string, item = this.selectedItem) {
-    if (!this.getContainer()) {
-      return;
-    }
-    if (item) {
-      const title = item.getAttribute("aria-label") || "";
-      const index = this.getIndexOfSelectedItem(item);
-      string = string
-        .replace("{title}", title)
-        .replace("{current}", (index + 1).toString());
-    }
-    const total = this.getContainer().children.length;
-    string = string
-      .replace("{total}", total.toString());
-    this.ariaLiveElement.textContent = string;
-  }
-  getIndexOfSelectedItem(item = this.selectedItem) {
-    if (item) {
-      return Array.from(item.parentElement.children).indexOf(item);
-    }
-  }
-  resetActiveItem(moveToOriginalPosition = false) {
-    if (!this.selectedItem) {
-      return;
-    }
-    const currentIndex = this.getIndexOfSelectedItem();
-    const container = this.selectedItem.parentElement;
-    if (moveToOriginalPosition && this.lastIndex !== currentIndex) {
-      if (this.lastIndex > currentIndex) {
-        container.children[this.lastIndex].after(this.selectedItem);
-      }
-      else {
-        container.children[this.lastIndex].before(this.selectedItem);
-      }
-      this.selectedItem.focus();
-    }
-    container.classList.remove(CLASS_PARENT_SELECTED);
-    this.selectedItem.classList.remove(CLASS_SELECTED);
-    this.selectedItem = null;
-    this.lastIndex = null;
-  }
-  focusItem(item) {
-    if (!item) {
-      return;
-    }
-    item.focus();
-    const flyingfocusElement = document.querySelector('stzh-flyingfocus');
-    if (flyingfocusElement) {
-      flyingfocusElement.reposition();
-    }
-    scrollIntoView(item, {
-      scrollMode: 'if-needed',
-      block: 'nearest',
-      inline: 'nearest'
-    });
-  }
-  async componentWillLoad() {
-    this.sortableId = `stzh-sortable-${sortableCounter++}`;
-    this.filterElementsWatcher(this.filterElements);
-    if (!this.localization) {
-      this.localization = await fetchTranslations(this.element, 'sortable');
-    }
-  }
-  componentWillUpdate() {
-    if (this.sortable) {
-      this.sortable.destroy();
-      this.sortable = null;
-    }
-  }
-  componentDidRender() {
-    if (this.sortable) {
-      return;
-    }
-    // see available option in https://github.com/SortableJS/Sortable#options
-    this.sortable = new Sortable(this.getContainer(), {
-      animation: 150,
-      filter: this._filterElements.join(', '),
-      ghostClass: CLASS_GHOST,
-      chosenClass: CLASS_CHOSEN,
-      dragClass: CLASS_DRAG,
-      dataIdAttr: this.dataIdAttribute,
-      preventOnFilter: false,
-      forceFallback: true,
-      delay: 200,
-      delayOnTouchOnly: true,
-      disabled: this.disabled,
-      // changed sorting within list
-      onUpdate: this.updated
-    });
-  }
-  connectedCallback() {
-    this.init();
-    this.observer = new MutationObserver(this.init);
-    this.observer.observe(this.element, {
-      childList: true,
-      subtree: true
-    });
-  }
-  disconnectedCallback() {
-    this.observer.disconnect();
-    if (this.sortable) {
-      this.sortable.destroy();
-      this.sortable = null;
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-sortable": true
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description), h("div", { ref: (el) => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { ref: (el) => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", null)))));
-  }
-  static get is() { return "stzh-sortable"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-sortable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-sortable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "localization": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "StzhSortableLocalizedText",
-          "resolved": "StzhLocaleComponent & { description: string; started: string; dropped: string; canceled: string; moved: string; }",
-          "references": {
-            "StzhSortableLocalizedText": {
-              "location": "import",
-              "path": "./stzh-sortable.localization"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Translation strings."
-        }
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Wether sorting is disabled or not"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "dataIdAttribute": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "HTML attribute that is used by the `toArray()` method"
-        },
-        "attribute": "data-id-attribute",
-        "reflect": false,
-        "defaultValue": "\"data-id\""
-      },
-      "container": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "HTMLElement | Function",
-          "resolved": "Function | HTMLElement",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            },
-            "Function": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Container"
-        },
-        "defaultValue": "() => {\r\n    return this.containerElement?.firstElementChild;\r\n  }"
-      },
-      "filterElements": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "any[] | string",
-          "resolved": "any[] | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Filtered elements that should prevent dragging inside the drag item elements"
-        },
-        "attribute": "filter-elements",
-        "reflect": false,
-        "defaultValue": "[\r\n    \"[data-stzh-sortable-filtered]\",\r\n    \"[sortable-disabled]\",\r\n    \"button\",\r\n    \"a[href]\",\r\n    \"input\",\r\n    \"select\",\r\n    \"textarea\",\r\n    \"label\",\r\n    \"iframe\",\r\n    \"details\",\r\n    \"area\",\r\n    \"stzh-sortable\"\r\n  ]"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhUpdate",
-        "name": "stzhUpdate",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Update event"
-        },
-        "complexType": {
-          "original": "StzhSortableUpdateEvent",
-          "resolved": "{ component: \"stzh-sortable\"; data: string[]; item: HTMLElement; newIndex: number; oldIndex: number; }",
-          "references": {
-            "StzhSortableUpdateEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "toArray": {
-        "complexType": {
-          "signature": "() => Promise<string[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<string[]>"
-        },
-        "docs": {
-          "text": "Serializes the sortable's item data-id's (dataIdAttr option) into an array of string",
-          "tags": []
-        }
-      },
-      "sort": {
-        "complexType": {
-          "signature": "(order: String[], useAnimation?: boolean) => Promise<any>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "String": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<any>"
-        },
-        "docs": {
-          "text": "Sorts the elements according to the array",
-          "tags": []
-        }
-      },
-      "moveItem": {
-        "complexType": {
-          "signature": "(item: HTMLElement, direction: \"up\" | \"down\") => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "HTMLElement": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Move item",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "filterElements",
-        "methodName": "filterElementsWatcher"
-      }];
-  }
-}
+import { Host, h } from "@stencil/core";
+import scrollIntoView from "scroll-into-view-if-needed";
+import Sortable from "../../libraries/sortable";
+import { cloneElement } from "../../utils/utils";
+import { fetchTranslations } from "../../utils/translation-utils";
+const CLASS_ITEM = 'is-sortable-item';
+const CLASS_GHOST = "is-ghost";
+const CLASS_SELECTED = "is-selected";
+const CLASS_CHOSEN = "is-chosen";
+const CLASS_DRAG = "is-drag";
+const CLASS_PARENT_SELECTED = "has-item-selected";
+let sortableCounter = 0;
+/**
+ * @slot - Slot for any elements
+ */
+export class StzhSortable {
+  constructor() {
+    /** Wether sorting is disabled or not */
+    this.disabled = false;
+    /** HTML attribute that is used by the `toArray()` method */
+    this.dataIdAttribute = "data-id";
+    /** Container  */
+    this.container = () => {
+      var _a;
+      return (_a = this.containerElement) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+    };
+    /** Algorithm how the ghost element will be cloned */
+    this.ghostClone = (dragElement) => {
+      const [clonedElement] = cloneElement(dragElement);
+      return clonedElement;
+    };
+    /** Filtered elements that should prevent dragging inside the drag item elements */
+    this.filterElements = [
+      "[data-stzh-sortable-filtered]",
+      "[sortable-disabled]",
+      "button",
+      "a[href]",
+      "input",
+      "select",
+      "textarea",
+      "label",
+      "iframe",
+      "details",
+      "area",
+      "stzh-sortable"
+    ];
+    this.selectedItem = null;
+    this.resetItemOnBlur = false;
+    this.init = () => {
+      if (!this.getContainer()) {
+        return;
+      }
+      Array.from(this.getContainer().children).forEach((child) => {
+        child.classList.add(CLASS_ITEM);
+        child.addEventListener('blur', this.onBlur);
+        child.addEventListener('keydown', this.onKeydown);
+        child.setAttribute('tabindex', '0');
+        child.setAttribute('aria-describedby', `${this.sortableId}-description`);
+      });
+    };
+    this.updated = async (event) => {
+      let newIndex;
+      let oldIndex;
+      let item;
+      if (event) {
+        newIndex = event.newIndex;
+        oldIndex = event.oldIndex;
+        item = event.item;
+      }
+      else {
+        newIndex = this.getIndexOfSelectedItem();
+        oldIndex = this.lastIndex;
+        item = this.selectedItem;
+      }
+      if (newIndex !== oldIndex) {
+        this.stzhUpdate.emit({
+          component: "stzh-sortable",
+          data: await this.toArray(),
+          item,
+          newIndex,
+          oldIndex
+        });
+      }
+    };
+    this.onKeydown = (event) => {
+      const currentTarget = event.currentTarget;
+      const target = event.target;
+      if (!this.getContainer() || this.disabled) {
+        return;
+      }
+      const isFilteredElement = target.matches(this._filterElements.join(', '));
+      if (event.key === " " && !isFilteredElement) {
+        event.preventDefault();
+        if (!this.selectedItem) {
+          this.selectedItem = currentTarget;
+          this.selectedItem.parentElement.classList.add(CLASS_PARENT_SELECTED);
+          this.selectedItem.classList.add(CLASS_SELECTED);
+          this.lastIndex = this.getIndexOfSelectedItem();
+          this.resetItemOnBlur = true;
+          this.updateAriaLive(this.localization.started);
+        }
+        else {
+          this.resetItemOnBlur = false;
+          this.updateAriaLive(this.localization.dropped);
+          this.updated();
+          this.resetActiveItem();
+        }
+      }
+      else if (event.key === "Tab" && this.selectedItem && this.selectedItem === event.currentTarget) {
+        event.preventDefault();
+      }
+      else if (event.key === "Escape" && this.selectedItem) {
+        this.resetItemOnBlur = false;
+        this.updateAriaLive(this.localization.canceled);
+        this.resetActiveItem(true);
+      }
+      else if (event.key === "ArrowUp") {
+        if (this.selectedItem) {
+          this.moveItem(this.selectedItem, "up");
+        }
+        else {
+          this.focusItem(currentTarget.previousElementSibling);
+        }
+      }
+      else if (event.key === "ArrowDown") {
+        if (this.selectedItem) {
+          this.moveItem(this.selectedItem, "down");
+        }
+        else {
+          this.focusItem(currentTarget.nextElementSibling);
+        }
+      }
+    };
+    this.onBlur = () => {
+      if (this.resetItemOnBlur) {
+        this.resetItemOnBlur = false;
+        this.updateAriaLive(this.localization.dropped);
+        this.updated();
+        this.resetActiveItem();
+      }
+    };
+  }
+  /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
+  async toArray() {
+    return this.sortable.toArray();
+  }
+  /** Sorts the elements according to the array */
+  async sort(order, useAnimation = true) {
+    return this.sortable.sort(order, useAnimation);
+  }
+  /** Move item */
+  async moveItem(item, direction) {
+    if (!item
+      || !item.nextElementSibling && direction === "down"
+      || !item.previousElementSibling && direction === "up") {
+      return;
+    }
+    this.resetItemOnBlur = false;
+    if (direction === "up") {
+      item.previousElementSibling.before(item);
+    }
+    else if (direction === "down") {
+      item.nextElementSibling.after(item);
+    }
+    this.updateAriaLive(this.localization.moved, item);
+    this.focusItem(item);
+    this.resetItemOnBlur = true;
+  }
+  filterElementsWatcher(newValue) {
+    if (typeof newValue === "string") {
+      this._filterElements = JSON.parse(newValue);
+    }
+    else {
+      this._filterElements = newValue;
+    }
+  }
+  getContainer() {
+    return typeof this.container === "function"
+      ? this.container()
+      : this.container;
+  }
+  updateAriaLive(string, item = this.selectedItem) {
+    if (!this.getContainer()) {
+      return;
+    }
+    if (item) {
+      const title = item.getAttribute("aria-label") || "";
+      const index = this.getIndexOfSelectedItem(item);
+      string = string
+        .replace("{title}", title)
+        .replace("{current}", (index + 1).toString());
+    }
+    const total = this.getContainer().children.length;
+    string = string
+      .replace("{total}", total.toString());
+    this.ariaLiveElement.textContent = string;
+  }
+  getIndexOfSelectedItem(item = this.selectedItem) {
+    if (item) {
+      return Array.from(item.parentElement.children).indexOf(item);
+    }
+  }
+  resetActiveItem(moveToOriginalPosition = false) {
+    if (!this.selectedItem) {
+      return;
+    }
+    const currentIndex = this.getIndexOfSelectedItem();
+    const container = this.selectedItem.parentElement;
+    if (moveToOriginalPosition && this.lastIndex !== currentIndex) {
+      if (this.lastIndex > currentIndex) {
+        container.children[this.lastIndex].after(this.selectedItem);
+      }
+      else {
+        container.children[this.lastIndex].before(this.selectedItem);
+      }
+      this.selectedItem.focus();
+    }
+    container.classList.remove(CLASS_PARENT_SELECTED);
+    this.selectedItem.classList.remove(CLASS_SELECTED);
+    this.selectedItem = null;
+    this.lastIndex = null;
+  }
+  focusItem(item) {
+    if (!item) {
+      return;
+    }
+    item.focus();
+    const flyingfocusElement = document.querySelector('stzh-flyingfocus');
+    if (flyingfocusElement) {
+      flyingfocusElement.reposition();
+    }
+    scrollIntoView(item, {
+      scrollMode: 'if-needed',
+      block: 'nearest',
+      inline: 'nearest'
+    });
+  }
+  async componentWillLoad() {
+    this.sortableId = `stzh-sortable-${sortableCounter++}`;
+    this.filterElementsWatcher(this.filterElements);
+    if (!this.localization) {
+      this.localization = await fetchTranslations(this.element, 'sortable');
+    }
+  }
+  componentWillUpdate() {
+    if (this.sortable) {
+      this.sortable.destroy();
+      this.sortable = null;
+    }
+  }
+  componentDidRender() {
+    if (this.sortable) {
+      return;
+    }
+    // see available option in https://github.com/SortableJS/Sortable#options
+    this.sortable = new Sortable(this.getContainer(), {
+      animation: 150,
+      filter: this._filterElements.join(', '),
+      ghostClass: CLASS_GHOST,
+      chosenClass: CLASS_CHOSEN,
+      dragClass: CLASS_DRAG,
+      dataIdAttr: this.dataIdAttribute,
+      preventOnFilter: false,
+      forceFallback: true,
+      delay: 200,
+      delayOnTouchOnly: true,
+      disabled: this.disabled,
+      ghostClone: this.ghostClone,
+      // changed sorting within list
+      onUpdate: this.updated
+    });
+  }
+  connectedCallback() {
+    this.init();
+    this.observer = new MutationObserver(this.init);
+    this.observer.observe(this.element, {
+      childList: true,
+      subtree: true
+    });
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+    if (this.sortable) {
+      this.sortable.destroy();
+      this.sortable = null;
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-sortable": true
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { id: `${this.sortableId}-description`, class: "stzh-sortable__description" }, this.localization.description), h("div", { ref: (el) => (this.ariaLiveElement = el), "aria-live": "assertive", class: "stzh-sortable__aria-live" }), h("div", { ref: (el) => (this.containerElement = el), class: "stzh-sortable__container" }, h("slot", null)))));
+  }
+  static get is() { return "stzh-sortable"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-sortable.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-sortable.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "localization": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "StzhSortableLocalizedText",
+          "resolved": "StzhLocaleComponent & { description: string; started: string; dropped: string; canceled: string; moved: string; }",
+          "references": {
+            "StzhSortableLocalizedText": {
+              "location": "import",
+              "path": "./stzh-sortable.localization"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Translation strings."
+        }
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether sorting is disabled or not"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "dataIdAttribute": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "HTML attribute that is used by the `toArray()` method"
+        },
+        "attribute": "data-id-attribute",
+        "reflect": false,
+        "defaultValue": "\"data-id\""
+      },
+      "container": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement | Function",
+          "resolved": "Function | HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            },
+            "Function": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Container"
+        },
+        "defaultValue": "() => {\n    return this.containerElement?.firstElementChild;\n  }"
+      },
+      "ghostClone": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Function",
+          "resolved": "Function",
+          "references": {
+            "Function": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Algorithm how the ghost element will be cloned"
+        },
+        "defaultValue": "(dragElement: HTMLElement) => {\n    const [clonedElement] = cloneElement(dragElement);\n    return clonedElement;\n  }"
+      },
+      "filterElements": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "any[] | string",
+          "resolved": "any[] | string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Filtered elements that should prevent dragging inside the drag item elements"
+        },
+        "attribute": "filter-elements",
+        "reflect": false,
+        "defaultValue": "[\n    \"[data-stzh-sortable-filtered]\",\n    \"[sortable-disabled]\",\n    \"button\",\n    \"a[href]\",\n    \"input\",\n    \"select\",\n    \"textarea\",\n    \"label\",\n    \"iframe\",\n    \"details\",\n    \"area\",\n    \"stzh-sortable\"\n  ]"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhUpdate",
+        "name": "stzhUpdate",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Update event"
+        },
+        "complexType": {
+          "original": "StzhSortableUpdateEvent",
+          "resolved": "{ component: \"stzh-sortable\"; data: string[]; item: HTMLElement; newIndex: number; oldIndex: number; }",
+          "references": {
+            "StzhSortableUpdateEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toArray": {
+        "complexType": {
+          "signature": "() => Promise<string[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string[]>"
+        },
+        "docs": {
+          "text": "Serializes the sortable's item data-id's (dataIdAttr option) into an array of string",
+          "tags": []
+        }
+      },
+      "sort": {
+        "complexType": {
+          "signature": "(order: String[], useAnimation?: boolean) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "String": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "Sorts the elements according to the array",
+          "tags": []
+        }
+      },
+      "moveItem": {
+        "complexType": {
+          "signature": "(item: HTMLElement, direction: \"up\" | \"down\") => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Move item",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "filterElements",
+        "methodName": "filterElementsWatcher"
+      }];
+  }
+}