@nanoporetech-digital/components 4.9.4 → 5.0.0

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

@@ -0,0 +1,1181 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { h, Host, readTask, writeTask, Build, } from '@stencil/core';
+import { drag } from '../../utils/drag';
+import { nanoDebounce } from '../..';
+// Orientation map to limit dragging to horizontal or vertical.
+const orientationMap = {
+  horizontal: { x: 1, y: 0 },
+  vertical: { x: 0, y: 1 },
+};
+let sortableIds = 0;
+/**
+ * An accessible and flexible re-order / sort utility component.
+ *
+ *- Drag and drop via mouse, touch or keyboard
+ *- Live announcements for screen readers
+ *- Works with or without an explicit handle (although with is preferable)
+
+ * @part announcements - the a11y, live region. Visually hidden by default
+ *
+ * @slot - The default slot containing any items you might want to sort
+ */
+export class Sortable {
+  handleItemSelectorChange() {
+    this.refreshKeyboardHandles();
+  }
+  handleHandleSelectorChange() {
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+  }
+  handleCreateKeyboardHandleChange() {
+    this.refreshKeyboardHandles();
+  }
+  handleSortableHostElement(_newVal, oldVal) {
+    if (oldVal)
+      this.removeEventHandlers(oldVal);
+    this.addEventHandlers();
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+    if (this.sortableHostElement) {
+      // sortable host must have position relative
+      this.sortableHostElement.style.position = 'relative';
+    }
+  }
+  /** If sortable elements change dynamically, use this method to add handle controls to new elements */
+  async refreshKeyboardHandles() {
+    var _a, _b, _c;
+    if (this.handleSelector) {
+      if ((_a = this.keyboardHandleMap) === null || _a === void 0 ? void 0 : _a.size) {
+        this.keyboardHandleMap.clear();
+      }
+      this.sortableHost
+        .querySelectorAll(this.handleSelector)
+        .forEach((handle) => {
+        if (!handle.getAttribute('aria-describedby'))
+          handle.setAttribute('aria-describedby', this.sortableId);
+        const sortEle = handle.closest(this.itemSelector);
+        if (sortEle)
+          this.keyboardHandleMap.set(handle, sortEle);
+      });
+      return;
+    }
+    if ((_b = this.keyboardHandleMap) === null || _b === void 0 ? void 0 : _b.size) {
+      (_c = this.keyboardHandleMap) === null || _c === void 0 ? void 0 : _c.forEach((_ele, handle) => handle.remove());
+      this.keyboardHandleMap.clear();
+    }
+    this.sortableHost
+      .querySelectorAll(this.itemSelector)
+      .forEach((ele, i) => {
+      const handle = this.createKeyboardHandle(i, ele);
+      if (!handle) {
+        console.error('`createKeyboardHandle` *must* return the handle element it creates');
+        return;
+      }
+      this.keyboardHandleMap.set(handle, ele);
+      handle.setAttribute('aria-describedby', this.sortableId);
+    });
+  }
+  /**
+   * Get instance of sortable host.
+   * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`
+   */
+  get sortableHost() {
+    if (this.sortableHostElement)
+      return this.sortableHostElement;
+    return this.host;
+  }
+  /**
+   * Queues aria messages which are then displayed in a 'live' region.
+   * Messages are cleared after 10s
+   * @param msg aria message to announce
+   */
+  addAriaMsg(msg) {
+    this.ariaTextList = [...this.ariaTextList, msg];
+    setTimeout(() => {
+      const mIdx = this.ariaTextList.indexOf(msg);
+      this.ariaTextList.splice(mIdx, 1);
+      this.ariaTextList = [...this.ariaTextList];
+    }, 10000);
+  }
+  /**
+   * Try to stop text highlight whilst dragging
+   * @param userSelect
+   */
+  updateUserSelectStyle(userSelect) {
+    this.host.style.userSelect = userSelect;
+    // @ts-ignore
+    this.host.style.MozUserSelect = userSelect;
+    // @ts-ignore
+    this.host.style.msUserSelect = userSelect;
+    this.host.style.webkitUserSelect = userSelect;
+  }
+  /**
+   * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
+   * given targets. Returns an array of matches.
+   * @param node
+   * @param targets
+   * @returns all the items that currently intersect with the target node
+   */
+  hitTest(node, targets) {
+    const { left: l, top: t, width: w, height: h, } = node.getBoundingClientRect();
+    const x = l + w / 2;
+    const y = t + h / 2;
+    return targets.filter((item) => {
+      const { left, right, top, bottom } = item.getBoundingClientRect();
+      return !(x < left || x > right || y < top || y > bottom);
+    });
+  }
+  /**
+   * Returns a boolean indicating whether the node is currently in an animation.
+   * @param node
+   * @returns whether a node is currently animating or not
+   */
+  isAnimating(node) {
+    return this.animatedElements.indexOf(node) !== -1;
+  }
+  /**
+   * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
+   * if nodes animate from their old to their new position in the dom. */
+  animateNode(node, dx = 0, dy = 0) {
+    if (!node.animate) {
+      return;
+    }
+    // keep a stack of currently animating nodes to exclude as drag & drop targets.
+    this.animatedElements.push(node);
+    node.style.willChange = 'transform';
+    // animate from dx/dy (old node position) to none (new node position)
+    writeTask(() => {
+      this.animationPromise = new Promise((resolve) => {
+        node
+          .animate([
+          { transform: `translate3d(${dx}px, ${dy}px, 0)` },
+          { transform: 'none' },
+        ], this.animationTiming)
+          .addEventListener('finish', () => {
+          const index = this.animatedElements.indexOf(node);
+          node.style.willChange = '';
+          if (index !== -1) {
+            // splice out when done to unlock as a valid target
+            this.animatedElements.splice(index, 1);
+          }
+          resolve();
+          delete this.animationPromise;
+        }, { once: true });
+      });
+    });
+  }
+  /**
+   * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
+   * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
+   * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
+   * of this dom update */
+  insertAtTarget(node, target) {
+    if (!node || !target)
+      return;
+    let offsets = [];
+    if (this.animationEnabled) {
+      offsets = this.sortableNodes.map((item) => ({
+        x: item.offsetLeft,
+        y: item.offsetTop,
+      }));
+    }
+    if (!node.isConnected || !target.isConnected)
+      return;
+    if (this.dropzoneNodes.indexOf(target) > -1) {
+      target.append(node);
+    }
+    else {
+      const nodeComparison = node.compareDocumentPosition(target);
+      let position;
+      if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {
+        position =
+          target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';
+      }
+      if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {
+        position =
+          target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';
+      }
+      if (position)
+        target.insertAdjacentElement(position, node);
+    }
+    if (this.animationEnabled) {
+      this.sortableNodes.forEach((sortableNode, i) => {
+        const { x, y } = offsets[i];
+        const dx = x - sortableNode.offsetLeft;
+        const dy = y - sortableNode.offsetTop;
+        if (dx !== 0 || dy !== 0) {
+          this.animateNode(sortableNode, dx, dy);
+        }
+      });
+    }
+  }
+  reset() {
+    if (this.draggedElementClone !== undefined &&
+      this.draggedElementClone.parentNode !== null) {
+      this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);
+    }
+    if (this.draggedElement &&
+      this.draggedElement.parentNode &&
+      this.draggedElementOrigin) {
+      this.draggedElement.classList.remove(this.placeholderClass);
+    }
+    if (this.dropzoneActiveClass && this.dropzoneNodes.length) {
+      this.dropzoneNodes.forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));
+    }
+    delete this.draggedElementClone;
+    delete this.draggedElement;
+    this.dropzoneNodes = [];
+    this.sortableNodes = [];
+    this.animatedElements = [];
+    this.dragRequestPending = false;
+    this.updateUserSelectStyle('');
+  }
+  /**
+   * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.
+   * Clone styles are added onto the style object directly, since the ::slotted()
+   * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep
+   * @param node html node to clone
+   * @returns the cloned html node
+   */
+  createClone(node) {
+    const clone = node.cloneNode(true);
+    if (node.id)
+      clone.id = 'clone__' + clone.id;
+    /**
+     * Bugfix for table row sorting.
+     * During dragging table rows shrink, so we manually set them width of original node.
+     */
+    Array.from(clone.children).forEach((nodeChild, index) => {
+      const clonedNodeChild = nodeChild;
+      const originalNodeChild = node.children.item(index);
+      if (originalNodeChild) {
+        clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;
+      }
+    });
+    const { offsetLeft: x, offsetTop: y, offsetWidth: w, offsetHeight: h, } = node;
+    Object.assign(clone.style, {
+      position: 'absolute',
+      left: `calc(${x}px - var(--grab-offset-x, 0px))`,
+      top: `calc(${y}px - var(--grab-offset-y, 0px))`,
+      height: this.dragResize ? `${h}px` : undefined,
+      width: this.dragResize ? `${w}px` : undefined,
+      willChange: 'transform,opacity',
+    });
+    clone.classList.add(this.draggedClass);
+    return node.parentNode.appendChild(clone);
+  }
+  /// Event handlers ///
+  removeEventHandlers(ele) {
+    ele = ele || this.sortableHost;
+    ele.removeEventListener('mousedown', this.handleTrack);
+    ele.removeEventListener('touchstart', this.handleTrack);
+    ele.removeEventListener('keydown', this.handleKeydown);
+  }
+  addEventHandlers(ele) {
+    ele = ele || this.sortableHost;
+    ele.addEventListener('mousedown', this.handleTrack);
+    ele.addEventListener('touchstart', this.handleTrack);
+    ele.addEventListener('keydown', this.handleKeydown);
+  }
+  /**
+   * Watch for any changes in grab-able handle elements.
+   */
+  attachMutationObserver() {
+    if (!Build.isBrowser)
+      return;
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = undefined;
+    }
+    this.mutationObserver = new MutationObserver(() => {
+      const currHandles = Array.from(this.keyboardHandleMap.values());
+      const newHandles = Array.from(this.sortableHost.querySelectorAll(this.itemSelector));
+      // simple test for equality
+      if (currHandles.length !== newHandles.length ||
+        !!newHandles.find((h) => !currHandles.includes(h))) {
+        this.refreshKeyboardHandles();
+      }
+    });
+    this.mutationObserver.observe(this.sortableHost, {
+      subtree: true,
+      childList: true,
+    });
+  }
+  handleKeydown(e) {
+    const targetElement = e.target;
+    let foundHandle;
+    let sortEle;
+    if (this.handleSelector) {
+      foundHandle = targetElement.closest(this.handleSelector);
+      sortEle = targetElement.closest(this.itemSelector);
+    }
+    else {
+      sortEle = this.keyboardHandleMap.get(targetElement);
+      foundHandle = targetElement;
+    }
+    // have we found a handle and matching sort element from the keydown element
+    if (!foundHandle || !sortEle)
+      return;
+    const activateSort = (isActive) => {
+      this.keyboardSortActive = isActive;
+      this.draggedElement = isActive ? sortEle : undefined;
+      sortEle.classList.toggle(this.draggedClass, isActive);
+      foundHandle.classList.toggle(this.handleDraggedClass, isActive);
+      if (isActive) {
+        this.addAriaMsg(this.grabbedHelperText(sortEle));
+        document.addEventListener('mousedown', () => activateSort(false), {
+          once: true,
+        });
+      }
+      else {
+        this.addAriaMsg(this.droppedHelperText(sortEle));
+      }
+    };
+    // start editing this element's order?
+    if ([' ', 'Space', 'Enter'].includes(e.key)) {
+      e.preventDefault();
+      if (!this.keyboardSortActive) {
+        // grabbed the element
+        activateSort(true);
+        this.sortableNodes =
+          Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||
+            [];
+        const nanoGrabbedEv = this.nanoGrabbed.emit({
+          element: sortEle,
+          index: this.sortableNodes.indexOf(sortEle),
+        });
+        if (nanoGrabbedEv.defaultPrevented) {
+          activateSort(false);
+          return;
+        }
+      }
+      else {
+        // dropped the element
+        activateSort(false);
+        this.nanoDropped.emit({ element: sortEle });
+      }
+      return;
+    }
+    if (!this.keyboardSortActive)
+      return;
+    // Tabbing away from this handle - deactivate
+    if (['Escape', 'Tab'].includes(e.key))
+      activateSort(false);
+    let moveKeys = ['Home', 'End'];
+    if (!this.orientation || this.orientation === 'horizontal')
+      moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];
+    if (!this.orientation || this.orientation === 'vertical')
+      moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];
+    if (!moveKeys.includes(e.key))
+      return;
+    // move the element with the keyboard
+    e.preventDefault();
+    /** Collect all elements that have drag positions.
+     * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */
+    this.sortableNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];
+    this.dropzoneNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||
+        [];
+    const currIdx = this.sortableNodes.indexOf(this.draggedElement);
+    let curDzIdx = -1;
+    if (this.dropzoneNodes.length) {
+      const curDropzone = this.draggedElement.closest(this.dropzoneSelector);
+      curDzIdx = this.dropzoneNodes.indexOf(curDropzone);
+      curDzIdx = curDzIdx > -1 ? curDzIdx : -1;
+    }
+    /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */
+    const prevEle = currIdx - 1 < 0 && curDzIdx > -1
+      ? this.dropzoneNodes[curDzIdx - 1]
+      : this.sortableNodes[currIdx - 1];
+    const nextEle = currIdx + 1 === this.sortableNodes.length && curDzIdx > -1
+      ? this.dropzoneNodes[curDzIdx + 1]
+      : this.sortableNodes[currIdx + 1];
+    if (e.key === 'Home') {
+      this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);
+    }
+    if (e.key === 'End') {
+      this.insertAtTarget(this.draggedElement, this.sortableNodes[this.sortableNodes.length - 1]);
+    }
+    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+      this.insertAtTarget(this.draggedElement, nextEle);
+    }
+    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+      this.insertAtTarget(this.draggedElement, prevEle);
+    }
+    this.finishOrder();
+    this.draggedElement = sortEle;
+    const focus = () => {
+      requestAnimationFrame(() => {
+        typeof foundHandle['setFocus'] === 'function'
+          ? foundHandle.setFocus()
+          : foundHandle.focus();
+      });
+    };
+    // replace focus to handle so we don't 'drop' the element
+    if (this.animationPromise)
+      this.animationPromise.then(() => focus());
+    else
+      focus();
+  }
+  /**
+   * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following
+   * the first actual move event following a touchstart/mousedown */
+  handleTrack(e) {
+    if (this.dragRequestPending || (e.button && e.button !== 1))
+      return;
+    clearTimeout(this.mouseDownTimer);
+    this.mouseDownTimer = window === null || window === void 0 ? void 0 : window.setTimeout(() => {
+      if (!this.trackStart(e))
+        return;
+      this.addAriaMsg(this.grabbedHelperText(this.draggedElement));
+      drag(this.sortableHost, {
+        initialEvent: e,
+        relative: true,
+        onMove: (x, y) => {
+          this.trackMove(x, y);
+        },
+        onStop: () => {
+          this.nanoDropped.emit({ element: this.draggedElement });
+          const didStop = () => {
+            this.addAriaMsg(this.droppedHelperText(this.draggedElement));
+            requestAnimationFrame(() => this.finishOrder());
+          };
+          if (this.animationPromise) {
+            this.animationPromise.then(() => didStop());
+          }
+          else
+            didStop();
+        },
+      });
+    }, 100);
+    document.addEventListener('mouseup', () => clearTimeout(this.mouseDownTimer), { once: true });
+  }
+  /**
+   * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.
+   * OR If a handleSelector is defined, a node matching this selector must be clicked instead
+   * @returns boolean - whether tracking for this event should continue or not
+   */
+  trackStart(e) {
+    const targetElement = e.target;
+    let targetHandle;
+    // If we have a handle set, return now if not being pressed
+    if (this.handleSelector) {
+      targetHandle = targetElement.closest(this.handleSelector);
+      if (!targetHandle)
+        return;
+      targetHandle.classList.add(this.handleDraggedClass);
+    }
+    // Check that we've found the target element via itemSelector
+    const node = targetElement.closest(this.itemSelector);
+    if (!node)
+      return false;
+    this.sortableNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];
+    const nanoGrabbedEv = this.nanoGrabbed.emit({
+      element: node,
+      index: this.sortableNodes.indexOf(node),
+    });
+    if (nanoGrabbedEv.defaultPrevented)
+      return false;
+    // Element found... start everything
+    e.preventDefault();
+    this.updateUserSelectStyle('none');
+    this.dragRequestPending = true;
+    this.draggedElement = node;
+    this.dropzoneNodes =
+      Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||
+        [];
+    this.draggedElementClone = this.createClone(node);
+    this.draggedElementOrigin = node.nextSibling;
+    this.animatedElements = [];
+    this.draggedElement.classList.add(this.placeholderClass);
+    return true;
+  }
+  /** Ends re-ordering */
+  finishOrder() {
+    if (!this.draggedElement)
+      return;
+    const updated = Array.from(this.sortableHost.querySelectorAll(this.itemSelector)).filter((ele) => ele !== this.draggedElementClone);
+    const originalIndex = this.sortableNodes.indexOf(this.draggedElement);
+    const targetIndex = updated.indexOf(this.draggedElement);
+    if (this.handleSelector) {
+      const targetHandle = this.draggedElement.querySelector(this.handleSelector);
+      targetHandle.classList.remove(this.handleDraggedClass);
+    }
+    if (originalIndex !== targetIndex) {
+      const orderChangeEv = this.nanoOrderChange.emit({
+        element: this.draggedElement,
+        originalIndex,
+        targetIndex,
+      });
+      if (orderChangeEv.defaultPrevented) {
+        /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */
+        this.animationPromise = new Promise((resolve) => {
+          setTimeout(() => {
+            this.insertAtTarget(this.draggedElement, updated[originalIndex]);
+            this.reset();
+            this.dragRequestPending = false;
+            resolve();
+          }, 200);
+        });
+        return;
+      }
+      this.addAriaMsg(this.reorderHelperText(this.draggedElement, updated, targetIndex + 1));
+    }
+    this.reset();
+    this.dragRequestPending = false;
+  }
+  /// Component lifecycle ///
+  constructor() {
+    this.dragRequestPending = false;
+    this.sortableNodes = [];
+    this.dropzoneNodes = [];
+    this.animatedElements = [];
+    this.keyboardHandleMap = new Map();
+    this.sortableId = `nano-sortable-${sortableIds++}`;
+    /**
+     * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
+     * the insert point for updated sorting */
+    this.trackMove = (x, y) => {
+      if (!this.draggedElementClone) {
+        return;
+      }
+      if (this.orientation) {
+        x = x * orientationMap[this.orientation].x;
+        y = y * orientationMap[this.orientation].y;
+      }
+      writeTask(() => {
+        Object.assign(this.draggedElementClone.style, {
+          transform: `translate3d(${x}px, ${y}px, 0)`,
+        });
+      });
+      let target = this.hitTest(this.draggedElementClone, this.sortableNodes)[0];
+      let activeDropzone;
+      if (this.dropzoneSelector && this.dropzoneActiveClass) {
+        readTask(() => {
+          activeDropzone = this.draggedElement.closest(this.dropzoneSelector);
+          writeTask(() => {
+            this.dropzoneNodes
+              .filter((dze) => dze !== activeDropzone)
+              .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));
+            activeDropzone.classList.add(this.dropzoneActiveClass);
+          });
+        });
+      }
+      // didn't find a target - let's test to see if we can use a drop-zone instead
+      if (!target && this.dropzoneNodes.length) {
+        target = this.hitTest(this.draggedElementClone, this.dropzoneNodes)[0];
+        if (this.draggedElement.closest(this.dropzoneSelector) === target)
+          return;
+      }
+      if (
+      // if clone intersects with a valid target,
+      target &&
+        // other than its own origin,
+        target !== this.draggedElement &&
+        // and the target isn't currently animating, which causes false hit tests,
+        !this.isAnimating(target)) {
+        this.insertAtTarget(this.draggedElement, target);
+      }
+    };
+    this.itemSelector = 'li';
+    this.handleSelector = undefined;
+    this.dropzoneSelector = undefined;
+    this.helperText = 'Press "Space" or "Enter" to enable element reordering and use the arrow keys to reorder items.' +
+      'Press "Escape" to cancel reordering. Alternatively, use your mouse to drag / reorder.';
+    this.itemDescriptor = (el) => `"${el.textContent.trim()}"`;
+    this.grabbedHelperText = (el) => `${this.itemDescriptor(el)} grabbed`;
+    this.droppedHelperText = (el) => `${this.itemDescriptor(el)} dropped`;
+    this.reorderHelperText = (el, elements, position) => `The list has been reordered, ${this.itemDescriptor(el)} is now item ${position} of ${elements.length}`;
+    this.createKeyboardHandle = (_number, _element) => {
+      const handleTpl = /* html */ `
+      <nano-icon-button
+        slot="end"
+        icon-name="light/arrows"
+        class="nano-sortable__keyboard-handle visually-hidden"
+        label="Re-order this item"
+      ></nano-icon-button>`;
+      const div = globalThis.document.createElement('div');
+      div.innerHTML = handleTpl;
+      const handle = div.children[0];
+      _element.append(handle);
+      return handle;
+    };
+    this.sortableHostElement = undefined;
+    this.animationEnabled = true;
+    this.draggedClass = 'nano-sortable__dragged';
+    this.handleDraggedClass = 'nano-sortable__handle-dragged';
+    this.placeholderClass = 'nano-sortable__placeholder';
+    this.dropzoneActiveClass = '';
+    this.animationTiming = { duration: 200, easing: 'ease-out' };
+    this.orientation = undefined;
+    this.dragResize = false;
+    this.keyboardSortActive = false;
+    this.ariaTextList = [];
+    this.handleTrack = this.handleTrack.bind(this);
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);
+    this.refreshKeyboardHandles = nanoDebounce(this.refreshKeyboardHandles, 500);
+  }
+  connectedCallback() {
+    this.addEventHandlers();
+    this.refreshKeyboardHandles();
+    this.attachMutationObserver();
+    if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {
+      // inject a light-dom / a11y description that we can connect sortable items to
+      this.host.insertAdjacentHTML('beforeend', `<div class="visually-hidden" id="${this.sortableId}">${this.helperText}</div>`);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeEventHandlers();
+    (_a = this.host.querySelector(`#${this.sortableId}`)) === null || _a === void 0 ? void 0 : _a.remove();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = undefined;
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "sortable__live-region", "aria-live": "polite", "aria-relevant": "additions", "aria-atomic": "true", role: "log", part: "announcements" }, this.ariaTextList.map((str) => (h("div", null, str)))), h("slot", null)));
+  }
+  static get is() { return "nano-sortable"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sortable.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sortable.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "itemSelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "item-selector",
+        "reflect": false,
+        "defaultValue": "'li'"
+      },
+      "handleSelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "A css query selector which matches an element *within* the `itemSelector` element\nwhich will act like a drag handle. **Note** For keyboard a11y it's recommended\nto use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "handle-selector",
+        "reflect": false
+      },
+      "dropzoneSelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\nAt that point, you will not be able to drag items back to the original group.\nA `dropzoneSelector` allows you to define a placeholder area where items can always be dropped."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "dropzone-selector",
+        "reflect": false
+      },
+      "helperText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessibility helper text applied to handle controls"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "helper-text",
+        "reflect": false,
+        "defaultValue": "'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n    'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.'"
+      },
+      "itemDescriptor": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(el: Element) => string",
+          "resolved": "(el: Element) => string",
+          "references": {
+            "Element": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "el the element being interacted with"
+            }, {
+              "name": "returns",
+              "text": "a string, describing the element being interacted with"
+            }],
+          "text": "As a sortable element is interacted with, announcements are made to screen readers\n- informing the user what is changing.\nBy default, the text from the element is extracted to describe the interacted with element.\nUse this function to provide a more meaningful, concise item descriptor"
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(el: Element) => `\"${el.textContent.trim()}\"`"
+      },
+      "grabbedHelperText": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(el: Element) => string",
+          "resolved": "(el: Element) => string",
+          "references": {
+            "Element": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "el the element that has been grabbed by the user"
+            }, {
+              "name": "returns",
+              "text": "a string, describing the element being grabbed"
+            }],
+          "text": "Used to generate a screen reader live update, informing the user of the current element being grabbed."
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(el: Element) =>\n    `${this.itemDescriptor(el)} grabbed`"
+      },
+      "droppedHelperText": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(el: Element) => string",
+          "resolved": "(el: Element) => string",
+          "references": {
+            "Element": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "el the element that has been dropped by the user"
+            }, {
+              "name": "returns",
+              "text": "a string, describing the element that has been dropped"
+            }],
+          "text": "Used to generate a screen reader live update, informing the user of the current element being dropped."
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(el: Element) =>\n    `${this.itemDescriptor(el)} dropped`"
+      },
+      "reorderHelperText": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(el: Element, elements: Element[], position: number) => string",
+          "resolved": "(el: Element, elements: Element[], position: number) => string",
+          "references": {
+            "Element": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "el the element that has been reordered by the user"
+            }, {
+              "name": "param",
+              "text": "elements the elements in the sortable list"
+            }, {
+              "name": "param",
+              "text": "position the new position of the dropped element"
+            }, {
+              "name": "returns",
+              "text": "a string, describing the element being dropped"
+            }],
+          "text": "Used to generate a screen reader live update, informing the user when items have been reordered."
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(\n    el: Element,\n    elements: Element[],\n    position: number\n  ) =>\n    `The list has been reordered, ${this.itemDescriptor(\n      el\n    )} is now item ${position} of ${elements.length}`"
+      },
+      "createKeyboardHandle": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(_number: number, _element: Element) => HTMLElement",
+          "resolved": "(_number: number, _element: Element) => HTMLElement",
+          "references": {
+            "Element": {
+              "location": "import",
+              "path": "@stencil/core"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "param",
+              "text": "_number"
+            }, {
+              "name": "param",
+              "text": "_element"
+            }, {
+              "name": "returns",
+              "text": "a function that attaches a keyboard accessible handle control element.\nThe function itself *must* return the handle element."
+            }],
+          "text": "A function that should attach a keyboard accessible control.\nWhen a `handleSelector` is not used - to allow keyboard accessibility -\n`createKeyboardHandle` should render a focusable element.\n\nIf your sortable item is itself focusable,\nyou must use this function to render a control *outside* of the focusable element."
+        },
+        "getter": false,
+        "setter": false,
+        "defaultValue": "(_number: number, _element: Element) => {\n    const handleTpl = /* html */ `\n      <nano-icon-button\n        slot=\"end\"\n        icon-name=\"light/arrows\"\n        class=\"nano-sortable__keyboard-handle visually-hidden\"\n        label=\"Re-order this item\"\n      ></nano-icon-button>`;\n    const div = globalThis.document.createElement('div');\n    div.innerHTML = handleTpl;\n\n    const handle = div.children[0] as HTMLElement;\n    _element.append(handle);\n    return handle;\n  }"
+      },
+      "sortableHostElement": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLElement",
+          "resolved": "HTMLElement",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\nNote that the `sortableHostElement` element css `position` will be set to `relative`"
+        },
+        "getter": false,
+        "setter": false
+      },
+      "animationEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Items being sorted will animate into place"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "animation-enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "draggedClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this class to change how the element looks whilst being sorted"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "dragged-class",
+        "reflect": false,
+        "defaultValue": "'nano-sortable__dragged'"
+      },
+      "handleDraggedClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this class to change how the handle looks whilst being sorted"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "handle-dragged-class",
+        "reflect": false,
+        "defaultValue": "'nano-sortable__handle-dragged'"
+      },
+      "placeholderClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this class to change how the element looks when acting as a placeholder"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "placeholder-class",
+        "reflect": false,
+        "defaultValue": "'nano-sortable__placeholder'"
+      },
+      "dropzoneActiveClass": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "dropzone-active-class",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "animationTiming": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The css animation timing applied when `animationEnabled` is `true`"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "animation-timing",
+        "reflect": false,
+        "defaultValue": "{ duration: 200, easing: 'ease-out' }"
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'horizontal' | 'vertical'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The axis to lock dragging elements to. `undefined` means any axis"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "orientation",
+        "reflect": false
+      },
+      "dragResize": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Dragged items by default, will take whatever default css is applied in situ.\nWhen sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\nApply `dragResize` to read & recreate the dragged items current dimensions when dragged."
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "drag-resize",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "keyboardSortActive": {},
+      "ariaTextList": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "nanoOrderChange",
+        "name": "nanoOrderChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when an the order changes. Use this to update any underlying data model.\n`event.preventDefault()` to prevent the element being moved; will revert to original position."
+        },
+        "complexType": {
+          "original": "{\n    element: HTMLElement;\n    originalIndex: number;\n    targetIndex: number;\n  }",
+          "resolved": "{ element: HTMLElement; originalIndex: number; targetIndex: number; }",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "nanoGrabbed",
+        "name": "nanoGrabbed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n`event.preventDefault()` to prevent the element being picked-up."
+        },
+        "complexType": {
+          "original": "{ element: HTMLElement; index: number }",
+          "resolved": "{ element: HTMLElement; index: number; }",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "nanoDropped",
+        "name": "nanoDropped",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Fired when a sortable element is dropped after having been picked up."
+        },
+        "complexType": {
+          "original": "{ element: HTMLElement }",
+          "resolved": "{ element: HTMLElement; }",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "refreshKeyboardHandles": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "If sortable elements change dynamically, use this method to add handle controls to new elements",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "itemSelector",
+        "methodName": "handleItemSelectorChange"
+      }, {
+        "propName": "handleSelector",
+        "methodName": "handleHandleSelectorChange"
+      }, {
+        "propName": "createKeyboardHandle",
+        "methodName": "handleCreateKeyboardHandleChange"
+      }, {
+        "propName": "sortableHostElement",
+        "methodName": "handleSortableHostElement"
+      }];
+  }
+}
+//# sourceMappingURL=sortable.js.map