@esri/solutions-components 0.8.2 → 0.8.3

package/dist/solutions-components/calcite-value-list-item.entry.js

@@ -0,0 +1,153 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { g as getSlotted } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-71585ecc.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { S as SLOTS$1, C as CSS } from './resources-3709252d.js';
+import { I as ICON_TYPES } from './resources-667afb5d.js';
+import './observers-5ba39eee.js';
+import './resources-0f8db821.js';
+import './browser-b8d08bed.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 ICONS = {
+    drag: "drag",
+};
+const SLOTS = {
+    actionsEnd: "actions-end",
+    actionsStart: "actions-start",
+};
+
+const valueListItemCss = ":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{margin-block-end:1px;box-sizing:border-box;display:flex;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2);--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);transition:background-color var(--calcite-animation-timing), box-shadow var(--calcite-animation-timing)}:host *{box-sizing:border-box}calcite-pick-list-item{position:relative;margin:0px;flex-grow:1;--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)}:host([active]),:host([selected]){--tw-shadow:0 0 0 1px var(--calcite-color-brand);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.handle{display:flex;cursor:move;align-items:center;justify-content:center;border-style:none;background-color:transparent;padding-block:0px;padding-inline:0.25rem;color:var(--calcite-color-border-input);outline-color:transparent}.handle:hover{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.handle: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          )}.handle--activated{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.handle calcite-icon{color:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
+
+const ValueListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteListItemChange = createEvent(this, "calciteListItemChange", 6);
+        this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
+        this.calciteValueListItemDragHandleBlur = createEvent(this, "calciteValueListItemDragHandleBlur", 6);
+        this.pickListItem = null;
+        this.guid = `calcite-value-list-item-${guid()}`;
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.getPickListRef = (el) => (this.pickListItem = el);
+        this.handleKeyDown = (event) => {
+            if (event.key === " ") {
+                this.handleActivated = !this.handleActivated;
+            }
+        };
+        this.handleBlur = () => {
+            this.handleActivated = false;
+            this.calciteValueListItemDragHandleBlur.emit({ item: this.el, handle: this.handleEl });
+        };
+        this.handleSelectChange = (event) => {
+            this.selected = event.detail.selected;
+        };
+        this.description = undefined;
+        this.disabled = false;
+        this.deselectDisabled = false;
+        this.nonInteractive = false;
+        this.handleActivated = false;
+        this.icon = null;
+        this.iconFlipRtl = false;
+        this.label = undefined;
+        this.metadata = undefined;
+        this.removable = false;
+        this.selected = false;
+        this.value = undefined;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        connectConditionalSlotComponent(this);
+        connectInteractive(this);
+    }
+    disconnectedCallback() {
+        disconnectConditionalSlotComponent(this);
+        disconnectInteractive(this);
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Toggle the selection state. By default this won't trigger an event.
+     * The first argument allows the value to be coerced, rather than swapping values.
+     *
+     * @param coerce
+     */
+    async toggleSelected(coerce) {
+        this.pickListItem.toggleSelected(coerce);
+    }
+    /** Set focus on the component. */
+    async setFocus() {
+        var _a;
+        await componentFocusable(this);
+        return (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+    }
+    calciteListItemChangeHandler(event) {
+        // adjust item payload from wrapped item before bubbling
+        event.detail.item = this.el;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    renderActionsEnd() {
+        const { el } = this;
+        const hasActionsEnd = getSlotted(el, SLOTS.actionsEnd);
+        return hasActionsEnd ? (h("slot", { name: SLOTS.actionsEnd, slot: SLOTS$1.actionsEnd })) : null;
+    }
+    renderActionsStart() {
+        const { el } = this;
+        const hasActionsStart = getSlotted(el, SLOTS.actionsStart);
+        return hasActionsStart ? (h("slot", { name: SLOTS.actionsStart, slot: SLOTS$1.actionsStart })) : null;
+    }
+    renderHandle() {
+        const { icon, iconFlipRtl } = this;
+        if (icon === ICON_TYPES.grip) {
+            return (h("span", { class: {
+                    [CSS.handle]: true,
+                    [CSS.handleActivated]: this.handleActivated,
+                }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0",
+                // 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.handleEl = el) }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
+        }
+    }
+    render() {
+        return (h(Host, { id: this.el.id || this.guid }, h(InteractiveContainer, { disabled: this.disabled }, this.renderHandle(), h("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
+            // 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.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd()))));
+    }
+    get el() { return getElement(this); }
+};
+ValueListItem.style = valueListItemCss;
+
+export { ValueListItem as calcite_value_list_item };

package/dist/solutions-components/calcite-value-list.entry.js

@@ -0,0 +1,322 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, g as getElement } from './index-bdfaac50.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-71585ecc.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-b39c5433.js';
+import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-a572ef93.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-e715a3dd.js';
+import { e as focusElement } from './dom-b91aa537.js';
+import './browser-b8d08bed.js';
+import './key-9a10d862.js';
+import './lodash-98e4b7d0.js';
+import './array-396bdf3c.js';
+import './resources-9b7e72d5.js';
+import './resources-667afb5d.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.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",
+    handle: "handle",
+};
+var ICON_TYPES;
+(function (ICON_TYPES) {
+    ICON_TYPES["grip"] = "grip";
+})(ICON_TYPES || (ICON_TYPES = {}));
+const TEXT = {
+    filterResults: "Filter results",
+};
+
+/*!
+ * 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
+ */
+function getScreenReaderText(item, status, valueList) {
+    const { items, messages } = valueList;
+    const total = items.length;
+    const position = getItemIndex(valueList, item) + 1;
+    const template = status === "idle"
+        ? messages.dragHandleIdle
+        : status === "active"
+            ? messages.dragHandleActive
+            : status === "change"
+                ? messages.dragHandleChange
+                : messages.dragHandleCommit;
+    return replacePlaceholders(template, item.label, position, total);
+}
+function getHandleAndItemElement(event) {
+    const handle = event
+        .composedPath()
+        .find((item) => item.dataset?.jsHandle !== undefined);
+    const item = event
+        .composedPath()
+        .find((item) => item.tagName?.toLowerCase() === "calcite-value-list-item");
+    return { handle, item };
+}
+function replacePlaceholders(text, label, position, total) {
+    const replacePosition = text.replace("{position}", position.toString());
+    const replaceLabel = replacePosition.replace("{itemLabel}", label);
+    return replaceLabel.replace("{total}", total.toString());
+}
+
+const valueListCss = ":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{position:relative;box-sizing:border-box;display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}:host *{box-sizing:border-box}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-value-list-item:last-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)}:host([filter-enabled]) header{margin-block-end:0.25rem;display:flex;align-items:center;justify-content:flex-end;background-color:var(--calcite-color-foreground-1);--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)}:host([filter-enabled]) header.sticky-pos{position:sticky;inset-block-start:0px;z-index:var(--calcite-z-index-sticky)}calcite-filter{margin-block-end:1px}.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 ValueList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteListChange = createEvent(this, "calciteListChange", 6);
+        this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 6);
+        this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
+        this.lastSelectedItem = null;
+        this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
+        this.handleSelector = `.${CSS.handle}`;
+        this.dragSelector = "calcite-value-list-item";
+        this.setFilterEl = (el) => {
+            this.filterEl = el;
+        };
+        this.setFilteredItems = (filteredItems) => {
+            this.filteredItems = filteredItems;
+        };
+        this.deselectRemovedItems = deselectRemovedItems.bind(this);
+        this.deselectSiblingItems = deselectSiblingItems.bind(this);
+        this.selectSiblings = selectSiblings.bind(this);
+        this.handleFilter = handleFilter.bind(this);
+        this.handleFilterEvent = handleFilterEvent.bind(this);
+        this.getItemData = getItemData.bind(this);
+        this.keyDownHandler = (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
+            const { handle, item } = getHandleAndItemElement(event);
+            if (handle && !item.handleActivated && event.key === " ") {
+                this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
+            }
+            if (!handle || !item.handleActivated) {
+                keyDownHandler.call(this, event);
+                return;
+            }
+            event.preventDefault();
+            const { items } = this;
+            if (event.key === " ") {
+                this.updateScreenReaderText(getScreenReaderText(item, "active", this));
+            }
+            if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
+                return;
+            }
+            const { el } = this;
+            const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
+            if (nextIndex === items.length - 1) {
+                el.appendChild(item);
+            }
+            else {
+                const itemAtNextIndex = el.children[nextIndex];
+                const insertionReferenceItem = itemAtNextIndex === item.nextElementSibling
+                    ? itemAtNextIndex.nextElementSibling
+                    : itemAtNextIndex;
+                el.insertBefore(item, insertionReferenceItem);
+            }
+            this.items = this.getItems();
+            this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
+            requestAnimationFrame(() => focusElement(handle));
+            item.handleActivated = true;
+            this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
+        };
+        this.storeAssistiveEl = (el) => {
+            this.assistiveTextEl = el;
+        };
+        this.handleFocusIn = (event) => {
+            const { handle, item } = getHandleAndItemElement(event);
+            if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+                this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+            }
+        };
+        this.disabled = false;
+        this.canPull = undefined;
+        this.canPut = undefined;
+        this.dragEnabled = false;
+        this.filteredItems = [];
+        this.filteredData = [];
+        this.filterEnabled = false;
+        this.filterPlaceholder = undefined;
+        this.filterText = undefined;
+        this.group = undefined;
+        this.loading = false;
+        this.multiple = false;
+        this.selectionFollowsFocus = false;
+        this.messageOverrides = undefined;
+        this.messages = undefined;
+        this.dataForFilter = [];
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.selectedValues = new Map();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        if (dragActive(this)) {
+            return;
+        }
+        connectInteractive(this);
+        connectLocalized(this);
+        connectMessages(this);
+        initialize.call(this);
+        initializeObserver.call(this);
+        this.setUpSorting();
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        await setUpMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+        handleInitialFilter.call(this);
+    }
+    componentDidRender() {
+        updateHostInteraction(this);
+    }
+    disconnectedCallback() {
+        if (dragActive(this)) {
+            return;
+        }
+        disconnectInteractive(this);
+        disconnectSortableComponent(this);
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        cleanUpObserver.call(this);
+    }
+    calciteListFocusOutHandler(event) {
+        calciteListFocusOutHandler.call(this, event);
+    }
+    calciteListItemRemoveHandler(event) {
+        removeItem.call(this, event);
+    }
+    calciteListItemChangeHandler(event) {
+        calciteListItemChangeHandler.call(this, event);
+    }
+    calciteInternalListItemPropsChangeHandler(event) {
+        event.stopPropagation();
+        this.setUpFilter();
+    }
+    calciteInternalListItemValueChangeHandler(event) {
+        calciteInternalListItemValueChangeHandler.call(this, event);
+        event.stopPropagation();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    onGlobalDragStart() {
+        cleanUpObserver.call(this);
+    }
+    onGlobalDragEnd() {
+        initializeObserver.call(this);
+    }
+    onDragEnd() { }
+    onDragStart() { }
+    onDragSort() {
+        this.items = Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+        const values = this.items.map((item) => item.value);
+        this.calciteListOrderChange.emit(values);
+    }
+    getItems() {
+        return Array.from(this.el.querySelectorAll("calcite-value-list-item"));
+    }
+    setUpItems() {
+        setUpItems.call(this, "calcite-value-list-item");
+        this.setUpSorting();
+    }
+    setUpFilter() {
+        if (this.filterEnabled) {
+            this.dataForFilter = this.getItemData();
+        }
+    }
+    setUpSorting() {
+        const { dragEnabled } = this;
+        if (!dragEnabled) {
+            return;
+        }
+        connectSortableComponent(this);
+    }
+    handleBlur() {
+        if (this.dragEnabled) {
+            this.updateScreenReaderText("");
+        }
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Returns the component's selected items. */
+    async getSelectedItems() {
+        return this.selectedValues;
+    }
+    /**
+     * Sets focus on the component's first focusable element.
+     *
+     * @param focusId
+     */
+    async setFocus(focusId) {
+        await componentFocusable(this);
+        return setFocus.call(this, focusId);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Methods
+    //
+    // --------------------------------------------------------------------------
+    getIconType() {
+        let type = null;
+        if (this.dragEnabled) {
+            type = ICON_TYPES.grip;
+        }
+        return type;
+    }
+    updateScreenReaderText(text) {
+        this.assistiveTextEl.textContent = text;
+    }
+    updateHandleAriaLabel(handleElement, text) {
+        handleElement.ariaLabel = text;
+    }
+    handleValueListItemBlur(event) {
+        const { item, handle } = event.detail;
+        if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item) {
+            this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+        }
+        event.stopPropagation();
+    }
+    render() {
+        return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+ValueList.style = valueListCss;
+
+export { ValueList as calcite_value_list };

package/dist/solutions-components/card-manager.entry.js

@@ -0,0 +1,103 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { g as getLocaleComponentStrings } from './locale-d9463a95.js';
+import { a as queryFeaturesByID } from './queryUtils-2529c537.js';
+import { g as getLayerOrTable } from './mapViewUtils-436a516e.js';
+import './loadModules-827c5581.js';
+import './esri-loader-af2bbfd5.js';
+import './_commonjsHelpers-3cd6d4ee.js';
+import './interfaces-586e863c.js';
+
+const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
+
+const CardManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isMobile = undefined;
+        this.layer = undefined;
+        this.mapView = undefined;
+        this.zoomAndScrollToSelected = undefined;
+        this._cardLoading = false;
+        this._graphics = undefined;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Query the layer for the provided ids and store the result graphics
+     */
+    async featureSelectionChange(evt) {
+        const ids = evt.detail;
+        this._cardLoading = true;
+        // only query if we have some ids...query with no ids will result in all features being returned
+        const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
+        // https://github.com/Esri/solutions-components/issues/365
+        this._graphics = featureSet.sort((a, b) => ids.indexOf(a.getObjectId()) - ids.indexOf(b.getObjectId()));
+        this._cardLoading = false;
+    }
+    /**
+     * Get the layer view for the provided layer id
+     */
+    async layerSelectionChange(evt) {
+        const id = evt.detail[0];
+        this.layer = await getLayerOrTable(this.mapView, id);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        var _a, _b;
+        const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
+        const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
+        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return getElement(this); }
+};
+CardManager.style = cardManagerCss;
+
+export { CardManager as card_manager };