@oiz/stzh-components 0.0.0-pretest → 1.4.0-npmjstest

package/dist/esm/stzh-sortable.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-0e6d34c6.js';
-import { f as fetchTranslations } from './translation-utils-f5b09945.js';
+import { f as fetchTranslations } from './translation-utils-2623783f.js';
 
 function t(t){return "object"==typeof t&&null!=t&&1===t.nodeType}function e(t,e){return (!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return e(r.overflowY,n)||e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return !!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return !1}function r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}function compute(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!t(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;t(p)&&c(p);){if((p=p.parentElement)===f){s.push(p);break}null!=p&&p===document.body&&n(p)&&!n(document.documentElement)||null!=p&&n(p,a)&&s.push(p);}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,g=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+b/2,I="center"===u?V+H/2:"end"===u?E:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=g&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0;if(f===k)F="start"===d?x:"end"===d?x-g:"nearest"===d?r(v,v+g,g,q,A,v+x,v+x+b,b):x-g/2,G="start"===u?I:"center"===u?I-m/2:"end"===u?I-m:r(w,w+m,m,j,z,w+I,w+I+H,H),F=Math.max(0,F+v),G=Math.max(0,G+w);else {F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?r(R,Y,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===u?I-L-j:"center"===u?I-(L+O/2)+J/2:"end"===u?I-X+z+J:r(L,X,O,j,z+J,I,I+H,H);var N=k.scrollLeft,P=k.scrollTop;x+=P-(F=Math.max(0,Math.min(P+F,k.scrollHeight-D+K))),I+=N-(G=Math.max(0,Math.min(N+G,k.scrollWidth-O+J)));}C.push({el:k,top:F,left:G});}return C}
 
@@ -3086,293 +3086,293 @@ Sortable.mount(Remove, Revert);
 
 const stzhSortableCss = ".sc-stzh-sortable-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-sortable-h{display:none}.sc-stzh-sortable-h *.sc-stzh-sortable,.sc-stzh-sortable-h *.sc-stzh-sortable::before,.sc-stzh-sortable-h *.sc-stzh-sortable::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-sortable-h{--unselected-item-opacity:0.6;--ghost-item-background:var(--stzh-color-grey5);--ghost-item-box-shadow:inset 0 0 0.5rem rgba(0, 0, 0, 0.32)}.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item{position:relative;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:move;cursor:-webkit-grab;cursor:grab}.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-drag,.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-chosen,.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-ghost,.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-selected{cursor:move;cursor:-webkit-grabbing;cursor:grabbing}.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-drag{opacity:1 !important}.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-ghost{z-index:0}.sc-stzh-sortable-h .sc-stzh-sortable-s *.is-sortable-item.is-ghost::after{z-index:99;content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--ghost-item-background);-webkit-box-shadow:var(--ghost-item-box-shadow);box-shadow:var(--ghost-item-box-shadow)}.sc-stzh-sortable-h .sc-stzh-sortable-s>*.has-item-selected>*.is-sortable-item{opacity:var(--unselected-item-opacity)}.sc-stzh-sortable-h .sc-stzh-sortable-s>*.has-item-selected>*.is-sortable-item.is-selected{opacity:1}.stzh-sortable__description.sc-stzh-sortable,.stzh-sortable__aria-live.sc-stzh-sortable{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 
-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;
-const StzhSortable = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.stzhUpdate = createEvent(this, "stzhUpdate", 7);
-    /** 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)))));
-  }
-  get element() { return getElement(this); }
-  static get watchers() { return {
-    "filterElements": ["filterElementsWatcher"]
-  }; }
-};
+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;
+const StzhSortable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.stzhUpdate = createEvent(this, "stzhUpdate", 7);
+    /** 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)))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "filterElements": ["filterElementsWatcher"]
+  }; }
+};
 StzhSortable.style = stzhSortableCss;
 
 export { StzhSortable as stzh_sortable };

package/dist/esm/stzh-status.entry.js

@@ -2,31 +2,31 @@ import { r as registerInstance, h, a as Host, g as getElement } from './index-0e
 
 const stzhStatusCss = ".sc-stzh-status-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-status-h{display:none}.sc-stzh-status-h *.sc-stzh-status,.sc-stzh-status-h *.sc-stzh-status::before,.sc-stzh-status-h *.sc-stzh-status::after{-webkit-box-sizing:border-box;box-sizing:border-box}.sc-stzh-status-h{--color:var(--stzh-base-color)}[type=success].sc-stzh-status-h{--color:var(--stzh-color-truegreen)}[type=warning].sc-stzh-status-h{--color:var(--stzh-color-warning)}[type=error].sc-stzh-status-h{--color:var(--stzh-color-error)}[type=info].sc-stzh-status-h{--color:var(--stzh-color-zueriblue)}.stzh-status.sc-stzh-status{min-width:10rem;color:var(--color)}.stzh-status__dot.sc-stzh-status{border-radius:50%;width:0.75rem;height:0.75rem;background-color:currentColor;margin-right:var(--stzh-space-xxsmall)}.stzh-status__bar.sc-stzh-status{display:block;height:0.25rem;border-radius:0.75rem;background-color:var(--stzh-color-grey13);margin-top:var(--stzh-space-xxsmall)}.stzh-status__bar-inner.sc-stzh-status{display:block;height:100%;width:0;border-radius:0.75rem;background:currentColor}.stzh-status__text.sc-stzh-status{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}";
 
-const StzhStatus = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Percent */
-    this.percent = 0;
-    /** Whether to hide/show loadingbar */
-    this.withLoadingbar = false;
-    /** Label */
-    this.label = "";
-    /** Type */
-    this.type = "default";
-  }
-  render() {
-    const classes = {
-      "stzh-status": true,
-      [`stzh-status--type-${this.type}`]: !!this.type
-    };
-    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-status__text" }, h("div", { class: "stzh-status__dot" }), this.label &&
-      h("div", { class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
-      h("div", { class: "stzh-status__bar" }, h("div", { class: "stzh-status__bar-inner", style: {
-          width: `${this.percent}%`
-        } })))));
-  }
-  get element() { return getElement(this); }
-};
+const StzhStatus = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Percent */
+    this.percent = 0;
+    /** Whether to hide/show loadingbar */
+    this.withLoadingbar = false;
+    /** Label */
+    this.label = "";
+    /** Type */
+    this.type = "default";
+  }
+  render() {
+    const classes = {
+      "stzh-status": true,
+      [`stzh-status--type-${this.type}`]: !!this.type
+    };
+    return (h(Host, null, h("div", { class: classes }, h("div", { class: "stzh-status__text" }, h("div", { class: "stzh-status__dot" }), this.label &&
+      h("div", { class: "stzh-status__label" }, this.label)), this.withLoadingbar &&
+      h("div", { class: "stzh-status__bar" }, h("div", { class: "stzh-status__bar-inner", style: {
+          width: `${this.percent}%`
+        } })))));
+  }
+  get element() { return getElement(this); }
+};
 StzhStatus.style = stzhStatusCss;
 
 export { StzhStatus as stzh_status };