@esri/solutions-components 0.8.3 → 0.8.4

package/dist/cjs/calcite-list-item.cjs.entry.js

@@ -1,454 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b53bfd7c.js');
-const dom = require('./dom-cf1e2e9f.js');
-const interactive = require('./interactive-08e5bc95.js');
-const utils = require('./utils-7281bf72.js');
-const locale = require('./locale-a615b02f.js');
-const t9n = require('./t9n-463dcbff.js');
-const loadable = require('./loadable-41446b78.js');
-require('./guid-ae73cd27.js');
-require('./resources-a2b1b149.js');
-require('./browser-fe25aefa.js');
-require('./key-86f4a0b0.js');
-require('./observers-5923a7cc.js');
-
-const listItemCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-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;--calcite-list-item-icon-color:var(--calcite-color-brand);--calcite-list-item-spacing-indent:1rem}:host([filter-hidden]){display:none}: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%;background-color:var(--calcite-color-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.container *{box-sizing:border-box}.container--hover:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.container:active{background-color:var(--calcite-color-foreground-1)}.container--border{border-inline-start-width:4px;border-inline-start-style:solid}.container--border-selected{border-inline-start-color:var(--calcite-color-brand)}.container--border-unselected{border-inline-start-color:transparent}.container:hover.container--border-unselected{border-color:var(--calcite-color-border-1)}.nested-container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.nested-container--hidden{display:none}.content-container{display:flex;flex:1 1 auto;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}tr,td{outline-color:transparent}tr:focus,td:focus{outline:2px solid var(--calcite-color-brand);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.content,.custom-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}.label,.description,.content-bottom{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}.label:only-child,.description:only-child,.content-bottom:only-child{margin:0px;padding-block:0.25rem}.label{color:var(--calcite-color-text-1)}:host([selected]) .label{font-weight:var(--calcite-font-weight-medium)}.description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}:host([selected]) .description{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-bottom{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}.content-container--has-center-content .content-start,.content-container--has-center-content .content-end{flex:0 1 auto}.selection-container{display:flex;padding-inline:0.75rem;color:var(--calcite-color-border-input)}.selection-container--single{color:transparent}:host(:not([disabled]):not([selected])) .container:hover .selection-container--single{color:var(--calcite-color-border-1)}:host([selected]:hover) .selection-container,:host([selected]:hover) .selection-container--single,:host([selected]) .selection-container{color:var(--calcite-list-item-icon-color)}.open-container{color:var(--calcite-color-text-3)}:host(:not([disabled])) .container:hover .open-container{color:var(--calcite-color-text-1)}.actions-start,.actions-end,.content-start,.content-end,.selection-container,.drag-container,.open-container{display:flex;align-items:center}.open-container,.selection-container{cursor:pointer}.content-start ::slotted(calcite-icon),.content-end ::slotted(calcite-icon){margin-inline:0.75rem;align-self:center}.actions-start ::slotted(calcite-action),.actions-start ::slotted(calcite-action-menu),.actions-start ::slotted(calcite-handle),.actions-start ::slotted(calcite-dropdown),.actions-end ::slotted(calcite-action),.actions-end ::slotted(calcite-action-menu),.actions-end ::slotted(calcite-handle),.actions-end ::slotted(calcite-dropdown){align-self:stretch;color:inherit}::slotted(calcite-list-item){border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}::slotted(calcite-list:empty){padding-block:0.75rem}:host([hidden]){display:none}[hidden]{display:none}";
-
-const focusMap = new Map();
-const listSelector = "calcite-list";
-const ListItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.calciteListItemSelect = index.createEvent(this, "calciteListItemSelect", 6);
-        this.calciteListItemClose = index.createEvent(this, "calciteListItemClose", 6);
-        this.calciteListItemDragHandleChange = index.createEvent(this, "calciteListItemDragHandleChange", 6);
-        this.calciteListItemToggle = index.createEvent(this, "calciteListItemToggle", 6);
-        this.calciteInternalListItemSelect = index.createEvent(this, "calciteInternalListItemSelect", 6);
-        this.calciteInternalListItemSelectMultiple = index.createEvent(this, "calciteInternalListItemSelectMultiple", 6);
-        this.calciteInternalListItemActive = index.createEvent(this, "calciteInternalListItemActive", 6);
-        this.calciteInternalFocusPreviousItem = index.createEvent(this, "calciteInternalFocusPreviousItem", 6);
-        this.calciteInternalListItemChange = index.createEvent(this, "calciteInternalListItemChange", 6);
-        // --------------------------------------------------------------------------
-        //
-        //  Private Methods
-        //
-        // --------------------------------------------------------------------------
-        this.dragHandleSelectedChangeHandler = (event) => {
-            this.dragSelected = event.target.selected;
-            this.calciteListItemDragHandleChange.emit();
-            event.stopPropagation();
-        };
-        this.emitInternalListItemActive = () => {
-            this.calciteInternalListItemActive.emit();
-        };
-        this.focusCellHandle = () => {
-            this.handleCellFocusIn(this.handleGridEl);
-        };
-        this.focusCellActionsStart = () => {
-            this.handleCellFocusIn(this.actionsStartEl);
-        };
-        this.focusCellContent = () => {
-            this.handleCellFocusIn(this.contentEl);
-        };
-        this.focusCellActionsEnd = () => {
-            this.handleCellFocusIn(this.actionsEndEl);
-        };
-        this.handleCloseClick = () => {
-            this.closed = true;
-            this.calciteListItemClose.emit();
-        };
-        this.handleContentSlotChange = (event) => {
-            this.hasCustomContent = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleActionsStartSlotChange = (event) => {
-            this.hasActionsStart = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleActionsEndSlotChange = (event) => {
-            this.hasActionsEnd = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleContentStartSlotChange = (event) => {
-            this.hasContentStart = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleContentEndSlotChange = (event) => {
-            this.hasContentEnd = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleContentBottomSlotChange = (event) => {
-            this.hasContentBottom = dom.slotChangeHasAssignedElement(event);
-        };
-        this.handleDefaultSlotChange = (event) => {
-            this.handleOpenableChange(event.target);
-        };
-        this.handleToggleClick = () => {
-            this.toggle();
-        };
-        this.toggle = (value = !this.open) => {
-            this.open = value;
-            this.calciteListItemToggle.emit();
-        };
-        this.handleItemClick = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            this.toggleSelected(event.shiftKey);
-        };
-        this.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",
-            });
-            this.calciteListItemSelect.emit();
-        };
-        this.handleItemKeyDown = (event) => {
-            if (event.defaultPrevented) {
-                return;
-            }
-            const { key } = event;
-            const composedPath = event.composedPath();
-            const { containerEl, actionsStartEl, actionsEndEl, open, openable } = this;
-            const cells = this.getGridCells();
-            const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
-            if (key === "Enter" &&
-                !composedPath.includes(actionsStartEl) &&
-                !composedPath.includes(actionsEndEl)) {
-                event.preventDefault();
-                this.toggleSelected(event.shiftKey);
-            }
-            else if (key === "ArrowRight") {
-                event.preventDefault();
-                const nextIndex = currentIndex + 1;
-                if (currentIndex === -1) {
-                    if (!open && openable) {
-                        this.toggle(true);
-                        this.focusCell(null);
-                    }
-                    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(null);
-                    if (open && openable) {
-                        this.toggle(false);
-                    }
-                    else {
-                        this.calciteInternalFocusPreviousItem.emit();
-                    }
-                }
-                else if (currentIndex === 0) {
-                    this.focusCell(null);
-                    containerEl.focus();
-                }
-                else if (cells[currentIndex] && cells[prevIndex]) {
-                    this.focusCell(cells[prevIndex]);
-                }
-            }
-        };
-        this.focusCellNull = () => {
-            this.focusCell(null);
-        };
-        this.handleCellFocusIn = (focusEl) => {
-            this.setFocusCell(focusEl, dom.getFirstTabbable(focusEl), true);
-        };
-        // Only one cell within a list-item should be focusable at a time. Ensures the active cell is focusable.
-        this.setFocusCell = (focusEl, focusedEl, saveFocusIndex) => {
-            const { parentListEl } = this;
-            if (saveFocusIndex) {
-                focusMap.set(parentListEl, null);
-            }
-            const gridCells = this.getGridCells();
-            gridCells.forEach((tableCell) => {
-                tableCell.tabIndex = -1;
-                tableCell.removeAttribute(utils.activeCellTestAttribute);
-            });
-            if (!focusEl) {
-                return;
-            }
-            focusEl.tabIndex = focusEl === focusedEl ? 0 : -1;
-            focusEl.setAttribute(utils.activeCellTestAttribute, "");
-            if (saveFocusIndex) {
-                focusMap.set(parentListEl, gridCells.indexOf(focusEl));
-            }
-        };
-        this.focusCell = (focusEl, saveFocusIndex = true) => {
-            const focusedEl = dom.getFirstTabbable(focusEl);
-            this.setFocusCell(focusEl, focusedEl, saveFocusIndex);
-            focusedEl === null || focusedEl === void 0 ? void 0 : focusedEl.focus();
-        };
-        this.active = false;
-        this.closable = false;
-        this.closed = false;
-        this.description = undefined;
-        this.disabled = false;
-        this.dragDisabled = false;
-        this.dragHandle = false;
-        this.dragSelected = false;
-        this.filterHidden = false;
-        this.label = undefined;
-        this.metadata = undefined;
-        this.open = false;
-        this.setSize = null;
-        this.setPosition = null;
-        this.selected = false;
-        this.value = undefined;
-        this.selectionMode = null;
-        this.selectionAppearance = null;
-        this.messageOverrides = undefined;
-        this.messages = undefined;
-        this.effectiveLocale = "";
-        this.defaultMessages = undefined;
-        this.level = null;
-        this.visualLevel = null;
-        this.parentListEl = undefined;
-        this.openable = false;
-        this.hasActionsStart = false;
-        this.hasActionsEnd = false;
-        this.hasCustomContent = false;
-        this.hasContentStart = false;
-        this.hasContentEnd = false;
-        this.hasContentBottom = false;
-    }
-    activeHandler(active) {
-        if (!active) {
-            this.focusCell(null, false);
-        }
-    }
-    handleClosedChange() {
-        this.emitCalciteInternalListItemChange();
-    }
-    handleDisabledChange() {
-        this.emitCalciteInternalListItemChange();
-    }
-    handleSelectedChange() {
-        this.calciteInternalListItemSelect.emit();
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    handleCalciteInternalListDefaultSlotChanges(event) {
-        event.stopPropagation();
-        this.handleOpenableChange(this.defaultSlotEl);
-    }
-    effectiveLocaleChange() {
-        t9n.updateMessages(this, this.effectiveLocale);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    // --------------------------------------------------------------------------
-    connectedCallback() {
-        interactive.connectInteractive(this);
-        locale.connectLocalized(this);
-        t9n.connectMessages(this);
-        const { el } = this;
-        this.parentListEl = el.closest(listSelector);
-        this.level = utils.getDepth(el) + 1;
-        this.visualLevel = utils.getDepth(el, true);
-        this.setSelectionDefaults();
-    }
-    async componentWillLoad() {
-        loadable.setUpLoadableComponent(this);
-        await t9n.setUpMessages(this);
-    }
-    componentDidLoad() {
-        loadable.setComponentLoaded(this);
-    }
-    componentDidRender() {
-        interactive.updateHostInteraction(this);
-    }
-    disconnectedCallback() {
-        interactive.disconnectInteractive(this);
-        locale.disconnectLocalized(this);
-        t9n.disconnectMessages(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    // --------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await loadable.componentFocusable(this);
-        const { containerEl, parentListEl } = this;
-        const focusIndex = focusMap.get(parentListEl);
-        if (typeof focusIndex === "number") {
-            const cells = this.getGridCells();
-            if (cells[focusIndex]) {
-                this.focusCell(cells[focusIndex]);
-            }
-            else {
-                containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
-            }
-            return;
-        }
-        containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    renderSelected() {
-        const { selected, selectionMode, selectionAppearance } = this;
-        if (selectionMode === "none" || selectionAppearance === "border") {
-            return null;
-        }
-        return (index.h("td", { class: {
-                [utils.CSS.selectionContainer]: true,
-                [utils.CSS.selectionContainerSingle]: selectionMode === "single" || selectionMode === "single-persist",
-            }, key: "selection-container", onClick: this.handleItemClick }, index.h("calcite-icon", { icon: selected
-                ? selectionMode === "multiple"
-                    ? utils.ICONS.selectedMultiple
-                    : utils.ICONS.selectedSingle
-                : selectionMode === "multiple"
-                    ? utils.ICONS.unselectedMultiple
-                    : utils.ICONS.unselectedSingle, scale: "s" })));
-    }
-    renderDragHandle() {
-        const { label, dragHandle, dragSelected, dragDisabled, setPosition, setSize } = this;
-        return dragHandle ? (index.h("td", { "aria-label": label, class: utils.CSS.dragContainer, key: "drag-handle-container", onFocusin: this.focusCellHandle, role: "gridcell",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.handleGridEl = el) }, index.h("calcite-handle", { disabled: dragDisabled, label: label, onCalciteHandleChange: this.dragHandleSelectedChangeHandler, selected: dragSelected, setPosition: setPosition, setSize: setSize }))) : null;
-    }
-    renderOpen() {
-        const { el, open, openable, messages } = this;
-        const dir = dom.getElementDir(el);
-        const icon = open ? utils.ICONS.open : dir === "rtl" ? utils.ICONS.closedRTL : utils.ICONS.closedLTR;
-        const tooltip = open ? messages.collapse : messages.expand;
-        return openable ? (index.h("td", { class: utils.CSS.openContainer, key: "open-container", onClick: this.handleToggleClick, title: tooltip }, index.h("calcite-icon", { icon: icon, key: icon, scale: "s" }))) : null;
-    }
-    renderActionsStart() {
-        const { label, hasActionsStart } = this;
-        return (index.h("td", { "aria-label": label, class: utils.CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", onFocusin: this.focusCellActionsStart, role: "gridcell",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.actionsStartEl = el) }, index.h("slot", { name: utils.SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
-    }
-    renderActionsEnd() {
-        const { label, hasActionsEnd, closable, messages } = this;
-        return (index.h("td", { "aria-label": label, class: utils.CSS.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", onFocusin: this.focusCellActionsEnd, role: "gridcell",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.actionsEndEl = el) }, index.h("slot", { name: utils.SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (index.h("calcite-action", { appearance: "transparent", icon: utils.ICONS.close, key: "close-action", label: messages.close, onClick: this.handleCloseClick, text: messages.close })) : null));
-    }
-    renderContentStart() {
-        const { hasContentStart } = this;
-        return (index.h("div", { class: utils.CSS.contentStart, hidden: !hasContentStart }, index.h("slot", { name: utils.SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
-    }
-    renderCustomContent() {
-        const { hasCustomContent } = this;
-        return (index.h("div", { class: utils.CSS.customContent, hidden: !hasCustomContent }, index.h("slot", { name: utils.SLOTS.content, onSlotchange: this.handleContentSlotChange })));
-    }
-    renderContentEnd() {
-        const { hasContentEnd } = this;
-        return (index.h("div", { class: utils.CSS.contentEnd, hidden: !hasContentEnd }, index.h("slot", { name: utils.SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
-    }
-    renderContentBottom() {
-        const { hasContentBottom, visualLevel } = this;
-        return (index.h("div", { class: utils.CSS.contentBottom, hidden: !hasContentBottom, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, index.h("slot", { name: utils.SLOTS.contentBottom, onSlotchange: this.handleContentBottomSlotChange })));
-    }
-    renderDefaultContainer() {
-        return (index.h("div", { class: {
-                [utils.CSS.nestedContainer]: true,
-                [utils.CSS.nestedContainerHidden]: this.openable && !this.open,
-            } }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) })));
-    }
-    renderContentProperties() {
-        const { label, description, hasCustomContent } = this;
-        return !hasCustomContent && (!!label || !!description) ? (index.h("div", { class: utils.CSS.content, key: "content" }, label ? (index.h("div", { class: utils.CSS.label, key: "label" }, label)) : null, description ? (index.h("div", { class: utils.CSS.description, key: "description" }, description)) : null)) : null;
-    }
-    renderContentContainer() {
-        const { description, label, selectionMode, hasCustomContent } = this;
-        const hasCenterContent = hasCustomContent || !!label || !!description;
-        const content = [
-            this.renderContentStart(),
-            this.renderCustomContent(),
-            this.renderContentProperties(),
-            this.renderContentEnd(),
-        ];
-        return (index.h("td", { "aria-label": label, class: {
-                [utils.CSS.contentContainer]: true,
-                [utils.CSS.contentContainerSelectable]: selectionMode !== "none",
-                [utils.CSS.contentContainerHasCenterContent]: hasCenterContent,
-            }, key: "content-container", onClick: this.handleItemClick, onFocusin: this.focusCellContent, role: "gridcell",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.contentEl = el) }, content));
-    }
-    render() {
-        const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode, closed, visualLevel, } = this;
-        const showBorder = selectionMode !== "none" && selectionAppearance === "border";
-        const borderSelected = showBorder && selected;
-        const borderUnselected = showBorder && !selected;
-        return (index.h(index.Host, null, index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("tr", { "aria-expanded": openable ? dom.toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": dom.toAriaBoolean(selected), "aria-setsize": setSize, class: {
-                [utils.CSS.container]: true,
-                [utils.CSS.containerHover]: true,
-                [utils.CSS.containerBorder]: showBorder,
-                [utils.CSS.containerBorderSelected]: borderSelected,
-                [utils.CSS.containerBorderUnselected]: borderUnselected,
-            }, hidden: closed, onFocus: this.focusCellNull, onFocusin: this.emitInternalListItemActive, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` }, tabIndex: active ? 0 : -1,
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), this.renderContentBottom(), this.renderDefaultContainer())));
-    }
-    emitCalciteInternalListItemChange() {
-        this.calciteInternalListItemChange.emit();
-    }
-    setSelectionDefaults() {
-        const { parentListEl, selectionMode, selectionAppearance } = this;
-        if (!parentListEl) {
-            return;
-        }
-        if (!selectionMode) {
-            this.selectionMode = parentListEl.selectionMode;
-        }
-        if (!selectionAppearance) {
-            this.selectionAppearance = parentListEl.selectionAppearance;
-        }
-    }
-    handleOpenableChange(slotEl) {
-        if (!slotEl) {
-            return;
-        }
-        const listItemChildren = utils.getListItemChildren(slotEl);
-        const listItemChildLists = utils.getListItemChildLists(slotEl);
-        utils.updateListItemChildren(listItemChildren);
-        this.openable = !!listItemChildren.length || !!listItemChildLists.length;
-    }
-    getGridCells() {
-        return [this.handleGridEl, this.actionsStartEl, this.contentEl, this.actionsEndEl].filter((el) => el && !el.hidden);
-    }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "active": ["activeHandler"],
-        "closed": ["handleClosedChange"],
-        "disabled": ["handleDisabledChange"],
-        "selected": ["handleSelectedChange"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-ListItem.style = listItemCss;
-
-exports.calcite_list_item = ListItem;