@esri/solutions-components 0.8.2 → 0.8.3

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

@@ -0,0 +1,567 @@
+/*!
+ * 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 lodash = require('./lodash-7587da9f.js');
+const dom = require('./dom-cf1e2e9f.js');
+const interactive = require('./interactive-08e5bc95.js');
+const observers = require('./observers-5923a7cc.js');
+const utils = require('./utils-7281bf72.js');
+const sortableComponent = require('./sortableComponent-5e3419af.js');
+const resources = require('./resources-37006465.js');
+const loadable = require('./loadable-41446b78.js');
+const t9n = require('./t9n-463dcbff.js');
+const locale = require('./locale-a615b02f.js');
+require('./guid-ae73cd27.js');
+require('./resources-a2b1b149.js');
+require('./browser-fe25aefa.js');
+require('./key-86f4a0b0.js');
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    container: "container",
+    table: "table",
+    scrim: "scrim",
+    stack: "stack",
+    tableContainer: "table-container",
+    sticky: "sticky-pos",
+    assistiveText: "assistive-text",
+};
+const debounceTimeout = 0;
+const SLOTS = {
+    filterNoResults: "filter-no-results",
+    filterActionsStart: "filter-actions-start",
+    filterActionsEnd: "filter-actions-end",
+};
+
+const listCss = ":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:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{position:relative}.table-container{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}.table-container *{box-sizing:border-box}.table{inline-size:100%;border-collapse:collapse}.stack{--calcite-stack-padding-inline:0;--calcite-stack-padding-block:0}::slotted(calcite-list-item){--tw-shadow:0 -1px 0 var(--calcite-color-border-3);--tw-shadow-colored:0 -1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:1px}::slotted(calcite-list-item:first-of-type){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}::slotted(calcite-list-item[data-filter]){--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);margin-block-start:0px}.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky);background-color:var(--calcite-color-foreground-1)}.sticky-pos th{padding:0px}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}";
+
+const listItemSelector = "calcite-list-item";
+const listItemSelectorDirect = `:scope > calcite-list-item`;
+const parentSelector = "calcite-list-item-group, calcite-list-item";
+const List = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calciteListChange = index.createEvent(this, "calciteListChange", 6);
+        this.calciteListDragEnd = index.createEvent(this, "calciteListDragEnd", 6);
+        this.calciteListDragStart = index.createEvent(this, "calciteListDragStart", 6);
+        this.calciteListFilter = index.createEvent(this, "calciteListFilter", 6);
+        this.calciteListOrderChange = index.createEvent(this, "calciteListOrderChange", 6);
+        this.calciteInternalListDefaultSlotChange = index.createEvent(this, "calciteInternalListDefaultSlotChange", 6);
+        this.dragSelector = listItemSelector;
+        this.focusableItems = [];
+        this.handleSelector = "calcite-handle";
+        this.listItems = [];
+        this.mutationObserver = observers.createObserver("mutation", () => this.updateListItems());
+        this.visibleItems = [];
+        this.handleDefaultSlotChange = (event) => {
+            utils.updateListItemChildren(utils.getListItemChildren(event.target));
+            if (this.parentListEl) {
+                this.calciteInternalListDefaultSlotChange.emit();
+            }
+        };
+        this.handleFilterActionsStartSlotChange = (event) => {
+            this.hasFilterActionsStart = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleFilterActionsEndSlotChange = (event) => {
+            this.hasFilterActionsEnd = dom.slotChangeHasAssignedElement(event);
+        };
+        this.handleFilterNoResultsSlotChange = (event) => {
+            this.hasFilterNoResults = dom.slotChangeHasAssignedElement(event);
+        };
+        this.setActiveListItem = () => {
+            const { focusableItems } = this;
+            if (!focusableItems.some((item) => item.active)) {
+                if (focusableItems[0]) {
+                    focusableItems[0].active = true;
+                }
+            }
+        };
+        this.updateSelectedItems = (emit = false) => {
+            this.selectedItems = this.visibleItems.filter((item) => item.selected);
+            if (emit) {
+                this.calciteListChange.emit();
+            }
+        };
+        this.updateFilteredItems = (emit = false) => {
+            const { visibleItems, filteredData, filterText } = this;
+            const values = filteredData.map((item) => item.value);
+            const lastDescendantItems = visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.filter((listItem) => visibleItems.every((li) => li === listItem || !listItem.contains(li)));
+            const filteredItems = visibleItems.filter((item) => !filterText || values.includes(item.value)) || [];
+            const visibleParents = new WeakSet();
+            lastDescendantItems.forEach((listItem) => this.filterElements({ el: listItem, filteredItems, visibleParents }));
+            if (filteredItems.length > 0) {
+                this.findAncestorOfFirstFilteredItem(filteredItems);
+            }
+            this.filteredItems = filteredItems;
+            if (emit) {
+                this.calciteListFilter.emit();
+            }
+        };
+        this.setFilterEl = (el) => {
+            this.filterEl = el;
+            this.performFilter();
+        };
+        this.handleFilterChange = (event) => {
+            event.stopPropagation();
+            const { value } = event.currentTarget;
+            this.filterText = value;
+            this.updateFilteredData(true);
+        };
+        this.getItemData = () => {
+            return this.listItems.map((item) => ({
+                label: item.label,
+                description: item.description,
+                metadata: item.metadata,
+                value: item.value,
+            }));
+        };
+        this.updateListItems = lodash.debounce((emit = false) => {
+            const { selectionAppearance, selectionMode, dragEnabled } = this;
+            if (!!this.parentListEl) {
+                const items = this.queryListItems(true);
+                items.forEach((item) => {
+                    item.dragHandle = dragEnabled;
+                });
+                this.setUpSorting();
+                return;
+            }
+            const items = this.queryListItems();
+            items.forEach((item) => {
+                item.selectionAppearance = selectionAppearance;
+                item.selectionMode = selectionMode;
+            });
+            const dragItems = this.queryListItems(true);
+            dragItems.forEach((item) => {
+                item.dragHandle = dragEnabled;
+            });
+            this.listItems = items;
+            if (this.filterEnabled) {
+                this.dataForFilter = this.getItemData();
+                if (this.filterEl) {
+                    this.filterEl.items = this.dataForFilter;
+                }
+            }
+            this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden);
+            this.updateFilteredItems(emit);
+            this.focusableItems = this.filteredItems.filter((item) => !item.disabled);
+            this.setActiveListItem();
+            this.updateSelectedItems(emit);
+            this.setUpSorting();
+        }, debounceTimeout);
+        this.queryListItems = (direct = false) => {
+            return Array.from(this.el.querySelectorAll(direct ? listItemSelectorDirect : listItemSelector));
+        };
+        this.focusRow = (focusEl) => {
+            const { focusableItems } = this;
+            if (!focusEl) {
+                return;
+            }
+            focusableItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+            focusEl.setFocus();
+        };
+        this.isNavigable = (listItem) => {
+            var _a;
+            const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
+            if (!parentListItemEl) {
+                return true;
+            }
+            return parentListItemEl.open && this.isNavigable(parentListItemEl);
+        };
+        this.handleListKeydown = (event) => {
+            var _a;
+            if (event.defaultPrevented || !!this.parentListEl) {
+                return;
+            }
+            const { key } = event;
+            const navigableItems = this.focusableItems.filter((listItem) => this.isNavigable(listItem));
+            const currentIndex = navigableItems.findIndex((listItem) => listItem.active);
+            if (key === "ArrowDown") {
+                event.preventDefault();
+                const nextIndex = event.target === this.filterEl ? 0 : currentIndex + 1;
+                if (navigableItems[nextIndex]) {
+                    this.focusRow(navigableItems[nextIndex]);
+                }
+            }
+            else if (key === "ArrowUp") {
+                event.preventDefault();
+                if (currentIndex === 0 && this.filterEnabled) {
+                    (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+                    return;
+                }
+                const prevIndex = currentIndex - 1;
+                if (navigableItems[prevIndex]) {
+                    this.focusRow(navigableItems[prevIndex]);
+                }
+            }
+            else if (key === "Home") {
+                event.preventDefault();
+                const homeItem = navigableItems[0];
+                if (homeItem) {
+                    this.focusRow(homeItem);
+                }
+            }
+            else if (key === "End") {
+                event.preventDefault();
+                const endItem = navigableItems[navigableItems.length - 1];
+                if (endItem) {
+                    this.focusRow(endItem);
+                }
+            }
+        };
+        this.findAncestorOfFirstFilteredItem = (filteredItems) => {
+            var _a, _b;
+            (_a = this.ancestorOfFirstFilteredItem) === null || _a === void 0 ? void 0 : _a.removeAttribute("data-filter");
+            filteredItems.forEach((item) => {
+                item.removeAttribute("data-filter");
+            });
+            this.ancestorOfFirstFilteredItem = this.getTopLevelAncestorItemElement(filteredItems[0]);
+            filteredItems[0].setAttribute("data-filter", "0");
+            (_b = this.ancestorOfFirstFilteredItem) === null || _b === void 0 ? void 0 : _b.setAttribute("data-filter", "0");
+        };
+        this.getTopLevelAncestorItemElement = (el) => {
+            let closestParent = el.parentElement.closest(listItemSelector);
+            while (closestParent) {
+                const closestListItemAncestor = closestParent.parentElement.closest(listItemSelector);
+                if (closestListItemAncestor) {
+                    closestParent = closestListItemAncestor;
+                }
+                else {
+                    return closestParent;
+                }
+            }
+            return null;
+        };
+        this.disabled = false;
+        this.canPull = undefined;
+        this.canPut = undefined;
+        this.dragEnabled = false;
+        this.group = undefined;
+        this.filterEnabled = false;
+        this.filteredItems = [];
+        this.filteredData = [];
+        this.filterPlaceholder = undefined;
+        this.filterText = undefined;
+        this.label = undefined;
+        this.loading = false;
+        this.messageOverrides = undefined;
+        this.messages = undefined;
+        this.numberingSystem = undefined;
+        this.openable = false;
+        this.selectedItems = [];
+        this.selectionMode = "none";
+        this.selectionAppearance = "icon";
+        this.effectiveLocale = "";
+        this.defaultMessages = undefined;
+        this.assistiveText = undefined;
+        this.dataForFilter = [];
+        this.hasFilterActionsEnd = false;
+        this.hasFilterActionsStart = false;
+        this.hasFilterNoResults = false;
+    }
+    async handleFilterTextChange() {
+        this.performFilter();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    handleListItemChange() {
+        this.updateListItems();
+    }
+    handleCalciteInternalFocusPreviousItem(event) {
+        if (this.parentListEl) {
+            return;
+        }
+        event.stopPropagation();
+        const { focusableItems } = this;
+        const currentIndex = focusableItems.findIndex((listItem) => listItem.active);
+        const prevIndex = currentIndex - 1;
+        if (focusableItems[prevIndex]) {
+            this.focusRow(focusableItems[prevIndex]);
+        }
+    }
+    handleCalciteInternalListItemActive(event) {
+        if (!!this.parentListEl) {
+            return;
+        }
+        event.stopPropagation();
+        const target = event.target;
+        const { listItems } = this;
+        listItems.forEach((listItem) => {
+            listItem.active = listItem === target;
+        });
+    }
+    handleCalciteListItemSelect() {
+        if (!!this.parentListEl) {
+            return;
+        }
+        this.updateSelectedItems(true);
+    }
+    handleCalciteInternalAssistiveTextChange(event) {
+        this.assistiveText = event.detail.message;
+        event.stopPropagation();
+    }
+    handleCalciteHandleNudge(event) {
+        if (!!this.parentListEl) {
+            return;
+        }
+        this.handleNudgeEvent(event);
+    }
+    handleCalciteInternalListItemSelect(event) {
+        if (!!this.parentListEl) {
+            return;
+        }
+        event.stopPropagation();
+        const target = event.target;
+        const { listItems, selectionMode } = this;
+        if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+            listItems.forEach((listItem) => (listItem.selected = listItem === target));
+        }
+        this.updateSelectedItems();
+    }
+    handleCalciteInternalListItemSelectMultiple(event) {
+        if (!!this.parentListEl) {
+            return;
+        }
+        event.stopPropagation();
+        const { target, detail } = event;
+        const { focusableItems, lastSelectedInfo } = this;
+        const selectedItem = target;
+        if (detail.selectMultiple && !!lastSelectedInfo) {
+            const currentIndex = focusableItems.indexOf(selectedItem);
+            const lastSelectedIndex = focusableItems.indexOf(lastSelectedInfo.selectedItem);
+            const startIndex = Math.min(lastSelectedIndex, currentIndex);
+            const endIndex = Math.max(lastSelectedIndex, currentIndex);
+            focusableItems
+                .slice(startIndex, endIndex + 1)
+                .forEach((item) => (item.selected = lastSelectedInfo.selected));
+        }
+        else {
+            this.lastSelectedInfo = { selectedItem, selected: selectedItem.selected };
+        }
+    }
+    handleCalciteInternalListItemChange(event) {
+        if (!!this.parentListEl) {
+            return;
+        }
+        event.stopPropagation();
+        this.updateListItems();
+    }
+    handleCalciteInternalListItemGroupDefaultSlotChange(event) {
+        event.stopPropagation();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        if (sortableComponent.dragActive(this)) {
+            return;
+        }
+        t9n.connectMessages(this);
+        this.connectObserver();
+        this.updateListItems();
+        this.setUpSorting();
+        interactive.connectInteractive(this);
+        this.setParentList();
+    }
+    async componentWillLoad() {
+        loadable.setUpLoadableComponent(this);
+        await t9n.setUpMessages(this);
+    }
+    componentDidRender() {
+        interactive.updateHostInteraction(this);
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        if (sortableComponent.dragActive(this)) {
+            return;
+        }
+        this.disconnectObserver();
+        sortableComponent.disconnectSortableComponent(this);
+        interactive.disconnectInteractive(this);
+        t9n.disconnectMessages(this);
+    }
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's first focusable element.
+     *
+     * @returns {Promise<void>}
+     */
+    async setFocus() {
+        var _a, _b;
+        await loadable.componentFocusable(this);
+        if (this.filterEnabled) {
+            return (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+        }
+        return (_b = this.focusableItems.find((listItem) => listItem.active)) === null || _b === void 0 ? void 0 : _b.setFocus();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, filteredItems, hasFilterActionsStart, hasFilterActionsEnd, hasFilterNoResults, } = this;
+        return (index.h(interactive.InteractiveContainer, { disabled: this.disabled }, index.h("div", { class: CSS.container }, this.dragEnabled ? (index.h("span", { "aria-live": "assertive", class: CSS.assistiveText }, this.assistiveText)) : null, this.renderItemAriaLive(), loading ? index.h("calcite-scrim", { class: CSS.scrim, loading: loading }) : null, index.h("table", { "aria-busy": dom.toAriaBoolean(loading), "aria-label": label || "", class: CSS.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (index.h("thead", null, index.h("tr", { class: { [CSS.sticky]: true } }, index.h("th", { colSpan: utils.MAX_COLUMNS }, index.h("calcite-stack", { class: CSS.stack }, index.h("slot", { name: SLOTS.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: resources.SLOTS.actionsStart }), index.h("calcite-filter", { "aria-label": filterPlaceholder, disabled: disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+            // 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: this.setFilterEl }), index.h("slot", { name: SLOTS.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: resources.SLOTS.actionsEnd })))))) : null, index.h("tbody", { class: CSS.tableContainer }, index.h("slot", { onSlotchange: this.handleDefaultSlotChange }))), index.h("div", { "aria-live": "polite", "data-test-id": "no-results-container", hidden: !(hasFilterNoResults && filterEnabled && filterText && !filteredItems.length) }, index.h("slot", { name: SLOTS.filterNoResults, onSlotchange: this.handleFilterNoResultsSlotChange })))));
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    renderItemAriaLive() {
+        const { messages, filteredItems, parentListEl, effectiveLocale, numberingSystem, filterEnabled, filterText, filteredData, } = this;
+        locale.numberStringFormatter.numberFormatOptions = {
+            locale: effectiveLocale,
+            numberingSystem,
+        };
+        return !parentListEl ? (index.h("div", { "aria-live": "polite", class: CSS.assistiveText }, filterEnabled && filterText && (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) ? (index.h("div", { key: "aria-filter-enabled" }, messages.filterEnabled)) : null, index.h("div", { key: "aria-item-count" }, messages.total.replace("{count}", locale.numberStringFormatter.localize(filteredItems.length.toString()))), filteredItems.length ? (index.h("ol", { key: "aria-item-list" }, filteredItems.map((item) => (index.h("li", null, item.label))))) : null)) : null;
+    }
+    connectObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    }
+    disconnectObserver() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    setUpSorting() {
+        const { dragEnabled } = this;
+        if (!dragEnabled) {
+            return;
+        }
+        sortableComponent.connectSortableComponent(this);
+    }
+    onGlobalDragStart() {
+        this.disconnectObserver();
+    }
+    onGlobalDragEnd() {
+        this.connectObserver();
+    }
+    onDragEnd(detail) {
+        this.calciteListDragEnd.emit(detail);
+    }
+    onDragStart(detail) {
+        this.calciteListDragStart.emit(detail);
+    }
+    onDragSort(detail) {
+        this.setParentList();
+        this.updateListItems();
+        this.calciteListOrderChange.emit(detail);
+    }
+    setParentList() {
+        var _a;
+        this.parentListEl = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-list");
+    }
+    filterElements({ el, filteredItems, visibleParents, }) {
+        const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el);
+        el.filterHidden = filterHidden;
+        const closestParent = el.parentElement.closest(parentSelector);
+        if (!closestParent) {
+            return;
+        }
+        if (!filterHidden) {
+            visibleParents.add(closestParent);
+        }
+        this.filterElements({
+            el: closestParent,
+            filteredItems,
+            visibleParents,
+        });
+    }
+    updateFilteredData(emit = false) {
+        const { filterEl } = this;
+        if (!filterEl) {
+            return;
+        }
+        if (filterEl.filteredItems) {
+            this.filteredData = filterEl.filteredItems;
+        }
+        this.updateListItems(emit);
+    }
+    async performFilter() {
+        const { filterEl, filterText } = this;
+        if (!filterEl) {
+            return;
+        }
+        filterEl.value = filterText;
+        await filterEl.filter(filterText);
+        this.updateFilteredData();
+    }
+    handleNudgeEvent(event) {
+        const { handleSelector, dragSelector } = this;
+        const { direction } = event.detail;
+        const composedPath = event.composedPath();
+        const handle = composedPath.find((el) => (el === null || el === void 0 ? void 0 : el.tagName) && el.matches(handleSelector));
+        const dragEl = composedPath.find((el) => (el === null || el === void 0 ? void 0 : el.tagName) && el.matches(dragSelector));
+        const parentEl = dragEl === null || dragEl === void 0 ? void 0 : dragEl.parentElement;
+        if (!parentEl) {
+            return;
+        }
+        const { filteredItems } = this;
+        const sameParentItems = filteredItems.filter((item) => item.parentElement === parentEl);
+        const lastIndex = sameParentItems.length - 1;
+        const oldIndex = sameParentItems.indexOf(dragEl);
+        let newIndex;
+        if (direction === "up") {
+            newIndex = oldIndex === 0 ? lastIndex : oldIndex - 1;
+        }
+        else {
+            newIndex = oldIndex === lastIndex ? 0 : oldIndex + 1;
+        }
+        this.disconnectObserver();
+        handle.blurUnselectDisabled = true;
+        const referenceEl = (direction === "up" && newIndex !== lastIndex) || (direction === "down" && newIndex === 0)
+            ? sameParentItems[newIndex]
+            : sameParentItems[newIndex].nextSibling;
+        parentEl.insertBefore(dragEl, referenceEl);
+        this.updateListItems();
+        this.connectObserver();
+        this.calciteListOrderChange.emit({
+            dragEl,
+            fromEl: parentEl,
+            toEl: parentEl,
+            newIndex,
+            oldIndex,
+        });
+        handle.setFocus().then(() => (handle.blurUnselectDisabled = false));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "filterText": ["handleFilterTextChange"],
+        "messageOverrides": ["onMessagesChange"],
+        "filterEnabled": ["handleListItemChange"],
+        "group": ["handleListItemChange"],
+        "dragEnabled": ["handleListItemChange"],
+        "selectionMode": ["handleListItemChange"],
+        "selectionAppearance": ["handleListItemChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+List.style = listCss;
+
+exports.calcite_list = List;

package/dist/cjs/calcite-loader.cjs.entry.js

@@ -0,0 +1,80 @@
+/*!
+ * 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 guid = require('./guid-ae73cd27.js');
+
+const loaderCss = "@charset \"UTF-8\";@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:host{position:relative;margin-inline:auto;display:none;align-items:center;justify-content:center;opacity:1;min-block-size:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-color-brand);stroke-width:3;fill:none;transform:scale(1, 1);animation:loader-color-shift calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) alternate-reverse infinite linear;padding-block:var(--calcite-loader-padding, 4rem)}:host([scale=s]){--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}:host([scale=m]){--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}:host([scale=l]){--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.5rem}:host([no-padding]){padding-block:0px}:host{display:flex}.loader__text{display:block;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);margin-block-start:calc(var(--calcite-loader-size) + 1.5rem)}.loader__percentage{position:absolute;display:block;text-align:center;color:var(--calcite-color-text-1);font-size:var(--calcite-loader-font-size);inline-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;transform:scale(1, 1)}.loader__svgs{position:absolute;overflow:visible;opacity:1;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 6.66 / var(--calcite-internal-duration-factor));animation-name:loader-clockwise}.loader__svg{position:absolute;inset-block-start:0px;transform-origin:center;overflow:visible;inset-inline-start:0;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);animation-iteration-count:infinite;animation-timing-function:linear}@supports (display: grid){.loader__svg--1{animation-name:loader-offset-1}.loader__svg--2{animation-name:loader-offset-2}.loader__svg--3{animation-name:loader-offset-3}}:host([type=determinate]){animation:none;stroke:var(--calcite-color-border-3)}:host([type=determinate]) .loader__svgs{animation:none}:host([type=determinate]) .loader__svg--3{animation:none;stroke:var(--calcite-color-brand);stroke-dasharray:150.79632;transform:rotate(-90deg);transition:all var(--calcite-internal-animation-timing-fast) linear}:host([inline]){position:relative;margin:0px;animation:none;stroke:currentColor;stroke-width:2;padding-block:0px;block-size:var(--calcite-loader-size-inline);min-block-size:var(--calcite-loader-size-inline);inline-size:var(--calcite-loader-size-inline);margin-inline-end:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}:host([inline]) .loader__svgs{inset-block-start:0px;margin:0px;inset-inline-start:0;inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([inline]) .loader__svg{inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}:host([complete]){opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms}:host([complete]) .loader__svgs{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms}:host([complete]) .loader__percentage{color:var(--calcite-color-brand);transform:scale(1.05, 1.05);transform-origin:center;transition:color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear}.loader__svg--1{stroke-dasharray:27.9252444444 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 4.8 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444 251.3272;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-83.7757333333}100%{stroke-dasharray:27.9252444444 251.3272;stroke-dashoffset:-279.2524444444}}.loader__svg--2{stroke-dasharray:55.8504888889 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 6.4 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889 223.4019555556;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-97.7383555556}100%{stroke-dasharray:55.8504888889 223.4019555556;stroke-dashoffset:-279.2524444444}}.loader__svg--3{stroke-dasharray:13.9626222222 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 7.734 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222 265.2898222222;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-76.7944222222}100%{stroke-dasharray:13.9626222222 265.2898222222;stroke-dashoffset:-279.2524444444}}@keyframes loader-color-shift{0%{stroke:var(--calcite-color-brand)}33%{stroke:var(--calcite-color-brand-press)}66%{stroke:var(--calcite-color-brand-hover)}100%{stroke:var(--calcite-color-brand)}}@keyframes loader-clockwise{100%{transform:rotate(360deg)}}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Loader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inline = false;
+        this.label = undefined;
+        this.scale = "m";
+        this.type = undefined;
+        this.value = 0;
+        this.text = "";
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    render() {
+        const { el, inline, label, scale, text, type, value } = this;
+        const id = el.id || guid.guid();
+        const radiusRatio = 0.45;
+        const size = inline ? this.getInlineSize(scale) : this.getSize(scale);
+        const radius = size * radiusRatio;
+        const viewbox = `0 0 ${size} ${size}`;
+        const isDeterminate = type === "determinate";
+        const circumference = 2 * radius * Math.PI;
+        const progress = (value / 100) * circumference;
+        const remaining = circumference - progress;
+        const valueNow = Math.floor(value);
+        const hostAttributes = {
+            "aria-valuenow": valueNow,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            complete: valueNow === 100,
+        };
+        const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };
+        const determinateStyle = { "stroke-dasharray": `${progress} ${remaining}` };
+        return (index.h(index.Host, Object.assign({ "aria-label": label, id: id, role: "progressbar" }, (isDeterminate ? hostAttributes : {})), index.h("div", { class: "loader__svgs" }, index.h("svg", { "aria-hidden": "true", class: "loader__svg loader__svg--1", viewBox: viewbox }, index.h("circle", Object.assign({}, svgAttributes))), index.h("svg", { "aria-hidden": "true", class: "loader__svg loader__svg--2", viewBox: viewbox }, index.h("circle", Object.assign({}, svgAttributes))), index.h("svg", Object.assign({ "aria-hidden": "true", class: "loader__svg loader__svg--3", viewBox: viewbox }, (isDeterminate ? { style: determinateStyle } : {})), index.h("circle", Object.assign({}, svgAttributes)))), text && index.h("div", { class: "loader__text" }, text), isDeterminate && index.h("div", { class: "loader__percentage" }, value)));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Return the proper sizes based on the scale property
+     *
+     * @param scale
+     */
+    getSize(scale) {
+        return {
+            s: 32,
+            m: 56,
+            l: 80,
+        }[scale];
+    }
+    getInlineSize(scale) {
+        return {
+            s: 12,
+            m: 16,
+            l: 20,
+        }[scale];
+    }
+    get el() { return index.getElement(this); }
+};
+Loader.style = loaderCss;
+
+exports.calcite_loader = Loader;

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

@@ -7,15 +7,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
-const dom = require('./dom-c9c2c835.js');
-const loadable = require('./loadable-5a794992.js');
-const resources = require('./resources-9447c777.js');
-const t9n = require('./t9n-993a84de.js');
-const locale = require('./locale-d237c9d5.js');
+const index = require('./index-b53bfd7c.js');
+const dom = require('./dom-cf1e2e9f.js');
+const loadable = require('./loadable-41446b78.js');
+const resources = require('./resources-a2b1b149.js');
+const t9n = require('./t9n-463dcbff.js');
+const locale = require('./locale-a615b02f.js');
 require('./guid-ae73cd27.js');
-require('./key-c5504030.js');
-require('./observers-db4527e4.js');
+require('./key-86f4a0b0.js');
+require('./observers-5923a7cc.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.