@esri/solutions-components 0.10.24 → 0.10.26

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

@@ -14,7 +14,7 @@ const mapViewUtils = require('./mapViewUtils-18c46b84.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.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-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-51{height:51%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.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}.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 {
@@ -63,6 +63,7 @@ const CrowdsourceManager = class {
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = false;
+        this._isPortraitMobile = false;
         this._translations = undefined;
         this._layer = undefined;
         this._layoutMode = interfaces.ELayoutMode.GRID;
@@ -72,6 +73,8 @@ const CrowdsourceManager = class {
         this._numSelected = 0;
         this._filterOpen = false;
         this._showInformationHeader = true;
+        this._layerIds = undefined;
+        this._isLoading = true;
     }
     get el() { return index.getElement(this); }
     //--------------------------------------------------------------------------
@@ -114,6 +117,10 @@ const CrowdsourceManager = class {
      * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
      */
     _filterList;
+    /**
+     * HTMLMapCardElement: Map card refrence element
+     */
+    _mapCard;
     /**
      * boolean: True when app is directly rendered to map view layout
      */
@@ -163,7 +170,7 @@ const CrowdsourceManager = class {
      * Listen for when the popup is closed in mobile mode and hide the appropriate UI elements
      */
     async popupClosed() {
-        if (this._isMobile) {
+        if (this._isPortraitMobile) {
             this.showHideMapPopupAndTable(false);
         }
     }
@@ -189,10 +196,21 @@ const CrowdsourceManager = class {
         const id = evt.detail[0];
         const layer = await mapViewUtils.getLayerOrTable(this._mapView, id);
         layer && await layer.when(() => {
+            // on render if no layer is present and only one table is present in map and app is in map view layer then change it to split layout
+            if (this._layerIds.length === 0 && this.appLayout === 'mapView' && layer.isTable) {
+                this._changeLayout('splitView');
+            }
             this._layer = layer;
             this._initLayerExpressions();
+            this._isLoading = false;
         });
     }
+    /**
+     * Get the layer ids from the map
+     */
+    async idsFound(evt) {
+        this._layerIds = evt.detail.layerIds;
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -213,7 +231,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 (index.h(index.Host, { key: '28614b892c93b83de202a681a756027472d092c2' }, index.h("calcite-shell", { key: '8f9c57fa9d1c1c88dbac9706376aad6bbd425691', class: "position-relative" }, index.h("calcite-panel", { key: '3c156df89f396425c2711a39968017cc23910a55', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (index.h(index.Host, { key: '797519a81cbac4330519ad114ca127efb4284b84' }, index.h("calcite-shell", { key: '253b4a3610a1b448e7db95dbdba9bfe931911d85', class: "position-relative" }, index.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()));
     }
     /**
      * Called after each render
@@ -255,7 +273,7 @@ const CrowdsourceManager = class {
     _getFooter() {
         const hasSelectedFeatures = this._numSelected > 0;
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
+        return this._isPortraitMobile && hasSelectedFeatures && !this._hideFooter ? (index.h("div", { class: `width-100`, slot: "footer" }, index.h("div", { class: "display-flex padding-1-2" }, index.h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
     }
     /**
      * sets the active layout to render
@@ -391,7 +409,8 @@ const CrowdsourceManager = class {
      */
     _getMapAndCard(layoutMode, panelOpen, hideTable) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
-        return (index.h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
+        const borderRight = !this._isPortraitMobile && this._isMobile ? "border-right" : "";
+        return (index.h("div", { class: `${mapSizeClass} overflow-hidden ${borderRight}` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
@@ -405,9 +424,9 @@ const CrowdsourceManager = class {
     _getMapNode(panelOpen) {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === interfaces.ELayoutMode.HORIZONTAL && (!this._isPortraitMobile || panelOpen) ? "" : "adjusted-height-50";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (index.h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, index.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._isMobile && 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, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
+        return (index.h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, index.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 })));
     }
     /**
      * Get the expand node for the popup information
@@ -416,17 +435,17 @@ const CrowdsourceManager = class {
      * @protected
      */
     _getPopupExpandNode() {
-        const popupNodeClass = "height-full";
-        const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
-        const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-        const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        const tableViewClass = this.appLayout === "tableView" ? "position-relative top-51" : "";
+        const popupNodeClass = this._isMobile ? "height-full" : "position-relative z-index-0";
+        const headerClass = this._isPortraitMobile && this._showInformationHeader ? "display-none height-0" : "";
+        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 (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, 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 */
                 '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
-            } }, index.h("calcite-panel", null, !this._isMobile && this._showInformationHeader || this._numSelected > 0 ? (index.h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information))) : index.h("div", null), this._getCardNode())));
+            } }, index.h("calcite-panel", null, (!this._isPortraitMobile && this._showInformationHeader) || (this._numSelected > 0 && !this._isPortraitMobile) ? (index.h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, index.h("calcite-icon", { icon: "information", scale: "s" }), index.h("div", { class: "padding-inline-start-75" }, this._translations.information))) : index.h("div", null), this._getCardNode())));
     }
     /**
      * Get the card node
@@ -437,15 +456,15 @@ const CrowdsourceManager = class {
     _getCardNode() {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const cardManagerHeight = (isMapLayout || isTableLayout) ? "height-full" : this._numSelected > 0 ? "height-51" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isMobile ? "height-51" : "height-full";
+        const cardManagerHeight = isTableLayout && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : (this._numSelected > 0 && !this._isMobile) ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isPortraitMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h("div", { class: `width-50 height-full ${themeClass}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, layer: this._layer, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
+        return (index.h("div", { class: `width-50 height-full ${themeClass}` }, index.h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
                 this._changeLayout(this.appLayout);
                 this._showInformationHeader = true;
             }, onCreateWorkFlowStarted: () => {
                 this._changeLayout(this._layer.isTable ? "tableView" : "mapView");
                 this._showInformationHeader = false;
-            }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+            }, onFeatureOrRecordSubmitted: () => void this._layerTable.refresh(), selectedFeaturesIds: this._layerTable?.selectedIds, selectingFeatureFromMap: this.appLayout === "mapView", zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
     /**
      * Get the table node based for the current layout
@@ -459,7 +478,7 @@ const CrowdsourceManager = class {
     _getTable(layoutMode, panelOpen, hideTable) {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const tableClass = hideTable && this._isMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
+        const tableClass = hideTable && this._isPortraitMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
         const mapClass = isMapLayout ? "height-full width-full z-index-0" : "display-none";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
         const toggleLayout = layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
@@ -469,7 +488,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 (index.h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, index.h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, index.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._isMobile, 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 })), index.h("div", { class: mapClass, id: "full-map-view" })));
+        return (index.h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, index.h("div", { class: `width-full height-full position-relative z-index-0 ${tableClass}` }, index.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 })), index.h("div", { class: mapClass, id: "full-map-view" })));
     }
     /**
      * Returns the Actions for table's node
@@ -481,7 +500,7 @@ const CrowdsourceManager = class {
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        return (index.h(index.Fragment, null, index.h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, index.h("span", null, this._translations.splitView)), index.h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, index.h("span", null, this._translations.tableView)), index.h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, index.h("span", null, this._translations.mapView)), index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), index.h("calcite-tooltip", { placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))));
+        return (index.h(index.Fragment, null, index.h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, index.h("span", null, this._translations.splitView)), index.h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, index.h("span", null, this._translations.tableView)), index.h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", disabled: this._layerIds?.length === 0, icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), index.h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, index.h("span", null, this._translations.mapView)), index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), index.h("calcite-tooltip", { placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))));
     }
     /**
      * Show filter component in modal
@@ -490,7 +509,13 @@ const CrowdsourceManager = class {
      * @protected
      */
     _filterModal() {
-        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => void this._layerTable?.filterUpdate(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
+        return (index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
+                this._handleFilterListReset();
+                void this._mapCard.resetFilter();
+            }, onFilterUpdate: () => {
+                void this._layerTable?.filterUpdate();
+                void this._mapCard.updateFilterState();
+            }, ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
     }
     /**
      * Store any filters for the current layer.
@@ -542,13 +567,18 @@ const CrowdsourceManager = class {
         const isMobile = this.el.offsetWidth < 1024;
         const forceOpen = !this._isMobile && isMobile;
         this._isMobile = isMobile;
-        this._layoutMode = this._isMobile ? interfaces.ELayoutMode.HORIZONTAL : interfaces.ELayoutMode.GRID;
         if (forceOpen) {
             this._panelOpen = true;
         }
         if (this._isMobile) {
             this.showHideMapPopupAndTable(!this._isMobile);
+            this._isPortraitMobile = !!window.matchMedia("(orientation: portrait)").matches;
+            this._changeLayout('splitView');
         }
+        else {
+            this._isPortraitMobile = false;
+        }
+        this._layoutMode = this._isPortraitMobile ? interfaces.ELayoutMode.HORIZONTAL : interfaces.ELayoutMode.GRID;
     }
     /**
      * Open/Close the appropriate panel.
@@ -569,6 +599,10 @@ const CrowdsourceManager = class {
         if (this.appLayout !== appLayout) {
             this._setActiveLayout(appLayout);
             this.appLayout = appLayout;
+            // update the layer if table selected while switching to map view
+            if (this.appLayout === "mapView" && this._layer.isTable) {
+                void this._mapCard.updateLayer();
+            }
             if (this._isMapViewOnLoad) {
                 void this._layerTable.refresh();
                 this._isMapViewOnLoad = false;

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

@@ -311,7 +311,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h(index.Host, { key: '16e9300d50c0f297e8907faa6d1b5d0d29db7b5a' }, this._reportSubmitted && index.h("calcite-alert", { key: '20ce64b9b92b16ddc401c5fef1c98fe41f1ffd6a', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '3920ae43163250762cb06218832a040b3b59ada3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '7d0351ebe3b7e44e98bd832ce6f1ce8ae0bd375c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: '9cf77e454f532f79af03fea75b164193260a828a', slot: "title" }, this._translations.error), index.h("div", { key: '5876f176b1f6eaf0cf48ef9ea6a87ee00d9970d5', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '220c51839d4317ccf2c74c1dbf5f38da38463b31', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '959a7ae5c5636c16480f8a5b9c260d2d422aef92', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '4601ba02cfd8effe6826f8615529046df48f688b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '08c880690050a6796b772c8d740fba1491987e43', slot: "title" }, this._translations.error), index.h("div", { key: 'e1e4feb46b19f061bc0f4daeede7daa8eff5f51a', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '558b7ccf3ed3acc72bf6b9a8d26523021aed0960' }, index.h("calcite-shell", { key: '73992f9a17f5723f9da27350a16555edc56dca46', "content-behind": true }, this._getReporter()))));
+        return (index.h(index.Host, { key: '198fe34894f73b66ac15c4f75b05e3159586a392' }, this._reportSubmitted && index.h("calcite-alert", { key: '2c07a26c0fce4f5b66a2245850f7fca6e7cc2333', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: 'f3269fd5bc315913f25795fc4dda47d83de7166f', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '974254aa4eec7166ce23c9513633174b26d45a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'f0e27267cb6bdc626340185ff3af5c8527c5755c', slot: "title" }, this._translations.error), index.h("div", { key: 'ce443229655784ecc106ef4f90375a0d2ba14679', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '8094e9db5856630b6dbbd4f37de35afc8fc0cab9', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '9fea022654934c6b58064f71e6c7cb59e4429732', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '21cd17c9a43553c40427759070ec5f7d86bcb471', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '82ca845385e34740ab2af082a5338a851ad0c006', slot: "title" }, this._translations.error), index.h("div", { key: '9dd641fe9e78e83387a266df51b8f709409bd332', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '1977a4e41c0f222385585f0a0a6c19a99432846b' }, index.h("calcite-shell", { key: '67d0771f744f5ba427cef2b453dee3470d2fe5bc', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -53,7 +53,7 @@ const FeatureComments = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (index.h(index.Host, { key: '0d44fcf94820417e984a3496f7fdea7ec63104d9' }, index.h("slot", { key: '7a41443ca673bb37f4271c86013695a270d8a276' })));
+        return (index.h(index.Host, { key: '9d6d06f2466bbbfba74ead0dd8af4354834006c6' }, index.h("slot", { key: '25722c28a43a7a005a0c55b16c0df536a7a19a61' })));
     }
 };
 FeatureComments.style = FeatureCommentsStyle0;

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

@@ -53,7 +53,7 @@ const FeatureFormFlowItem = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (index.h(index.Host, { key: '8ea61009c0bd3745d1bf418766b9aa90830199a2' }, index.h("slot", { key: '732c3369626fc55e8d53aa7eb6366bb66edc591a' })));
+        return (index.h(index.Host, { key: '69a6d88e4a58724a61b964ab9e4cc44df1879be4' }, index.h("slot", { key: '57bb8fc9d5fc942af7a47d4735b358510e406818' })));
     }
 };
 FeatureFormFlowItem.style = FeatureFormFlowItemStyle0;

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

@@ -179,9 +179,9 @@ const FeatureList = class {
      * Renders the component.
      */
     render() {
-        return (index.h("calcite-panel", { key: '39a9380a3de0bfc4389a460af4f57b26b6273660', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: '389914a90d25a49e9f79e3a71add9ab402e1f8f1', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            index.h("calcite-notice", { key: '4b7b277c94ec26d8b12596f4a0cee3b7de6e4505', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: 'ec9dbc1b3ea28b339dc3448632dcbe3c36e088fb', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'ae8a3cdbb4cf0122a18156bbfdf8339ce0336bf6', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            index.h("div", { key: '5dd9fbc5aa5abb9af06569128424d4da19e7dd76', class: "width-full", slot: "footer" }, index.h("calcite-pagination", { key: 'c63a09112957d6391702176bfc640d2a17a4f086', 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 (index.h("calcite-panel", { key: '3ba64729e3b56d8912424b65187fee65c5ed079f', "full-height": true, "full-width": true }, this._isLoading && index.h("calcite-loader", { key: 'd18959827b6f7feec0a42605ab93ee1147a3ddfc', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            index.h("calcite-notice", { key: '507e0031a5fb5a78b1d61bb4e893e4d9a314e207', class: "error-msg", icon: "feature-details", kind: "info", open: true }, index.h("div", { key: '640c9e8ab31fea285f6db4199a5ff4d917a4feec', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), index.h("calcite-list", { key: 'daa9fd622f3c97dad878854b70509e8cafcdea50', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            index.h("div", { key: 'b30411c22825e9ec631235e243e726d3fa2244e4', class: "width-full", slot: "footer" }, index.h("calcite-pagination", { key: 'b3ee14ca6cde66bc45124b4de73fa019ffe634f8', 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 }))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -53,7 +53,7 @@ const FeaturesFlowItem = class {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (index.h(index.Host, { key: 'a219193f59f1942d9296e5c40c5276bfccdd3d55' }, index.h("slot", { key: 'fcdabacfe41b9f5af0a1ddb3e641090f2ec1e85c' })));
+        return (index.h(index.Host, { key: '8154ad4de3a112bcdef4b1495c6fbeab1a13e292' }, index.h("slot", { key: '6c12197599bd5742f4ffacbae64170929e485d99' })));
     }
 };
 FeaturesFlowItem.style = FeaturesFlowItemStyle0;

package/dist/cjs/instant-apps-app-guide.cjs.entry.js

@@ -0,0 +1,106 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-5a0af791.js');
+const locale = require('./locale-a965a573.js');
+require('./loadModules-8567855e.js');
+require('./esri-loader-08dc41bd.js');
+require('./_commonjsHelpers-baf43783.js');
+require('./languageUtil-a3e1eafd.js');
+
+class AppGuideViewModel {
+    constructor() {
+        this.pages = [];
+    }
+    addPage(page) {
+        this.pages = [...this.pages, page];
+    }
+    removePage(page) {
+        this.pages = this.pages.filter(p => p !== page);
+    }
+}
+
+const instantAppsAppGuideCss = ":host{--instant-apps-app-guide-width:300px;--instant-apps-app-guide-height:400px;--instant-apps-app-guide-list-item-bubble-size:22px;width:var(--instant-apps-app-guide-width);height:var(--instant-apps-app-guide-height);display:block}:host calcite-panel{max-width:var(--instant-apps-app-guide-width);max-height:var(--instant-apps-app-guide-height);display:flex}:host calcite-carousel{flex:1;overflow:scroll;height:-moz-fit-content;height:fit-content;background-color:var(--calcite-color-foreground-1)}:host [slot=header-content]{display:flex;gap:var(--calcite-spacing-sm);padding-inline-start:0.25rem}:host .content-heading{font-weight:var(--calcite-font-weight-bold);display:flex;gap:var(--calcite-spacing-sm);line-height:var(--calcite-font-line-height-fixed-lg)}:host calcite-carousel-item{flex-grow:1;display:flex;flex-direction:column}:host .instant-apps-app-guide__content-wrapper{padding-block-start:0.5rem;padding-inline:0.5rem;flex-shrink:1;flex-grow:0}:host calcite-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host .instant-apps-app-guide__content-list{counter-set:item-counter;margin-inline:0;padding-inline-start:var(--calcite-spacing-xxxl);padding-inline-end:var(--calcite-spacing-lg);position:relative}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item{counter-increment:item-counter;margin-block-start:var(--calcite-spacing-lg);display:flex;align-items:flex-start}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::before{content:counter(item-counter);background-color:var(--calcite-color-text-2);color:var(--calcite-color-text-inverse);line-height:var(--calcite-font-line-height-fixed-xl);width:var(--instant-apps-app-guide-list-item-bubble-size);left:0;border-radius:var(--calcite-corner-radius-pill);display:flex;justify-content:center;font-size:var(--calcite-font-size-sm);position:absolute;max-height:var(--instant-apps-app-guide-list-item-bubble-size)}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::marker{color:var(--calcite-color-transparent)}";
+const InstantAppsAppGuideStyle0 = instantAppsAppGuideCss;
+
+const CSS = {
+    contentList: 'instant-apps-app-guide__content-list',
+    contentListItem: 'instant-apps-app-guide__content-list--item',
+    contentWrapper: 'instant-apps-app-guide__content-wrapper'
+};
+const InstantAppsAppGuide = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._viewModel = new AppGuideViewModel();
+        this.header = true;
+        this.data = undefined;
+        this.messages = undefined;
+        this.headerText = undefined;
+    }
+    watchPropHandler(newValue) {
+        this._viewModel.pages = newValue;
+        this._updateHeaderText();
+    }
+    connectedCallback() {
+        var _a, _b, _c, _d;
+        this._viewModel.pages = (this === null || this === void 0 ? void 0 : this.data) || [];
+        this.headerText = (_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : (_d = this === null || this === void 0 ? void 0 : this.messages) === null || _d === void 0 ? void 0 : _d.headerText;
+    }
+    componentDidLoad() {
+        locale.getMessages(this);
+    }
+    render() {
+        return (index.h(index.Host, { key: '3c6bf465e2543e62f8e991a22a4f8b8420556285' }, index.h("calcite-panel", { key: '15a145d4f930de4325716dcd8b73fdcbbe5fa31e', scale: "s" }, this._renderAppGuideHeader(), index.h("calcite-carousel", { key: '8f962b828f76b8a68f19b71fb79d3f4c93420e38', onCalciteCarouselChange: () => this._updateHeaderText(), ref: el => this._carouselRef = el, "arrow-type": this._getArrowType() }, this._renderAppGuidePages(this._viewModel.pages)))));
+    }
+    _updateHeaderText() {
+        var _a;
+        const { _viewModel, _carouselRef, messages } = this;
+        const nodeArray = Array.from(_carouselRef.childNodes);
+        const selectedNodeIndex = nodeArray.indexOf(_carouselRef.selectedItem);
+        // DOM nodes get updated after the viewModel is updated, so the selectedNodeIndex
+        // may be out of bounds of the pages collection in the viewModel when pages are removed.
+        // When this happens, we default to the title of the first page.
+        const pages = _viewModel === null || _viewModel === void 0 ? void 0 : _viewModel.pages;
+        const selectedPage = (_a = pages === null || pages === void 0 ? void 0 : pages[selectedNodeIndex]) !== null && _a !== void 0 ? _a : pages[0];
+        this.headerText = (selectedPage === null || selectedPage === void 0 ? void 0 : selectedPage.title) || (messages === null || messages === void 0 ? void 0 : messages.headerText);
+    }
+    _getArrowType() {
+        return this._viewModel.pages.length > 2 ? 'inline' : 'none';
+    }
+    _renderAppGuideHeader() {
+        const { messages, header, headerText } = this;
+        const displayHeader = !!header && (messages === null || messages === void 0 ? void 0 : messages.headerText);
+        const _headerText = headerText || (messages === null || messages === void 0 ? void 0 : messages.headerText);
+        return displayHeader ?
+            (index.h("span", { slot: "header-content" }, _headerText, " ", index.h("calcite-icon", { icon: "lightbulb", scale: "s" }))) :
+            null;
+    }
+    _renderAppGuidePages(pages) {
+        return pages.map((pageData, index$1) => {
+            const { content, type } = pageData;
+            return (index.h("calcite-carousel-item", { key: `page_${index$1}` }, index.h("div", { class: CSS.contentWrapper }, this._renderContentItems(content, type))));
+        });
+    }
+    _renderContentItems(content, type) {
+        switch (type) {
+            case 'list':
+                return (index.h("ol", { class: CSS.contentList }, content.map((contentItem, index$1) => (index.h("li", { key: `content-list-item-${index$1}`, class: CSS.contentListItem }, contentItem)))));
+            case 'paragraphs':
+            default:
+                return content.map((contentItem, index$1) => (index.h("p", { key: `content-paragraph-${index$1}` }, contentItem)));
+        }
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "data": ["watchPropHandler"]
+    }; }
+};
+InstantAppsAppGuide.style = InstantAppsAppGuideStyle0;
+
+exports.instant_apps_app_guide = InstantAppsAppGuide;

package/dist/cjs/instant-apps-ckeditor-wrapper_3.cjs.entry.js

@@ -8,7 +8,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-5a0af791.js');
-const utils = require('./utils-9343bd5b.js');
+const utils = require('./utils-62072741.js');
 require('./locale-a965a573.js');
 require('./loadModules-8567855e.js');
 require('./esri-loader-08dc41bd.js');
@@ -67,7 +67,7 @@ const InstantAppsCkeditorWrapper = class {
         this.editorInstance.setData(this.value);
     }
     render() {
-        return (index.h(index.Host, { key: '4a000cee4310d40e940c97d16f24c78415083f1b' }, index.h("div", { key: '55b2e7ddd6b259b58e19f8946d2198df1fd7b579' })));
+        return (index.h(index.Host, { key: '26f62d5413e21916b77253476cf48f69682861d5' }, index.h("div", { key: '45a9d7b859a21e49c81afdaa3bdd5074f1428cd5' })));
     }
     init() {
         this.applyStyles();
@@ -516,7 +516,7 @@ const InstantAppsLanguageTranslatorSearch = class {
         this.results = [];
     }
     render() {
-        return (index.h(index.Host, { key: '71fa373371b7b33faa8f3d91959dc50b1e3b0f34' }, this.renderSearchInput(), this.renderSuggestions()));
+        return (index.h(index.Host, { key: '80febf289e2bbfcf09636c84b5a5a83e80f377c0' }, this.renderSearchInput(), this.renderSuggestions()));
     }
     renderSearchInput() {
         return (index.h("calcite-input", { ref: (node) => (this.searchInput = node), class: CSS.input, onCalciteInputInput: this.handleSearch.bind(this), type: "search", placeholder: this.t9nPlaceholder, icon: "search" }));

package/dist/cjs/instant-apps-control-panel.cjs.entry.js

@@ -35,7 +35,7 @@ const InstantAppsControlPanel = class {
         this._handleComponents();
     }
     render() {
-        return (index.h(index.Host, { key: 'b4eb66870fea801441c2c4410fce060a7785b66a' }, index.h("slot", { key: '9fadbc49629b92b3ae909da5171f2f0ae87e2daf', name: SLOT_NAME })));
+        return (index.h(index.Host, { key: '45edbd93de055768fb4b58e9d12a7570d24bdd22' }, index.h("slot", { key: '47d507e456dfc86a068948280b21386bc08e735c', name: SLOT_NAME })));
     }
     _handleComponents() {
         const componentsNode = this._getComponentsNode();

package/dist/cjs/instant-apps-export-views.cjs.entry.js

@@ -399,7 +399,7 @@ const InstantAppsExportViews = class {
     }
     render() {
         const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
-        return (index.h(index.Host, { key: '1b0428743837a0f1c176cba3e58af38104f4ac7b' }, index.h("div", { key: '8d39535015a0e5ab498a66c8757c28ae556bd326', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode)));
+        return (index.h(index.Host, { key: '52f53735afba2085f45bdd8ba64e8e37b48318bb' }, index.h("div", { key: 'ac8fc3e66ccc5f9c27e25642bbe640c3fc8c7d33', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode)));
     }
     renderPopover() {
         var _a, _b, _c;

package/dist/cjs/instant-apps-export.cjs.entry.js

@@ -408,7 +408,7 @@ const InstantAppsExport = class {
     render() {
         const mode = this.mode === 'popover' ? this.renderPopover() : this.renderPanel();
         const compass = this.renderCompass();
-        return (index.h(index.Host, { key: 'd561a14661edad3e4ad5f0041537acdc1fb724a1' }, index.h("div", { key: '917848051ac8114c4ba527332c8688791a9c75d0', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, index.h("div", { key: '3421d8bde7ce6f91062b538f087c155946358e01', class: CSS.hidden }, compass))));
+        return (index.h(index.Host, { key: 'fb3a0e79a4cdf4d6424677930ef57487a49f323e' }, index.h("div", { key: 'def184b77f3710ae51f32a094ff3c7e8bc44f648', class: this.baseClass, onMouseEnter: this.handleWidgetCreation.bind(this), onFocusin: this.handleWidgetCreation.bind(this) }, mode, index.h("div", { key: '5fb0360e9fcbc112e640e1c8c877cfad59cadd14', class: CSS.hidden }, compass))));
     }
     renderPopover() {
         var _a, _b, _c;

package/dist/cjs/instant-apps-header.cjs.entry.js

@@ -88,7 +88,7 @@ const InstantAppsHeader = class {
         const title = this.renderTitle();
         const headerContentClass = this.headerAlignment === 'right' || this.headerAlignment === 'center' ? CSS.headerContent.concat(' ', CSS.alignment[this.headerAlignment]) : CSS.headerContent;
         const fontFamily = styles.getFontFamily(this.fontFamily);
-        return (index.h(index.Host, { key: '4b3b100dce96ff66679c1d9354dc220cf898b947' }, this.customHeaderHtml ? ([index.h("style", null, this.customHeaderCss), index.h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (index.h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, index.h("div", { class: CSS.headerContainer }, index.h("span", { class: headerContentClass }, logo, title, this.infoButton ? (index.h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), index.h("div", { class: CSS.actionsEndContainer }, index.h("slot", { name: "actions-end" })))))));
+        return (index.h(index.Host, { key: 'f2d1760c4a1345ef24c913a24f95691d0de6867d' }, this.customHeaderHtml ? ([index.h("style", null, this.customHeaderCss), index.h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (index.h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, index.h("div", { class: CSS.headerContainer }, index.h("span", { class: headerContentClass }, logo, title, this.infoButton ? (index.h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), index.h("div", { class: CSS.actionsEndContainer }, index.h("slot", { name: "actions-end" })))))));
     }
     renderLogo(hasEmptyLogo) {
         return hasEmptyLogo ? ('') : this.logoImage && this.logoLink ? (index.h("a", { href: `${this.logoLink}`, target: "_blank" }, index.h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: `${this.logoImageAltText}` }))) : this.logoImage ? (index.h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: this.logoImageAltText })) : ('');

package/dist/cjs/instant-apps-interactive-legend-classic.cjs.entry.js

@@ -1173,6 +1173,12 @@ const InstantAppsInteractiveLegendClassic = class {
     handleFilterModeChange() {
         helpers.handleFilterChange(this.filterMode, this.legendvm.view);
     }
+    async connectedCallback() {
+        if (this.handles)
+            return;
+        const [Handles] = await loadModules.loadModules(['esri/core/Handles']);
+        this.handles = new Handles();
+    }
     async componentWillLoad() {
         const observer = new MutationObserver(() => {
             index.forceUpdate(this.el);
@@ -1180,9 +1186,8 @@ const InstantAppsInteractiveLegendClassic = class {
         observer.observe(this.el, {
             attributes: true,
         });
-        const [intl, reactiveUtils, Handles] = await loadModules.loadModules(['esri/intl', 'esri/core/reactiveUtils', 'esri/core/Handles']);
+        const [intl, reactiveUtils] = await loadModules.loadModules(['esri/intl', 'esri/core/reactiveUtils']);
         this.reactiveUtils = reactiveUtils;
-        this.handles = new Handles();
         this.intl = intl;
     }
     async componentDidLoad() {
@@ -1461,7 +1466,7 @@ const InstantAppsInteractiveLegendClassic = class {
         const interactive = parentLegendElementInfoData && !(elementInfo === null || elementInfo === void 0 ? void 0 : elementInfo.value) ? false : isInteractive;
         return interactive ? (
         // Regular LegendElementInfo
-        index.h("button", { onClick: this.applyFilter(elementInfo, layer, infoIndex, parentLegendElementInfo), class: `${CSS.layerRow} ${CSS.interactiveLayerRow}${selected ? ` ${CSS.infoSelected}` : ''}` }, index.h("div", { class: `${CSS.symbolContainer}${imageryLayerInfoStretched}${sizeRamp}` }, content), index.h("div", { class: `${CSS.layerInfo}${imageryLayerInfoStretched}` }, this.getTitle(this.messages, elementInfo.label, false) || ''), this.featureCount ? (index.h("instant-apps-interactive-legend-count", { class: helpers.getTheme(this.el), categoryId: parentLegendElementInfoData ? legendElement.title : (_b = elementInfo.label) !== null && _b !== void 0 ? _b : layer === null || layer === void 0 ? void 0 : layer.id, activeLayerInfo: activeLayerInfo, legendvm: this.legendvm, messages: this.messages, selected: selected, legendElement: legendElement, infoIndex: infoIndex })) : null)) : (index.h("div", { class: CSS.layerRow }, index.h("div", { class: `${CSS.symbolContainer}${imageryLayerInfoStretched}${sizeRamp}` }, content), index.h("div", { class: `${CSS.layerInfo}${imageryLayerInfoStretched}` }, this.getTitle(this.messages, elementInfo.label, false) || '')));
+        index.h("button", { onClick: this.applyFilter(elementInfo, layer, infoIndex, parentLegendElementInfo), class: `${CSS.layerRow} ${CSS.interactiveLayerRow}${selected ? ` ${CSS.infoSelected}` : ''}` }, index.h("div", { class: `${CSS.symbolContainer}${imageryLayerInfoStretched}${sizeRamp}` }, content), index.h("div", { class: `${CSS.layerInfo}${imageryLayerInfoStretched}` }, this.getTitle(this.messages, elementInfo.label, false) || ''), this.featureCount ? (index.h("instant-apps-interactive-legend-count", { class: helpers.getTheme(this.el), categoryId: parentLegendElementInfoData ? legendElement.title : ((_b = elementInfo.label) !== null && _b !== void 0 ? _b : layer === null || layer === void 0 ? void 0 : layer.id), activeLayerInfo: activeLayerInfo, legendvm: this.legendvm, messages: this.messages, selected: selected, legendElement: legendElement, infoIndex: infoIndex })) : null)) : (index.h("div", { class: CSS.layerRow }, index.h("div", { class: `${CSS.symbolContainer}${imageryLayerInfoStretched}${sizeRamp}` }, content), index.h("div", { class: `${CSS.layerInfo}${imageryLayerInfoStretched}` }, this.getTitle(this.messages, elementInfo.label, false) || '')));
     }
     renderImage(elementInfo, layer, isStretched) {
         const { label, src, opacity } = elementInfo;

package/dist/cjs/instant-apps-interactive-legend-count_2.cjs.entry.js

@@ -127,7 +127,7 @@ const InstantAppsInteractiveLegendLayerElementCaption = class {
         const { expanded } = this;
         const expandCollapseText = expanded ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.collapse : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.expand;
         const isChild = this.isChild ? ' instant-apps-interactive-legend__heading-text--group-item' : '';
-        return (index.h("header", { key: '90e0c1317dab1e4f6aeb9f0e6652ba0c437e2738', class: `${CSS.interacitveLegendHeader} ${helpers.getTheme(this.el)}` }, index.h("calcite-action", { key: 'a83eb7e778aba7b5293a4e612e0e48369c1532bf', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), index.h("span", { key: '2ddd88d88356bfd06325bd71f3b379cceaffeac0' }, index.h("span", { key: '974c40e2cd293c18c9cb05963616289484af2ce1', class: CSS.headerActionContainer }, index.h("h3", { key: 'e95395514e1406feb2f590c49398c2321b6c643c', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (index.h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
+        return (index.h("header", { key: 'b4080c1d9a4a6b95a1e389156d94661a937c0e6f', class: `${CSS.interacitveLegendHeader} ${helpers.getTheme(this.el)}` }, index.h("calcite-action", { key: '11c804cbb23cdf359589309d40a8f3550f651802', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), index.h("span", { key: '27f26720b7a189ea36873e4a97063579a6f52e20' }, index.h("span", { key: '143092f1dab8ebd2a0c8e9efbed4b7cba4267ebf', class: CSS.headerActionContainer }, index.h("h3", { key: '099fb8082615f356a1d1ecd374800dbc83baf015', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (index.h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
     }
     toggleExpanded() {
         return () => {

package/dist/cjs/instant-apps-interactive-legend-group-legend-element-caption.cjs.entry.js

@@ -40,9 +40,9 @@ const InstantAppsInteractiveLegendGroupLegendElementCaption = class {
         const { expanded } = this;
         const expandCollapseText = expanded ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.collapse : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.expand;
         const isChild = this.isChild ? ' instant-apps-interactive-legend__heading-text--group-item' : '';
-        return (index.h("header", { key: '09f5ee7f348855813f75b775b87f2f9de12e3792', class: `${CSS.interacitveLegendHeader} ${helpers.getTheme(this.el)}`, style: {
+        return (index.h("header", { key: 'f7fc15a482577d3dc46bf2c75a7e3349d7565654', class: `${CSS.interacitveLegendHeader} ${helpers.getTheme(this.el)}`, style: {
                 borderLeft: '1px solid var(--calcite-color-border-3)',
-            } }, index.h("span", { key: '2a720ba9d488b06550ed955d84a150501aa03a2f' }, index.h("span", { key: '17c9b3a7e76ad853844d1c4cdbfd4aa74470a524', class: CSS.headerActionContainer }, index.h("calcite-action", { key: '7bc8909822ef97fe40721b80ce062abf93d825db', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), index.h("h3", { key: '0a30cf8669b622aeb47c595f30df3a26202c5111', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (index.h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
+            } }, index.h("span", { key: 'e8652d3efbba23460e516c7a482b9c58711bfd6e' }, index.h("span", { key: '0b3aa10dd2da8634101fca455b5a611f6d3e4436', class: CSS.headerActionContainer }, index.h("calcite-action", { key: '3f311642dd154822d105fa5ecd21bd5cfe7dcf0c', onClick: this.toggleExpanded(), icon: expanded ? 'chevron-down' : 'chevron-up', appearance: "transparent", text: expandCollapseText, label: expandCollapseText, scale: "s" }), index.h("h3", { key: '0d7eb0a5958b4f661772f59faf287836818aaeeb', class: `${CSS.header} ${CSS.label}${isChild}`, title: (_c = this.activeLayerInfo) === null || _c === void 0 ? void 0 : _c.title }, (_d = this.activeLayerInfo) === null || _d === void 0 ? void 0 : _d.title)), this.featureCount && isInteractive ? (index.h("instant-apps-interactive-legend-count", { activeLayerInfo: this.activeLayerInfo, "show-total": true, messages: this.messages, legendvm: this.legendvm })) : null)));
     }
     toggleExpanded() {
         return () => {