@esri/solutions-components 0.8.7 → 0.8.9

package/dist/components/map-select-tools2.js

@@ -207,7 +207,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
+        return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
     }
     /**
      * Renders the buffer tools component.
@@ -216,7 +216,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
         var _a, _b;
         const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
@@ -252,7 +252,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
      * @protected
      */
     _getMapLayerPicker() {
-        return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
+        return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], showTables: false }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -324,7 +324,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
             });
             this._selectionLabel = (_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.label;
             if (!this._useLayerFeaturesEnabled) {
-                (_d = this._drawTools) === null || _d === void 0 ? void 0 : _d.updateGraphics();
+                await ((_d = this._drawTools) === null || _d === void 0 ? void 0 : _d.updateGraphics());
             }
             await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
         }
@@ -470,7 +470,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
             }
             this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
             if (this._workflowType === EWorkflowType.SKETCH) {
-                this._drawTools.updateGraphics();
+                await this._drawTools.updateGraphics();
             }
             await this._updateLabel();
             this._clearSearchWidget();

package/dist/components/mapViewUtils.js

@@ -155,12 +155,13 @@ async function getAllLayers(mapView) {
  * @param layerView the layer view to highlight
  * @param mapView the map view used if updateExtent is true
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
+ * @param zoomToScale optional (default 0) zoomScale that individual points will use when zoomed to
  *
  * @returns Promise resolving with the highlight handle
  */
-async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
+async function highlightFeatures(ids, layerView, mapView, updateExtent = false, zoomToScale = 0) {
     if (updateExtent) {
-        await goToSelection(ids, layerView, mapView, false);
+        await goToSelection(ids, layerView, mapView, false, undefined, zoomToScale);
         //wait for sometime to load the feature in layerView then only the highlight will work
         await new Promise(resolve => setTimeout(resolve, 1000));
     }
@@ -246,13 +247,18 @@ async function flashSelection(ids, layerView, featureEffect) {
  * @param layerView the layer view that contains the OIDs
  * @param mapView the map view to show the extent change
  * @param flashFeatures optional (default true) boolean to indicate if we should flash the features
- *
+ * @param featureEffect optional (default undefined) feature effect when flashing the features
+ * @param zoomToScale optional (default to 0) zoomScale that individual points will use when zoomed to
  * @returns Promise resolving when the operation is complete
  *
  */
-async function goToSelection(ids, layerView, mapView, flashFeatures = true, featureEffect = undefined) {
+async function goToSelection(ids, layerView, mapView, flashFeatures = true, featureEffect = undefined, zoomToScale = 0) {
     const result = await queryExtent(ids, layerView.layer);
-    await mapView.goTo(result.extent);
+    const goToParams = { target: result.extent };
+    if (result.count === 1 && layerView.layer.geometryType === 'point' && zoomToScale) {
+        goToParams.scale = zoomToScale;
+    }
+    await mapView.goTo(goToParams);
     if (flashFeatures) {
         await flashSelection(ids, layerView, featureEffect);
     }

package/dist/components/refine-selection2.js

@@ -313,7 +313,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
         });
         const oids = Array.isArray(graphics) ? graphics.map(g => { var _a; return g.attributes[(_a = g === null || g === void 0 ? void 0 : g.layer) === null || _a === void 0 ? void 0 : _a.objectIdField]; }) : [];
         await this._updateIds(oids, this._selectionMode, this._refineSelectionSet.undoStack, this._refineLayer);
-        this._drawTools.clear();
+        void this._drawTools.clear();
     }
     /**
      * Highlight any selected features in the map

package/dist/esm/{calcite-action-menu_2.entry.js → calcite-action-menu_3.entry.js}

@@ -5,11 +5,11 @@
  */
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, f as forceUpdate, H as Host } from './index-164d485a.js';
 import { g as getRoundRobinIndex } from './array-396bdf3c.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots } from './dom-38c6f027.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots, D as slotChangeHasContent } from './dom-38c6f027.js';
 import { g as guid } from './guid-b75a5f7b.js';
 import { i as isActivationKey } from './key-c83d835f.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-37e7fbd6.js';
-import { a as activeAttr, C as CSS$1, I as ICONS, S as SLOTS } from './resources-20074cb1.js';
+import { a as activeAttr, C as CSS$2, I as ICONS, S as SLOTS } from './resources-20074cb1.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-41dfe3f1.js';
 import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-47ddce58.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.js';
@@ -272,7 +272,7 @@ const ActionMenu = class {
     }
     renderMenuButton() {
         const { appearance, label, scale, expanded } = this;
-        const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { appearance: appearance, class: CSS$1.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
+        const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { appearance: appearance, class: CSS$2.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
             // 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.setDefaultMenuButtonEl })));
         return menuButtonSlot;
@@ -281,7 +281,7 @@ const ActionMenu = class {
         const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
         const activeAction = actionElements[activeMenuItemIndex];
         const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-        return (h("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$1.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        return (h("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$2.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     render() {
         return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS.tooltip, onSlotchange: this.updateTooltip })));
@@ -303,7 +303,7 @@ ActionMenu.style = actionMenuCss;
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
  * v2.4.0
  */
-const CSS = {
+const CSS$1 = {
     container: "container",
     imageContainer: "image-container",
     closeButtonContainer: "close-button-container",
@@ -646,14 +646,14 @@ const Popover = class {
     // --------------------------------------------------------------------------
     renderCloseButton() {
         const { messages, closable } = this;
-        return closable ? (h("div", { class: CSS.closeButtonContainer, key: CSS.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
+        return closable ? (h("div", { class: CSS$1.closeButtonContainer, key: CSS$1.closeButtonContainer }, h("calcite-action", { appearance: "transparent", class: CSS$1.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
             // 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: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, h("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })))) : null;
     }
     renderHeader() {
         const { heading, headingLevel } = this;
-        const headingNode = heading ? (h(Heading, { class: CSS.heading, level: headingLevel }, heading)) : null;
-        return headingNode ? (h("div", { class: CSS.header, key: CSS.header }, headingNode, this.renderCloseButton())) : null;
+        const headingNode = heading ? (h(Heading, { class: CSS$1.heading, level: headingLevel }, heading)) : null;
+        return headingNode ? (h("div", { class: CSS$1.header, key: CSS$1.header }, headingNode, this.renderCloseButton())) : null;
     }
     render() {
         const { effectiveReferenceElement, heading, label, open, pointerDisabled, floatingLayout } = this;
@@ -668,9 +668,9 @@ const Popover = class {
             },
             // 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.setTransitionEl }, arrowNode, h("div", { class: {
-                [CSS.hasHeader]: !!heading,
-                [CSS.container]: true,
-            } }, this.renderHeader(), h("div", { class: CSS.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
+                [CSS$1.hasHeader]: !!heading,
+                [CSS$1.container]: true,
+            } }, this.renderHeader(), h("div", { class: CSS$1.content }, h("slot", null)), !heading ? this.renderCloseButton() : null))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -689,4 +689,110 @@ const Popover = class {
 };
 Popover.style = popoverCss;
 
-export { ActionMenu as calcite_action_menu, Popover as calcite_popover };
+/*!
+ * 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 = {
+    scrim: "scrim",
+    content: "content",
+};
+const BREAKPOINTS = {
+    s: 72,
+    // medium is assumed default.
+    l: 480, // Greater than or equal to 480px.
+};
+
+const scrimCss = ":host{--calcite-scrim-background:var(--calcite-color-transparent-scrim);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-color-transparent-scrim))}.content{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}";
+
+const Scrim = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.resizeObserver = createObserver("resize", () => this.handleResize());
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleDefaultSlotChange = (event) => {
+            this.hasContent = slotChangeHasContent(event);
+        };
+        this.storeLoaderEl = (el) => {
+            this.loaderEl = el;
+            this.handleResize();
+        };
+        this.loading = false;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.loaderScale = undefined;
+        this.defaultMessages = undefined;
+        this.effectiveLocale = "";
+        this.hasContent = false;
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    connectedCallback() {
+        var _a;
+        connectLocalized(this);
+        connectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    }
+    async componentWillLoad() {
+        await setUpMessages(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Render Method
+    //
+    // --------------------------------------------------------------------------
+    render() {
+        const { hasContent, loading, messages } = this;
+        return (h("div", { class: CSS.scrim }, loading ? (h("calcite-loader", { label: messages.loading, scale: this.loaderScale,
+            // 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.storeLoaderEl })) : null, h("div", { class: CSS.content, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    }
+    getScale(size) {
+        if (size < BREAKPOINTS.s) {
+            return "s";
+        }
+        else if (size >= BREAKPOINTS.l) {
+            return "l";
+        }
+        else {
+            return "m";
+        }
+    }
+    handleResize() {
+        var _a;
+        const { loaderEl, el } = this;
+        if (!loaderEl) {
+            return;
+        }
+        this.loaderScale = this.getScale((_a = Math.min(el.clientHeight, el.clientWidth)) !== null && _a !== void 0 ? _a : 0);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+Scrim.style = scrimCss;
+
+export { ActionMenu as calcite_action_menu, Popover as calcite_popover, Scrim as calcite_scrim };

package/dist/esm/calcite-alert_4.entry.js

@@ -12,7 +12,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.j
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
 import { K as KindIcons } from './resources-88a48c5c.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-bcbea4ef.js';
-import { a as getAllLayers } from './mapViewUtils-253178f1.js';
+import { a as getAllLayers } from './mapViewUtils-2ec19fb0.js';
 import { P as PopupUtils } from './popupUtils-af124b47.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
@@ -664,7 +664,7 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}";
 
 const InfoCard = class {
     constructor(hostRef) {
@@ -678,6 +678,8 @@ const InfoCard = class {
         this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -723,6 +725,45 @@ const InfoCard = class {
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
+    /**
+     * Get the current selected feature from the Features widget
+     * @returns Promise resolving with the current feature
+     */
+    async refresh() {
+        await this.setGraphics();
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        this._features.previous();
+        this._count = this._getCount();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        this._features.next();
+        this._count = this._getCount();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        this._showListView = !this._showListView;
+        const i = this._features.selectedFeatureIndex;
+        this._features.open({
+            features: this.graphics,
+            featureMenuOpen: this._showListView
+        });
+        this._features.selectedFeatureIndex = i;
+    }
+    /**
+     * update the current graphics to the features widget
+     */
+    async updateCurrentGraphic(selectedGraphic) {
+        this._features.selectedFeatureWidget.graphic = selectedGraphic;
+    }
     /**
      * Respond to and close the edit record display
      *
@@ -787,8 +828,8 @@ const InfoCard = class {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, h("calcite-shell", { style: { position: this.position } }, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-action", { class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { class: "pagination-count" }, this._count)), h("div", null, h("calcite-button", { appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -863,7 +904,7 @@ const InfoCard = class {
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
-                            this.selectionChanged.emit([this._features.selectedFeature]);
+                            this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                         }
                     });
                 }