@esri/solutions-components 0.7.23 → 0.7.25

package/dist/esm/calcite-action-menu_2.entry.js

@@ -5,17 +5,17 @@
  */
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement, f as forceUpdate, H as Host } from './index-7183ce4a.js';
 import { g as getRoundRobinIndex } from './array-51c31356.js';
-import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots } from './dom-492b1b24.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement, f as focusFirstTabbable, q as queryElementRoots } from './dom-8f926f33.js';
 import { g as guid } from './guid-36c6c6a5.js';
 import { i as isActivationKey } from './key-af303047.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
 import { a as activeAttr, C as CSS$1, I as ICONS, S as SLOTS } from './resources-1a8d4d77.js';
-import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-03eb4c82.js';
-import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-2e7de651.js';
+import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultOffsetDistance, a as disconnectFloatingUI, r as reposition, F as FloatingCSS } from './floating-ui-c397f653.js';
+import { d as deactivateFocusTrap, a as activateFocusTrap, c as connectFocusTrap, u as updateFocusTrapElements } from './focusTrapComponent-14368766.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.js';
 import { H as Heading } from './Heading-c45d3f45.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3c5e55ab.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { F as FloatingArrow } from './FloatingArrow-245804f3.js';
 import { g as getIconScale } from './component-98bae46b.js';

package/dist/esm/calcite-action-pad_2.entry.js

@@ -5,11 +5,11 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
-import { s as slotChangeGetAssignedElements } from './dom-492b1b24.js';
+import { s as slotChangeGetAssignedElements } from './dom-8f926f33.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-3c5e55ab.js';
-import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-540998b5.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-f16911e7.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-96688cda.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { l as loadModules } from './loadModules-b677d6d7.js';
 import './guid-36c6c6a5.js';

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

@@ -4,14 +4,14 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, H as Host, g as getElement, f as forceUpdate } from './index-7183ce4a.js';
-import { t as toAriaBoolean } from './dom-492b1b24.js';
+import { t as toAriaBoolean } from './dom-8f926f33.js';
 import { g as guid } from './guid-36c6c6a5.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { g as getIconScale } from './component-98bae46b.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3c5e55ab.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
 import './resources-cdc36705.js';
 import './browser-b4c16201.js';
 import './key-af303047.js';

package/dist/esm/{calcite-alert_3.entry.js → calcite-alert_4.entry.js}

@@ -4,23 +4,23 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { u as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, x as setRequestedIcon } from './dom-492b1b24.js';
+import { u as slotChangeHasAssignedElement, t as toAriaBoolean, g as getSlotted, x as setRequestedIcon } from './dom-8f926f33.js';
 import { g as getIconScale } from './component-98bae46b.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-8cfa3086.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale-6107ef11.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-3c5e55ab.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { K as KindIcons } from './resources-6e00e0d1.js';
-import { l as loadModules } from './loadModules-cea493da.js';
-import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
-import { m as getAllLayers } from './mapViewUtils-8fe70944.js';
+import { g as getLocaleComponentStrings, l as loadModules } from './locale-731e75a8.js';
+import { d as getAllLayers } from './mapViewUtils-6daedef8.js';
+import { P as PopupUtils } from './popupUtils-a593bd78.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
 import './key-af303047.js';
 import './observers-8ce200f2.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
-import './interfaces-341e3ab3.js';
+import './interfaces-586e863c.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -307,6 +307,140 @@ const Alert = class {
 };
 Alert.style = alertCss;
 
+const deleteButtonCss = ":host{display:block}";
+
+const DeleteButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.buttonType = "button";
+        this.disabled = false;
+        this.icon = undefined;
+        this.ids = [];
+        this.layer = undefined;
+        this._confirmDelete = false;
+        this._deleteEndabled = false;
+        this._isDeleting = false;
+        this._supportsDelete = undefined;
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async idsWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async layerWatchHandler() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  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() {
+        return (h(Host, null, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s" }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        this._setDeleteEnabled();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Verify if the layer supports delete and that we have 1 or more ids
+     */
+    _setDeleteEnabled() {
+        var _a, _b, _c, _d;
+        this._supportsDelete = ((_a = this.layer) === null || _a === void 0 ? void 0 : _a.editingEnabled) && ((_d = (_c = (_b = this.layer) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.operations) === null || _d === void 0 ? void 0 : _d.supportsDelete);
+        this._deleteEndabled = !this.disabled || this._supportsDelete && this.ids.length > 0;
+    }
+    /**
+     * Delete all selected records or shows an alert if the layer does not have editing enabled
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
+    _delete() {
+        this._confirmDelete = true;
+    }
+    /**
+     * Show delete confirmation message
+     *
+     * @returns node to confirm or deny the delete operation
+     */
+    _deleteMessage() {
+        const confirmMessage = this.ids.length === 1 ? this._translations.confirmSingle :
+            this._translations.confirmMultiple;
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", onCalciteModalClose: () => this._deleteClosed(), open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations.deleteFeature), h("div", { slot: "content" }, confirmMessage), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._deleteClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+    }
+    /**
+     * Delete the currently selected features
+     */
+    async _deleteFeatures() {
+        this._isDeleting = true;
+        const deleteFeatures = this.ids.map((objectId) => {
+            return { objectId };
+        });
+        await this.layer.applyEdits({
+            deleteFeatures
+        });
+        this._isDeleting = false;
+        this._deleteClosed();
+        this.editsComplete.emit("delete");
+    }
+    /**
+     * Set the alertOpen member to false when the alert is closed
+     */
+    _deleteClosed() {
+        this._confirmDelete = false;
+    }
+    /**
+     * 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); }
+    static get watchers() { return {
+        "ids": ["idsWatchHandler"],
+        "layer": ["layerWatchHandler"]
+    }; }
+};
+DeleteButton.style = deleteButtonCss;
+
 const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-color-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-color-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-color-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
 
 const EditCard = class {
@@ -516,95 +650,6 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-/** @license
- * Copyright 2022 Esri
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*    http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-class PopupUtils {
-    /**
-     * Get the popup title that honors arcade expressions
-     *
-     * @returns Promise resolving with the popup title
-     *
-     * @protected
-     */
-    async getPopupTitle(graphic) {
-        var _a, _b, _c;
-        if (!this.arcade) {
-            await this._initModules();
-        }
-        let attributes = {};
-        for (const [key, value] of Object.entries(graphic.attributes)) {
-            attributes = Object.assign(Object.assign({}, attributes), { [`{${key.toUpperCase()}}`]: value });
-        }
-        const layer = graphic.layer;
-        const popupTitle = this._removeTags((_a = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.title);
-        if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
-            for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
-                const info = layer.popupTemplate.expressionInfos[i];
-                const profile = {
-                    variables: [
-                        {
-                            name: "$feature",
-                            type: "feature"
-                        }
-                    ]
-                };
-                try {
-                    const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
-                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
-                    if (arcadeTitle != null || arcadeTitle !== "") {
-                        attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
-                    }
-                }
-                catch (_d) {
-                    continue;
-                }
-            }
-        }
-        return popupTitle === null || popupTitle === void 0 ? void 0 : popupTitle.replace(/{.*?}/g, (placeholder) => {
-            return attributes[placeholder.toUpperCase()] != null ? attributes[placeholder.toUpperCase()] : "";
-        });
-    }
-    /**
-     * Remove any tags from the title
-     *
-     * @returns title string without tags
-     *
-     * @protected
-     */
-    _removeTags(str) {
-        if (str == null || str === "") {
-            return "";
-        }
-        return str.toString().replace(/(<([^>]+)>)/gi, "");
-    }
-    /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
-     * @protected
-     */
-    async _initModules() {
-        const [arcade] = await loadModules([
-            "esri/arcade"
-        ]);
-        this.arcade = arcade;
-    }
-}
-
 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}.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}.padding-top-46{padding-top:46px}.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}";
 
 const InfoCard = class {
@@ -617,6 +662,7 @@ const InfoCard = class {
         this.isMobile = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.allowEditing = true;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -633,23 +679,7 @@ const InfoCard = class {
      * Watch for changes to the graphic and update the feature widget
      */
     async graphicsWatchHandler() {
-        var _a;
-        if (!this._features) {
-            await this._initFeaturesWidget();
-        }
-        if (this.graphics.length > 0) {
-            const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
-            this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
-            this._features.open({
-                features: this.graphics
-            });
-        }
-        else {
-            this._features.clear();
-            this._features.close();
-        }
-        this._count = this._getCount();
+        await this.setGraphics();
     }
     /**
      * Watch for changes to the isMobile prop then init the Features widget
@@ -690,9 +720,12 @@ const InfoCard = class {
      * Reset key properties when the layer selection changes
      */
     async layerSelectionChange() {
+        var _a;
         this._showListView = false;
-        this._features.viewModel.featureMenuOpen = false;
-        this._features.close();
+        if ((_a = this._features) === null || _a === void 0 ? void 0 : _a.viewModel) {
+            this._features.viewModel.featureMenuOpen = false;
+            this._features.close();
+        }
     }
     /**
      * Refresh the info-card graphics
@@ -715,11 +748,21 @@ const InfoCard = class {
         await this._getTranslations();
         this._popupUtils = new PopupUtils();
     }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     * @returns Promise when complete
+     */
+    async componentDidLoad() {
+        var _a;
+        if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            await this.setGraphics();
+        }
+    }
     /**
      * Renders the component.
      */
     render() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const loadingClass = this.isLoading ? "" : "display-none";
         const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
         const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
@@ -727,7 +770,11 @@ const InfoCard = class {
         const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
-        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, 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 ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : 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-cancel" }, h("span", null, this._translations.cancel))) : undefined), 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: (_c = this._features) === null || _c === void 0 ? void 0 : _c.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)))));
+        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, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + 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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -749,6 +796,30 @@ const InfoCard = class {
         this.Features = Features;
         this.reactiveUtils = reactiveUtils;
     }
+    /**
+     * Initializes the features widget if not created and updates the feature widget and other required states
+     *
+     * @protected
+     */
+    async setGraphics() {
+        var _a;
+        if (!this._features) {
+            await this._initFeaturesWidget();
+        }
+        if (this.graphics.length > 0) {
+            this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
+            this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._features.open({
+                features: this.graphics
+            });
+        }
+        else {
+            this._features.clear();
+            this._features.close();
+        }
+        this._count = this._getCount();
+    }
     /**
      * Init the Feature widget so we can display the popup content
      *
@@ -871,4 +942,4 @@ const InfoCard = class {
 };
 InfoCard.style = infoCardCss;
 
-export { Alert as calcite_alert, EditCard as edit_card, InfoCard as info_card };
+export { Alert as calcite_alert, DeleteButton as delete_button, EditCard as edit_card, InfoCard as info_card };

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

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement } from './index-7183ce4a.js';
-import { w as getModeName } from './dom-492b1b24.js';
+import { w as getModeName } from './dom-8f926f33.js';
 import { g as hexToRGB, i as isValidHex } from './utils-abdd879e.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';

package/dist/esm/calcite-block-section.entry.js

@@ -4,10 +4,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom-492b1b24.js';
+import { f as focusFirstTabbable, a as getElementDir, t as toAriaBoolean } from './dom-8f926f33.js';
 import { i as isActivationKey } from './key-af303047.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-3c5e55ab.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-f16911e7.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';

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

@@ -5,15 +5,15 @@
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
-import { f as focusFirstTabbable, g as getSlotted, t as toAriaBoolean } from './dom-492b1b24.js';
+import { f as focusFirstTabbable, g as getSlotted, t as toAriaBoolean } from './dom-8f926f33.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
-import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, a as getDateTimeFormat } from './locale-8cfa3086.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-3c5e55ab.js';
+import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter, a as getDateTimeFormat } from './locale-6107ef11.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-f16911e7.js';
 import { H as Heading } from './Heading-c45d3f45.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent-982c6b9e.js';
-import { g as getDaysDiff, c as dateToISO, e as dateFromISO, f as dateFromRange, s as setEndOfDay } from './date-1743b515.js';
-import { g as getValueAsDateRange, a as getLocaleData } from './utils-56206ec2.js';
+import { g as getDaysDiff, c as dateToISO, e as dateFromISO, f as dateFromRange, s as setEndOfDay } from './date-8b4a8f33.js';
+import { g as getValueAsDateRange, a as getLocaleData } from './utils-93fd55c4.js';
 import './observers-8ce200f2.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';

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

@@ -4,16 +4,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement } from './index-7183ce4a.js';
-import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form-9bccaf85.js';
+import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form-133b00c7.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-14301f4d.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-cd393c81.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { g as getIconScale } from './component-98bae46b.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-3c5e55ab.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { w as watchGlobalAttributes, u as unwatchGlobalAttributes } from './globalAttributes-03c9e433.js';
-import { t as toAriaBoolean } from './dom-492b1b24.js';
+import { t as toAriaBoolean } from './dom-8f926f33.js';
 import './browser-b4c16201.js';
 import './key-af303047.js';
 import './guid-36c6c6a5.js';

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

@@ -5,9 +5,9 @@
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7183ce4a.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
-import { t as toAriaBoolean, g as getSlotted } from './dom-492b1b24.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
-import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-3c5e55ab.js';
+import { t as toAriaBoolean, g as getSlotted } from './dom-8f926f33.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
+import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n-f16911e7.js';
 import './observers-8ce200f2.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';

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

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { t as toAriaBoolean } from './dom-492b1b24.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-9bccaf85.js';
+import { t as toAriaBoolean } from './dom-8f926f33.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-133b00c7.js';
 import { g as guid } from './guid-36c6c6a5.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
 import { i as isActivationKey } from './key-af303047.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-14301f4d.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-cd393c81.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
 import './resources-cdc36705.js';
 import './browser-b4c16201.js';

package/dist/esm/calcite-chip-group.entry.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7183ce4a.js';
-import { d as focusElementInGroup, t as toAriaBoolean } from './dom-492b1b24.js';
+import { d as focusElementInGroup, t as toAriaBoolean } from './dom-8f926f33.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-c3685e51.js';

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

@@ -4,12 +4,12 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
-import { u as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom-492b1b24.js';
+import { u as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom-8f926f33.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1149b5cb.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable-c3685e51.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-3c5e55ab.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-f16911e7.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-20bb1dc4.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
 import { c as createObserver } from './observers-8ce200f2.js';
 import { i as isActivationKey } from './key-af303047.js';
 import { g as getIconScale } from './component-98bae46b.js';

package/dist/esm/calcite-color-picker-hex-input_2.entry.js

@@ -6,7 +6,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement, F as Fragment } from './index-7183ce4a.js';
 import { j as isLonghandHex, i as isValidHex, r as rgbToHex, n as normalizeHex, o as opacityToAlpha, h as hexify, k as hexChar, a as alphaToOpacity } from './utils-abdd879e.js';
 import { c as color, O as OPACITY_LIMITS } from './resources-242fdf8d.js';
-import { e as focusElement, w as getModeName } from './dom-492b1b24.js';
+import { e as focusElement, w as getModeName } from './dom-8f926f33.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-c3685e51.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './guid-36c6c6a5.js';

package/dist/esm/calcite-color-picker.entry.js

@@ -5,14 +5,14 @@
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-7183ce4a.js';
 import { c as color, C as CSS, D as DEFAULT_COLOR, a as DIMENSIONS, H as HSV_LIMITS, O as OPACITY_LIMITS, b as HUE_LIMIT_CONSTRAINED, S as SCOPE_SIZE, d as DEFAULT_STORAGE_KEY_PREFIX, R as RGB_LIMITS } from './resources-242fdf8d.js';
-import { i as isPrimaryPointerButton, a as getElementDir } from './dom-492b1b24.js';
+import { i as isPrimaryPointerButton, a as getElementDir } from './dom-8f926f33.js';
 import { C as CSSColorMode, n as normalizeHex, h as hexify, o as opacityToAlpha, a as alphaToOpacity, b as alphaCompatible, p as parseMode, c as colorEqual, t as toNonAlphaMode, d as normalizeAlpha, e as toAlphaMode, f as normalizeColor } from './utils-abdd879e.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-20bb1dc4.js';
 import { i as isActivationKey } from './key-af303047.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-c3685e51.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-8cfa3086.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
 import { r as remap, c as clamp, a as closeToRangeEdge } from './math-cdaf4dc0.js';
-import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-3c5e55ab.js';
+import { u as updateMessages, s as setUpMessages, c as connectMessages, d as disconnectMessages } from './t9n-f16911e7.js';
 import { t as throttle } from './throttle-9ab70933.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './guid-36c6c6a5.js';

package/dist/esm/calcite-combobox-item-group.entry.js

@@ -5,8 +5,8 @@
  */
 import { r as registerInstance, h, g as getElement } from './index-7183ce4a.js';
 import { g as guid } from './guid-36c6c6a5.js';
-import { g as getAncestors, a as getDepth } from './utils-8287806a.js';
-import './dom-492b1b24.js';
+import { g as getAncestors, a as getDepth } from './utils-c3509713.js';
+import './dom-8f926f33.js';
 import './resources-cdc36705.js';
 
 /*!