/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import { isEqual } from "es-toolkit";
import { css, html, nothing } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { useDirection } from "@arcgis/lumina/controllers";
import { s as slotChangeHasAssignedElement, y as getFirstTabbable } from "../../chunks/dom.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { g as getIconScale } from "../../chunks/component.js";
import { l as logger } from "../../chunks/logger.js";
import { s as styles$1 } from "../../chunks/sortable.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
import { a as listSelector, g as getDepth, c as getListItemChildren } from "../../chunks/utils4.js";
import { a as activeCellTestAttribute, I as ICONS, C as CSS, S as SLOTS } from "../../chunks/resources11.js";
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:flex;flex-direction:column}: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([filter-hidden]),:host([closed]){display:none}.wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{box-sizing:border-box;display:flex;flex:1 1 0%;overflow:hidden;background-color:var(--calcite-list-background-color, var(--calcite-color-foreground-1))}.container *{box-sizing:border-box}.container--border{position:relative}.container--border:before{position:absolute;inline-size:var(--calcite-border-width-lg);inset-block:0;inset-inline-start:0;background-color:transparent;content:""}.container--border-selected:before{background-color:var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--border-selected:focus{box-shadow:inset var(--calcite-border-width-lg) 0 0 0 var(--calcite-list-selection-border-color, var(--calcite-color-brand))}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}.nested-container{display:none;flex-direction:column;border-width:0px;border-style:solid;border-color:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3));margin-inline-start:var(--calcite-list-spacing-indent, 1.5rem)}.nested-container--expanded{display:flex}.selection-container{display:flex;padding-block:0px;color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host([selected]) .selection-container{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}.content-container-wrapper{display:flex;flex:1 1 auto}.content-container-wrapper--bordered{border-block-end:1px solid var(--calcite-list-border-color, var(--calcite-color-border-3))}.content-container{display:flex;flex:1 1 auto;align-items:stretch;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-list-content-text-color, var(--calcite-color-text-2))}.content-container--unavailable{opacity:var(--calcite-opacity-disabled)}:host(:not([interaction-mode=static])):not([disabled]):not([selected]) .container:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-border-input))}:host(:not([interaction-mode=static])):not([disabled]) .expanded-container:hover{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host(:not([interaction-mode=static]))[selected]:hover .selection-container,:host(:not([interaction-mode=static]))[selected]:hover .selection-container--single{color:var(--calcite-list-icon-color, var(--calcite-color-brand))}:host(:not([interaction-mode=static])) .content-container{-webkit-user-select:none;user-select:none}:host(:not([interaction-mode=static])) .container--hover:hover{cursor:pointer;background-color:var(--calcite-list-background-color-hover, var(--calcite-color-foreground-2))}:host(:not([interaction-mode=static])) .container:active{background-color:var(--calcite-list-background-color-press, var(--calcite-color-foreground-3))}:host(:not([interaction-mode=static])) .icon:hover,:host(:not([interaction-mode=static])) .icon:active{color:var(--calcite-color-text-1)}.row,.grid-cell{outline-color:transparent}.row{position:relative}.row:focus,.grid-cell:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:var(--calcite-font-line-height-relative-snug)}.label{color:var(--calcite-list-label-text-color, var(--calcite-color-text-1))}.description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-3))}.icon{align-self:center;color:var(--calcite-list-icon-color, var(--calcite-color-text-3))}.actions-start,.actions-end{margin-inline-end:var(--calcite-internal-list-action-spacing);gap:var(--calcite-internal-list-action-spacing)}:host([scale=s]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:32px;padding-block:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .content,:host([scale=s]) .custom-content,:host([scale=s]) .label{font-size:var(--calcite-font-size--2)}:host([scale=s]) .description{font-size:var(--calcite-font-size--3)}:host([scale=s][display-mode=flat]:not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat]:not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=s][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=s][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=m]) .content-container{gap:var(--calcite-spacing-sm);min-block-size:40px;padding-block:var(--calcite-spacing-sm);padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .content,:host([scale=m]) .custom-content{font-size:var(--calcite-font-size--2)}:host([scale=m]) .label{font-size:var(--calcite-font-size--1)}:host([scale=m]) .description{font-size:var(--calcite-font-size--2)}:host([scale=m][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=m][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=flat][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs) var(--calcite-spacing-sm)}:host([scale=m][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested]) .selection-container{padding-inline-end:var(--calcite-spacing-xxs)}:host([scale=m][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-md)}:host([scale=m][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=m][display-mode=nested][drag-handle]) .selection-container{padding-inline:var(--calcite-spacing-xxs)}:host([scale=l]) .content-container{gap:var(--calcite-spacing-md);min-block-size:56px;padding-block:var(--calcite-space-sm-plus);padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .content,:host([scale=l]) .custom-content,:host([scale=l]) .label{font-size:var(--calcite-font-size-0)}:host([scale=l]) .description{font-size:var(--calcite-font-size--1)}:host([scale=l]) .nested-container{margin-inline-start:1.75rem}:host([scale=l][display-mode=flat]) .container{padding-inline-start:var(--calcite-spacing-lg)}:host([scale=l][display-mode=flat]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=flat][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=flat][drag-handle]) .selection-container{padding-inline-end:var(--calcite-spacing-md)}:host([scale=l][display-mode=nested]) .container{padding-inline-start:var(--calcite-spacing-xxs)}:host([scale=l][display-mode=nested][drag-handle]) .container{padding-inline-start:0}:host([scale=l][display-mode=nested][selection-appearance=icon]:not([selection-mode=none]):not([drag-handle])) .container{padding-inline-start:var(--calcite-spacing-lg)}.label,.description,.content-bottom{font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}:host([selected]) .icon{color:var(--calcite-list-icon-color, var(--calcite-color-text-1))}:host([selected]) .description{color:var(--calcite-list-description-text-color, var(--calcite-color-text-2))}.content-start{justify-content:flex-start}.content-end{justify-content:flex-end}.content-start,.content-end{flex:1 1 auto}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){align-self:center}.content-bottom{display:flex;flex-direction:column}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.expanded-container{color:var(--calcite-list-icon-color, var(--calcite-color-text-3));padding-inline:var(--calcite-spacing-xxs)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.expanded-container,.close{display:flex;align-items:center}.drag-container,.selection-container,.expanded-container{padding-block-end:var(--calcite-spacing-px)}.expanded-container,.selection-container{cursor:pointer}.actions-start,.actions-end{position:relative;padding:0}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-sort-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-sort-handle),.actions-end ::slotted(calcite-dropdown){color:inherit}.row:focus:after,.row:focus:before{position:absolute;content:"";inline-size:.125rem;z-index:var(--calcite-z-index-header);background-color:var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));inset-block:0}.row:focus:before{inset-inline-start:0}.row:focus:after{inset-inline-end:0}.container--border:focus:before{display:none}::slotted(calcite-list:empty){border-block-start-width:0px}.drag-container calcite-action,.drag-container ::slotted(calcite-action),.actions-start calcite-action,.actions-start ::slotted(calcite-action),.actions-end calcite-action,.actions-end ::slotted(calcite-action),.close calcite-action,.close ::slotted(calcite-action){align-items:center}.drag-container{margin-inline:var(--calcite-spacing-xxs)}:host([display-mode=nested]) .drag-container,:host([selection-appearance=icon]:not([selection-mode=none])) .drag-container{margin-inline:var(--calcite-spacing-xxs) 0}:host([hidden]){display:none}[hidden]{display:none}`;
const focusMap = /* @__PURE__ */ new Map();
class ListItem extends LitElement {
  constructor() {
    super();
    this.actionsEndRef = createRef();
    this.actionsStartRef = createRef();
    this.containerRef = createRef();
    this.contentRef = createRef();
    this.defaultSlotRef = createRef();
    this.direction = useDirection();
    this.handleGridRef = createRef();
    this.messages = useT9n();
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.hasActionsEnd = false;
    this.hasActionsStart = false;
    this.hasContentBottom = false;
    this.hasContentEnd = false;
    this.hasContentStart = false;
    this.hasCustomContent = false;
    this.expandable = false;
    this.active = false;
    this.bordered = false;
    this.sortDisabled = false;
    this.closable = false;
    this.closed = false;
    this.disabled = false;
    this.dragDisabled = false;
    this.dragHandle = false;
    this.expanded = false;
    this.filterHidden = false;
    this.displayMode = "flat";
    this.addToItems = [];
    this.moveToItems = [];
    this.scale = "m";
    this.selected = false;
    this.sortHandleOpen = false;
    this.unavailable = false;
    this.topLayerDisabled = false;
    this.calciteInternalFocusPreviousItem = createEvent({ cancelable: false });
    this.calciteInternalListItemActive = createEvent({ cancelable: false });
    this.calciteInternalListItemChange = createEvent({ cancelable: false });
    this.calciteInternalListItemSelect = createEvent({ cancelable: false });
    this.calciteInternalListItemSelectMultiple = createEvent({ cancelable: false });
    this.calciteInternalListItemToggle = createEvent({ cancelable: false });
    this.calciteListItemClose = createEvent({ cancelable: false });
    this.calciteListItemCollapse = createEvent({ cancelable: false });
    this.calciteListItemExpand = createEvent({ cancelable: false });
    this.calciteListItemSelect = createEvent({ cancelable: false });
    this.calciteListItemSortHandleBeforeClose = createEvent({ cancelable: false });
    this.calciteListItemSortHandleBeforeOpen = createEvent({ cancelable: false });
    this.calciteListItemSortHandleClose = createEvent({ cancelable: false });
    this.calciteListItemSortHandleOpen = createEvent({ cancelable: false });
    this.calciteListItemToggle = createEvent({ cancelable: false });
    this.listen("calciteInternalListItemGroupDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
    this.listen("calciteInternalListDefaultSlotChange", this.handleCalciteInternalListDefaultSlotChanges);
  }
  static {
    this.properties = { hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentEnd: [16, {}, { state: true }], hasContentStart: [16, {}, { state: true }], hasCustomContent: [16, {}, { state: true }], level: [16, {}, { state: true }], expandable: [16, {}, { state: true }], parentListEl: [16, {}, { state: true }], active: [5, {}, { type: Boolean }], bordered: [5, {}, { type: Boolean }], sortDisabled: [5, {}, { type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], dragDisabled: [7, {}, { reflect: true, type: Boolean }], dragHandle: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], filterHidden: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], metadata: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], addToItems: [0, {}, { attribute: false }], moveToItems: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], setPosition: [9, {}, { type: Number }], setSize: [9, {}, { type: Number }], sortHandleOpen: [7, {}, { reflect: true, type: Boolean }], unavailable: [7, {}, { reflect: true, type: Boolean }], value: 1, iconStart: [3, { type: String }, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
  }
  static {
    this.styles = [styles, styles$1];
  }
  get open() {
    return this.expanded;
  }
  set open(value) {
    logger.deprecated("property", {
      component: this,
      name: "open",
      removalVersion: 5,
      suggested: "expanded"
    });
    this.expanded = value;
  }
  async setFocus(options) {
    return this.focusSetter(() => {
      const { containerRef, parentListEl } = this;
      const focusIndex = focusMap.get(parentListEl);
      if (typeof focusIndex === "number") {
        const cell = this.getGridCells()[focusIndex];
        if (cell) {
          this.focusCell(cell);
          return;
        }
      }
      return { target: containerRef.value, includeContainer: true, strategy: "focusable" };
    }, options);
  }
  connectedCallback() {
    super.connectedCallback();
    const { el } = this;
    this.parentListEl = el.closest(listSelector) || void 0;
    this.level = getDepth(el) + 1;
    this.setSelectionDefaults();
  }
  willUpdate(changes) {
    if (changes.has("active") && (this.hasUpdated || this.active !== false)) {
      this.activeHandler(this.active);
    }
    if (changes.has("closed") && (this.hasUpdated || this.closed !== false)) {
      this.handleClosedChange();
    }
    if (changes.has("disabled") && (this.hasUpdated || this.disabled !== false)) {
      this.handleDisabledChange();
    }
    if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
      this.handleSelectedChange();
    }
    if (changes.has("sortHandleOpen") && (this.hasUpdated || this.sortHandleOpen !== false)) {
      this.sortHandleOpenHandler();
    }
    if (changes.has("displayMode") && this.hasUpdated) {
      this.handleExpandableChange(this.defaultSlotRef.value);
    }
    const metadataChanged = changes.has("metadata");
    const previousMetadata = changes.get("metadata");
    const shouldEmitMetadataChange = metadataChanged && !isEqual(this.metadata, previousMetadata);
    if ((changes.has("label") || changes.has("description") || shouldEmitMetadataChange) && this.hasUpdated) {
      this.emitCalciteInternalListItemChange();
    }
    if (changes.has("expanded") && this.hasUpdated) {
      if (this.expanded) {
        this.handleExpandedChange();
        this.calciteListItemExpand.emit();
      } else {
        this.calciteListItemCollapse.emit();
      }
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    focusMap.clear();
  }
  activeHandler(active) {
    if (!active) {
      this.focusCell(void 0, false);
    }
  }
  handleClosedChange() {
    this.emitCalciteInternalListItemChange();
  }
  handleDisabledChange() {
    this.emitCalciteInternalListItemChange();
  }
  handleExpandedChange() {
    this.emitCalciteInternalListItemToggle();
  }
  handleSelectedChange() {
    this.calciteInternalListItemSelect.emit();
  }
  sortHandleOpenHandler() {
    if (!this.sortHandleEl) {
      return;
    }
    this.sortHandleEl.open = this.sortHandleOpen;
  }
  handleCalciteInternalListDefaultSlotChanges(event) {
    event.stopPropagation();
    this.handleExpandableChange(this.defaultSlotRef.value);
  }
  setSortHandleEl(el) {
    this.sortHandleEl = el;
    this.sortHandleOpenHandler();
  }
  handleSortHandleBeforeOpen(event) {
    event.stopPropagation();
    this.calciteListItemSortHandleBeforeOpen.emit();
  }
  handleSortHandleBeforeClose(event) {
    event.stopPropagation();
    this.calciteListItemSortHandleBeforeClose.emit();
  }
  handleSortHandleClose(event) {
    event.stopPropagation();
    this.sortHandleOpen = false;
    this.calciteListItemSortHandleClose.emit();
  }
  handleSortHandleOpen(event) {
    event.stopPropagation();
    this.sortHandleOpen = true;
    this.calciteListItemSortHandleOpen.emit();
  }
  emitInternalListItemActive() {
    this.calciteInternalListItemActive.emit();
  }
  emitCalciteInternalListItemToggle() {
    this.calciteInternalListItemToggle.emit();
  }
  emitCalciteInternalListItemChange() {
    this.calciteInternalListItemChange.emit();
  }
  handleCloseClick() {
    this.closed = true;
    this.calciteListItemClose.emit();
  }
  handleContentSlotChange(event) {
    this.hasCustomContent = slotChangeHasAssignedElement(event);
  }
  handleActionsStartSlotChange(event) {
    this.hasActionsStart = slotChangeHasAssignedElement(event);
  }
  handleActionsEndSlotChange(event) {
    this.hasActionsEnd = slotChangeHasAssignedElement(event);
  }
  handleContentStartSlotChange(event) {
    this.hasContentStart = slotChangeHasAssignedElement(event);
  }
  handleContentEndSlotChange(event) {
    this.hasContentEnd = slotChangeHasAssignedElement(event);
  }
  handleContentBottomSlotChange(event) {
    this.hasContentBottom = slotChangeHasAssignedElement(event);
  }
  setSelectionDefaults() {
    const { parentListEl, selectionMode, selectionAppearance } = this;
    if (!parentListEl) {
      return;
    }
    if (!selectionMode) {
      this.selectionMode = parentListEl.selectionMode;
    }
    if (!selectionAppearance) {
      this.selectionAppearance = parentListEl.selectionAppearance;
    }
  }
  handleExpandableChange(slotEl) {
    if (!slotEl) {
      return;
    }
    const children = getListItemChildren(slotEl);
    children.lists.forEach((list) => {
      list.displayMode = this.displayMode;
    });
    this.expandable = this.displayMode === "nested" && (children.lists.length > 0 || children.items.length > 0);
  }
  handleDefaultSlotChange(event) {
    this.handleExpandableChange(event.target);
  }
  handleToggleClick() {
    this.toggle();
  }
  toggle(value = !this.expanded) {
    this.expanded = value;
    this.calciteListItemToggle.emit();
  }
  handleItemClick(event) {
    if (event.defaultPrevented) {
      return;
    }
    this.toggleSelected(event.shiftKey);
  }
  async toggleSelected(shiftKey) {
    const { selectionMode, selected } = this;
    if (this.disabled) {
      return;
    }
    if (selectionMode === "multiple" || selectionMode === "single") {
      this.selected = !selected;
    } else if (selectionMode === "single-persist") {
      this.selected = true;
    }
    this.calciteInternalListItemSelectMultiple.emit({
      selectMultiple: shiftKey && selectionMode === "multiple"
    });
    await this.updateComplete;
    this.calciteListItemSelect.emit();
  }
  getGridCells() {
    return [
      this.handleGridRef.value,
      this.actionsStartRef.value,
      this.contentRef.value,
      this.actionsEndRef.value
    ].filter((el) => !!(el && !el.hidden));
  }
  handleItemKeyDown(event) {
    if (event.defaultPrevented) {
      return;
    }
    const { key } = event;
    const composedPath = event.composedPath();
    const { containerRef, actionsStartRef: { value: actionsStartEl }, actionsEndRef: { value: actionsEndEl }, expanded, expandable } = this;
    const cells = this.getGridCells();
    const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
    if (key === "Enter" && actionsStartEl && !composedPath.includes(actionsStartEl) && actionsEndEl && !composedPath.includes(actionsEndEl)) {
      event.preventDefault();
      this.toggleSelected(event.shiftKey);
    } else if (key === "ArrowRight") {
      event.preventDefault();
      const nextIndex = currentIndex + 1;
      if (currentIndex === -1) {
        if (!expanded && expandable) {
          this.toggle(true);
          this.focusCell();
        } else if (cells[0]) {
          this.focusCell(cells[0]);
        }
      } else if (cells[currentIndex] && cells[nextIndex]) {
        this.focusCell(cells[nextIndex]);
      }
    } else if (key === "ArrowLeft") {
      event.preventDefault();
      const prevIndex = currentIndex - 1;
      if (currentIndex === -1) {
        this.focusCell();
        if (expanded && expandable) {
          this.toggle(false);
        } else {
          this.calciteInternalFocusPreviousItem.emit();
        }
      } else if (currentIndex === 0) {
        this.focusCell();
        containerRef.value.focus();
      } else if (cells[currentIndex] && cells[prevIndex]) {
        this.focusCell(cells[prevIndex]);
      }
    }
  }
  clearCellFocus() {
    this.focusCell();
  }
  setFocusCell(focusEl, focusedEl, saveFocusIndex) {
    const { parentListEl } = this;
    if (saveFocusIndex) {
      focusMap.set(parentListEl, void 0);
    }
    const gridCells = this.getGridCells();
    gridCells.forEach((tableCell) => {
      tableCell.removeAttribute("tabindex");
      tableCell.removeAttribute(activeCellTestAttribute);
    });
    if (!focusEl) {
      return;
    }
    if (focusEl === focusedEl) {
      focusEl.tabIndex = 0;
    } else {
      focusEl.removeAttribute("tabindex");
    }
    focusEl.setAttribute(activeCellTestAttribute, "");
    if (saveFocusIndex) {
      focusMap.set(parentListEl, gridCells.indexOf(focusEl));
    }
  }
  focusCell(focusEl, saveFocusIndex = true) {
    const focusedEl = getFirstTabbable(focusEl);
    this.setFocusCell(focusEl, focusedEl, saveFocusIndex);
    focusedEl?.focus();
  }
  renderSelected() {
    const { selected, selectionMode, selectionAppearance } = this;
    if (selectionMode === "none" || selectionAppearance !== "icon") {
      return null;
    }
    return keyed("selection-container", html`<div class=${safeClassMap({
      [CSS.selectionContainer]: true,
      [CSS.selectionContainerSingle]: selectionMode === "single" || selectionMode === "single-persist"
    })} @click=${this.handleItemClick}><calcite-icon .icon=${selected ? selectionMode === "multiple" ? ICONS.selectedMultiple : ICONS.selectedSingle : selectionMode === "multiple" ? ICONS.unselectedMultiple : ICONS.unselectedSingle} .scale=${getIconScale(this.scale)}></calcite-icon></div>`);
  }
  renderDragHandle() {
    const { label, dragHandle, dragDisabled, setPosition, setSize, moveToItems, sortDisabled, addToItems } = this;
    return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridRef)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
  }
  renderExpanded() {
    const { expanded, expandable, messages, displayMode, scale } = this;
    if (displayMode !== "nested") {
      return null;
    }
    const dir = this.direction;
    const icon = expandable ? expanded ? ICONS.open : dir === "rtl" ? ICONS.collapsedRTL : ICONS.collapsedLTR : ICONS.blank;
    const iconScale = getIconScale(scale);
    const tooltip = expandable ? expanded ? messages.collapse : messages.expand : void 0;
    const expandedClickHandler = expandable ? this.handleToggleClick : void 0;
    return keyed("expanded-container", html`<div class=${safeClassMap(CSS.expandedContainer)} @click=${expandedClickHandler} title=${tooltip ?? nothing}>${keyed(icon, html`<calcite-icon .icon=${icon} .scale=${iconScale}></calcite-icon>`)}</div>`);
  }
  renderActionsStart() {
    const { label, hasActionsStart } = this;
    return keyed("actions-start-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsStart]: true, [CSS.gridCell]: true })} .hidden=${!hasActionsStart} role=gridcell ${ref(this.actionsStartRef)}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
  }
  renderActionsEnd() {
    const { label, hasActionsEnd, closable, messages } = this;
    return keyed("actions-end-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsEnd]: true, [CSS.gridCell]: true })} .hidden=${!(hasActionsEnd || closable)} role=gridcell ${ref(this.actionsEndRef)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${closable ? keyed("close-action", html`<calcite-action class=${safeClassMap(CSS.close)} .icon=${ICONS.close} .label=${messages.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${messages.close}></calcite-action>`) : null}</div>`);
  }
  renderContentStart() {
    const { hasContentStart } = this;
    return html`<div class=${safeClassMap(CSS.contentStart)} .hidden=${!hasContentStart}><slot name=${SLOTS.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`;
  }
  renderCustomContent() {
    const { hasCustomContent } = this;
    return html`<div class=${safeClassMap(CSS.customContent)} .hidden=${!hasCustomContent}><slot name=${SLOTS.content} @slotchange=${this.handleContentSlotChange}></slot></div>`;
  }
  renderIconStart() {
    const { iconStart, iconFlipRtl, scale } = this;
    return iconStart ? keyed("icon-start", html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "start"} .icon=${iconStart} .scale=${getIconScale(scale)}></calcite-icon>`) : null;
  }
  renderIconEnd() {
    const { iconEnd, iconFlipRtl, scale } = this;
    return iconEnd ? keyed("icon-end", html`<calcite-icon class=${safeClassMap(CSS.icon)} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "end"} .icon=${iconEnd} .scale=${getIconScale(scale)}></calcite-icon>`) : null;
  }
  renderContentEnd() {
    const { hasContentEnd } = this;
    return html`<div class=${safeClassMap(CSS.contentEnd)} .hidden=${!hasContentEnd}><slot name=${SLOTS.contentEnd} @slotchange=${this.handleContentEndSlotChange}></slot></div>`;
  }
  renderContentBottom() {
    const { hasContentBottom } = this;
    return html`<div class=${safeClassMap(CSS.contentBottom)} .hidden=${!hasContentBottom}><slot name=${SLOTS.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div>`;
  }
  renderDefaultContainer() {
    return html`<div class=${safeClassMap({
      [CSS.nestedContainer]: true,
      [CSS.nestedContainerExpanded]: this.expandable && this.expanded
    })}><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot></div>`;
  }
  renderContentProperties() {
    const { label, description, hasCustomContent } = this;
    return !hasCustomContent && (!!label || !!description) ? keyed("content", html`<div class=${safeClassMap(CSS.content)}>${label ? keyed("label", html`<div class=${safeClassMap(CSS.label)}>${label}</div>`) : null}${description ? keyed("description", html`<div class=${safeClassMap(CSS.description)}>${description}</div>`) : null}</div>`) : null;
  }
  renderContentContainer() {
    const { description, label, selectionMode, hasCustomContent, unavailable } = this;
    const hasCenterContent = hasCustomContent || !!label || !!description;
    const content = [
      this.renderContentStart(),
      this.renderIconStart(),
      this.renderCustomContent(),
      this.renderContentProperties(),
      this.renderIconEnd(),
      this.renderContentEnd()
    ];
    return keyed("content-container", html`<div .ariaLabel=${label} class=${safeClassMap({
      [CSS.gridCell]: true,
      [CSS.contentContainer]: true,
      [CSS.contentContainerUnavailable]: unavailable,
      [CSS.contentContainerSelectable]: selectionMode !== "none",
      [CSS.contentContainerHasCenterContent]: hasCenterContent
    })} @click=${this.handleItemClick} role=gridcell ${ref(this.contentRef)}>${content}</div>`);
  }
  render() {
    const { expandable, expanded, level, active, label, selected, selectionAppearance, selectionMode, interactionMode, closed, filterHidden, bordered, disabled, hasContentBottom } = this;
    const wrapperBordered = bordered && hasContentBottom;
    const contentContainerWrapperBordered = bordered && !hasContentBottom;
    const showSelectionBorder = selectionMode !== "none" && selectionAppearance === "border";
    const showSelectionHighlight = selectionMode !== "none" && selectionAppearance === "highlight";
    const containerInteractive = interactionMode === "interactive";
    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered })}><div .ariaExpanded=${expandable ? expanded : void 0} .ariaLabel=${label} .ariaLevel=${level} .ariaSelected=${selected} class=${safeClassMap({
      [CSS.row]: true,
      [CSS.container]: true,
      [CSS.containerHover]: containerInteractive,
      [CSS.containerBorder]: showSelectionBorder,
      [CSS.containerBorderSelected]: showSelectionBorder && selected,
      [CSS.containerHighlightSelected]: showSelectionHighlight && selected
    })} .hidden=${closed || filterHidden} @focus=${this.clearCellFocus} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
      [CSS.contentContainerWrapper]: true,
      [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered
    })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });
  }
}
customElement("calcite-list-item", ListItem);
export {
  ListItem
};
