@esri/solutions-components 0.10.25 → 0.10.27

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -65,6 +65,7 @@ export class CrowdsourceManager {
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = false;
+        this._isPortraitMobile = false;
         this._translations = undefined;
         this._layer = undefined;
         this._layoutMode = ELayoutMode.GRID;
@@ -74,6 +75,8 @@ export class CrowdsourceManager {
         this._numSelected = 0;
         this._filterOpen = false;
         this._showInformationHeader = true;
+        this._layerIds = undefined;
+        this._isLoading = true;
     }
     //--------------------------------------------------------------------------
     //
@@ -121,6 +124,10 @@ export class CrowdsourceManager {
      * 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
      */
@@ -170,7 +177,7 @@ export class CrowdsourceManager {
      * 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);
         }
     }
@@ -196,10 +203,21 @@ export class CrowdsourceManager {
         const id = evt.detail[0];
         const layer = await 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)
@@ -220,7 +238,7 @@ export class CrowdsourceManager {
     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: '28614b892c93b83de202a681a756027472d092c2' }, h("calcite-shell", { key: '8f9c57fa9d1c1c88dbac9706376aad6bbd425691', class: "position-relative" }, h("calcite-panel", { key: '3c156df89f396425c2711a39968017cc23910a55', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        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()));
     }
     /**
      * Called after each render
@@ -262,7 +280,7 @@ export class CrowdsourceManager {
     _getFooter() {
         const hasSelectedFeatures = this._numSelected > 0;
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (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 ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (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
@@ -398,7 +416,8 @@ export class CrowdsourceManager {
      */
     _getMapAndCard(layoutMode, panelOpen, hideTable) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
-        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
+        const borderRight = !this._isPortraitMobile && this._isMobile ? "border-right" : "";
+        return (h("div", { class: `${mapSizeClass} overflow-hidden ${borderRight}` }, this._getMapNode(panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
@@ -412,9 +431,9 @@ export class CrowdsourceManager {
     _getMapNode(panelOpen) {
         const isMapLayout = this.appLayout === 'mapView';
         const isTableLayout = this.appLayout === 'tableView';
-        const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        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._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 (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 })));
     }
     /**
      * Get the expand node for the popup information
@@ -423,17 +442,17 @@ export class CrowdsourceManager {
      * @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 (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*/
-            } }, h("calcite-panel", null, !this._isMobile && this._showInformationHeader || this._numSelected > 0 ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : h("div", null), this._getCardNode())));
+            } }, h("calcite-panel", null, (!this._isPortraitMobile && this._showInformationHeader) || (this._numSelected > 0 && !this._isPortraitMobile) ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : h("div", null), this._getCardNode())));
     }
     /**
      * Get the card node
@@ -444,15 +463,15 @@ export class CrowdsourceManager {
     _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 (h("div", { class: `width-50 height-full ${themeClass}` }, 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 (h("div", { class: `width-50 height-full ${themeClass}` }, 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
@@ -466,7 +485,7 @@ export class CrowdsourceManager {
     _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 === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
@@ -476,7 +495,7 @@ export class CrowdsourceManager {
             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._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 })), 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", { 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
@@ -488,7 +507,7 @@ export class CrowdsourceManager {
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
+        return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), 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: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
     }
     /**
      * Show filter component in modal
@@ -497,7 +516,13 @@ export class CrowdsourceManager {
      * @protected
      */
     _filterModal() {
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, 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 (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, 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.
@@ -549,13 +574,18 @@ export class CrowdsourceManager {
         const isMobile = this.el.offsetWidth < 1024;
         const forceOpen = !this._isMobile && isMobile;
         this._isMobile = isMobile;
-        this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : 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 ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
     }
     /**
      * Open/Close the appropriate panel.
@@ -576,6 +606,10 @@ export class CrowdsourceManager {
         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;
@@ -1384,6 +1418,7 @@ export class CrowdsourceManager {
             "_hideFooter": {},
             "_hideTable": {},
             "_isMobile": {},
+            "_isPortraitMobile": {},
             "_translations": {},
             "_layer": {},
             "_layoutMode": {},
@@ -1392,7 +1427,9 @@ export class CrowdsourceManager {
             "_panelOpen": {},
             "_numSelected": {},
             "_filterOpen": {},
-            "_showInformationHeader": {}
+            "_showInformationHeader": {},
+            "_layerIds": {},
+            "_isLoading": {}
         };
     }
     static get events() {
@@ -1469,6 +1506,12 @@ export class CrowdsourceManager {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "idsFound",
+                "method": "idsFound",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

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

package/dist/collection/components/delete-button/delete-button.js

@@ -92,7 +92,7 @@ export class DeleteButton {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '23936d6981c9779f5a21951c6667e3cba86e5d82' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '23936d6981c9779f5a21951c6667e3cba86e5d82' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage(), h("calcite-tooltip", { key: '0078ca79ef0a2195be88d0b508fefc9838af9693', placement: "bottom", "reference-element": this.buttonType === "button" ? "solutions-delete" : this.icon }, h("span", { key: '6a2f3c55237c2cb07f17559c9f14edd4b442e004' }, this._translations.delete))));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/edit-card/edit-card.js

@@ -198,7 +198,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '16dd78822ee6d7c4e2da97c4b7ec7c0678b51e68' }, h("div", { key: '8aba2b86c7bf8e7dfbf7567b156e02b23b728f4e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '8230d44ec05ff207681e6333b7f08c80748c4f3d', class: "position-absolute" }, h("div", { key: '71792b5737c43a024ebc677ae168d74569349585', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '47176534c25769af8ae107c3864901c4294b4359', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '9f4aaad65aed5e7b8d05e6171fdbfdb4f6534c12' }, h("div", { key: 'ded5d125959b11da1a48faf2f28baa9779e36e57', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '6eb7dd1c025f3385f68a08176558e07a0c4bf3cd', class: "position-absolute" }, h("div", { key: 'a56ac68bc0bda73a2153d89fc29d5bef3313ae7f', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'a1323d9db0e6de6df48573de7fbc954280b27b8f', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/feature-comments/feature-comments.js

@@ -62,7 +62,7 @@ export class FeatureComments {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '0d44fcf94820417e984a3496f7fdea7ec63104d9' }, h("slot", { key: '7a41443ca673bb37f4271c86013695a270d8a276' })));
+        return (h(Host, { key: '9d6d06f2466bbbfba74ead0dd8af4354834006c6' }, h("slot", { key: '25722c28a43a7a005a0c55b16c0df536a7a19a61' })));
     }
     static get is() { return "feature-comments"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-details/feature-details.js

@@ -180,12 +180,12 @@ export class FeatureDetails {
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '440e745ef61e578f88381920a3aeca1b54048612', "full-height": true }, h("info-card", { key: 'a1bb7f4809dbed25c34bd4307ad13b9a09c66b65', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '3caf1242f3c0f09b86ea146c9fb49bcea9306087', class: "buttons-container" }, this._commentsAvailable &&
-                h("calcite-button", { key: 'e8873a1d0bd7132ced40543a0e6a9c3a8c7c72e1', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
-                h("calcite-button", { key: 'cbbb6cf9c50cb360241d6e7f5d33c1713ec99017', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '92f4c79093e6793d9b4036f99837a9ad19efb3be', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '95e25a9d10d7baea4a40c4fbbe5d9b19609d2790', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: '05a12e56500ab833e856b8f5ac0f8371de522170', "full-height": true }, h("info-card", { key: '53c2102681c8005322c1711b038087b1a70d9a53', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '1cf9a8eb026a2ed6c15ccafc3910fed388e63e5d', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: 'c95920ae526cfeaa9a8824b985f593c95807c3ae', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'cf6cab791332884e63615058d6d0a1861534177b', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '1fe322958b367df620c73834353251d05566d8c7', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '8eefe98bc8af36db6793879c38dbed85f45b4a36', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules

package/dist/collection/components/feature-form-flow-item/feature-form-flow-item.js

@@ -62,7 +62,7 @@ export class FeatureFormFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '8ea61009c0bd3745d1bf418766b9aa90830199a2' }, h("slot", { key: '732c3369626fc55e8d53aa7eb6366bb66edc591a' })));
+        return (h(Host, { key: '69a6d88e4a58724a61b964ab9e4cc44df1879be4' }, h("slot", { key: '57bb8fc9d5fc942af7a47d4735b358510e406818' })));
     }
     static get is() { return "feature-form-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/feature-list/feature-list.js

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

@@ -62,7 +62,7 @@ export class FeaturesFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'a219193f59f1942d9296e5c40c5276bfccdd3d55' }, h("slot", { key: 'fcdabacfe41b9f5af0a1ddb3e641090f2ec1e85c' })));
+        return (h(Host, { key: '8154ad4de3a112bcdef4b1495c6fbeab1a13e292' }, h("slot", { key: '6c12197599bd5742f4ffacbae64170929e485d99' })));
     }
     static get is() { return "features-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/floor-filter/floor-filter.js

@@ -127,7 +127,7 @@ export class FloorFilter {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'dd7fa68ddc1e417cb8924549e50e81742f9e891a' }, h("div", { key: '294837a32ed7e8f955bce7dc2403895c7dd9984f', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: '51da7a656e7f56ecc8cc4093d3dab856f77b5c7a' }, h("div", { key: 'd2fda7047f09a673216484f5c202f039fca20108', ref: (el) => { this._floorFilterElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.

package/dist/collection/components/info-card/info-card.js

@@ -232,8 +232,8 @@ export class InfoCard {
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (h(Host, { key: 'c81fe6991dd41dc9c653caca0453539538e7c9d9' }, h("calcite-shell", { key: '378fca0a1eaf44df516885947407ae2d17ea997c', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '24c11c02633bb6e2fdca4b65098527f54fea6a96', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'ed3e96880d1f25e0b561fe42c88ed5545c1414b3', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '034509dfa87783df9ced22ebdaeeec237cf7b7d2', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'c7f1493ef6b7c2f43c5e8ba473e3622ff9564e8f', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '6b565362368cee3e8f45cb4d0a638238130bd315', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '11135611585900b07db242d427fb63ed248da775', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '76f948c7dfc776a0a6f45cd5cbb00e49f5656eb0' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'c73416239e73225e1d8fa12d4b9ac43a2b4efd5c', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '6102fda8c8537dbd985f73ade0ca47f18df152e3' }, h("calcite-button", { key: '78ead75d2f77b46938bc469220e631549c087b6f', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'a8703ccdd4f07f04c2b4e14e493099da9f8f443a', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '394eb1ad6f1cba692bef685609d1196973bca6b4' }, this._translations.back))), h("calcite-action", { key: '907a5f48989fe956d4458685ec85066f81edf67e', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'b56d00fe419d2abd7da3d0fb3d390465879e5009', class: "pagination-count" }, this._count)), h("div", { key: 'f6e5de270c485fee1c07e8c5831606ea2afbffb9' }, h("calcite-button", { key: '4ed34cc96fde3539b947feb1e252c288bf75dca7', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: 'e46578ca1c03d42b31adbd34498d630cc47e0ae2', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '6283ddace0406a5b110fbd4672222efe6c1c796a' }, this._translations.next))))), h("edit-card", { key: '0ef0593bfa7d359dd68df8359fec3d3c0f39733b', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '27f20d8024d458429079f9ea5a56350b591e3719', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'cf76bacc550219663897429b4ca1368e2b177f19', slot: "title" }, this._translations.editDisabled), h("div", { key: 'a987d0f419bfcca13818c8be227002d64c13d6a0', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: 'a46a4081790c4e67a7e62d7602cf7d3203688d43' }, h("calcite-shell", { key: '688be9c8641692e2843536024752172416e88213', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: '0d99da4c0046325af848deaa5b6cb67ed524de96', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'e075742e911624b76b56404ccde68bff8f0363aa', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '17423712d3a1a2d38ee890ca4dba3ab55ff9ff5f', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'f9738f91381d1f1e011951c74b53c733a563f37d', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'bdb409117bc78ce70cb015521506086c6a8fc9c1', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'b1927881890a62576bfb794ac8d7ceec3178ae50', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '5b8024aca83b9a12e55e83025353b718fbabc56a' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '5b2410d9f2a2038f8903fb312ec00174d7b227f7', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '3e1ba697bd0c22e59b5555375aa192e05900d4a3' }, h("calcite-button", { key: 'd0308cab8f7b570eb64ba6639b753e34e471f0e4', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'ff51bfc1fe19c2cff4e9ef37c619e0c69dd7c707', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'dc1e698ca37f5988c2b822d6d7e00eacfc4fe4ba' }, this._translations.back))), h("calcite-action", { key: 'e442df4bcc0012851b8102a2590a58697cb1dc49', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'cb4729f055978f1d4c1c63d3e875fec3e4161602', class: "pagination-count" }, this._count)), h("div", { key: 'e6eac05de054f614dc8b6bf3de2ae289dd6d527f' }, h("calcite-button", { key: 'e253248af7d5e21880ccb3e82bbbe95082ff916a', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '7a2340dc1403c1a95c0a926c9fda19876a513708', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '3b69deac115afe2dc8cf9fb9d9eaed8d93abb22c' }, this._translations.next))))), h("edit-card", { key: 'e43be40ba13bec51123fbcd3f30062f4bc3e8550', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'ccbd2ecf9f1f719912ec3020d29559a6d8727e3f', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '4f17aeceb63548d1eef560d3ef178f630f8dfe47', slot: "title" }, this._translations.editDisabled), h("div", { key: '9c720479ed61012787d7f6be966e31e3fa136d54', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/json-editor/json-editor.js

@@ -135,7 +135,7 @@ export class JsonEditor {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'f7bd89c09a1da47faac69a2046e17f116d81f900' }, h("div", { key: 'ecb97ba7d6be7490e5e62eb32c821acc3e4d647f', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '8e41d06868b3d6814b71d06899a860444cf22f5f', class: "editor-controls" }, h("div", { key: '72e466cd4960538d2b12da8d7b19ff52587af282', class: "editor-buttons" }, h("calcite-icon", { key: 'ec927121edd4ad9873f39c4382bec58ec70f4fe0', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: 'e58f934f12ffb97b658b79bd6f43b488bfe48be1', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '39843757e60fe92ba3379fe72cf9696c082f83f7', icon: "undo", scale: "s" })), h("calcite-button", { key: 'd0b6147354e31152615f148fba1e9780d7d60d60', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '484b599a9c38c7e87a822c3b87934648ea47f440', icon: "redo", scale: "s" })), h("calcite-button", { key: '5d984fe49873a751c0a5da22de35261566e2c648', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c6089f49f33196f3edd7ef009b1367b7978e0469', icon: "compare", scale: "s" })), h("calcite-button", { key: 'e8d4923b89329a19eb4b0426c9a8645327be7558', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '0033b33183f88b5122dda9afa5f7095072c7beaf', icon: "search", scale: "s" })), h("calcite-button", { key: 'fdb722e4e9046eb31ca62352a841097bd60f9989', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'c1f8cda4d8fb79b66e1a8b91286e8952bd6afaaa', icon: "reset", scale: "s" })))), h("div", { key: '2111d6a3f15a3df17cdc33ae49de36f51d9db37b', class: "edit-parent" }, h("div", { key: '9a7b4cbf25dff972a44ec6332ac010adb511251d', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '9ccd5646f1df550e5ff2c35bb5a9bf3e181117fa', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
+        return (h(Host, { key: '2932135e373b0e5cf5bc5347c7b7960a60e81df1' }, h("div", { key: '98579089177f92e2a3600dd64d738e4ec8ff8ae2', id: `${this.instanceid}-editor-container`, class: "editor-container padding-right" }, h("div", { key: '971de116ef81850ecc2fcbff9d9f30e36c5928cf', class: "editor-controls" }, h("div", { key: '75e505043095753dc414dad671c6eec4e27a47c1', class: "editor-buttons" }, h("calcite-icon", { key: 'af8645c74758aff0f310089a5c97a504a52a2026', id: `${this.instanceid}-errorFlag`, icon: "exclamation-mark-triangle", title: this._translations.errorFlag, scale: "s", class: "edit-error-flag" }), h("calcite-button", { key: '6d736a2f3aa9c3e0efd5c1919253fc02e3dec0a2', id: `${this.instanceid}-undo`, color: "blue", appearance: "solid", title: this._translations.undo, onClick: () => this._undo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '20fdf41124e256f139c7be3bd6f0e42823706cec', icon: "undo", scale: "s" })), h("calcite-button", { key: '7ca8a3bf590e33d6596af51e0b1f25019e9f806a', id: `${this.instanceid}-redo`, color: "blue", appearance: "solid", title: this._translations.redo, onClick: () => this._redo(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '3e248322dd1381da5ec609e92953d8ea94ebad29', icon: "redo", scale: "s" })), h("calcite-button", { key: '2e147af3b73714e40347f432d3d440d0e9bd2ae9', id: `${this.instanceid}-diff`, color: "blue", appearance: "solid", title: this._translations.diff, onClick: () => this._toggleEditor(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: 'dc3fea2e4743511af20347412c6093163f0b674c', icon: "compare", scale: "s" })), h("calcite-button", { key: 'f983c7535f4a36a693b186a716ad6750e33f679a', id: `${this.instanceid}-search`, appearance: "outline", color: "blue", title: this._translations.search, onClick: () => this._search(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '315076f61831b8294e0c9b2c2e5fb174d9163bce', icon: "search", scale: "s" })), h("calcite-button", { key: 'a9223c5ad5eeed5a932ce106d3f3db90008933b9', id: `${this.instanceid}-reset`, color: "blue", appearance: "solid", disabled: true, title: this._translations.cancelEdits, onClick: () => this._reset(), scale: "s", class: "edit-button" }, h("calcite-icon", { key: '0cd3c9c634da8fe710890b533bc046c536af0bb2', icon: "reset", scale: "s" })))), h("div", { key: '73fc19136eb3aa3148c859ba617cd9904ee92f98', class: "edit-parent" }, h("div", { key: '57435dbeeef39ddaeb97256512acca6360e1a7ec', id: `${this.instanceid}-container`, class: "json-edit-container" }), h("div", { key: '152e58aeb94ae22d6d11e4332496cb2e637ebbca', id: `${this.instanceid}-diff-container`, class: "json-edit-container display-none" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/layer-table/layer-table.css

@@ -138,4 +138,8 @@ html[dir="rtl"] .share-action {
 
 .esri-feature-table__table-container {
   height: 100%;
+}
+
+.search {
+  --calcite-color-border-input: var(--calcite-color-border-3);
 }