{"version":3,"names":["CSS","wrapper","wrapperBordered","container","containerHover","containerBorder","containerBorderSelected","containerBorderUnselected","contentContainer","contentContainerUnavailable","contentContainerSelectable","contentContainerHasCenterContent","nestedContainer","nestedContainerOpen","content","customContent","actionsStart","contentStart","label","description","contentEnd","contentBottom","actionsEnd","selectionContainer","selectionContainerSingle","openContainer","dragContainer","close","SLOTS","MAX_COLUMNS","ICONS","selectedMultiple","selectedSingle","unselectedMultiple","unselectedSingle","closedLTR","closedRTL","open","blank","activeCellTestAttribute","listSelector","listItemGroupSelector","listItemSelector","getListItemChildLists","slotEl","Array","from","assignedElements","flatten","filter","el","matches","getListItemChildren","listItemGroupChildren","map","group","querySelectorAll","reduce","previousValue","currentValue","listItemChildren","listItemListChildren","list","updateListItemChildren","forEach","listItem","setPosition","indexOf","setSize","length","getDepth","element","includeGroup","isBrowser","expression","result","document","evaluate","XPathResult","UNORDERED_NODE_SNAPSHOT_TYPE","snapshotLength","table","scrim","stack","tableContainer","sticky","assistiveText","debounceTimeout","filterNoResults","filterActionsStart","filterActionsEnd","listCss","CalciteListStyle0","parentSelector","List","this","dragSelector","focusableItems","handleSelector","listItems","mutationObserver","createObserver","updateListItems","performFilter","visibleItems","handleDefaultSlotChange","event","target","parentListEl","calciteInternalListDefaultSlotChange","emit","handleFilterActionsStartSlotChange","hasFilterActionsStart","slotChangeHasAssignedElement","handleFilterActionsEndSlotChange","hasFilterActionsEnd","handleFilterNoResultsSlotChange","hasFilterNoResults","setActiveListItem","some","item","active","updateSelectedItems","selectedItems","selected","calciteListChange","borderItems","filterHidden","allParentListItemsOpen","bordered","updateFilteredItems","filteredData","filterText","values","value","lastDescendantItems","every","li","contains","filteredItems","includes","visibleParents","WeakSet","filterElements","calciteListFilter","setFilterEl","filterEl","handleFilterChange","stopPropagation","currentTarget","updateFilteredData","getItemData","metadata","debounce","options","emitFilterChange","selectionAppearance","selectionMode","dragEnabled","filterEnabled","items","closest","dragHandle","setUpSorting","dataForFilter","filterAndUpdateData","closed","hidden","disabled","focusRow","focusEl","setFocus","isNavigable","parentListItemEl","parentElement","handleListKeydown","defaultPrevented","key","navigableItems","currentIndex","findIndex","preventDefault","nextIndex","prevIndex","homeItem","endItem","handleFilterTextChange","handleFilterPropsChange","onMessagesChange","handleListItemChange","handleCalciteListItemToggle","handleCalciteInternalFocusPreviousItem","handleCalciteInternalListItemActive","handleCalciteListItemSelect","handleCalciteInternalAssistiveTextChange","detail","message","handleCalciteHandleNudge","handleNudgeEvent","handleCalciteInternalListItemSelect","handleCalciteInternalListItemSelectMultiple","lastSelectedInfo","selectedItem","selectMultiple","lastSelectedIndex","startIndex","Math","min","endIndex","max","slice","handleCalciteInternalListItemChange","handleCalciteInternalListItemGroupDefaultSlotChange","connectedCallback","connectLocalized","connectMessages","connectObserver","setParentList","componentWillLoad","setUpLoadableComponent","setUpMessages","componentDidRender","updateHostInteraction","componentDidLoad","setComponentLoaded","disconnectedCallback","disconnectObserver","disconnectSortableComponent","disconnectLocalized","disconnectMessages","effectiveLocaleChange","updateMessages","effectiveLocale","componentFocusable","find","render","loading","filterPlaceholder","filterProps","h","InteractiveContainer","class","renderItemAriaLive","toAriaBoolean","onKeyDown","role","colSpan","name","onSlotchange","slot","STACK_SLOTS","onCalciteFilterChange","placeholder","ref","messages","numberingSystem","numberStringFormatter","numberFormatOptions","locale","total","replace","localize","toString","observe","childList","subtree","disconnect","connectSortableComponent","onGlobalDragStart","onGlobalDragEnd","onDragEnd","calciteListDragEnd","onDragStart","calciteListDragStart","onDragSort","calciteListOrderChange","has","closestParent","add","parentItem","direction","composedPath","handle","tagName","dragEl","parentEl","sameParentItems","lastIndex","oldIndex","newIndex","blurUnselectDisabled","referenceEl","nextSibling","insertBefore","fromEl","toEl","then","listItemCss","CalciteListItemStyle0","focusMap","Map","ListItem","dragHandleSelectedChangeHandler","dragSelected","calciteListItemDragHandleChange","emitInternalListItemActive","calciteInternalListItemActive","focusCellHandle","handleCellFocusIn","handleGridEl","focusCellActionsStart","actionsStartEl","focusCellContent","contentEl","focusCellActionsEnd","actionsEndEl","handleCloseClick","calciteListItemClose","handleContentSlotChange","hasCustomContent","handleActionsStartSlotChange","hasActionsStart","handleActionsEndSlotChange","hasActionsEnd","handleContentStartSlotChange","hasContentStart","handleContentEndSlotChange","hasContentEnd","handleContentBottomSlotChange","hasContentBottom","handleOpenableChange","handleToggleClick","toggle","calciteListItemToggle","handleItemClick","toggleSelected","shiftKey","calciteInternalListItemSelectMultiple","calciteListItemSelect","handleItemKeyDown","containerEl","openable","cells","getGridCells","cell","focusCell","calciteInternalFocusPreviousItem","focus","focusCellNull","setFocusCell","getFirstTabbable","focusedEl","saveFocusIndex","set","gridCells","tableCell","tabIndex","removeAttribute","setAttribute","activeHandler","handleClosedChange","emitCalciteInternalListItemChange","handleDisabledChange","handleOpenChange","emitCalciteInternalListItemToggle","handleSelectedChange","calciteInternalListItemSelect","handleCalciteInternalListDefaultSlotChanges","defaultSlotEl","level","setSelectionDefaults","focusIndex","get","renderSelected","onClick","icon","scale","renderDragHandle","dragDisabled","onFocusin","onCalciteHandleChange","renderOpen","dir","getElementDir","tooltip","collapse","expand","title","renderActionsStart","renderActionsEnd","closable","appearance","text","renderContentStart","renderCustomContent","renderContentEnd","renderContentBottom","renderDefaultContainer","renderContentProperties","renderContentContainer","unavailable","hasCenterContent","showBorder","borderSelected","borderUnselected","Host","onFocus","calciteInternalListItemToggle","calciteInternalListItemChange","listItemChildLists","heading","listItemGroupCss","CalciteListItemGroupStyle0","ListItemGroup","calciteInternalListItemGroupDefaultSlotChange"],"sources":["src/components/list-item/resources.ts","src/components/list-item/utils.ts","src/components/list/resources.ts","src/components/list/list.scss?tag=calcite-list&encapsulation=shadow","src/components/list/list.tsx","src/components/list-item/list-item.scss?tag=calcite-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx","src/components/list-item-group/resources.ts","src/components/list-item-group/list-item-group.scss?tag=calcite-list-item-group&encapsulation=shadow","src/components/list-item-group/list-item-group.tsx"],"sourcesContent":["export const CSS = {\n wrapper: \"wrapper\",\n wrapperBordered: \"wrapper--bordered\",\n container: \"container\",\n containerHover: \"container--hover\",\n containerBorder: \"container--border\",\n containerBorderSelected: \"container--border-selected\",\n containerBorderUnselected: \"container--border-unselected\",\n contentContainer: \"content-container\",\n contentContainerUnavailable: \"content-container--unavailable\",\n contentContainerSelectable: \"content-container--selectable\",\n contentContainerHasCenterContent: \"content-container--has-center-content\",\n nestedContainer: \"nested-container\",\n nestedContainerOpen: \"nested-container--open\",\n content: \"content\",\n customContent: \"custom-content\",\n actionsStart: \"actions-start\",\n contentStart: \"content-start\",\n label: \"label\",\n description: \"description\",\n contentEnd: \"content-end\",\n contentBottom: \"content-bottom\",\n actionsEnd: \"actions-end\",\n selectionContainer: \"selection-container\",\n selectionContainerSingle: \"selection-container--single\",\n openContainer: \"open-container\",\n dragContainer: \"drag-container\",\n close: \"close\",\n};\n\nexport const SLOTS = {\n actionsStart: \"actions-start\",\n contentStart: \"content-start\",\n content: \"content\",\n contentBottom: \"content-bottom\",\n contentEnd: \"content-end\",\n actionsEnd: \"actions-end\",\n};\n\n// Set to zero to extend until the end of the table section.\nexport const MAX_COLUMNS = 0;\n\nexport const ICONS = {\n selectedMultiple: \"check-square-f\",\n selectedSingle: \"bullet-point-large\",\n unselectedMultiple: \"square\",\n unselectedSingle: \"bullet-point-large\",\n closedLTR: \"chevron-right\",\n closedRTL: \"chevron-left\",\n open: \"chevron-down\",\n blank: \"blank\",\n close: \"x\",\n} as const;\n\nexport const activeCellTestAttribute = \"data-test-active\";\n","import { isBrowser } from \"../../utils/browser\";\n\nconst listSelector = \"calcite-list\";\nconst listItemGroupSelector = \"calcite-list-item-group\";\nconst listItemSelector = \"calcite-list-item\";\n\nexport function getListItemChildLists(slotEl: HTMLSlotElement): HTMLCalciteListElement[] {\n return Array.from(\n slotEl.assignedElements({ flatten: true }).filter((el): el is HTMLCalciteListElement => el.matches(listSelector)),\n );\n}\n\nexport function getListItemChildren(slotEl: HTMLSlotElement): HTMLCalciteListItemElement[] {\n const assignedElements = slotEl.assignedElements({ flatten: true });\n\n const listItemGroupChildren = assignedElements\n .filter((el): el is HTMLCalciteListItemGroupElement => el?.matches(listItemGroupSelector))\n .map((group) => Array.from(group.querySelectorAll(listItemSelector)))\n .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);\n\n const listItemChildren = assignedElements.filter((el): el is HTMLCalciteListItemElement =>\n el?.matches(listItemSelector),\n );\n\n const listItemListChildren = assignedElements\n .filter((el): el is HTMLCalciteListElement => el?.matches(listSelector))\n .map((list) => Array.from(list.querySelectorAll(listItemSelector)))\n .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);\n\n return [...listItemListChildren, ...listItemGroupChildren, ...listItemChildren];\n}\n\nexport function updateListItemChildren(listItemChildren: HTMLCalciteListItemElement[]): void {\n listItemChildren.forEach((listItem) => {\n listItem.setPosition = listItemChildren.indexOf(listItem) + 1;\n listItem.setSize = listItemChildren.length;\n });\n}\n\nexport function getDepth(element: HTMLElement, includeGroup = false): number {\n if (!isBrowser()) {\n return 0;\n }\n\n const expression = includeGroup\n ? \"ancestor::calcite-list-item | ancestor::calcite-list-item-group\"\n : \"ancestor::calcite-list-item\";\n\n const result = document.evaluate(expression, element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);\n\n return result.snapshotLength;\n}\n","export const CSS = {\n container: \"container\",\n table: \"table\",\n scrim: \"scrim\",\n stack: \"stack\",\n tableContainer: \"table-container\",\n sticky: \"sticky-pos\",\n assistiveText: \"assistive-text\",\n};\n\nexport const debounceTimeout = 0;\n\nexport type SelectionAppearance = \"border\" | \"icon\";\n\nexport const SLOTS = {\n filterNoResults: \"filter-no-results\",\n filterActionsStart: \"filter-actions-start\",\n filterActionsEnd: \"filter-actions-end\",\n};\n",":host {\n @apply block;\n}\n\n@include disabled();\n\n.container {\n position: relative;\n}\n\n.table-container {\n @apply box-border\n flex\n w-full\n flex-col\n bg-transparent;\n * {\n @apply box-border;\n }\n}\n\n.table {\n @apply w-full border-collapse;\n}\n\n.stack {\n --calcite-stack-padding-inline: 0;\n --calcite-stack-padding-block: 0;\n}\n\n.sticky-pos {\n @apply sticky\n top-0\n z-sticky\n bg-foreground-1;\n & th {\n @apply p-0;\n }\n}\n\n.assistive-text {\n @apply sr-only;\n}\n\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Listen,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport Sortable from \"sortablejs\";\nimport { debounce } from \"lodash-es\";\nimport { slotChangeHasAssignedElement, toAriaBoolean } from \"../../utils/dom\";\nimport {\n InteractiveComponent,\n InteractiveContainer,\n updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { createObserver } from \"../../utils/observers\";\nimport { SelectionMode } from \"../interfaces\";\nimport { ItemData } from \"../list-item/interfaces\";\nimport { MAX_COLUMNS } from \"../list-item/resources\";\nimport { getListItemChildren, updateListItemChildren } from \"../list-item/utils\";\nimport {\n connectSortableComponent,\n disconnectSortableComponent,\n SortableComponent,\n} from \"../../utils/sortableComponent\";\nimport { SLOTS as STACK_SLOTS } from \"../stack/resources\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { HandleNudge } from \"../handle/interfaces\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport {\n connectLocalized,\n disconnectLocalized,\n LocalizedComponent,\n NumberingSystem,\n numberStringFormatter,\n} from \"../../utils/locale\";\nimport { CSS, debounceTimeout, SelectionAppearance, SLOTS } from \"./resources\";\nimport { ListMessages } from \"./assets/list/t9n\";\nimport { ListDragDetail } from \"./interfaces\";\n\nconst listItemSelector = \"calcite-list-item\";\nconst parentSelector = \"calcite-list-item-group, calcite-list-item\" as const;\n\n/**\n * A general purpose list that enables users to construct list items that conform to Calcite styling.\n *\n * @slot - A slot for adding `calcite-list-item` elements.\n * @slot filter-actions-start - A slot for adding actionable `calcite-action` elements before the filter component.\n * @slot filter-actions-end - A slot for adding actionable `calcite-action` elements after the filter component.\n * @slot filter-no-results - When `filterEnabled` is `true`, a slot for adding content to display when no results are found.\n */\n@Component({\n tag: \"calcite-list\",\n styleUrl: \"list.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class List\n implements\n InteractiveComponent,\n LoadableComponent,\n LocalizedComponent,\n SortableComponent,\n T9nComponent\n{\n // --------------------------------------------------------------------------\n //\n // Properties\n //\n // --------------------------------------------------------------------------\n\n /**\n * When `true`, interaction is prevented and the component is displayed with lower opacity.\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * When provided, the method will be called to determine whether the element can move from the list.\n */\n @Prop() canPull: (detail: ListDragDetail) => boolean;\n\n /**\n * When provided, the method will be called to determine whether the element can be added from another list.\n */\n @Prop() canPut: (detail: ListDragDetail) => boolean;\n\n /**\n * When `true`, `calcite-list-item`s are sortable via a draggable button.\n */\n @Prop({ reflect: true }) dragEnabled = false;\n\n /**\n * The list's group identifier.\n *\n * To drag elements from one list into another, both lists must have the same group value.\n */\n @Prop({ reflect: true }) group?: string;\n\n /**\n * When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s.\n */\n @Prop({ reflect: true }) filterEnabled = false;\n\n /**\n * The currently filtered `calcite-list-item`s.\n *\n * @readonly\n */\n @Prop({ mutable: true }) filteredItems: HTMLCalciteListItemElement[] = [];\n\n /**\n * The currently filtered `calcite-list-item` data.\n *\n * @readonly\n */\n @Prop({ mutable: true }) filteredData: ItemData = [];\n\n /**\n * Placeholder text for the component's filter input field.\n */\n @Prop({ reflect: true }) filterPlaceholder: string;\n\n /**\n * Text for the component's filter input field.\n */\n @Prop({ reflect: true, mutable: true }) filterText: string;\n\n @Watch(\"filterText\")\n async handleFilterTextChange(): Promise {\n this.performFilter();\n }\n\n /**\n * Specifies an accessible name for the component.\n */\n @Prop() label: string;\n\n /**\n * When `true`, a busy indicator is displayed.\n */\n @Prop({ reflect: true }) loading = false;\n\n /**\n * Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value).\n */\n @Prop() filterProps: string[];\n\n @Watch(\"filterProps\")\n async handleFilterPropsChange(): Promise {\n this.performFilter();\n }\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: ListMessages;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n /**\n * Specifies the Unicode numeral system used by the component for localization.\n */\n @Prop() numberingSystem: NumberingSystem;\n\n /**\n * One of the items within the list can be opened.\n *\n * @internal\n */\n @Prop() openable = false;\n\n /**\n * The currently selected items.\n *\n * @readonly\n */\n @Prop({ mutable: true }) selectedItems: HTMLCalciteListItemElement[] = [];\n\n /**\n * Specifies the selection mode of the component, where:\n *\n * `\"multiple\"` allows any number of selections,\n *\n * `\"single\"` allows only one selection,\n *\n * `\"single-persist\"` allows one selection and prevents de-selection, and\n *\n * `\"none\"` does not allow any selections.\n */\n @Prop({ reflect: true }) selectionMode: Extract<\n \"none\" | \"multiple\" | \"single\" | \"single-persist\",\n SelectionMode\n > = \"none\";\n\n /**\n * Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).\n */\n @Prop({ reflect: true }) selectionAppearance: SelectionAppearance = \"icon\";\n\n @Watch(\"filterEnabled\")\n @Watch(\"group\")\n @Watch(\"dragEnabled\")\n @Watch(\"selectionMode\")\n @Watch(\"selectionAppearance\")\n handleListItemChange(): void {\n this.updateListItems({ performFilter: true });\n }\n\n //--------------------------------------------------------------------------\n //\n // Events\n //\n //--------------------------------------------------------------------------\n\n /**\n * Fires when the component's selected items have changed.\n */\n @Event({ cancelable: false }) calciteListChange: EventEmitter;\n\n /**\n * Fires when the component's dragging has ended.\n */\n @Event({ cancelable: false }) calciteListDragEnd: EventEmitter;\n\n /**\n * Fires when the component's dragging has started.\n */\n @Event({ cancelable: false }) calciteListDragStart: EventEmitter;\n\n /**\n * Fires when the component's filter has changed.\n */\n @Event({ cancelable: false }) calciteListFilter: EventEmitter;\n\n /**\n * Fires when the component's item order changes.\n */\n @Event({ cancelable: false }) calciteListOrderChange: EventEmitter;\n\n /**\n * Fires when the default slot has changes in order to notify parent lists.\n */\n @Event({ cancelable: false }) calciteInternalListDefaultSlotChange: EventEmitter;\n\n @Listen(\"calciteInternalListItemToggle\")\n handleCalciteListItemToggle(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n this.borderItems();\n }\n\n @Listen(\"calciteInternalFocusPreviousItem\")\n handleCalciteInternalFocusPreviousItem(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n\n const { focusableItems } = this;\n const currentIndex = focusableItems.findIndex((listItem) => listItem.active);\n\n const prevIndex = currentIndex - 1;\n\n if (focusableItems[prevIndex]) {\n this.focusRow(focusableItems[prevIndex]);\n }\n }\n\n @Listen(\"calciteInternalListItemActive\")\n handleCalciteInternalListItemActive(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n const target = event.target as HTMLCalciteListItemElement;\n const { listItems } = this;\n\n listItems.forEach((listItem) => {\n listItem.active = listItem === target;\n });\n }\n\n @Listen(\"calciteListItemSelect\")\n handleCalciteListItemSelect(): void {\n if (this.parentListEl) {\n return;\n }\n\n this.updateSelectedItems(true);\n }\n\n @Listen(\"calciteInternalAssistiveTextChange\")\n handleCalciteInternalAssistiveTextChange(event: CustomEvent): void {\n this.assistiveText = event.detail.message;\n event.stopPropagation();\n }\n\n @Listen(\"calciteHandleNudge\")\n handleCalciteHandleNudge(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n this.handleNudgeEvent(event);\n }\n\n @Listen(\"calciteInternalListItemSelect\")\n handleCalciteInternalListItemSelect(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n const target = event.target as HTMLCalciteListItemElement;\n const { listItems, selectionMode } = this;\n\n if (target.selected && (selectionMode === \"single\" || selectionMode === \"single-persist\")) {\n listItems.forEach((listItem) => (listItem.selected = listItem === target));\n }\n\n this.updateSelectedItems();\n }\n\n @Listen(\"calciteInternalListItemSelectMultiple\")\n handleCalciteInternalListItemSelectMultiple(\n event: CustomEvent<{\n selectMultiple: boolean;\n }>,\n ): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n const { target, detail } = event;\n const { focusableItems, lastSelectedInfo } = this;\n const selectedItem = target as HTMLCalciteListItemElement;\n\n if (detail.selectMultiple && !!lastSelectedInfo) {\n const currentIndex = focusableItems.indexOf(selectedItem);\n const lastSelectedIndex = focusableItems.indexOf(lastSelectedInfo.selectedItem);\n const startIndex = Math.min(lastSelectedIndex, currentIndex);\n const endIndex = Math.max(lastSelectedIndex, currentIndex);\n\n focusableItems\n .slice(startIndex, endIndex + 1)\n .forEach((item) => (item.selected = lastSelectedInfo.selected));\n } else {\n this.lastSelectedInfo = { selectedItem, selected: selectedItem.selected };\n }\n }\n\n @Listen(\"calciteInternalListItemChange\")\n handleCalciteInternalListItemChange(event: CustomEvent): void {\n if (this.parentListEl) {\n return;\n }\n\n event.stopPropagation();\n this.updateListItems();\n }\n\n @Listen(\"calciteInternalListItemGroupDefaultSlotChange\")\n handleCalciteInternalListItemGroupDefaultSlotChange(event: CustomEvent): void {\n event.stopPropagation();\n }\n\n //--------------------------------------------------------------------------\n //\n // Lifecycle\n //\n //--------------------------------------------------------------------------\n\n connectedCallback(): void {\n connectLocalized(this);\n connectMessages(this);\n this.connectObserver();\n this.updateListItems({ performFilter: true });\n this.setUpSorting();\n this.setParentList();\n }\n\n async componentWillLoad(): Promise {\n setUpLoadableComponent(this);\n await setUpMessages(this);\n }\n\n componentDidRender(): void {\n updateHostInteraction(this);\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n disconnectedCallback(): void {\n this.disconnectObserver();\n disconnectSortableComponent(this);\n disconnectLocalized(this);\n disconnectMessages(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @State() effectiveLocale = \"\";\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() defaultMessages: ListMessages;\n\n @Element() el: HTMLCalciteListElement;\n\n @State() assistiveText: string;\n\n @State() dataForFilter: ItemData = [];\n\n dragSelector = listItemSelector;\n\n filterEl: HTMLCalciteFilterElement;\n\n focusableItems: HTMLCalciteListItemElement[] = [];\n\n handleSelector = \"calcite-handle\";\n\n @State() hasFilterActionsEnd = false;\n\n @State() hasFilterActionsStart = false;\n\n @State() hasFilterNoResults = false;\n\n listItems: HTMLCalciteListItemElement[] = [];\n\n mutationObserver = createObserver(\"mutation\", () =>\n this.updateListItems({ performFilter: true }),\n );\n\n visibleItems: HTMLCalciteListItemElement[] = [];\n\n parentListEl: HTMLCalciteListElement;\n\n sortable: Sortable;\n\n private lastSelectedInfo: { selectedItem: HTMLCalciteListItemElement; selected: boolean };\n\n // --------------------------------------------------------------------------\n //\n // Public Methods\n //\n // --------------------------------------------------------------------------\n\n /**\n * Sets focus on the component's first focusable element.\n *\n * @returns {Promise}\n */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n\n if (this.filterEnabled) {\n return this.filterEl?.setFocus();\n }\n\n return this.focusableItems.find((listItem) => listItem.active)?.setFocus();\n }\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n render(): VNode {\n const {\n loading,\n label,\n disabled,\n dataForFilter,\n filterEnabled,\n filterPlaceholder,\n filterText,\n filteredItems,\n hasFilterActionsStart,\n hasFilterActionsEnd,\n hasFilterNoResults,\n filterProps,\n } = this;\n return (\n \n
\n {this.dragEnabled ? (\n \n {this.assistiveText}\n \n ) : null}\n {this.renderItemAriaLive()}\n {loading ? : null}\n \n {filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (\n \n \n \n \n \n \n \n \n \n \n \n ) : null}\n \n \n \n \n
\n \n
\n );\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Methods\n //\n // --------------------------------------------------------------------------\n\n private renderItemAriaLive(): VNode {\n const {\n messages,\n filteredItems,\n parentListEl,\n effectiveLocale,\n numberingSystem,\n filterEnabled,\n filterText,\n filteredData,\n } = this;\n\n numberStringFormatter.numberFormatOptions = {\n locale: effectiveLocale,\n numberingSystem,\n };\n\n return !parentListEl ? (\n
\n {filterEnabled && filterText && filteredData?.length ? (\n
{messages.filterEnabled}
\n ) : null}\n
\n {messages.total.replace(\n \"{count}\",\n numberStringFormatter.localize(filteredItems.length.toString()),\n )}\n
\n {filteredItems.length ? (\n
    \n {filteredItems.map((item) => (\n
  1. {item.label}
  2. \n ))}\n
\n ) : null}\n
\n ) : null;\n }\n\n private connectObserver(): void {\n this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n }\n\n private disconnectObserver(): void {\n this.mutationObserver?.disconnect();\n }\n\n private setUpSorting(): void {\n const { dragEnabled } = this;\n\n if (!dragEnabled) {\n return;\n }\n\n connectSortableComponent(this);\n }\n\n onGlobalDragStart(): void {\n this.disconnectObserver();\n }\n\n onGlobalDragEnd(): void {\n this.connectObserver();\n }\n\n onDragEnd(detail: ListDragDetail): void {\n this.calciteListDragEnd.emit(detail);\n }\n\n onDragStart(detail: ListDragDetail): void {\n this.calciteListDragStart.emit(detail);\n }\n\n onDragSort(detail: ListDragDetail): void {\n this.setParentList();\n this.updateListItems();\n\n this.calciteListOrderChange.emit(detail);\n }\n\n private setParentList(): void {\n this.parentListEl = this.el.parentElement?.closest(\"calcite-list\");\n }\n\n private handleDefaultSlotChange = (event: Event): void => {\n updateListItemChildren(getListItemChildren(event.target as HTMLSlotElement));\n if (this.parentListEl) {\n this.calciteInternalListDefaultSlotChange.emit();\n }\n };\n\n private handleFilterActionsStartSlotChange = (event: Event): void => {\n this.hasFilterActionsStart = slotChangeHasAssignedElement(event);\n };\n\n private handleFilterActionsEndSlotChange = (event: Event): void => {\n this.hasFilterActionsEnd = slotChangeHasAssignedElement(event);\n };\n\n private handleFilterNoResultsSlotChange = (event: Event): void => {\n this.hasFilterNoResults = slotChangeHasAssignedElement(event);\n };\n\n private setActiveListItem = (): void => {\n const { focusableItems } = this;\n\n if (!focusableItems.some((item) => item.active)) {\n if (focusableItems[0]) {\n focusableItems[0].active = true;\n }\n }\n };\n\n private updateSelectedItems = (emit = false): void => {\n this.selectedItems = this.visibleItems.filter((item) => item.selected);\n if (emit) {\n this.calciteListChange.emit();\n }\n };\n\n private filterElements({\n el,\n filteredItems,\n visibleParents,\n }: {\n el: HTMLCalciteListItemElement | HTMLCalciteListItemGroupElement;\n filteredItems: HTMLCalciteListItemElement[];\n visibleParents: WeakSet;\n }): void {\n const filterHidden =\n !visibleParents.has(el) && !filteredItems.includes(el as HTMLCalciteListItemElement);\n\n el.filterHidden = filterHidden;\n\n const closestParent = el.parentElement.closest<\n HTMLCalciteListItemElement | HTMLCalciteListItemGroupElement\n >(parentSelector);\n\n if (!closestParent) {\n return;\n }\n\n if (!filterHidden) {\n visibleParents.add(closestParent);\n }\n\n this.filterElements({\n el: closestParent,\n filteredItems,\n visibleParents,\n });\n }\n\n private allParentListItemsOpen(item: HTMLCalciteListItemElement): boolean {\n const parentItem = item.parentElement?.closest(listItemSelector);\n\n if (!parentItem) {\n return true;\n } else if (!parentItem.open) {\n return false;\n }\n\n return this.allParentListItemsOpen(parentItem);\n }\n\n private borderItems = (): void => {\n const visibleItems = this.visibleItems.filter(\n (item) => !item.filterHidden && this.allParentListItemsOpen(item),\n );\n\n visibleItems.forEach(\n (item) => (item.bordered = item !== visibleItems[visibleItems.length - 1]),\n );\n };\n\n private updateFilteredItems = (emit = false): void => {\n const { visibleItems, filteredData, filterText } = this;\n\n const values = filteredData.map((item) => item.value);\n\n const lastDescendantItems = visibleItems?.filter((listItem) =>\n visibleItems.every((li) => li === listItem || !listItem.contains(li)),\n );\n\n const filteredItems =\n visibleItems.filter((item) => !filterText || values.includes(item.value)) || [];\n\n const visibleParents = new WeakSet();\n\n lastDescendantItems.forEach((listItem) =>\n this.filterElements({ el: listItem, filteredItems, visibleParents }),\n );\n\n this.filteredItems = filteredItems;\n\n if (emit) {\n this.calciteListFilter.emit();\n }\n };\n\n private updateFilteredData(emit = false): void {\n const { filterEl } = this;\n\n if (!filterEl) {\n return;\n }\n\n if (filterEl.filteredItems) {\n this.filteredData = filterEl.filteredItems as ItemData;\n }\n\n this.updateListItems({ emitFilterChange: emit });\n }\n\n private async filterAndUpdateData(): Promise {\n await this.filterEl?.filter(this.filterText);\n this.updateFilteredData();\n }\n\n private performFilter(): void {\n const { filterEl, filterText, filterProps } = this;\n\n if (!filterEl) {\n return;\n }\n\n filterEl.value = filterText;\n filterEl.filterProps = filterProps;\n this.filterAndUpdateData();\n }\n\n private setFilterEl = (el: HTMLCalciteFilterElement): void => {\n this.filterEl = el;\n this.performFilter();\n };\n\n private handleFilterChange = (event: CustomEvent): void => {\n event.stopPropagation();\n const { value } = event.currentTarget as HTMLCalciteFilterElement;\n this.filterText = value;\n this.updateFilteredData(true);\n };\n\n private getItemData = (): ItemData => {\n return this.listItems.map((item) => ({\n label: item.label,\n description: item.description,\n metadata: item.metadata,\n value: item.value,\n }));\n };\n\n private updateListItems = debounce(\n (options?: { emitFilterChange?: boolean; performFilter?: boolean }): void => {\n const emitFilterChange = options?.emitFilterChange ?? false;\n const performFilter = options?.performFilter ?? false;\n\n const { selectionAppearance, selectionMode, dragEnabled, el, filterEl, filterEnabled } = this;\n\n const items = Array.from(this.el.querySelectorAll(listItemSelector));\n\n items.forEach((item) => {\n item.selectionAppearance = selectionAppearance;\n item.selectionMode = selectionMode;\n if (item.closest(\"calcite-list\") === el) {\n item.dragHandle = dragEnabled;\n }\n });\n\n if (this.parentListEl) {\n this.setUpSorting();\n return;\n }\n\n this.listItems = items;\n if (filterEnabled && performFilter) {\n this.dataForFilter = this.getItemData();\n\n if (filterEl) {\n filterEl.items = this.dataForFilter;\n this.filterAndUpdateData();\n }\n }\n this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);\n this.updateFilteredItems(emitFilterChange);\n this.borderItems();\n this.focusableItems = this.filteredItems.filter((item) => !item.disabled);\n this.setActiveListItem();\n this.updateSelectedItems();\n this.setUpSorting();\n },\n debounceTimeout,\n );\n\n private focusRow = (focusEl: HTMLCalciteListItemElement): void => {\n const { focusableItems } = this;\n\n if (!focusEl) {\n return;\n }\n\n focusableItems.forEach((listItem) => (listItem.active = listItem === focusEl));\n\n focusEl.setFocus();\n };\n\n private isNavigable = (listItem: HTMLCalciteListItemElement): boolean => {\n const parentListItemEl = listItem.parentElement?.closest(listItemSelector);\n\n if (!parentListItemEl) {\n return true;\n }\n\n return parentListItemEl.open && this.isNavigable(parentListItemEl);\n };\n\n private handleListKeydown = (event: KeyboardEvent): void => {\n if (event.defaultPrevented || !!this.parentListEl) {\n return;\n }\n\n const { key } = event;\n const navigableItems = this.focusableItems.filter((listItem) => this.isNavigable(listItem));\n const currentIndex = navigableItems.findIndex((listItem) => listItem.active);\n\n if (key === \"ArrowDown\") {\n event.preventDefault();\n const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;\n\n if (navigableItems[nextIndex]) {\n this.focusRow(navigableItems[nextIndex]);\n }\n } else if (key === \"ArrowUp\") {\n event.preventDefault();\n\n if (currentIndex === 0 && this.filterEnabled) {\n this.filterEl?.setFocus();\n return;\n }\n\n const prevIndex = currentIndex - 1;\n\n if (navigableItems[prevIndex]) {\n this.focusRow(navigableItems[prevIndex]);\n }\n } else if (key === \"Home\") {\n event.preventDefault();\n const homeItem = navigableItems[0];\n\n if (homeItem) {\n this.focusRow(homeItem);\n }\n } else if (key === \"End\") {\n event.preventDefault();\n const endItem = navigableItems[navigableItems.length - 1];\n\n if (endItem) {\n this.focusRow(endItem);\n }\n }\n };\n\n handleNudgeEvent(event: CustomEvent): void {\n const { handleSelector, dragSelector } = this;\n const { direction } = event.detail;\n\n const composedPath = event.composedPath();\n\n const handle = composedPath.find(\n (el: HTMLElement): el is HTMLCalciteHandleElement =>\n el?.tagName && el.matches(handleSelector),\n );\n\n const dragEl = composedPath.find(\n (el: HTMLElement): el is HTMLCalciteListItemElement =>\n el?.tagName && el.matches(dragSelector),\n );\n\n const parentEl = dragEl?.parentElement as HTMLCalciteListElement;\n\n if (!parentEl) {\n return;\n }\n\n const { filteredItems } = this;\n\n const sameParentItems = filteredItems.filter((item) => item.parentElement === parentEl);\n\n const lastIndex = sameParentItems.length - 1;\n const oldIndex = sameParentItems.indexOf(dragEl);\n let newIndex: number;\n\n if (direction === \"up\") {\n newIndex = oldIndex === 0 ? lastIndex : oldIndex - 1;\n } else {\n newIndex = oldIndex === lastIndex ? 0 : oldIndex + 1;\n }\n\n this.disconnectObserver();\n handle.blurUnselectDisabled = true;\n\n const referenceEl =\n (direction === \"up\" && newIndex !== lastIndex) || (direction === \"down\" && newIndex === 0)\n ? sameParentItems[newIndex]\n : sameParentItems[newIndex].nextSibling;\n\n parentEl.insertBefore(dragEl, referenceEl);\n\n this.updateListItems();\n this.connectObserver();\n\n this.calciteListOrderChange.emit({\n dragEl,\n fromEl: parentEl,\n toEl: parentEl,\n newIndex,\n oldIndex,\n });\n\n handle.setFocus().then(() => (handle.blurUnselectDisabled = false));\n }\n}\n",":host {\n @apply flex flex-col bg-foreground-1;\n --calcite-list-item-icon-color: theme(\"colors.brand\");\n}\n\n:host([filter-hidden]),\n:host([closed]) {\n @apply hidden;\n}\n\n.wrapper--bordered {\n border-block-end: 1px solid var(--calcite-color-border-3);\n}\n\n@include disabled();\n\n.container {\n @apply bg-foreground-1\n box-border\n flex\n flex-1\n overflow-hidden;\n * {\n @apply box-border;\n }\n}\n\n.container--hover:hover {\n @apply bg-foreground-2 cursor-pointer;\n}\n\n.container:active {\n @apply bg-foreground-1;\n}\n\n.container--border {\n border-inline-start-width: theme(\"borderWidth.4\");\n border-inline-start-style: solid;\n}\n\n.container--border-selected {\n border-inline-start-color: theme(\"colors.brand\");\n}\n\n.container--border-unselected {\n border-inline-start-color: transparent;\n}\n\n.container:hover {\n &.container--border-unselected {\n @apply border-color-1;\n }\n}\n\n.nested-container {\n @apply hidden flex-col\n border-solid\n border-0\n border-color-3;\n\n margin-inline-start: var(--calcite-list-item-spacing-indent, theme(\"spacing.6\"));\n}\n\n.nested-container--open {\n @apply flex;\n}\n\n.content-container {\n @apply text-color-2\n select-none\n flex\n flex-auto\n font-normal\n items-stretch\n p-0;\n}\n\n.content-container--unavailable {\n @apply opacity-disabled;\n}\n\ntr,\ntd {\n @apply focus-base;\n}\n\ntr {\n @apply relative;\n}\n\ntr:focus,\ntd:focus {\n @apply focus-inset;\n}\n\n.content,\n.custom-content {\n @apply text-n2-wrap\n flex\n flex-auto\n flex-col\n justify-center\n px-3\n py-2;\n}\n\n.label,\n.description,\n.content-bottom {\n @apply text-n2 word-break font-sans font-normal;\n &:only-child {\n @apply m-0 py-1;\n }\n}\n\n.label {\n @apply text-color-1;\n}\n\n:host([selected]) .label {\n @apply font-medium;\n}\n\n.description {\n @apply text-color-3 mt-0.5;\n}\n\n:host([selected]) .description {\n @apply text-color-2;\n}\n\n.content-start {\n @apply justify-start;\n}\n\n.content-end {\n @apply justify-end;\n}\n\n.content-start,\n.content-end {\n @apply flex-auto;\n\n ::slotted(calcite-icon) {\n @apply self-center mx-3;\n }\n}\n\n.content-bottom {\n @apply flex flex-col;\n}\n\n.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end {\n @apply flex-initial;\n}\n\n.selection-container {\n @apply flex py-0;\n color: theme(\"borderColor.color.input\");\n padding-inline: var(--calcite-spacing-md) var(--calcite-spacing-xxs);\n}\n\n.selection-container--single {\n color: transparent;\n}\n\n:host(:not([disabled]):not([selected])) .container:hover .selection-container--single {\n color: theme(\"borderColor.color.1\");\n}\n\n:host([selected]:hover) .selection-container,\n:host([selected]:hover) .selection-container--single,\n:host([selected]) .selection-container {\n color: var(--calcite-list-item-icon-color);\n}\n\n.open-container {\n color: theme(\"textColor.color.3\");\n}\n\n:host(:not([disabled])) .container:hover .open-container {\n color: theme(\"textColor.color.1\");\n}\n\n.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container {\n @apply flex items-center;\n\n calcite-action,\n calcite-handle {\n @apply self-stretch;\n }\n}\n\n.open-container,\n.selection-container {\n @apply cursor-pointer;\n}\n\n.actions-start,\n.actions-end {\n @apply p-0 relative;\n ::slotted(calcite-action),\n ::slotted(calcite-action-menu),\n ::slotted(calcite-handle),\n ::slotted(calcite-dropdown) {\n @apply self-stretch;\n\n color: inherit;\n }\n}\n\ntr:focus {\n .actions-start,\n .actions-end {\n inset-block: theme(\"spacing[0.5]\");\n .close,\n ::slotted(calcite-action),\n ::slotted(calcite-action-menu),\n ::slotted(calcite-handle),\n ::slotted(calcite-dropdown) {\n block-size: calc(100% - theme(\"spacing[1]\"));\n }\n }\n\n &::after,\n &::before {\n @apply absolute;\n content: \"\";\n inline-size: theme(\"spacing[0.5]\");\n z-index: theme(\"zIndex.header\");\n background-color: theme(\"colors.brand\");\n inset-block: 0;\n }\n &::before {\n inset-inline-start: 0;\n }\n &::after {\n inset-inline-end: 0;\n }\n}\n\n.container--border:focus::before {\n display: none;\n}\n\n::slotted(calcite-list:empty) {\n @apply border-t-0;\n}\n\n@include base-component();\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n VNode,\n Watch,\n} from \"@stencil/core\";\nimport {\n getElementDir,\n getFirstTabbable,\n slotChangeHasAssignedElement,\n toAriaBoolean,\n} from \"../../utils/dom\";\nimport {\n InteractiveComponent,\n InteractiveContainer,\n updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { SelectionMode } from \"../interfaces\";\nimport { SelectionAppearance } from \"../list/resources\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n connectMessages,\n disconnectMessages,\n setUpMessages,\n T9nComponent,\n updateMessages,\n} from \"../../utils/t9n\";\nimport {\n componentFocusable,\n LoadableComponent,\n setComponentLoaded,\n setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { SortableComponentItem } from \"../../utils/sortableComponent\";\nimport { ListItemMessages } from \"./assets/list-item/t9n\";\nimport {\n getDepth,\n getListItemChildren,\n getListItemChildLists,\n updateListItemChildren,\n} from \"./utils\";\nimport { CSS, activeCellTestAttribute, ICONS, SLOTS } from \"./resources\";\n\nconst focusMap = new Map();\nconst listSelector = \"calcite-list\";\n\n/**\n * @slot - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements.\n * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.\n * @slot content-start - A slot for adding non-actionable elements before the label and description of the component.\n * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.\n * @slot content-end - A slot for adding non-actionable elements after the label and description of the component.\n * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.\n * @slot content-bottom - A slot for adding content below the component's `label` and `description`.\n */\n@Component({\n tag: \"calcite-list-item\",\n styleUrl: \"list-item.scss\",\n shadow: true,\n assetsDirs: [\"assets\"],\n})\nexport class ListItem\n implements\n InteractiveComponent,\n LoadableComponent,\n LocalizedComponent,\n T9nComponent,\n SortableComponentItem\n{\n // --------------------------------------------------------------------------\n //\n // Properties\n //\n // --------------------------------------------------------------------------\n\n /**\n * Sets the item as focusable. Only one item should be focusable within a list.\n *\n * @internal\n */\n @Prop() active = false;\n\n @Watch(\"active\")\n activeHandler(active: boolean): void {\n if (!active) {\n this.focusCell(null, false);\n }\n }\n\n /**\n * Sets the item to display a border.\n *\n * @internal\n */\n @Prop() bordered = false;\n\n /** When `true`, a close button is added to the component. */\n @Prop({ reflect: true }) closable = false;\n\n /** When `true`, hides the component. */\n @Prop({ reflect: true, mutable: true }) closed = false;\n\n @Watch(\"closed\")\n handleClosedChange(): void {\n this.emitCalciteInternalListItemChange();\n }\n\n /**\n * A description for the component. Displays below the label text.\n */\n @Prop() description: string;\n\n /**\n * When `true`, interaction is prevented and the component is displayed with lower opacity.\n */\n @Prop({ reflect: true }) disabled = false;\n\n @Watch(\"disabled\")\n handleDisabledChange(): void {\n this.emitCalciteInternalListItemChange();\n }\n\n /**\n * When `true`, the item is not draggable.\n */\n @Prop({ reflect: true }) dragDisabled = false;\n\n /**\n * When `true`, the component displays a draggable button.\n *\n * @internal\n */\n @Prop() dragHandle = false;\n\n /**\n * When `true`, the component's drag handle is selected.\n */\n @Prop({ mutable: true, reflect: true }) dragSelected = false;\n\n /**\n * Hides the component when filtered.\n *\n * @internal\n */\n @Prop({ reflect: true }) filterHidden = false;\n\n /**\n * The label text of the component. Displays above the description text.\n */\n @Prop() label: string;\n\n /**\n * Provides additional metadata to the component. Primary use is for a filter on the parent `calcite-list`.\n */\n @Prop() metadata: Record;\n\n /**\n * When `true`, the item is open to show child components.\n */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n @Watch(\"open\")\n handleOpenChange(): void {\n this.emitCalciteInternalListItemToggle();\n }\n\n /**\n * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.\n *\n * @internal\n */\n @Prop() setSize: number = null;\n\n /**\n * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility.\n *\n * @internal\n */\n @Prop() setPosition: number = null;\n\n /**\n * When `true` and the parent `calcite-list`'s `selectionMode` is `\"single\"`, `\"single-persist\"', or `\"multiple\"`, the component is selected.\n */\n @Prop({ reflect: true, mutable: true }) selected = false;\n\n @Watch(\"selected\")\n handleSelectedChange(): void {\n this.calciteInternalListItemSelect.emit();\n }\n\n /**\n * When `true`, the component's content appears inactive.\n */\n @Prop({ reflect: true }) unavailable = false;\n\n /**\n * The component's value.\n */\n @Prop() value: any;\n\n /**\n * Specifies the selection mode - `\"multiple\"` (allow any number of selected items), `\"single\"` (allow one selected item), `\"single-persist\"` (allow one selected item and prevent de-selection), or `\"none\"` (no selected items).\n *\n * @internal\n */\n @Prop({ mutable: true }) selectionMode: Extract<\n \"none\" | \"multiple\" | \"single\" | \"single-persist\",\n SelectionMode\n > = null;\n\n /**\n * Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).\n *\n * @internal\n */\n @Prop({ mutable: true }) selectionAppearance: SelectionAppearance = null;\n\n /**\n * Use this property to override individual strings used by the component.\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messageOverrides: Partial;\n\n /**\n * Made into a prop for testing purposes only\n *\n * @internal\n */\n // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n @Prop({ mutable: true }) messages: ListItemMessages;\n\n @Watch(\"messageOverrides\")\n onMessagesChange(): void {\n /* wired up by t9n util */\n }\n\n //--------------------------------------------------------------------------\n //\n // Events\n //\n //--------------------------------------------------------------------------\n\n /**\n * Fires when the component is selected.\n */\n @Event({ cancelable: false }) calciteListItemSelect: EventEmitter;\n\n /**\n * Fires when the close button is clicked.\n */\n @Event({ cancelable: false }) calciteListItemClose: EventEmitter;\n\n /**\n * Fires when the drag handle is selected.\n */\n @Event({ cancelable: false }) calciteListItemDragHandleChange: EventEmitter;\n\n /**\n * Fires when the open button is clicked.\n */\n @Event({ cancelable: false }) calciteListItemToggle: EventEmitter;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalListItemSelect: EventEmitter;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false })\n calciteInternalListItemSelectMultiple: EventEmitter<{\n selectMultiple: boolean;\n }>;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalListItemActive: EventEmitter;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalFocusPreviousItem: EventEmitter;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalListItemChange: EventEmitter;\n\n /**\n *\n * @internal\n */\n @Event({ cancelable: false }) calciteInternalListItemToggle: EventEmitter;\n\n @Listen(\"calciteInternalListItemGroupDefaultSlotChange\")\n @Listen(\"calciteInternalListDefaultSlotChange\")\n handleCalciteInternalListDefaultSlotChanges(event: CustomEvent): void {\n event.stopPropagation();\n this.handleOpenableChange(this.defaultSlotEl);\n }\n\n // --------------------------------------------------------------------------\n //\n // Private Properties\n //\n // --------------------------------------------------------------------------\n\n @Element() el: HTMLCalciteListItemElement;\n\n @State() effectiveLocale = \"\";\n\n @Watch(\"effectiveLocale\")\n effectiveLocaleChange(): void {\n updateMessages(this, this.effectiveLocale);\n }\n\n @State() defaultMessages: ListItemMessages;\n\n @State() level: number = null;\n\n @State() parentListEl: HTMLCalciteListElement;\n\n @State() openable = false;\n\n @State() hasActionsStart = false;\n\n @State() hasActionsEnd = false;\n\n @State() hasCustomContent = false;\n\n @State() hasContentStart = false;\n\n @State() hasContentEnd = false;\n\n @State() hasContentBottom = false;\n\n containerEl: HTMLTableRowElement;\n\n contentEl: HTMLTableCellElement;\n\n actionsStartEl: HTMLTableCellElement;\n\n actionsEndEl: HTMLTableCellElement;\n\n handleGridEl: HTMLTableCellElement;\n\n defaultSlotEl: HTMLSlotElement;\n\n // --------------------------------------------------------------------------\n //\n // Lifecycle\n //\n // --------------------------------------------------------------------------\n\n connectedCallback(): void {\n connectLocalized(this);\n connectMessages(this);\n const { el } = this;\n this.parentListEl = el.closest(listSelector);\n this.level = getDepth(el) + 1;\n this.setSelectionDefaults();\n }\n\n async componentWillLoad(): Promise {\n setUpLoadableComponent(this);\n await setUpMessages(this);\n }\n\n componentDidLoad(): void {\n setComponentLoaded(this);\n }\n\n componentDidRender(): void {\n updateHostInteraction(this);\n }\n\n disconnectedCallback(): void {\n disconnectLocalized(this);\n disconnectMessages(this);\n }\n\n // --------------------------------------------------------------------------\n //\n // Public Methods\n //\n // --------------------------------------------------------------------------\n\n /** Sets focus on the component. */\n @Method()\n async setFocus(): Promise {\n await componentFocusable(this);\n const { containerEl, parentListEl } = this;\n const focusIndex = focusMap.get(parentListEl);\n\n if (typeof focusIndex === \"number\") {\n const cells = this.getGridCells();\n if (cells[focusIndex]) {\n this.focusCell(cells[focusIndex]);\n } else {\n containerEl?.focus();\n }\n return;\n }\n\n containerEl?.focus();\n }\n\n // --------------------------------------------------------------------------\n //\n // Render Methods\n //\n // --------------------------------------------------------------------------\n\n renderSelected(): VNode {\n const { selected, selectionMode, selectionAppearance } = this;\n\n if (selectionMode === \"none\" || selectionAppearance === \"border\") {\n return null;\n }\n\n return (\n \n \n \n );\n }\n\n renderDragHandle(): VNode {\n const { label, dragHandle, dragSelected, dragDisabled, setPosition, setSize } = this;\n\n return dragHandle ? (\n (this.handleGridEl = el)}\n role=\"gridcell\"\n >\n \n \n ) : null;\n }\n\n renderOpen(): VNode {\n const { el, open, openable, messages } = this;\n const dir = getElementDir(el);\n const icon = open ? ICONS.open : dir === \"rtl\" ? ICONS.closedRTL : ICONS.closedLTR;\n const tooltip = open ? messages.collapse : messages.expand;\n\n return openable ? (\n \n \n \n ) : null;\n }\n\n renderActionsStart(): VNode {\n const { label, hasActionsStart } = this;\n return (\n