@esri/solutions-components 0.6.6 → 0.6.7

package/dist/components/list.js

@@ -4,14 +4,14 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
+import { k as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
-import { u as updateListItemChildren, g as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
+import { u as updateListItemChildren, a as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
 import { d as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent.js';
-import { S as SLOTS$1, d as defineCustomElement$1 } from './stack.js';
+import { a as SLOTS$1, d as defineCustomElement$1 } from './stack.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
-import { d as defineCustomElement$7 } from './filter2.js';
+import { d as defineCustomElement$7 } from './filter.js';
 import { d as defineCustomElement$6 } from './icon.js';
 import { d as defineCustomElement$5 } from './input.js';
 import { d as defineCustomElement$4 } from './loader.js';
@@ -41,511 +41,512 @@ const SLOTS = {
 
 const listCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.container{position:relative}.table-container{position:relative;z-index:var(--calcite-app-z-index);box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item:last-child){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-app-z-index-sticky);background-color:var(--calcite-ui-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
 
-const listItemSelector = "calcite-list-item";
-const listItemSelectorDirect = `:scope > calcite-list-item`;
-const parentSelector = "calcite-list-item-group, calcite-list-item";
-const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.calciteListChange = createEvent(this, "calciteListChange", 6);
-    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
-    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
-    this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
-    this.dragSelector = "calcite-list-item";
-    this.enabledListItems = [];
-    this.handleSelector = "calcite-handle";
-    this.listItems = [];
-    this.mutationObserver = createObserver("mutation", () => this.updateListItems());
-    this.handleDefaultSlotChange = (event) => {
-      updateListItemChildren(getListItemChildren(event.target));
-      if (this.parentListEl) {
-        this.calciteInternalListDefaultSlotChange.emit();
-      }
-    };
-    this.handleFilterActionsStartSlotChange = (event) => {
-      this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
-    };
-    this.handleFilterActionsEndSlotChange = (event) => {
-      this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
-    };
-    this.setActiveListItem = () => {
-      const { enabledListItems } = this;
-      if (!enabledListItems.some((item) => item.active)) {
-        if (enabledListItems[0]) {
-          enabledListItems[0].active = true;
-        }
-      }
-    };
-    this.updateSelectedItems = (emit = false) => {
-      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
-      if (emit) {
-        this.calciteListChange.emit();
-      }
-    };
-    this.updateFilteredItems = (emit = false) => {
-      const { listItems, filteredData, filterText } = this;
-      const values = filteredData.map((item) => item.value);
-      const lastDescendantItems = listItems === null || listItems === void 0 ? void 0 : listItems.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
-      const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
-      const visibleParents = new WeakSet();
-      lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
-      this.filteredItems = filteredItems;
-      if (emit) {
-        this.calciteListFilter.emit();
-      }
-    };
-    this.setFilterEl = (el) => {
-      this.filterEl = el;
-      this.performFilter();
-    };
-    this.handleFilterChange = (event) => {
-      event.stopPropagation();
-      const { value } = event.currentTarget;
-      this.filterText = value;
-      this.updateFilteredData(true);
-    };
-    this.getItemData = () => {
-      return this.listItems.map((item) => ({
-        label: item.label,
-        description: item.description,
-        metadata: item.metadata,
-        value: item.value,
-      }));
-    };
-    this.updateListItems = debounce((emit = false) => {
-      const { selectionAppearance, selectionMode, dragEnabled } = this;
-      if (!!this.parentListEl) {
-        const items = this.queryListItems(true);
-        items.forEach((item) => {
-          item.selectionAppearance = selectionAppearance;
-          item.selectionMode = selectionMode;
-          item.dragHandle = dragEnabled;
-        });
-        this.setUpSorting();
-        return;
-      }
-      const items = this.queryListItems();
-      items.forEach((item) => {
-        item.selectionAppearance = selectionAppearance;
-        item.selectionMode = selectionMode;
-        item.dragHandle = dragEnabled;
-      });
-      this.listItems = items;
-      if (this.filterEnabled) {
-        this.dataForFilter = this.getItemData();
-        if (this.filterEl) {
-          this.filterEl.items = this.dataForFilter;
-        }
-      }
-      this.updateFilteredItems(emit);
-      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
-      this.setActiveListItem();
-      this.updateSelectedItems(emit);
-      this.setUpSorting();
-    }, debounceTimeout);
-    this.queryListItems = (direct = false) => {
-      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
-    };
-    this.focusRow = (focusEl) => {
-      const { enabledListItems } = this;
-      if (!focusEl) {
-        return;
-      }
-      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
-      focusEl.setFocus();
-    };
-    this.isNavigable = (listItem) => {
-      var _a;
-      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
-      if (!parentListItemEl) {
-        return true;
-      }
-      return parentListItemEl.open && this.isNavigable(parentListItemEl);
-    };
-    this.handleListKeydown = (event) => {
-      var _a;
-      if (event.defaultPrevented || !!this.parentListEl) {
-        return;
-      }
-      const { key } = event;
-      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
-      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
-      if (key === "ArrowDown") {
-        event.preventDefault();
-        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
-        if (filteredItems[nextIndex]) {
-          this.focusRow(filteredItems[nextIndex]);
-        }
-      }
-      else if (key === "ArrowUp") {
-        event.preventDefault();
-        if (currentIndex === 0 && this.filterEnabled) {
-          (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-          return;
-        }
-        const prevIndex = currentIndex - 1;
-        if (filteredItems[prevIndex]) {
-          this.focusRow(filteredItems[prevIndex]);
-        }
-      }
-      else if (key === "Home") {
-        event.preventDefault();
-        const homeItem = filteredItems[0];
-        if (homeItem) {
-          this.focusRow(homeItem);
-        }
-      }
-      else if (key === "End") {
-        event.preventDefault();
-        const endItem = filteredItems[filteredItems.length - 1];
-        if (endItem) {
-          this.focusRow(endItem);
-        }
-      }
-    };
-    this.disabled = false;
-    this.canPull = undefined;
-    this.canPut = undefined;
-    this.dragEnabled = false;
-    this.group = undefined;
-    this.filterEnabled = false;
-    this.filteredItems = [];
-    this.filteredData = [];
-    this.filterPlaceholder = undefined;
-    this.filterText = undefined;
-    this.label = undefined;
-    this.loading = false;
-    this.openable = false;
-    this.selectedItems = [];
-    this.selectionMode = "none";
-    this.selectionAppearance = "icon";
-    this.assistiveText = undefined;
-    this.dataForFilter = [];
-    this.hasFilterActionsEnd = false;
-    this.hasFilterActionsStart = false;
-  }
-  async handleFilterTextChange() {
-    this.performFilter();
-  }
-  handleListItemChange() {
-    this.updateListItems();
-  }
-  handleCalciteInternalFocusPreviousItem(event) {
-    if (this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const { enabledListItems } = this;
-    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
-    const prevIndex = currentIndex - 1;
-    if (enabledListItems[prevIndex]) {
-      this.focusRow(enabledListItems[prevIndex]);
-    }
-  }
-  handleCalciteInternalListItemActive(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const target = event.target;
-    const { listItems } = this;
-    listItems.forEach((listItem) => {
-      listItem.active = listItem === target;
-    });
-  }
-  handleCalciteListItemSelect() {
-    if (!!this.parentListEl) {
-      return;
-    }
-    this.updateSelectedItems(true);
-  }
-  handleCalciteInternalHandleChange(event) {
-    this.assistiveText = event.detail.message;
-    event.stopPropagation();
-  }
-  handleCalciteHandleNudge(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    this.handleNudgeEvent(event);
-  }
-  handleCalciteInternalListItemSelect(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    const target = event.target;
-    const { listItems, selectionMode } = this;
-    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
-      listItems.forEach((listItem) => (listItem.selected = listItem === target));
-    }
-    this.updateSelectedItems();
-  }
-  handleCalciteInternalListItemChange(event) {
-    if (!!this.parentListEl) {
-      return;
-    }
-    event.stopPropagation();
-    this.updateListItems(true);
-  }
-  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
-    event.stopPropagation();
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    this.connectObserver();
-    this.updateListItems();
-    this.setUpSorting();
-    connectInteractive(this);
-    this.parentListEl = this.el.parentElement.closest("calcite-list");
-  }
-  disconnectedCallback() {
-    this.disconnectObserver();
-    disconnectSortableComponent(this);
-    disconnectInteractive(this);
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  /** Sets focus on the component's first focusable element. */
-  async setFocus() {
-    var _a, _b;
-    await componentFocusable(this);
-    if (this.filterEnabled) {
-      return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
-    }
-    return (_b = this.enabledListItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  render() {
-    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  connectObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-  }
-  disconnectObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  setUpSorting() {
-    const { dragEnabled } = this;
-    if (!dragEnabled) {
-      return;
-    }
-    connectSortableComponent(this);
-  }
-  onDragStart() {
-    this.disconnectObserver();
-  }
-  onDragEnd() {
-    this.connectObserver();
-  }
-  onDragSort(event) {
-    this.updateListItems();
-    const { from, item, to } = event;
-    this.calciteListOrderChange.emit({
-      dragEl: item,
-      fromEl: from,
-      toEl: to,
-    });
-  }
-  filterElements({ el, filteredItems, visibleParents, }) {
-    const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
-    el.hidden = hidden;
-    const closestParent = el.parentElement.closest(parentSelector);
-    if (!closestParent) {
-      return;
-    }
-    if (!hidden) {
-      visibleParents.add(closestParent);
-    }
-    this.filterElements({
-      el: closestParent,
-      filteredItems,
-      visibleParents,
-    });
-  }
-  updateFilteredData(emit = false) {
-    const { filterEl } = this;
-    if (!filterEl) {
-      return;
-    }
-    if (filterEl.filteredItems) {
-      this.filteredData = filterEl.filteredItems;
-    }
-    this.updateListItems(emit);
-  }
-  async performFilter() {
-    const { filterEl, filterText } = this;
-    if (!filterEl) {
-      return;
-    }
-    filterEl.value = filterText;
-    await filterEl.filter(filterText);
-    this.updateFilteredData();
-  }
-  handleNudgeEvent(event) {
-    const { direction } = event.detail;
-    const composedPath = event.composedPath();
-    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
-    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
-    const parentEl = sortItem === null || sortItem === void 0 ? void 0 : sortItem.parentElement;
-    if (!parentEl) {
-      return;
-    }
-    const { enabledListItems } = this;
-    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
-    const lastIndex = sameParentItems.length - 1;
-    const startingIndex = sameParentItems.indexOf(sortItem);
-    let appendInstead = false;
-    let buddyIndex;
-    if (direction === "up") {
-      if (startingIndex === 0) {
-        appendInstead = true;
-      }
-      else {
-        buddyIndex = startingIndex - 1;
-      }
-    }
-    else {
-      if (startingIndex === lastIndex) {
-        buddyIndex = 0;
-      }
-      else if (startingIndex === lastIndex - 1) {
-        appendInstead = true;
-      }
-      else {
-        buddyIndex = startingIndex + 2;
-      }
-    }
-    this.disconnectObserver();
-    if (appendInstead) {
-      parentEl.appendChild(sortItem);
-    }
-    else {
-      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
-    }
-    this.updateListItems();
-    this.connectObserver();
-    this.calciteListOrderChange.emit({
-      dragEl: sortItem,
-      fromEl: null,
-      toEl: null,
-    });
-    handle.setFocus().then(() => {
-      handle.activated = true;
-    });
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "filterText": ["handleFilterTextChange"],
-    "filterEnabled": ["handleListItemChange"],
-    "group": ["handleListItemChange"],
-    "dragEnabled": ["handleListItemChange"],
-    "selectionMode": ["handleListItemChange"],
-    "selectionAppearance": ["handleListItemChange"]
-  }; }
-  static get style() { return listCss; }
-}, [1, "calcite-list", {
-    "disabled": [516],
-    "canPull": [16],
-    "canPut": [16],
-    "dragEnabled": [516, "drag-enabled"],
-    "group": [513],
-    "filterEnabled": [516, "filter-enabled"],
-    "filteredItems": [1040],
-    "filteredData": [1040],
-    "filterPlaceholder": [513, "filter-placeholder"],
-    "filterText": [1537, "filter-text"],
-    "label": [1],
-    "loading": [516],
-    "openable": [4],
-    "selectedItems": [1040],
-    "selectionMode": [513, "selection-mode"],
-    "selectionAppearance": [513, "selection-appearance"],
-    "assistiveText": [32],
-    "dataForFilter": [32],
-    "hasFilterActionsEnd": [32],
-    "hasFilterActionsStart": [32],
-    "setFocus": [64]
-  }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalHandleChange", "handleCalciteInternalHandleChange"], [0, "calciteHandleNudge", "handleCalciteHandleNudge"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteInternalListItemChange", "handleCalciteInternalListItemChange"], [0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListItemGroupDefaultSlotChange"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim", "calcite-stack"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-list":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, List);
-      }
-      break;
-    case "calcite-filter":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "calcite-input":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "calcite-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "calcite-progress":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "calcite-scrim":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "calcite-stack":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const listItemSelector = "calcite-list-item";
+const listItemSelectorDirect = `:scope > calcite-list-item`;
+const parentSelector = "calcite-list-item-group, calcite-list-item";
+const List = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteListChange = createEvent(this, "calciteListChange", 6);
+    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
+    this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+    this.calciteInternalListDefaultSlotChange = createEvent(this, "calciteInternalListDefaultSlotChange", 6);
+    this.dragSelector = "calcite-list-item";
+    this.enabledListItems = [];
+    this.handleSelector = "calcite-handle";
+    this.listItems = [];
+    this.mutationObserver = createObserver("mutation", () => this.updateListItems());
+    this.handleDefaultSlotChange = (event) => {
+      updateListItemChildren(getListItemChildren(event.target));
+      if (this.parentListEl) {
+        this.calciteInternalListDefaultSlotChange.emit();
+      }
+    };
+    this.handleFilterActionsStartSlotChange = (event) => {
+      this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleFilterActionsEndSlotChange = (event) => {
+      this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.setActiveListItem = () => {
+      const { enabledListItems } = this;
+      if (!enabledListItems.some((item) => item.active)) {
+        if (enabledListItems[0]) {
+          enabledListItems[0].active = true;
+        }
+      }
+    };
+    this.updateSelectedItems = (emit = false) => {
+      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
+      if (emit) {
+        this.calciteListChange.emit();
+      }
+    };
+    this.updateFilteredItems = (emit = false) => {
+      const { listItems, filteredData, filterText } = this;
+      const values = filteredData.map((item) => item.value);
+      const lastDescendantItems = listItems === null || listItems === void 0 ? void 0 : listItems.filter((listItem) => listItems.every((li) => li === listItem || !listItem.contains(li)));
+      const filteredItems = listItems.filter((item) => !filterText || values.includes(item.value)) || [];
+      const visibleParents = new WeakSet();
+      lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+      this.filteredItems = filteredItems;
+      if (emit) {
+        this.calciteListFilter.emit();
+      }
+    };
+    this.setFilterEl = (el) => {
+      this.filterEl = el;
+      this.performFilter();
+    };
+    this.handleFilterChange = (event) => {
+      event.stopPropagation();
+      const { value } = event.currentTarget;
+      this.filterText = value;
+      this.updateFilteredData(true);
+    };
+    this.getItemData = () => {
+      return this.listItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        metadata: item.metadata,
+        value: item.value,
+      }));
+    };
+    this.updateListItems = debounce((emit = false) => {
+      const { selectionAppearance, selectionMode, dragEnabled } = this;
+      if (!!this.parentListEl) {
+        const items = this.queryListItems(true);
+        items.forEach((item) => {
+          item.selectionAppearance = selectionAppearance;
+          item.selectionMode = selectionMode;
+          item.dragHandle = dragEnabled;
+        });
+        this.setUpSorting();
+        return;
+      }
+      const items = this.queryListItems();
+      items.forEach((item) => {
+        item.selectionAppearance = selectionAppearance;
+        item.selectionMode = selectionMode;
+        item.dragHandle = dragEnabled;
+      });
+      this.listItems = items;
+      if (this.filterEnabled) {
+        this.dataForFilter = this.getItemData();
+        if (this.filterEl) {
+          this.filterEl.items = this.dataForFilter;
+        }
+      }
+      this.updateFilteredItems(emit);
+      this.enabledListItems = this.filteredItems.filter((item) => !item.disabled && !item.closed);
+      this.setActiveListItem();
+      this.updateSelectedItems(emit);
+      this.setUpSorting();
+    }, debounceTimeout);
+    this.queryListItems = (direct = false) => {
+      return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
+    };
+    this.focusRow = (focusEl) => {
+      const { enabledListItems } = this;
+      if (!focusEl) {
+        return;
+      }
+      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+      focusEl.setFocus();
+    };
+    this.isNavigable = (listItem) => {
+      var _a;
+      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
+      if (!parentListItemEl) {
+        return true;
+      }
+      return parentListItemEl.open && this.isNavigable(parentListItemEl);
+    };
+    this.handleListKeydown = (event) => {
+      var _a;
+      if (event.defaultPrevented || !!this.parentListEl) {
+        return;
+      }
+      const { key } = event;
+      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
+      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
+        if (filteredItems[nextIndex]) {
+          this.focusRow(filteredItems[nextIndex]);
+        }
+      }
+      else if (key === "ArrowUp") {
+        event.preventDefault();
+        if (currentIndex === 0 && this.filterEnabled) {
+          (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+          return;
+        }
+        const prevIndex = currentIndex - 1;
+        if (filteredItems[prevIndex]) {
+          this.focusRow(filteredItems[prevIndex]);
+        }
+      }
+      else if (key === "Home") {
+        event.preventDefault();
+        const homeItem = filteredItems[0];
+        if (homeItem) {
+          this.focusRow(homeItem);
+        }
+      }
+      else if (key === "End") {
+        event.preventDefault();
+        const endItem = filteredItems[filteredItems.length - 1];
+        if (endItem) {
+          this.focusRow(endItem);
+        }
+      }
+    };
+    this.disabled = false;
+    this.canPull = undefined;
+    this.canPut = undefined;
+    this.dragEnabled = false;
+    this.group = undefined;
+    this.filterEnabled = false;
+    this.filteredItems = [];
+    this.filteredData = [];
+    this.filterPlaceholder = undefined;
+    this.filterText = undefined;
+    this.label = undefined;
+    this.loading = false;
+    this.openable = false;
+    this.selectedItems = [];
+    this.selectionMode = "none";
+    this.selectionAppearance = "icon";
+    this.assistiveText = undefined;
+    this.dataForFilter = [];
+    this.hasFilterActionsEnd = false;
+    this.hasFilterActionsStart = false;
+  }
+  async handleFilterTextChange() {
+    this.performFilter();
+  }
+  handleListItemChange() {
+    this.updateListItems();
+  }
+  handleCalciteInternalFocusPreviousItem(event) {
+    if (this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const { enabledListItems } = this;
+    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
+    const prevIndex = currentIndex - 1;
+    if (enabledListItems[prevIndex]) {
+      this.focusRow(enabledListItems[prevIndex]);
+    }
+  }
+  handleCalciteInternalListItemActive(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const target = event.target;
+    const { listItems } = this;
+    listItems.forEach((listItem) => {
+      listItem.active = listItem === target;
+    });
+  }
+  handleCalciteListItemSelect() {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.updateSelectedItems(true);
+  }
+  handleCalciteInternalHandleChange(event) {
+    this.assistiveText = event.detail.message;
+    event.stopPropagation();
+  }
+  handleCalciteHandleNudge(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    this.handleNudgeEvent(event);
+  }
+  handleCalciteInternalListItemSelect(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    const target = event.target;
+    const { listItems, selectionMode } = this;
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
+    this.updateSelectedItems();
+  }
+  handleCalciteInternalListItemChange(event) {
+    if (!!this.parentListEl) {
+      return;
+    }
+    event.stopPropagation();
+    this.updateListItems(true);
+  }
+  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+    event.stopPropagation();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.connectObserver();
+    this.updateListItems();
+    this.setUpSorting();
+    connectInteractive(this);
+    this.parentListEl = this.el.parentElement.closest("calcite-list");
+  }
+  disconnectedCallback() {
+    this.disconnectObserver();
+    disconnectSortableComponent(this);
+    disconnectInteractive(this);
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component's first focusable element. */
+  async setFocus() {
+    var _a, _b;
+    await componentFocusable(this);
+    if (this.filterEnabled) {
+      return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+    return (_b = this.enabledListItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
+    return (h("div", { class: CSS.container }, this.dragEnabled ? (h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, loading ? h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, h("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (h("thead", null, h("tr", { class: { [CSS.sticky]: true } }, h("th", { colSpan: MAX_COLUMNS }, h("calcite-stack", { class: CSS.stack }, h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$1.actionsStart }), h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.setFilterEl }), h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$1.actionsEnd })))))) : null, h("tbody", { class: CSS.tableContainer }, h("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  connectObserver() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectObserver() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  setUpSorting() {
+    const { dragEnabled } = this;
+    if (!dragEnabled) {
+      return;
+    }
+    connectSortableComponent(this);
+  }
+  onDragStart() {
+    this.disconnectObserver();
+  }
+  onDragEnd() {
+    this.connectObserver();
+  }
+  onDragSort(event) {
+    this.updateListItems();
+    const { from, item, to } = event;
+    this.calciteListOrderChange.emit({
+      dragEl: item,
+      fromEl: from,
+      toEl: to,
+    });
+  }
+  filterElements({ el, filteredItems, visibleParents, }) {
+    const hidden = !visibleParents.has(el) && !filteredItems.includes(el);
+    el.hidden = hidden;
+    const closestParent = el.parentElement.closest(parentSelector);
+    if (!closestParent) {
+      return;
+    }
+    if (!hidden) {
+      visibleParents.add(closestParent);
+    }
+    this.filterElements({
+      el: closestParent,
+      filteredItems,
+      visibleParents,
+    });
+  }
+  updateFilteredData(emit = false) {
+    const { filterEl } = this;
+    if (!filterEl) {
+      return;
+    }
+    if (filterEl.filteredItems) {
+      this.filteredData = filterEl.filteredItems;
+    }
+    this.updateListItems(emit);
+  }
+  async performFilter() {
+    const { filterEl, filterText } = this;
+    if (!filterEl) {
+      return;
+    }
+    filterEl.value = filterText;
+    await filterEl.filter(filterText);
+    this.updateFilteredData();
+  }
+  handleNudgeEvent(event) {
+    const { direction } = event.detail;
+    const composedPath = event.composedPath();
+    const handle = composedPath.find((el) => el.tagName === "CALCITE-HANDLE");
+    const sortItem = composedPath.find((el) => el.tagName === "CALCITE-LIST-ITEM");
+    const parentEl = sortItem === null || sortItem === void 0 ? void 0 : sortItem.parentElement;
+    if (!parentEl) {
+      return;
+    }
+    const { enabledListItems } = this;
+    const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
+    const lastIndex = sameParentItems.length - 1;
+    const startingIndex = sameParentItems.indexOf(sortItem);
+    let appendInstead = false;
+    let buddyIndex;
+    if (direction === "up") {
+      if (startingIndex === 0) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex - 1;
+      }
+    }
+    else {
+      if (startingIndex === lastIndex) {
+        buddyIndex = 0;
+      }
+      else if (startingIndex === lastIndex - 1) {
+        appendInstead = true;
+      }
+      else {
+        buddyIndex = startingIndex + 2;
+      }
+    }
+    this.disconnectObserver();
+    if (appendInstead) {
+      parentEl.appendChild(sortItem);
+    }
+    else {
+      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+    }
+    this.updateListItems();
+    this.connectObserver();
+    this.calciteListOrderChange.emit({
+      dragEl: sortItem,
+      fromEl: null,
+      toEl: null,
+    });
+    handle.setFocus().then(() => {
+      handle.activated = true;
+    });
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "filterText": ["handleFilterTextChange"],
+    "filterEnabled": ["handleListItemChange"],
+    "group": ["handleListItemChange"],
+    "dragEnabled": ["handleListItemChange"],
+    "selectionMode": ["handleListItemChange"],
+    "selectionAppearance": ["handleListItemChange"]
+  }; }
+  static get style() { return listCss; }
+}, [1, "calcite-list", {
+    "disabled": [516],
+    "canPull": [16],
+    "canPut": [16],
+    "dragEnabled": [516, "drag-enabled"],
+    "group": [513],
+    "filterEnabled": [516, "filter-enabled"],
+    "filteredItems": [1040],
+    "filteredData": [1040],
+    "filterPlaceholder": [513, "filter-placeholder"],
+    "filterText": [1537, "filter-text"],
+    "label": [1],
+    "loading": [516],
+    "openable": [4],
+    "selectedItems": [1040],
+    "selectionMode": [513, "selection-mode"],
+    "selectionAppearance": [513, "selection-appearance"],
+    "assistiveText": [32],
+    "dataForFilter": [32],
+    "hasFilterActionsEnd": [32],
+    "hasFilterActionsStart": [32],
+    "setFocus": [64]
+  }, [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemActive", "handleCalciteInternalListItemActive"], [0, "calciteListItemSelect", "handleCalciteListItemSelect"], [0, "calciteInternalHandleChange", "handleCalciteInternalHandleChange"], [0, "calciteHandleNudge", "handleCalciteHandleNudge"], [0, "calciteInternalListItemSelect", "handleCalciteInternalListItemSelect"], [0, "calciteInternalListItemChange", "handleCalciteInternalListItemChange"], [0, "calciteInternalListItemGroupDefaultSlotChange", "handleCalciteInternalListItemGroupDefaultSlotChange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-list", "calcite-filter", "calcite-icon", "calcite-input", "calcite-loader", "calcite-progress", "calcite-scrim", "calcite-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, List);
+      }
+      break;
+    case "calcite-filter":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { List as L, defineCustomElement as d };