@esri/solutions-components 0.10.33 → 0.10.35

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

@@ -201,7 +201,7 @@ const CardManager = class {
 };
 CardManager.style = CardManagerStyle0;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-foreground-1) !important}.search{--calcite-color-border-input:var(--calcite-color-border-3);width:60%;padding:10px}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-foreground-1) !important}.search{--calcite-color-border-input:var(--calcite-color-border-3);width:60%;padding:10px}.delete-red{--calcite-icon-color:var(--calcite-color-status-danger);--calcite-color-text-1:var(--calcite-color-status-danger);--calcite-color-text-3:var(--calcite-color-status-danger)}";
 const LayerTableStyle0 = layerTableCss;
 
 const LayerTable = class {
@@ -209,6 +209,7 @@ const LayerTable = class {
         registerInstance(this, hostRef);
         this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
         this.toggleFilter = createEvent(this, "toggleFilter", 7);
+        this.appLayout = undefined;
         this.defaultGlobalId = undefined;
         this.defaultLayerId = undefined;
         this.defaultOid = undefined;
@@ -237,6 +238,7 @@ const LayerTable = class {
         this._filterOpen = false;
         this._layer = undefined;
         this._selectAllActive = false;
+        this._deleteDialogOpen = false;
         this._showHideOpen = false;
         this._showOnlySelected = false;
         this._toolInfos = undefined;
@@ -412,6 +414,12 @@ const LayerTable = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Handle url defaults when defaultOid is set
      */
@@ -698,11 +706,12 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '46394d7e108068600980efd766fbf5d91243f3c9' }, h("calcite-shell", { key: 'd831121a56070552139386033b02ddc2531c29e9' }, this._getTableControlRow("header"), h("div", { key: '591e0b0bba19f1dbe99049a470b5d3c04253a2c2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd70244a3c989a5bea8bbbaf33c4ebe9c04fc4515', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'fd14c6dab7898e27bd61bbc03878c898d26f042a', class: "search-container" }, h("calcite-input", { key: '9675cc22233456446be8a6b9fc24842fbb3f88e2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '74447458a0ac4cee6934e7101a5fee2c180d1330', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '6c2a5ff4a69690fde002005eb9c55047c25ad63d', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '04fccaaa9862ed315d99ad74f7e1135dd5656613' }, h("calcite-shell", { key: 'e332d781be1499857a5e17e37ad2e058bba453b1' }, this._getTableControlRow("header"), h("div", { key: '6337e494f879c250494c5f5859daec627fdd0700', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd0d437997906fd15f97765cb89c3917f66b20c37', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '596a2d54fd707941d9e2ec167598313d9ee9b295', class: "search-container" }, h("calcite-input", { key: '31cd1ffb09bc2c6c9c1f9daf39f3e9549cbceeb2', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: 'b4ba3d32fb346134672e08d55428bd38ac43f40d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4fbac73935be7a1163643543e6d77a200534e5e3', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal()));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal(), h("delete-dialog", { key: '3b0dba8bc391d777f4687ad6f4e905aeb1eb580b', id: "deleteDialogId", ids: this._getIds(), layer: this._layer, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen, ref: (el) => this._deleteDialog = el })));
     }
+    _deleteDialog;
     /**
      * Called once after the component is loaded
      */
@@ -1005,7 +1014,7 @@ const LayerTable = class {
                     icon: "trash",
                     indicator: undefined,
                     label: this._translations.delete,
-                    func: () => undefined,
+                    func: () => this._showDelete(),
                     disabled: !featuresSelected,
                     isDanger: true,
                     isOverflow: false
@@ -1245,7 +1254,7 @@ const LayerTable = class {
     _getDropdown(id) {
         const dropdownItems = this._getDropdownItems();
         return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
+            return (h("calcite-dropdown-group", { class: `${item.disabled ? "disabled" : ""} ${item.icon === "trash" ? "delete-red" : ""}`, selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
     }
     /**
@@ -1270,6 +1279,15 @@ const LayerTable = class {
         const _disabled = this._layer === undefined ? true : disabled;
         return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: `layer-table-${icon}`, indicator: indicator, label: label, loading: loading, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
     }
+    /**
+     * Show the delete dialog
+     *
+     * @param
+     *
+     */
+    _showDelete() {
+        this._deleteDialogOpen = true;
+    }
     /**
      * Get an action and tooltip for share
      *
@@ -1308,6 +1326,7 @@ const LayerTable = class {
         else {
             urlObj.searchParams.delete("oid");
         }
+        urlObj.searchParams.set("applayout", this.appLayout);
         this._shareNode.shareUrl = urlObj.href;
     }
     /**
@@ -1345,7 +1364,7 @@ const LayerTable = class {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, id: "solutions-delete", ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -1353,7 +1372,7 @@ const LayerTable = class {
      * @param number[] the selected ids
      */
     _getIds() {
-        return this._table.highlightIds.toArray();
+        return this._table?.highlightIds?.toArray();
     }
     /**
      * Store a reference to the table node after it's first created
@@ -2052,6 +2071,7 @@ const LayerTable = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "appLayout": ["appLayoutWatchHandler"],
         "defaultOid": ["defaultOidWatchHandler"],
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "enableCSV": ["enableCSVWatchHandler"],
@@ -2117,6 +2137,7 @@ const MapCard = class {
         this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
         this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.clearSelection = createEvent(this, "clearSelection", 7);
+        this.appLayout = undefined;
         this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.defaultLayerId = undefined;
@@ -2124,6 +2145,7 @@ const MapCard = class {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
+        this.enableShare = false;
         this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
@@ -2141,6 +2163,8 @@ const MapCard = class {
         this.theme = undefined;
         this.toolOrder = undefined;
         this.isMapLayout = undefined;
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
         this.selectedFeaturesIds = undefined;
         this.selectedLayer = undefined;
         this.zoomToScale = undefined;
@@ -2224,6 +2248,10 @@ const MapCard = class {
      * ResizeObserver: The observer that watches for toolbar size changes
      */
     _resizeObserver;
+    /**
+     * HTMLInstantAppsSocialShareElement: Element to support app sharing to social media
+     */
+    _shareNode;
     /**
      * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
      */
@@ -2253,12 +2281,36 @@ const MapCard = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Update the url params when the appLayout changes
+     */
+    appLayoutWatchHandler() {
+        this._updateShareUrl();
+    }
     /**
      * Add/remove home widget
      */
     enableHomeWatchHandler() {
         this._initHome();
     }
+    /**
+     * Update the toolbar when the share button is enabled/disabled
+     */
+    enableShareWatchHandler() {
+        // this should be caught by component did render and is when I test locally
+        // however have had reported case where it is not somehow on devext so adding explicit check here
+        if (this._toolbar) {
+            this._updateToolbar();
+        }
+    }
+    /**
+     * watch for changes in map view and get the first layer
+     */
+    async mapViewWatchHandler() {
+        if (this.mapView) {
+            this._updateShareUrl();
+        }
+    }
     /**
      * watch for changes in layer view and verify if it has editing enabled
      */
@@ -2271,6 +2323,7 @@ const MapCard = class {
      * watch for features ids changes
      */
     async selectedFeaturesIdsWatchHandler() {
+        this._updateShareUrl();
         this._validateEnabledActions();
     }
     /**
@@ -2299,12 +2352,14 @@ const MapCard = class {
      */
     async resetFilter() {
         this._filterActive = false;
+        this._updateShareUrl();
     }
     /**
      * updates the filter
      */
     async updateFilterState() {
         this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
+        this._updateShareUrl();
     }
     /**
      * updates the layer in map layer picker
@@ -2380,7 +2435,7 @@ const MapCard = class {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (h(Host, { key: '94d7399ed75c0e90487d6153a0d28ab6f722ae93' }, h("div", { key: 'e194d8800dd7a865e101d779d032d164f3e5562d', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options")), h("calcite-progress", { key: '0abdbf4e8ba5861866aba7791dfdb91a7a5f4daa', class: progressClass, value: 0 }), h("div", { key: '83aa012aeef6ae64e49007d542fd949e7d4602f4', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '229cc18b36885cad12d44c13e1fe37a97403b9d8', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: 'd4e5ff9c4aa08a4effe19a54a1a48463cb8b3774' }, h("div", { key: '51ee35d267d5ef081a4c160de3e03b1790d328c8', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '70a5c232aae8a9ff6740fd326e6ba6fe61936541', class: progressClass, value: 0 }), h("div", { key: 'c399acc019d7f0a16dbb644eee4cfdd1e6e83c7c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'c6a88ccfa140fe9b0d059f74b9254af6ef0997ce', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded
@@ -2399,6 +2454,7 @@ const MapCard = class {
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
+        this._updateShareUrl();
     }
     //--------------------------------------------------------------------------
     //
@@ -2477,6 +2533,7 @@ const MapCard = class {
                 mapView: this.mapView
             });
         }
+        this._updateShareUrl();
     }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
@@ -2495,7 +2552,7 @@ const MapCard = class {
                     prev += cur.width;
                     return prev;
                 }, 0);
-                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker"];
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker", "solutions-action-share"];
                 if (controlsWidth > toolbarWidth) {
                     if (this._toolbarSizeInfos.length > 0) {
                         const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
@@ -2621,6 +2678,50 @@ const MapCard = class {
             return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.icon, id: "solutions-subset-list", onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })))) : undefined;
     }
+    /**
+     * Get an action and tooltip for share
+     *
+     * @param icon string the name of the icon to display, will also be used in its id
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getShare(icon) {
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => {
+                this._shareNode = el;
+                this._updateShareUrl();
+            }, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+    }
+    /**
+     * Called each time the values that are used for custom url params change
+     */
+    _updateShareUrl() {
+        const url = this._shareNode?.shareUrl;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the additional search params
+        if (this._loadedId) {
+            urlObj.searchParams.set("webmap", this._loadedId);
+        }
+        else {
+            urlObj.searchParams.delete("webmap");
+        }
+        if (this.selectedLayer?.id) {
+            urlObj.searchParams.set("layer", this.selectedLayer.id);
+        }
+        else {
+            urlObj.searchParams.delete("layer");
+        }
+        if (this.selectedFeaturesIds?.length > 0) {
+            urlObj.searchParams.set("oid", this.selectedFeaturesIds.join(","));
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        urlObj.searchParams.set("applayout", this.appLayout);
+        this._shareNode.shareUrl = urlObj.href;
+    }
     /**
      * Open show/hide dropdown
      * @protected
@@ -2896,7 +2997,10 @@ const MapCard = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "appLayout": ["appLayoutWatchHandler"],
         "enableHome": ["enableHomeWatchHandler"],
+        "enableShare": ["enableShareWatchHandler"],
+        "mapView": ["mapViewWatchHandler"],
         "selectedLayer": ["selectedLayerWatchHandler"],
         "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"]

package/dist/esm/crowdsource-manager.entry.js

@@ -10,7 +10,7 @@ import { g as getLayerOrTable } from './mapViewUtils-f54edae3.js';
 import './esri-loader-c6842c6b.js';
 import './_commonjsHelpers-089957fe.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
 const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager = class {
@@ -23,6 +23,7 @@ const CrowdsourceManager = class {
         this.basemapConfig = undefined;
         this.coverPageEnabled = undefined;
         this.customInfoText = undefined;
+        this.defaultAppLayout = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -78,6 +79,10 @@ const CrowdsourceManager = class {
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * boolean: When true the default appLayout has been applied and should no longer override
+     */
+    _defaultAppLayoutHonored = false;
     /**
      * boolean: When true the map view will be set after render due to popup obstructing the view
      * MapView.when is not fired when mapView is not currently visible
@@ -227,7 +232,7 @@ const CrowdsourceManager = class {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '797519a81cbac4330519ad114ca127efb4284b84' }, h("calcite-shell", { key: '253b4a3610a1b448e7db95dbdba9bfe931911d85', class: "position-relative" }, h("calcite-panel", { key: 'ed07e564d0ec7749121201f0e5fc64885d7794f9', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (h(Host, { key: 'ddb8bb35d74ab89ffd62d7bd0468b5a757fa5ba1' }, h("calcite-shell", { key: '74d941a3b1d4149a57c88cea263a2fd7e2b4f840', class: "position-relative" }, h("calcite-panel", { key: '3ff44942eab43c6f3a1cd92c918c0e2bae3d500a', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render
@@ -246,7 +251,11 @@ const CrowdsourceManager = class {
      */
     async componentDidLoad() {
         this._resizeObserver.observe(this.el);
-        if (this.hideMapOnLoad && !this.appLayout) {
+        if (!this._defaultAppLayoutHonored && this.defaultAppLayout) {
+            this._defaultAppLayoutHonored = true;
+            this.appLayout = this.defaultAppLayout;
+        }
+        else if (this.hideMapOnLoad && !this.appLayout) {
             this.appLayout = 'tableView';
         }
         else if (!this.appLayout) {
@@ -422,7 +431,7 @@ const CrowdsourceManager = class {
         const isTableLayout = this.appLayout === 'tableView';
         const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isPortraitMobile || panelOpen) ? "" : "adjusted-height-50";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: !this._isPortraitMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._mapCard = el, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appLayout: this.appLayout, appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableShare: this.enableShare, enableSingleExpand: true, hidden: !this._isPortraitMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._mapCard = el, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
     }
     /**
      * Get the expand node for the popup information
@@ -436,7 +445,8 @@ const CrowdsourceManager = class {
         const headerTheme = this.popupHeaderColor ? "" : !this._isPortraitMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : "";
         const tableViewClass = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, style: {
+        // position-sticky added to avoid an issue where this dialog would overlap the delete message modal in some small screens
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} position-sticky`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
@@ -484,7 +494,7 @@ const CrowdsourceManager = class {
             this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
         const defaultOid = !this.defaultOid ? undefined :
             this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
-        return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, h("layer-table", { createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isPortraitMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
+        return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, h("layer-table", { appLayout: this.appLayout, createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isPortraitMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
     }
     /**
      * Returns the Actions for table's node

package/dist/esm/crowdsource-reporter.entry.js

@@ -243,7 +243,8 @@ const CrowdsourceReporter = class {
                 }
             }
         }
-        if (this._layerList) {
+        // refresh layer list when user is on layer list panel
+        if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
             await this._layerList.refresh();
         }
         if (this._featureList) {
@@ -260,7 +261,8 @@ const CrowdsourceReporter = class {
         if (this._editableLayerIds) {
             await this._updateFeatures();
             setTimeout(() => {
-                if (this._layerList) {
+                // refresh layer list when user is on layer list panel 
+                if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
                     void this._layerList.refresh();
                 }
                 if (this._featureList) {
@@ -310,7 +312,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'bb2f79258038360e5c0b894ce5a21dcdd41d0ce4' }, this._reportSubmitted && h("calcite-alert", { key: 'aa244cd93326c8817b851d2465c7b9c453117ad2', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '25d6d6bd01ee8dc260bce41ea6c43eafa609292e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '06851f2f8cabebd0e953c31bdddfdeac363a4e6e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0d73a00a8150a78c48cc09e8901ad7dcb438e90', slot: "title" }, this._translations.error), h("div", { key: '0747a85bbf4936a28dd85a9ea0e8b416f70ee7cf', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '55017090c066ad4e12023315bde39e8c7fa67091', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb63168c1fe507b7b93ac4f58d5283ad0d09b34b', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '36b551428b32c7d93f4d04639504bfe326bbc9c8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '2e9865c5611f4960bb622f75f386a489abcbb484', slot: "title" }, this._translations.error), h("div", { key: 'ebdf339d63369e18b1c68867cdffb9bd40f52766', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'a08980aead377e11697e96e77aa514ed66dc9613' }, h("calcite-shell", { key: '6d96e769ece33073870f2b8f1a7ef6a44006c3f0', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'c8f50d4d6004a875444a863a9e839442708f732b' }, this._reportSubmitted && h("calcite-alert", { key: '5f556d67fd9f04c6277b88c0ad0f774ec9216850', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '0204b9967307421fdfeafc61eca006db62f99aab', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'fd21dc9f77fddd3b5a1edcef8f4ac0983018fb97', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3a33593f8c3285d38f651316ea2f4acc148606ec', slot: "title" }, this._translations.error), h("div", { key: '588890b6760a7657218282ddff9f3db94b9f73f6', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'b999711f77b1f5c94a84b4ca5f80d33a4d352ea2', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'ed7f7b1604d5dcdbf146fdbae108081742806587', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '4bbcb945e9cc232ba77b327247b37b4ca420a77c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b75dad85bd1a793232c99b7d870fc9df9ccc0303', slot: "title" }, this._translations.error), h("div", { key: 'f161f78d54beba9ecaeccedd69d8e019c88a48e4', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '43aea9a8138da6645ee420e9e2abe21a3cbe4c91' }, h("calcite-shell", { key: '5fd031aba8feed8d54e3118a7a99a5be8254c89f', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -432,6 +434,7 @@ const CrowdsourceReporter = class {
             if (canRestoreFilter) {
                 void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
             }
+            this._filterInitState = null;
         }, 200);
     }
     /**
@@ -443,12 +446,6 @@ const CrowdsourceReporter = class {
         this._filterActive = false;
         this._filterUrlParams = null;
         this._filterInitState = null;
-        if (this._featureList) {
-            await this._featureList.refresh();
-        }
-        if (this._layerList) {
-            await this._layerList.refresh();
-        }
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -460,11 +457,7 @@ const CrowdsourceReporter = class {
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
         this._filterUrlParams = this._filterList.urlParams.getAll('filter');
-        this._filterInitState = await this._filterList.getFilterInitState();
         await this._featureList.refresh();
-        if (this._layerList) {
-            await this._layerList.refresh();
-        }
         this._showLoadingIndicator = false;
     }
     /**
@@ -570,15 +563,15 @@ const CrowdsourceReporter = class {
      * On submit report navigate to the layer list home page and refresh the layer list
      * @protected
      */
-    onReportSubmitted() {
+    async onReportSubmitted() {
+        void this.updateNonVisibleLayersOnMap(false);
+        await this.navigateToHomePage();
+        this._reportSubmitted = true;
+        this._updatedProgressBarStatus = 0.25;
         //on report submit form will be closed, so update the form state
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
-        void this.updateNonVisibleLayersOnMap(false);
-        this._reportSubmitted = true;
-        this._updatedProgressBarStatus = 0.25;
-        void this.navigateToHomePage();
     }
     /**
      * On adding the is failed, show the error message
@@ -608,10 +601,11 @@ const CrowdsourceReporter = class {
      * @protected
      */
     async navigateToHomePage() {
+        // set the selected features and then refresh the layer list to maintain the layer's visibility state
+        await this.setSelectedFeatures([]);
         if (this._layerList) {
-            void this._layerList.refresh();
+            await this._layerList.refresh();
         }
-        await this.setSelectedFeatures([]);
         if (this._editableLayerIds.length === 1) {
             await this._featureList.refresh();
             this._flowItems = ["feature-list"];
@@ -720,6 +714,15 @@ const CrowdsourceReporter = class {
         prevLayer.definitionExpression = this._filterInitState.initDefExpressions[this._prevSelectedLayerId];
         void this._handleFilterListReset();
     }
+    /**
+     * On back from filter panel get the filter's init state
+     * @protected
+     */
+    async backFromFilterPanel() {
+        this._filterInitState = await this._filterList.getFilterInitState();
+        await this._featureList.refresh();
+        this.backFromSelectedPanel();
+    }
     /**
      * On back from selected panel navigate to the previous panel
      * @protected
@@ -844,7 +847,7 @@ const CrowdsourceReporter = class {
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details

package/dist/esm/feature-comments.entry.js

@@ -49,7 +49,7 @@ const FeatureComments = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '9d6d06f2466bbbfba74ead0dd8af4354834006c6' }, h("slot", { key: '25722c28a43a7a005a0c55b16c0df536a7a19a61' })));
+        return (h(Host, { key: 'b58aca4fb9f05091f7b4c9a622755afed968a539' }, h("slot", { key: '806ab314b95a05252b5d558722b3dcb68e9b5b44' })));
     }
 };
 FeatureComments.style = FeatureCommentsStyle0;

package/dist/esm/feature-form-flow-item.entry.js

@@ -49,7 +49,7 @@ const FeatureFormFlowItem = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '69a6d88e4a58724a61b964ab9e4cc44df1879be4' }, h("slot", { key: '57bb8fc9d5fc942af7a47d4735b358510e406818' })));
+        return (h(Host, { key: 'ada36a5353ae5c21f81ab8ffea24fab3312acc85' }, h("slot", { key: '424cb194632c9ea0ade6cf848e01a414c05abc42' })));
     }
 };
 FeatureFormFlowItem.style = FeatureFormFlowItemStyle0;

package/dist/esm/feature-list.entry.js

@@ -179,9 +179,9 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '381f7da40e715848d4601810aacedbe3a7a46d6d', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '62d128eee1b0a987fe24764b8cfbff148dcf9084', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '975aef0b4c33676fc2be4aa85a51641d0b203cd4', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'c002eb4d59d8bab086d91266ca4a0ca56a185db3', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '50f0c269f30e9619561ea61f462fb964f91a93a9', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '97f837035b89d3045efd2771c0ef77d12fbb333b', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd88adbe6499b358395bd7bf5917c3d0c1506d8b1', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '59289a87561105e3edcbd52bac96b974b1387a16', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '59629285e49227209761d2f16bdd62a90750538f', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: 'bc6c2e6e0fdf959374caf79f2027784e2fdaca15', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '052207ce0b0e2d8030ac7a4a7985c718371a9667', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '3f17ea85f2265717aa13c9c71f19c259470c9fcc', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: 'ce3179bcdc7af254488dea909034c58db17ec565', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd6a4b8c7a940918388b3b9891a666c4a142edae7', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -416,7 +416,7 @@ const FeatureList = class {
         const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
         return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
             h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, userId: userInfo?.id, username: userInfo?.fullName ? userInfo.username : undefined }), this.showFeatureSymbol &&
-            h("div", { class: 'feature-symbol', ref: (el) => el && el.appendChild(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
+            h("div", { class: 'feature-symbol', ref: (el) => el && el.replaceChildren(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
             h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**

package/dist/esm/features-flow-item.entry.js

@@ -49,7 +49,7 @@ const FeaturesFlowItem = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '8154ad4de3a112bcdef4b1495c6fbeab1a13e292' }, h("slot", { key: '6c12197599bd5742f4ffacbae64170929e485d99' })));
+        return (h(Host, { key: 'b775a26ab493f17e0e93ba5713b407566d37683d' }, h("slot", { key: '05f063062f8cced80ae18d36e7ef08abe6b15839' })));
     }
 };
 FeaturesFlowItem.style = FeaturesFlowItemStyle0;