/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
import { ref } from "lit/directives/ref.js";
import { keyed } from "lit/directives/keyed.js";
import { debounce } from "es-toolkit";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
import { c as createObserver } from "../../chunks/observers.js";
import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
import { S as SLOTS$1 } from "../../chunks/resources10.js";
import { n as numberStringFormatter } from "../../chunks/locale.js";
import { g as guid } from "../../chunks/guid.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { u as useCancelable } from "../../chunks/useCancelable.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
import { u as useSortable } from "../../chunks/useSortable.js";
const CSS = {
  container: "container",
  table: "table",
  scrim: "scrim",
  stack: "stack",
  tableContainer: "table-container",
  sticky: "sticky-pos",
  assistiveText: "assistive-text",
  containerHeight: "container-height"
};
const SLOTS = {
  emptyContent: "empty-content",
  filterNoResults: "filter-no-results",
  filterActionsStart: "filter-actions-start",
  filterActionsEnd: "filter-actions-end"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-list-action-spacing: var(--calcite-spacing-xs)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container-height{block-size:100%}.table-container{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%}.stack{--calcite-stack-padding-inline: 0;--calcite-stack-padding-block: 0}.sticky-pos{position:sticky;inset-block-start:0px;z-index:calc(var(--calcite-z-index-sticky) + 1);background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.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}::slotted(:is(calcite-action[slot=filter-actions-start],calcite-action[slot=filter-actions-end])){gap:var(--calcite-internal-list-action-spacing);align-self:center}::slotted(calcite-action[slot=filter-actions-start]){margin-inline-start:var(--calcite-internal-list-action-spacing)}::slotted(calcite-action[slot=filter-actions-end]){margin-inline-end:var(--calcite-internal-list-action-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
const parentSelector = `${listItemGroupSelector}, ${listItemSelector}`;
class List extends LitElement {
  constructor() {
    super();
    this.dragSelector = listItemSelector;
    this.focusableItems = [];
    this.handleSelector = "calcite-sort-handle";
    this.listItems = [];
    this.listItemGroups = [];
    this.mutationObserver = createObserver("mutation", () => {
      this.willPerformFilter = true;
      this.updateListItemsDebounced();
    });
    this.cancelable = useCancelable()(this);
    this.sortable = useSortable()(this);
    this.updateListItemsDebounced = debounce(this.updateListItems, DEBOUNCE.nextTick);
    this.visibleItems = [];
    this.willFilterEmit = false;
    this.willPerformFilter = false;
    this.messages = useT9n({ blocking: true });
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.filterRowResizeObserver = createObserver("resize", () => this.updateFilterRowHeight());
    this.setFilterContainerEl = (el) => {
      this.filterContainerEl = el;
      this.observeFilterRow();
    };
    this.dataForFilter = [];
    this.hasFilterActionsEnd = false;
    this.hasFilterActionsStart = false;
    this.hasFilterNoResults = false;
    this.sortHandleMenuItems = [];
    this.hasContent = false;
    this.hasEmptyContent = false;
    this.filterRowHeight = 0;
    this.disabled = false;
    this.dragEnabled = false;
    this.filterEnabled = false;
    this.filterText = "";
    this.filteredData = [];
    this.filteredItems = [];
    this.interactionMode = "interactive";
    this.loading = false;
    this.displayMode = "flat";
    this.scale = "m";
    this.selectedItems = [];
    this.selectionAppearance = "icon";
    this.selectionMode = "none";
    this.sortDisabled = false;
    this.calciteInternalListDefaultSlotChange = createEvent({ cancelable: false });
    this.calciteListChange = createEvent({ cancelable: false });
    this.calciteListDragEnd = createEvent({ cancelable: false });
    this.calciteListDragStart = createEvent({ cancelable: false });
    this.calciteListFilter = createEvent({ cancelable: false });
    this.calciteListMoveHalt = createEvent({ cancelable: false });
    this.calciteListOrderChange = createEvent({ cancelable: false });
    this.listen("calciteInternalListItemToggle", this.handleCalciteListItemToggle);
    this.listen("calciteInternalFocusPreviousItem", this.handleCalciteInternalFocusPreviousItem);
    this.listen("calciteInternalListItemActive", this.handleCalciteInternalListItemActive);
    this.listen("calciteListItemSelect", this.handleCalciteListItemSelect);
    this.listen("calciteInternalAssistiveTextChange", this.handleCalciteInternalAssistiveTextChange);
    this.listen("calciteListItemSortHandleBeforeOpen", this.updateListItemsDebounced);
    this.listen("calciteSortHandleReorder", this.handleSortReorder);
    this.listen("calciteSortHandleMove", this.handleSortMove);
    this.listen("calciteSortHandleAdd", this.handleSortAdd);
    this.listen("calciteInternalListItemSelect", this.handleCalciteInternalListItemSelect);
    this.listen("calciteInternalListItemSelectMultiple", this.handleCalciteInternalListItemSelectMultiple);
    this.listen("calciteInternalListItemChange", this.handleCalciteInternalListItemChange);
    this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListItemGroupDefaultSlotChange);
    this.listen("calciteInternalListItemGroupChange", this.handleCalciteInternalListItemChange);
  }
  static {
    this.properties = { assistiveText: [16, {}, { state: true }], dataForFilter: [16, {}, { state: true }], hasFilterActionsEnd: [16, {}, { state: true }], hasFilterActionsStart: [16, {}, { state: true }], hasFilterNoResults: [16, {}, { state: true }], sortHandleMenuItems: [16, {}, { state: true }], hasContent: [16, {}, { state: true }], hasEmptyContent: [16, {}, { state: true }], filterRowHeight: [16, {}, { state: true }], canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragEnabled: [7, {}, { reflect: true, type: Boolean }], filterEnabled: [7, {}, { reflect: true, type: Boolean }], filterPredicate: [0, {}, { attribute: false }], filterLabel: [3, {}, { reflect: true }], filterPlaceholder: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filterText: [3, {}, { reflect: true }], filteredData: [0, {}, { attribute: false }], filteredItems: [0, {}, { attribute: false }], group: [3, {}, { reflect: true }], interactionMode: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], numberingSystem: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], sortDisabled: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = styles;
  }
  get hasActiveFilter() {
    return !!(this.filterEnabled && this.filterText && this.filteredItems.length !== this.visibleItems.length);
  }
  get showEmptyContentContainer() {
    return !this.hasContent && this.hasEmptyContent;
  }
  get showNoResultsContainer() {
    return !!(this.filterEnabled && this.filterText && this.hasFilterNoResults && this.visibleItems.length && !this.filteredItems.length);
  }
  get effectiveFilterProps() {
    if (!this.filterProps) {
      return ["description", "label", "metadata", "heading"];
    }
    return this.filterProps.filter((prop) => prop !== "el");
  }
  emitOrderChangeEvent(detail) {
    this.calciteListOrderChange.emit(detail);
  }
  async setFocus(options) {
    return this.focusSetter(() => this.filterEnabled ? this.filterEl : this.focusableItems.find((listItem) => listItem.active), options);
  }
  connectedCallback() {
    super.connectedCallback();
    this.connectObserver();
    this.willPerformFilter = true;
    this.updateListItemsDebounced();
    this.setUpSorting();
    this.setParentList();
    this.setListItemGroups();
    this.cancelable.add(this.updateListItemsDebounced);
  }
  async load() {
    this.handleInteractionModeWarning();
  }
  willUpdate(changes) {
    if (changes.has("filterText") || changes.has("filterProps") || changes.has("filterPredicate")) {
      this.performFilter();
    }
    if (changes.has("filterEnabled") && (this.hasUpdated || this.filterEnabled !== false) || changes.has("group") || changes.has("sortDisabled") && (this.hasUpdated || this.sortDisabled !== false) || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false) || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || changes.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "icon") || changes.has("displayMode") && this.hasUpdated || changes.has("scale") && this.hasUpdated || changes.has("canPull") && this.hasUpdated || changes.has("canPut") && this.hasUpdated || changes.has("filterPredicate") && this.hasUpdated) {
      this.handleListItemChange();
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.disconnectObserver();
    this.unobserveFilterRow();
  }
  updateListItems() {
    this.updateFilterRowHeight();
    this.updateGroupItems();
    const { selectionAppearance, selectionMode, interactionMode, dragEnabled, el, filterEl, displayMode, scale, sortDisabled, sortHandleMenuItems } = this;
    const items = Array.from(this.el.querySelectorAll(listItemSelector));
    const fromEl = el;
    const fromElItems = Array.from(fromEl.children).filter(isListItem);
    items.forEach((item) => {
      if (item.closest(listSelector) === el) {
        item.scale = scale;
        item.selectionAppearance = selectionAppearance;
        item.selectionMode = selectionMode;
        item.interactionMode = interactionMode;
        item.moveToItems = sortHandleMenuItems.filter((moveToItem) => this.validateSortMenuItem({
          type: "move",
          fromEl,
          toEl: moveToItem.element,
          dragEl: item,
          newIndex: 0,
          oldIndex: fromElItems.indexOf(item)
        }));
        item.addToItems = this.sortHandleMenuItems.filter((moveToItem) => this.validateSortMenuItem({
          type: "add",
          fromEl,
          toEl: moveToItem.element,
          dragEl: item,
          newIndex: 0,
          oldIndex: fromElItems.indexOf(item)
        }));
        item.dragHandle = dragEnabled;
        item.displayMode = displayMode;
        item.sortDisabled = sortDisabled;
      }
    });
    if (this.parentListEl) {
      this.setUpSorting();
      return;
    }
    this.listItems = items;
    if (this.filterEnabled && this.willPerformFilter) {
      this.willPerformFilter = false;
      this.dataForFilter = this.getItemData();
      if (filterEl) {
        filterEl.items = this.dataForFilter;
        this.filterAndUpdateData();
      }
    }
    this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
    this.updateFilteredItems();
    this.borderItems();
    this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
    this.setActiveListItem();
    this.updateSelectedItems();
    this.setUpSorting();
  }
  unobserveFilterRow() {
    this.filterRowResizeObserver?.disconnect();
  }
  observeFilterRow() {
    this.unobserveFilterRow();
    const filterRowEl = this.filterContainerEl;
    if (filterRowEl) {
      this.filterRowResizeObserver?.observe(filterRowEl);
    }
  }
  updateFilterRowHeight() {
    this.filterRowHeight = this.filterContainerEl?.clientHeight ?? 0;
  }
  handleListItemChange() {
    this.willPerformFilter = true;
    this.updateListItemsDebounced();
  }
  handleCalciteListItemToggle(event) {
    if (this.parentListEl) {
      return;
    }
    event.stopPropagation();
    this.borderItems();
  }
  handleCalciteInternalFocusPreviousItem(event) {
    if (this.parentListEl) {
      return;
    }
    event.stopPropagation();
    const { focusableItems } = this;
    const currentIndex = focusableItems.findIndex((listItem) => listItem.active);
    const prevIndex = currentIndex - 1;
    if (focusableItems[prevIndex]) {
      this.focusRow(focusableItems[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);
  }
  handleCalciteInternalAssistiveTextChange(event) {
    this.assistiveText = event.detail.message;
    event.stopPropagation();
  }
  handleSortReorder(event) {
    if (this.parentListEl || event.defaultPrevented) {
      return;
    }
    event.preventDefault();
    this.handleReorder(event);
  }
  handleSortAdd(event) {
    if (this.parentListEl || event.defaultPrevented) {
      return;
    }
    event.preventDefault();
    this.handleAdd(event);
  }
  handleSortMove(event) {
    if (this.parentListEl || event.defaultPrevented) {
      return;
    }
    event.preventDefault();
    this.handleMove(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();
  }
  handleCalciteInternalListItemSelectMultiple(event) {
    if (this.parentListEl) {
      return;
    }
    event.stopPropagation();
    const { target, detail } = event;
    const { focusableItems, lastSelectedInfo } = this;
    const selectedItem = target;
    if (detail.selectMultiple && !!lastSelectedInfo) {
      const currentIndex = focusableItems.indexOf(selectedItem);
      const lastSelectedIndex = focusableItems.indexOf(lastSelectedInfo.selectedItem);
      const startIndex = Math.min(lastSelectedIndex, currentIndex);
      const endIndex = Math.max(lastSelectedIndex, currentIndex);
      focusableItems.slice(startIndex, endIndex + 1).forEach((item) => item.selected = lastSelectedInfo.selected);
    } else {
      this.lastSelectedInfo = { selectedItem, selected: selectedItem.selected };
    }
  }
  handleCalciteInternalListItemChange(event) {
    if (this.parentListEl) {
      return;
    }
    event.stopPropagation();
    this.handleListItemChange();
  }
  handleCalciteInternalListItemGroupDefaultSlotChange(event) {
    if (this.parentListEl) {
      return;
    }
    event.stopPropagation();
    this.handleListItemChange();
  }
  connectObserver() {
    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
  }
  disconnectObserver() {
    this.mutationObserver?.disconnect();
  }
  setUpSorting() {
    const { dragEnabled, defaultSlotEl } = this;
    if (dragEnabled && defaultSlotEl) {
      updateListItemChildren(defaultSlotEl);
    }
    this.sortable.reset();
  }
  onGlobalDragStart() {
    this.disconnectObserver();
  }
  onGlobalDragEnd() {
    this.connectObserver();
  }
  onDragEnd(detail) {
    this.calciteListDragEnd.emit(detail);
  }
  onDragStart(detail) {
    detail.dragEl.sortHandleOpen = false;
    this.calciteListDragStart.emit(detail);
  }
  onDragSort(detail) {
    this.setParentList();
    this.updateListItemsDebounced();
    this.calciteListOrderChange.emit(detail);
  }
  setParentList() {
    this.parentListEl = this.el.parentElement?.closest(listSelector) || void 0;
  }
  handleDefaultSlotChange(event) {
    if (this.parentListEl) {
      this.calciteInternalListDefaultSlotChange.emit();
    }
    this.hasContent = slotChangeHasContent(event);
  }
  handleEmptyContentSlotChange(event) {
    this.hasEmptyContent = slotChangeHasContent(event);
  }
  setListItemGroups() {
    this.listItemGroups = Array.from(this.el.querySelectorAll(listItemGroupSelector));
  }
  handleFilterActionsStartSlotChange(event) {
    this.hasFilterActionsStart = slotChangeHasAssignedElement(event);
  }
  handleFilterActionsEndSlotChange(event) {
    this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);
  }
  handleFilterNoResultsSlotChange(event) {
    this.hasFilterNoResults = slotChangeHasAssignedElement(event);
  }
  setActiveListItem() {
    const { focusableItems } = this;
    if (!focusableItems.some((item) => item.active)) {
      if (focusableItems[0]) {
        focusableItems[0].active = true;
      }
    }
  }
  async updateSelectedItems(emit = false) {
    await this.updateComplete;
    this.selectedItems = this.visibleItems.filter((item) => item.selected);
    if (emit) {
      this.calciteListChange.emit();
    }
  }
  filterElements({ el, filteredItems, visibleParents }) {
    const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el);
    el.filterHidden = filterHidden;
    const closestParent = el.parentElement.closest(parentSelector);
    if (!closestParent) {
      return;
    }
    if (!filterHidden) {
      visibleParents.add(closestParent);
    }
    this.filterElements({
      el: closestParent,
      filteredItems,
      visibleParents
    });
  }
  allParentListItemsExpanded(item) {
    const parentItem = item.parentElement?.closest(listItemSelector);
    if (!parentItem) {
      return true;
    } else if (!parentItem.expanded) {
      return false;
    }
    return this.allParentListItemsExpanded(parentItem);
  }
  borderItems() {
    const visibleItems = this.visibleItems.filter((item) => !item.filterHidden && this.allParentListItemsExpanded(item));
    visibleItems.forEach((item) => item.bordered = item !== visibleItems[visibleItems.length - 1]);
  }
  updateFilteredItems() {
    const { visibleItems, filteredData, filterText, filterPredicate } = this;
    const lastDescendantItems = visibleItems?.filter((listItem) => visibleItems.every((li) => li === listItem || !listItem.contains(li)));
    const filteredItems = filterPredicate ? visibleItems.filter(filterPredicate) : !filterText ? visibleItems || [] : filteredData.map((item) => item.el);
    const visibleParents = /* @__PURE__ */ new WeakSet();
    lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
    this.filteredItems = filteredItems;
    if (this.willFilterEmit) {
      this.willFilterEmit = false;
      this.calciteListFilter.emit();
    }
  }
  updateFilteredData() {
    const { filterEl } = this;
    if (!filterEl) {
      return;
    }
    if (filterEl.filteredItems) {
      this.filteredData = filterEl.filteredItems;
    }
    this.updateListItemsDebounced();
  }
  async filterAndUpdateData() {
    const filterValue = this.filterEl?.value ?? this.filterText;
    await this.filterEl?.filter(filterValue);
    this.updateFilteredData();
  }
  performFilter() {
    const { filterEl, filterText, effectiveFilterProps } = this;
    if (!filterEl) {
      return;
    }
    filterEl.value = filterText;
    filterEl.filterProps = effectiveFilterProps;
    this.filterAndUpdateData();
  }
  setDefaultSlotEl(el) {
    this.defaultSlotEl = el;
  }
  setFilterEl(el) {
    this.filterEl = el;
    this.performFilter();
  }
  handleFilterChange(event) {
    event.stopPropagation();
    const { value } = event.currentTarget;
    this.filterText = value;
    this.willFilterEmit = true;
    this.updateFilteredData();
  }
  getItemData() {
    return this.listItems.map((item) => ({
      label: item.label,
      description: item.description,
      metadata: item.metadata,
      heading: this.getGroupHeading(item),
      el: item
    }));
  }
  getGroupHeading(item) {
    return this.listItemGroups.filter((group) => group.contains(item) && group.heading).map((group) => group.heading);
  }
  updateGroupItems() {
    const { el, group, scale } = this;
    const rootNode = getRootNode(el);
    const lists = group ? Array.from(rootNode.querySelectorAll(`${listSelector}[group="${group}"]`)).filter((list) => !list.disabled && list.dragEnabled) : [];
    this.sortHandleMenuItems = lists.map((element) => ({
      element,
      label: element.label ?? element.id,
      id: guid()
    }));
    const groupItems = Array.from(this.el.querySelectorAll(listItemGroupSelector));
    groupItems.forEach((item) => {
      item.scale = scale;
    });
  }
  focusRow(focusEl) {
    const { focusableItems } = this;
    if (!focusEl) {
      return;
    }
    focusableItems.forEach((listItem) => listItem.active = listItem === focusEl);
    focusEl.setFocus();
  }
  isNavigable(listItem) {
    const parentListItemEl = listItem.parentElement?.closest(listItemSelector);
    if (!parentListItemEl) {
      return true;
    }
    return parentListItemEl.expanded && this.isNavigable(parentListItemEl);
  }
  handleListKeydown(event) {
    if (event.defaultPrevented || !!this.parentListEl) {
      return;
    }
    const { key } = event;
    const navigableItems = this.focusableItems.filter((listItem) => this.isNavigable(listItem));
    const currentIndex = navigableItems.findIndex((listItem) => listItem.active);
    if (key === "ArrowDown") {
      event.preventDefault();
      const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
      if (navigableItems[nextIndex]) {
        this.focusRow(navigableItems[nextIndex]);
      }
    } else if (key === "ArrowUp") {
      event.preventDefault();
      if (currentIndex === 0 && this.filterEnabled) {
        this.filterEl.setFocus();
        return;
      }
      const prevIndex = currentIndex - 1;
      if (navigableItems[prevIndex]) {
        this.focusRow(navigableItems[prevIndex]);
      }
    } else if (key === "Home") {
      event.preventDefault();
      const homeItem = navigableItems[0];
      if (homeItem) {
        this.focusRow(homeItem);
      }
    } else if (key === "End") {
      event.preventDefault();
      const endItem = navigableItems[navigableItems.length - 1];
      if (endItem) {
        this.focusRow(endItem);
      }
    }
  }
  handleInteractionModeWarning() {
    if (this.interactionMode === "static" && this.selectionMode !== "none" && this.selectionAppearance === "border") {
      console.warn(`selection-appearance="border" requires interaction-mode="interactive"`);
    }
  }
  validateSortMenuItem({ fromEl, toEl, dragEl, newIndex, oldIndex, type }) {
    if (!fromEl || !toEl || toEl === fromEl || dragEl.contains(toEl)) {
      return false;
    }
    const canPull = fromEl.canPull?.({
      toEl,
      fromEl,
      dragEl,
      newIndex,
      oldIndex
    }) ?? true;
    const canPut = toEl.canPut?.({
      toEl,
      fromEl,
      dragEl,
      newIndex,
      oldIndex
    }) ?? true;
    return (type === "add" ? canPull === "clone" : canPull === true) && canPut;
  }
  handleAdd(event) {
    const { addTo } = event.detail;
    const dragEl = event.target;
    const fromEl = dragEl?.parentElement;
    const toEl = addTo.element;
    const fromElItems = Array.from(fromEl.children).filter(isListItem);
    const oldIndex = fromElItems.indexOf(dragEl);
    const newIndex = 0;
    if (!this.validateSortMenuItem({ type: "add", fromEl, toEl, dragEl, newIndex, oldIndex })) {
      return;
    }
    dragEl.sortHandleOpen = false;
    this.disconnectObserver();
    const newEl = dragEl.cloneNode();
    toEl.prepend(newEl);
    expandedAncestors(dragEl);
    this.updateListItemsDebounced();
    this.connectObserver();
    const eventDetail = {
      dragEl,
      fromEl,
      toEl,
      newIndex,
      oldIndex
    };
    this.calciteListOrderChange.emit(eventDetail);
    toEl.emitOrderChangeEvent(eventDetail);
  }
  handleMove(event) {
    const { moveTo } = event.detail;
    const dragEl = event.target;
    const fromEl = dragEl?.parentElement;
    const toEl = moveTo.element;
    const fromElItems = Array.from(fromEl.children).filter(isListItem);
    const oldIndex = fromElItems.indexOf(dragEl);
    const newIndex = 0;
    if (!this.validateSortMenuItem({ type: "move", fromEl, toEl, dragEl, newIndex, oldIndex })) {
      return;
    }
    dragEl.sortHandleOpen = false;
    this.disconnectObserver();
    toEl.prepend(dragEl);
    expandedAncestors(dragEl);
    this.updateListItemsDebounced();
    this.connectObserver();
    const eventDetail = {
      dragEl,
      fromEl,
      toEl,
      newIndex,
      oldIndex
    };
    this.calciteListOrderChange.emit(eventDetail);
    toEl.emitOrderChangeEvent(eventDetail);
  }
  handleReorder(event) {
    const { reorder } = event.detail;
    const dragEl = event.target;
    const parentEl = dragEl?.parentElement;
    if (!parentEl) {
      return;
    }
    dragEl.sortHandleOpen = false;
    const sameParentItems = Array.from(parentEl.children).filter(isListItem);
    const lastIndex = sameParentItems.length - 1;
    const oldIndex = sameParentItems.indexOf(dragEl);
    let newIndex = oldIndex;
    switch (reorder) {
      case "top":
        newIndex = 0;
        break;
      case "bottom":
        newIndex = lastIndex;
        break;
      case "up":
        newIndex = oldIndex === 0 ? 0 : oldIndex - 1;
        break;
      case "down":
        newIndex = oldIndex === lastIndex ? lastIndex : oldIndex + 1;
        break;
    }
    this.disconnectObserver();
    const referenceEl = reorder === "up" || reorder === "top" ? sameParentItems[newIndex] : sameParentItems[newIndex].nextSibling;
    parentEl.insertBefore(dragEl, referenceEl);
    this.updateListItemsDebounced();
    this.connectObserver();
    this.calciteListOrderChange.emit({
      dragEl,
      fromEl: parentEl,
      toEl: parentEl,
      newIndex,
      oldIndex
    });
  }
  render() {
    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterLabel, hasFilterActionsStart, hasFilterActionsEnd, effectiveFilterProps } = this;
    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({
      [CSS.container]: true,
      [CSS.containerHeight]: this.listItems.length < 1 && loading
    })} style=${safeStyleMap({
      ["--calcite-internal-filter-enabled-offset"]: `${this.filterRowHeight}px`
    })}>${this.dragEnabled ? html`<span aria-live=assertive class=${safeClassMap(CSS.assistiveText)}>${this.assistiveText}</span>` : null}${this.renderItemAriaLive()}${loading ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} .loading=${loading}></calcite-scrim>` : null}<div .ariaBusy=${loading} .ariaLabel=${label || ""} class=${safeClassMap(CSS.table)} @keydown=${this.handleListKeydown} role=treegrid>${filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? html`<div class=${safeClassMap(CSS.sticky)} role=rowgroup ${ref(this.setFilterContainerEl)}><div role=row><div role=columnheader><calcite-stack class=${safeClassMap(CSS.stack)}><slot name=${SLOTS.filterActionsStart} @slotchange=${this.handleFilterActionsStartSlotChange} slot=${SLOTS$1.actionsStart}></slot><calcite-filter .ariaLabel=${filterPlaceholder} .disabled=${disabled} .filterProps=${effectiveFilterProps} .items=${dataForFilter} .label=${filterLabel} @calciteFilterChange=${this.handleFilterChange} .placeholder=${filterPlaceholder} .scale=${this.scale} ${ref(this.setFilterEl)}></calcite-filter><slot name=${SLOTS.filterActionsEnd} @slotchange=${this.handleFilterActionsEndSlotChange} slot=${SLOTS$1.actionsEnd}></slot></calcite-stack></div></div></div>` : null}<div class=${safeClassMap(CSS.tableContainer)} role=rowgroup><div .hidden=${!this.showEmptyContentContainer}><slot name=${SLOTS.emptyContent} @slotchange=${this.handleEmptyContentSlotChange}></slot></div><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.setDefaultSlotEl)}></slot></div></div><div aria-live=polite .hidden=${!this.showNoResultsContainer}><slot name=${SLOTS.filterNoResults} @slotchange=${this.handleFilterNoResultsSlotChange}></slot></div></div>` });
  }
  renderItemAriaLive() {
    const { messages, filteredItems, parentListEl, messages: { _lang: effectiveLocale }, numberingSystem } = this;
    numberStringFormatter.numberFormatOptions = {
      locale: effectiveLocale,
      numberingSystem
    };
    return !parentListEl ? html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${this.hasActiveFilter ? keyed("aria-filter-enabled", html`<div>${messages.filterEnabled}</div>`) : null}${keyed("aria-item-count", html`<div>${messages.total.replace("{count}", numberStringFormatter.localize(filteredItems.length.toString()))}</div>`)}${filteredItems.length ? keyed("aria-item-list", html`<ol>${filteredItems.map((item) => html`<li>${item.label}</li>`)}</ol>`) : null}</div>` : null;
  }
}
customElement("calcite-list", List);
export {
  List
};
