@esri/calcite-components 1.0.0-beta.93 → 1.0.0-beta.94

package/dist/esm/calcite-value-list_2.entry.js

@@ -1,428 +1,428 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.93
+ * v1.0.0-beta.94
  */
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-ebacd58f.js';
-import { S as Sortable } from './sortable.esm-a7eceaf1.js';
-import { g as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as getItemData, k as keyDownHandler, c as moveItemIndex, i as initialize, e as initializeObserver, f as cleanUpObserver, j as calciteListFocusOutHandler, r as removeItem, l as calciteListItemChangeHandler, n as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List, I as ICON_TYPES$1, C as CSS$1, S as SLOTS$1 } from './resources-2468fbf7.js';
-import { c as createObserver } from './observers-78730da1.js';
-import { u as updateHostInteraction } from './interactive-ee876f5b.js';
-import { g as guid } from './guid-979aa261.js';
-import { g as getSlotted } from './dom-a762d6de.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-9def1428.js';
-import './array-f5e4a1f6.js';
-import './debounce-d7adb5b5.js';
-import './resources-3f24d3fc.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-53f14b87.js';
+import { S as Sortable } from './sortable.esm-4941a440.js';
+import { g as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as getItemData, k as keyDownHandler, c as moveItemIndex, i as initialize, e as initializeObserver, f as cleanUpObserver, j as calciteListFocusOutHandler, r as removeItem, l as calciteListItemChangeHandler, n as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List, I as ICON_TYPES$1, C as CSS$1, S as SLOTS$1 } from './resources-4b489775.js';
+import { c as createObserver } from './observers-0433c649.js';
+import { u as updateHostInteraction } from './interactive-9ecb4bdb.js';
+import { g as guid } from './guid-673b0460.js';
+import { g as getSlotted } from './dom-8d6885a3.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-d5001a49.js';
+import './array-0910abb3.js';
+import './debounce-2f55a96e.js';
+import './resources-54fe885f.js';
 
-const CSS = {
-  container: "container",
-  handle: "handle"
-};
-var ICON_TYPES;
-(function (ICON_TYPES) {
-  ICON_TYPES["grip"] = "grip";
+const CSS = {
+  container: "container",
+  handle: "handle"
+};
+var ICON_TYPES;
+(function (ICON_TYPES) {
+  ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 
-function getScreenReaderText(item, status, valueList) {
-  const { items, intlDragHandleIdle, intlDragHandleActive, intlDragHandleChange, intlDragHandleCommit } = valueList;
-  const total = items.length;
-  const position = getItemIndex(valueList, item) + 1;
-  if (status === "idle") {
-    const idleText = intlDragHandleIdle
-      ? replacePlaceholders(intlDragHandleIdle, item.label, position, total)
-      : `${item.label}, press space and use arrow keys to reorder content. Current position ${position} of ${total}.`;
-    return idleText;
-  }
-  else if (status === "active") {
-    const activeText = intlDragHandleActive
-      ? replacePlaceholders(intlDragHandleActive, item.label, position, total)
-      : `Reordering ${item.label}, current position ${position} of ${total}.`;
-    return activeText;
-  }
-  else if (status === "change") {
-    const changeText = intlDragHandleChange
-      ? replacePlaceholders(intlDragHandleChange, item.label, position, total)
-      : `${item.label}, new position ${position} of ${total}. Press space to confirm.`;
-    return changeText;
-  }
-  else {
-    const commitText = intlDragHandleCommit
-      ? replacePlaceholders(intlDragHandleCommit, item.label, position, total)
-      : `${item.label}, current position ${position} of ${total}.`;
-    return commitText;
-  }
-}
-function getHandleAndItemElement(event) {
-  const handle = event
-    .composedPath()
-    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
-  const item = event
-    .composedPath()
-    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-  return { handle, item };
-}
-function replacePlaceholders(text, label, position, total) {
-  const replacePosition = text.replace("${position}", position.toString());
-  const replaceLabel = replacePosition.replace("${item.label}", label);
-  return replaceLabel.replace("${total}", total.toString());
+function getScreenReaderText(item, status, valueList) {
+  const { items, intlDragHandleIdle, intlDragHandleActive, intlDragHandleChange, intlDragHandleCommit } = valueList;
+  const total = items.length;
+  const position = getItemIndex(valueList, item) + 1;
+  if (status === "idle") {
+    const idleText = intlDragHandleIdle
+      ? replacePlaceholders(intlDragHandleIdle, item.label, position, total)
+      : `${item.label}, press space and use arrow keys to reorder content. Current position ${position} of ${total}.`;
+    return idleText;
+  }
+  else if (status === "active") {
+    const activeText = intlDragHandleActive
+      ? replacePlaceholders(intlDragHandleActive, item.label, position, total)
+      : `Reordering ${item.label}, current position ${position} of ${total}.`;
+    return activeText;
+  }
+  else if (status === "change") {
+    const changeText = intlDragHandleChange
+      ? replacePlaceholders(intlDragHandleChange, item.label, position, total)
+      : `${item.label}, new position ${position} of ${total}. Press space to confirm.`;
+    return changeText;
+  }
+  else {
+    const commitText = intlDragHandleCommit
+      ? replacePlaceholders(intlDragHandleCommit, item.label, position, total)
+      : `${item.label}, current position ${position} of ${total}.`;
+    return commitText;
+  }
+}
+function getHandleAndItemElement(event) {
+  const handle = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+  const item = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+  return { handle, item };
+}
+function replacePlaceholders(text, label, position, total) {
+  const replacePosition = text.replace("${position}", position.toString());
+  const replaceLabel = replacePosition.replace("${item.label}", label);
+  return replaceLabel.replace("${total}", total.toString());
 }
 
 const valueListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}calcite-value-list-item:last-of-type{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header{-webkit-margin-after:0.25rem;margin-block-end:0.25rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;background-color:var(--calcite-ui-foreground-1);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([filter-enabled]) header.sticky-pos{position:-webkit-sticky;position:sticky;inset-block-start:0px;z-index:300}calcite-filter{-webkit-margin-after:1px;margin-block-end:1px}";
 
-const ValueList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListChange = createEvent(this, "calciteListChange", 6);
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When true, `calcite-value-list-item`s are sortable via a draggable button.
-     */
-    this.dragEnabled = false;
-    /**
-     * When true, an input appears at the top of the component that can be used by end users to filter list items.
-     */
-    this.filterEnabled = false;
-    /**
-     * When true, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * Similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple `calcite-value-list-item`s at a time.
-     * When false, only a single `calcite-value-list-item` can be selected at a time,
-     * and a new selection will deselect previous selections.
-     */
-    this.multiple = false;
-    /**
-     * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
-     */
-    this.selectionFollowsFocus = false;
-    // --------------------------------------------------------------------------
-    //
-    //  Private Properties
-    //
-    // --------------------------------------------------------------------------
-    this.selectedValues = new Map();
-    this.dataForFilter = [];
-    this.lastSelectedItem = null;
-    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
-    this.setFilterEl = (el) => {
-      this.filterEl = el;
-    };
-    this.deselectRemovedItems = deselectRemovedItems.bind(this);
-    this.deselectSiblingItems = deselectSiblingItems.bind(this);
-    this.selectSiblings = selectSiblings.bind(this);
-    this.handleFilter = handleFilter.bind(this);
-    this.getItemData = getItemData.bind(this);
-    this.keyDownHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      const { handle, item } = getHandleAndItemElement(event);
-      if (handle && !item.handleActivated && event.key === " ") {
-        this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
-      }
-      if (!handle || !item.handleActivated) {
-        keyDownHandler.call(this, event);
-        return;
-      }
-      const { items } = this;
-      if (event.key === " ") {
-        this.updateScreenReaderText(getScreenReaderText(item, "active", this));
-      }
-      if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
-        return;
-      }
-      event.preventDefault();
-      const { el } = this;
-      const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
-      if (nextIndex === items.length - 1) {
-        el.appendChild(item);
-      }
-      else {
-        const itemAtNextIndex = el.children[nextIndex];
-        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
-          ? itemAtNextIndex.nextElementSibling
-          : itemAtNextIndex;
-        el.insertBefore(item, insertionReferenceItem);
-      }
-      this.items = this.getItems();
-      this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
-      item.handleActivated = true;
-      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
-    };
-    this.storeAssistiveEl = (el) => {
-      this.assistiveTextEl = el;
-    };
-    this.handleFocusIn = (event) => {
-      const { handle, item } = getHandleAndItemElement(event);
-      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
-        this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
-      }
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    initialize.call(this);
-    initializeObserver.call(this);
-  }
-  componentDidLoad() {
-    this.setUpDragAndDrop();
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  disconnectedCallback() {
-    cleanUpObserver.call(this);
-    this.cleanUpDragAndDrop();
-  }
-  calciteListFocusOutHandler(event) {
-    calciteListFocusOutHandler.call(this, event);
-  }
-  calciteListItemRemoveHandler(event) {
-    removeItem.call(this, event);
-  }
-  calciteListItemChangeHandler(event) {
-    calciteListItemChangeHandler.call(this, event);
-  }
-  calciteInternalListItemPropsChangeHandler(event) {
-    event.stopPropagation();
-    this.setUpFilter();
-  }
-  calciteInternalListItemValueChangeHandler(event) {
-    calciteInternalListItemValueChangeHandler.call(this, event);
-    event.stopPropagation();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  getItems() {
-    return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-  }
-  setUpItems() {
-    setUpItems.call(this, "calcite-value-list-item");
-  }
-  setUpFilter() {
-    if (this.filterEnabled) {
-      this.dataForFilter = this.getItemData();
-    }
-  }
-  setUpDragAndDrop() {
-    this.cleanUpDragAndDrop();
-    if (!this.dragEnabled) {
-      return;
-    }
-    this.sortable = Sortable.create(this.el, {
-      dataIdAttr: "id",
-      handle: `.${CSS.handle}`,
-      draggable: "calcite-value-list-item",
-      group: this.group,
-      onSort: () => {
-        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
-        const values = this.items.map((item) => item.value);
-        this.calciteListOrderChange.emit(values);
-      }
-    });
-  }
-  cleanUpDragAndDrop() {
-    var _a;
-    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.sortable = null;
-  }
-  handleBlur() {
-    if (this.dragEnabled) {
-      this.updateScreenReaderText("");
-    }
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Returns the currently selected items */
-  async getSelectedItems() {
-    return this.selectedValues;
-  }
-  /**
-   * Sets focus on the component.
-   *
-   * @param focusId
-   */
-  async setFocus(focusId) {
-    return setFocus.call(this, focusId);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  getIconType() {
-    let type = null;
-    if (this.dragEnabled) {
-      type = ICON_TYPES.grip;
-    }
-    return type;
-  }
-  updateScreenReaderText(text) {
-    this.assistiveTextEl.textContent = text;
-  }
-  updateHandleAriaLabel(handleElement, text) {
-    handleElement.ariaLabel = text;
-  }
-  render() {
-    return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
-  }
-  get el() { return getElement(this); }
-};
+const ValueList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /**
+     * When true, `calcite-value-list-item`s are sortable via a draggable button.
+     */
+    this.dragEnabled = false;
+    /**
+     * When true, an input appears at the top of the component that can be used by end users to filter list items.
+     */
+    this.filterEnabled = false;
+    /**
+     * When true, a busy indicator is displayed.
+     */
+    this.loading = false;
+    /**
+     * Similar to standard radio buttons and checkboxes.
+     * When true, a user can select multiple `calcite-value-list-item`s at a time.
+     * When false, only a single `calcite-value-list-item` can be selected at a time,
+     * and a new selection will deselect previous selections.
+     */
+    this.multiple = false;
+    /**
+     * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
+     */
+    this.selectionFollowsFocus = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.selectedValues = new Map();
+    this.dataForFilter = [];
+    this.lastSelectedItem = null;
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+    };
+    this.deselectRemovedItems = deselectRemovedItems.bind(this);
+    this.deselectSiblingItems = deselectSiblingItems.bind(this);
+    this.selectSiblings = selectSiblings.bind(this);
+    this.handleFilter = handleFilter.bind(this);
+    this.getItemData = getItemData.bind(this);
+    this.keyDownHandler = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      const { handle, item } = getHandleAndItemElement(event);
+      if (handle && !item.handleActivated && event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
+      }
+      if (!handle || !item.handleActivated) {
+        keyDownHandler.call(this, event);
+        return;
+      }
+      const { items } = this;
+      if (event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "active", this));
+      }
+      if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
+        return;
+      }
+      event.preventDefault();
+      const { el } = this;
+      const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
+      if (nextIndex === items.length - 1) {
+        el.appendChild(item);
+      }
+      else {
+        const itemAtNextIndex = el.children[nextIndex];
+        const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+          ? itemAtNextIndex.nextElementSibling
+          : itemAtNextIndex;
+        el.insertBefore(item, insertionReferenceItem);
+      }
+      this.items = this.getItems();
+      this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
+      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
+      item.handleActivated = true;
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
+    };
+    this.storeAssistiveEl = (el) => {
+      this.assistiveTextEl = el;
+    };
+    this.handleFocusIn = (event) => {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+        this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    initialize.call(this);
+    initializeObserver.call(this);
+  }
+  componentDidLoad() {
+    this.setUpDragAndDrop();
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    cleanUpObserver.call(this);
+    this.cleanUpDragAndDrop();
+  }
+  calciteListFocusOutHandler(event) {
+    calciteListFocusOutHandler.call(this, event);
+  }
+  calciteListItemRemoveHandler(event) {
+    removeItem.call(this, event);
+  }
+  calciteListItemChangeHandler(event) {
+    calciteListItemChangeHandler.call(this, event);
+  }
+  calciteInternalListItemPropsChangeHandler(event) {
+    event.stopPropagation();
+    this.setUpFilter();
+  }
+  calciteInternalListItemValueChangeHandler(event) {
+    calciteInternalListItemValueChangeHandler.call(this, event);
+    event.stopPropagation();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  getItems() {
+    return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+  }
+  setUpItems() {
+    setUpItems.call(this, "calcite-value-list-item");
+  }
+  setUpFilter() {
+    if (this.filterEnabled) {
+      this.dataForFilter = this.getItemData();
+    }
+  }
+  setUpDragAndDrop() {
+    this.cleanUpDragAndDrop();
+    if (!this.dragEnabled) {
+      return;
+    }
+    this.sortable = Sortable.create(this.el, {
+      dataIdAttr: "id",
+      handle: `.${CSS.handle}`,
+      draggable: "calcite-value-list-item",
+      group: this.group,
+      onSort: () => {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+      }
+    });
+  }
+  cleanUpDragAndDrop() {
+    var _a;
+    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.sortable = null;
+  }
+  handleBlur() {
+    if (this.dragEnabled) {
+      this.updateScreenReaderText("");
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
+  async getSelectedItems() {
+    return this.selectedValues;
+  }
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
+  async setFocus(focusId) {
+    return setFocus.call(this, focusId);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  getIconType() {
+    let type = null;
+    if (this.dragEnabled) {
+      type = ICON_TYPES.grip;
+    }
+    return type;
+  }
+  updateScreenReaderText(text) {
+    this.assistiveTextEl.textContent = text;
+  }
+  updateHandleAriaLabel(handleElement, text) {
+    handleElement.ariaLabel = text;
+  }
+  render() {
+    return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+  }
+  get el() { return getElement(this); }
+};
 ValueList.style = valueListCss;
 
-const ICONS = {
-  drag: "drag"
-};
-const SLOTS = {
-  actionsEnd: "actions-end",
-  actionsStart: "actions-start"
+const ICONS = {
+  drag: "drag"
+};
+const SLOTS = {
+  actionsEnd: "actions-end",
+  actionsStart: "actions-start"
 };
 
 const valueListItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{-webkit-margin-after:1px;margin-block-end:1px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2);--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transition:background-color var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:background-color var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing), -webkit-box-shadow var(--calcite-animation-timing)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}calcite-pick-list-item{position:relative;margin:0px;-ms-flex-positive:1;flex-grow:1;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([active]),:host([selected]){--tw-shadow:0 0 0 1px var(--calcite-ui-brand);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.handle{display:-ms-flexbox;display:flex;cursor:move;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-style:none;background-color:transparent;padding-block:0px;padding-inline:0.25rem;color:var(--calcite-ui-text-1);color:var(--calcite-ui-border-1);outline-color:transparent}.handle:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.handle:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.handle--activated{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}.handle calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
 
-const ValueListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
-    /**
-     * When true, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * @internal
-     */
-    this.disableDeselect = false;
-    /**
-     * When true, prevents the content of the component from user interaction.
-     */
-    this.nonInteractive = false;
-    /**
-     * @internal
-     */
-    this.handleActivated = false;
-    /**
-     * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
-     *
-     * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
-     */
-    this.icon = null;
-    /**
-     * When true, adds an action to remove the component.
-     */
-    this.removable = false;
-    /**
-     * When true, the component is selected.
-     */
-    this.selected = false;
-    this.pickListItem = null;
-    this.guid = `calcite-value-list-item-${guid()}`;
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.getPickListRef = (el) => (this.pickListItem = el);
-    this.handleKeyDown = (event) => {
-      if (event.key === " ") {
-        this.handleActivated = !this.handleActivated;
-      }
-    };
-    this.handleBlur = () => {
-      this.handleActivated = false;
-    };
-    this.handleSelectChange = (event) => {
-      this.selected = event.detail.selected;
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  // --------------------------------------------------------------------------
-  connectedCallback() {
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    disconnectConditionalSlotComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /**
-   * Toggle the selection state. By default this won't trigger an event.
-   * The first argument allows the value to be coerced, rather than swapping values.
-   *
-   * @param coerce
-   */
-  async toggleSelected(coerce) {
-    this.pickListItem.toggleSelected(coerce);
-  }
-  /** Set focus on the component. */
-  async setFocus() {
-    var _a;
-    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
-  }
-  calciteListItemChangeHandler(event) {
-    // adjust item payload from wrapped item before bubbling
-    event.detail.item = this.el;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderActionsEnd() {
-    const { el } = this;
-    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
-    return hasActionsEnd ? (h("slot", { name: SLOTS.actionsEnd, slot: SLOTS$1.actionsEnd })) : null;
-  }
-  renderActionsStart() {
-    const { el } = this;
-    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
-    return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: SLOTS$1.actionsStart })) : null;
-  }
-  renderHandle() {
-    const { icon } = this;
-    if (icon === ICON_TYPES$1.grip) {
-      return (h("span", { class: {
-          [CSS$1.handle]: true,
-          [CSS$1.handleActivated]: this.handleActivated
-        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
-    }
-  }
-  render() {
-    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, disableDeselect: this.disableDeselect, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
-  }
-  get el() { return getElement(this); }
-};
+const ValueListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /**
+     * @internal
+     */
+    this.disableDeselect = false;
+    /**
+     * When true, prevents the content of the component from user interaction.
+     */
+    this.nonInteractive = false;
+    /**
+     * @internal
+     */
+    this.handleActivated = false;
+    /**
+     * Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null.
+     *
+     * @see [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)
+     */
+    this.icon = null;
+    /**
+     * When true, adds an action to remove the component.
+     */
+    this.removable = false;
+    /**
+     * When true, the component is selected.
+     */
+    this.selected = false;
+    this.pickListItem = null;
+    this.guid = `calcite-value-list-item-${guid()}`;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getPickListRef = (el) => (this.pickListItem = el);
+    this.handleKeyDown = (event) => {
+      if (event.key === " ") {
+        this.handleActivated = !this.handleActivated;
+      }
+    };
+    this.handleBlur = () => {
+      this.handleActivated = false;
+    };
+    this.handleSelectChange = (event) => {
+      this.selected = event.detail.selected;
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /**
+   * Toggle the selection state. By default this won't trigger an event.
+   * The first argument allows the value to be coerced, rather than swapping values.
+   *
+   * @param coerce
+   */
+  async toggleSelected(coerce) {
+    this.pickListItem.toggleSelected(coerce);
+  }
+  /** Set focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  calciteListItemChangeHandler(event) {
+    // adjust item payload from wrapped item before bubbling
+    event.detail.item = this.el;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsEnd() {
+    const { el } = this;
+    const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
+    return hasActionsEnd ? (h("slot", { name: SLOTS.actionsEnd, slot: SLOTS$1.actionsEnd })) : null;
+  }
+  renderActionsStart() {
+    const { el } = this;
+    const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
+    return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: SLOTS$1.actionsStart })) : null;
+  }
+  renderHandle() {
+    const { icon } = this;
+    if (icon === ICON_TYPES$1.grip) {
+      return (h("span", { class: {
+          [CSS$1.handle]: true,
+          [CSS$1.handleActivated]: this.handleActivated
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" }, h("calcite-icon", { icon: ICONS.drag, scale: "s" })));
+    }
+  }
+  render() {
+    return (h(Host, { id: this.el.id || this.guid }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, disableDeselect: this.disableDeselect, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, ref: this.getPickListRef, removable: this.removable, selected: this.selected, value: this.value }, this.renderActionsStart(), this.renderActionsEnd())));
+  }
+  get el() { return getElement(this); }
+};
 ValueListItem.style = valueListItemCss;
 
 export { ValueList as calcite_value_list, ValueListItem as calcite_value_list_item };