@esri/solutions-components 0.11.20 → 0.11.22

package/dist/components/layer-list2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { d as getMapLayerHash, a as getAllLayers, c as getFeatureLayerView } from './mapViewUtils.js';
 import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
+import { e as esriLoader } from './esri-loader.js';
 
 const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}";
 const LayerListStyle0 = layerListCss;
@@ -22,6 +23,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this.applyLayerViewFilter = false;
+        this.filterByMapExtent = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -37,6 +39,14 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * ILayerItemHash: id/name lookup
      */
     _layerItemsHash;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -50,6 +60,17 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.el.lang = this.locale;
         await this._getTranslations();
     }
+    /**
+     * Watch for filterByMapExtent change and update the layer list
+     */
+    filterByMapExtentWatchHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -86,7 +107,11 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -98,15 +123,37 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: 'a151c8fd65c50aacb23dcd0c858e52c0c7cd7e5e' }, this._isLoading && h("calcite-loader", { key: '544a134bccc29048ca80b996844cc944bcd97a24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '7557f91c8c3349c120c043ea59458b4c834dce2e', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'ea8b20f8c7da5053641cfad56e3395ae3c6286f5', slot: "title" }, this._translations.error), h("div", { key: '38aaed7b456aba0b1dd70183be03e9133834dfb4', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '547b0681145fd8d8663b786472be9e5161cbd693', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'ac83dce884ea72ee461cc628efb51bce08cf4ce5' }, this._isLoading && h("calcite-loader", { key: '77d15458f7a081acdae63f26ffaf7b2a5ca143ec', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'd48169628cdaf271a1263f1ef3218a98e64897f1', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'e5568829b5c90524f0d9313e4812d30837609db2', slot: "title" }, this._translations.error), h("div", { key: '13f04655936656439c1119c56a0f7f919994f402', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: 'b20eeb9052c5f75a2bf798e797ec928d37729484', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [reactiveUtils] = await esriLoader.exports.loadModules([
+            "esri/core/reactiveUtils"
+        ]);
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Updates the layer list based on map view extent
+     * @protected
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.setLayers();
+        }, {
+            initial: true
+        });
+    }
     /**
      * Fetch the ids of the layers from the map
      * @returns Promise when the operation has completed
@@ -143,6 +190,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
                             q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
                         }
                     }
+                    q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -227,7 +275,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this._translations = messages[0];
     }
     static get watchers() { return {
-        "locale": ["localeWatchHandler"]
+        "locale": ["localeWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentWatchHandler"]
     }; }
     static get style() { return LayerListStyle0; }
 }, [0, "layer-list", {
@@ -237,13 +286,15 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         "showFeatureCount": [4, "show-feature-count"],
         "showNextIcon": [4, "show-next-icon"],
         "applyLayerViewFilter": [4, "apply-layer-view-filter"],
+        "filterByMapExtent": [4, "filter-by-map-extent"],
         "_noLayersToDisplay": [32],
         "_mapLayerIds": [32],
         "_isLoading": [32],
         "_translations": [32],
         "refresh": [64]
     }, undefined, {
-        "locale": ["localeWatchHandler"]
+        "locale": ["localeWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/layer-table2.js

@@ -629,8 +629,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: 'a0a998de3a1b29c311a9fdfa87f3bd836481ba5a' }, h("div", { key: 'aafaf9f925ed7321e1ca7f15fc7db369212dc1dc' }, h("calcite-scrim", { key: '86459aed994823dbf1d774aad01e8207a7df5f4f', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: 'b29896a197cba444d2ac377779670394e29ecaf6' }, this._getTableControlRow("header"), h("div", { key: '0456651ac46f399eb04253387d7aae76995f4683', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '9ba484159832fea630bbb653bc2fc4e99e602674', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'bd4b72db51f44c2954e893e8ef7ec2a30efc4c45', class: "search-container" }, h("calcite-input", { key: '8811ff1dd71408fda37a0d7d2403671df24b5b7b', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '44a419089cf1e207f52ce19015c2870ce956e261', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '096f4fc7f5cc9500e7982bbfaceb2fcc4c82a1dd', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '5141283322c3492f26768af0b712df01ebb734ad' }, h("div", { key: '3a1742f91134a896a5cf8298e2359d2370a95b51' }, h("calcite-scrim", { key: 'e50e99752b35ad923bfa2adb005cc004d655c6fb', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: '51c5b8cd436c352144f5072ea07f26518b3602f4' }, this._getTableControlRow("header"), h("div", { key: '74ac951ac1a460ed555b70db37d6502585fd702d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '0afcdaa113b15a7c4a95fb2615f7b8e19bffc5f3', class: "height-full width-full" }, showSearch &&
+            h("div", { key: 'eae1850675897ebf1f2f34a2c13f9b7e19a5b962', class: "search-container" }, h("calcite-input", { key: 'cde8ce3a6bf1d9da95825fc543c7e3d72643a1f6', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '78beeb6521f065fd4dbbf233f6807acefcc7fa66', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'bc258046891b9d8ca3e6e67fb16b9b7c909f2bbc', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
@@ -711,16 +711,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             this._clearSearchDefinitionExpression();
         }
         let searchedIds = [];
-        if (this._fullTextSearchInfo.length) {
-            if (this._fullTextSearchInfo[0].searchTerm) {
-                const searchQueryParams = this._layer.createQuery();
-                searchQueryParams.fullText = this._fullTextSearchInfo;
-                searchedIds = await this._layer.queryObjectIds(searchQueryParams);
-                if (showSelected && selectedIds?.length) {
-                    searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
-                }
-                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+        if (this._fullTextSearchInfo?.length && this._fullTextSearchInfo[0].searchTerm) {
+            const searchQueryParams = this._layer.createQuery();
+            searchQueryParams.fullText = this._fullTextSearchInfo;
+            searchedIds = await this._layer.queryObjectIds(searchQueryParams);
+            if (showSelected && selectedIds?.length) {
+                searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
             }
+            await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
         }
         // highlight the feature only when selected feature is present in applied filter
         if (showSelected && searchedIds?.length) {

package/dist/components/map-layer-picker2.js

@@ -285,7 +285,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      */
     _getItemTypeIcon() {
         let itemTypeIcon = "layers";
-        if (this.selectedIds.length > 0) {
+        if (this.selectedIds.length > 0 && this._layerNameHash) {
             const id = this.selectedIds[0];
             itemTypeIcon = Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table";
         }

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

@@ -14,7 +14,7 @@ import { d as defineCustomElement$3 } from './buffer-tools2.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-color-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{border-inline-end:1px solid var(--calcite-color-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.tooltip-container{display:flex}.padding-start-1-2{padding-inline-start:0.5rem}.icon{--calcite-color-icon-color:var(--calcite-color-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2)}";
+const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-color-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{border-inline-end:1px solid var(--calcite-color-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.tooltip-container{display:flex}.padding-start-1-2{padding-inline-start:0.5rem}.icon{--calcite-color-icon-color:var(--calcite-color-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);max-width:400px}";
 const MapSelectToolsStyle0 = mapSelectToolsCss;
 
 const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools extends HTMLElement {
@@ -312,7 +312,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
         }
         const showBufferToolsClass = this.searchDistanceEnabled ? "search-distance" : "div-not-visible";
         const bufferDistance = typeof this.selectionSet?.distance === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this.searchDistanceEnabled, onCalciteSwitchChange: () => this.searchDistanceEnabled = !this.searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this.searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, locale: this.locale, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: this.selectionSet?.unit || this.defaultBufferUnit }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "search-distance-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "search-distance-icon" }, h("span", { class: "tooltip-message" }, this._translations.useSearchDistanceTootip)), h("calcite-switch", { checked: this.searchDistanceEnabled, onCalciteSwitchChange: () => this.searchDistanceEnabled = !this.searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this.searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, locale: this.locale, onBufferComplete: (evt) => void this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: this.selectionSet?.unit || this.defaultBufferUnit }))));
     }
     /**
      * Renders the map layer picker component.
@@ -323,7 +323,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
             this.enableLayerFeaturesOnLoad = false;
         }
         const useLayerFeaturesClass = this.useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this.useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
+        return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this.useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id), showTables: false }))));
     }
     /**
      * Renders the number of selected features

package/dist/components/public-notification.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$4 } from './map-select-tools2.js';
 import { d as defineCustomElement$3 } from './pdf-download2.js';
 import { d as defineCustomElement$2 } from './refine-selection2.js';
 
-const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{padding-block-start:1rem;padding-inline-start:1rem;padding-inline-end:1rem}.padding-sides-1{padding-inline-start:1rem;padding-inline-end:1rem}.padding-end-1-2{padding-inline-end:.5rem}.padding-top-1-2{padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-start-1-2{padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-color-border-2)}.margin-sides-1{margin-inline-start:1rem;margin-inline-end:1rem}.margin-start-1-2{margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-color-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-color-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}.img-container{width:100%;height:100%}.font-weight-500{font-weight:500}.background-override{height:100%;width:100%;--calcite-color-foreground-3:var(--calcite-color-brand);--calcite-color-foreground-2:var(--calcite-color-brand-hover);--calcite-color-text-1:var(--calcite-color-text-inverse)}.word-wrap-anywhere{word-wrap:anywhere}";
+const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{padding-block-start:1rem;padding-inline-start:1rem;padding-inline-end:1rem}.padding-sides-1{padding-inline-start:1rem;padding-inline-end:1rem}.padding-end-1-2{padding-inline-end:.5rem}.padding-top-1-2{padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-start-1-2{padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-color-border-2)}.margin-sides-1{margin-inline-start:1rem;margin-inline-end:1rem}.margin-start-1-2{margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-color-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-color-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{margin-block-start:0.125rem;color:var(--calcite-color-text-3)}.img-container{width:100%;height:100%}.font-weight-500{font-weight:500}.background-override{height:100%;width:100%;--calcite-color-foreground-3:var(--calcite-color-brand);--calcite-color-foreground-2:var(--calcite-color-brand-hover);--calcite-color-text-1:var(--calcite-color-text-inverse)}.word-wrap-anywhere{word-wrap:anywhere}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);max-width:400px}";
 const PublicNotificationStyle0 = publicNotificationCss;
 
 const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotification extends HTMLElement {
@@ -617,7 +617,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
     _getExportPage() {
         const hasSelections = this._hasSelections(this.showRefineSelection);
         const displayDuplicatesClass = this._numDuplicates > 0 ? "display-block" : "display-none";
-        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt), width: "full" }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: (!this._downloadActive || this._fetchingData) || (!this._addMap && !this._addResults), loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+        return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt), width: "full" }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, h("span", { class: "font-weight-500" }, this._translations.pdf)), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, h("span", { class: "font-weight-500" }, this._translations.csv)))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: (!this._downloadActive || this._fetchingData) || (!this._addMap && !this._addResults), loading: this._fetchingData, onClick: () => void this._export(), width: "full" }, h("span", { class: "font-weight-500" }, this._translations.export))))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
     }
     /**
      * Store the user selected export type CSV || PDF
@@ -638,7 +638,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
         const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
         const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
         const formatOptionsClass = this._addResults ? "" : "display-none";
-        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, locale: this.locale, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
+        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, locale: this.locale, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", overlayPositioning: "fixed", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
     }
     /**
      * Toggle the _addMap state variable and update the graphics on the map

package/dist/components/refine-selection2.js

@@ -12,7 +12,7 @@ import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-color-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;line-height:1.3em;background-color:var(--calcite-color-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110, 110, 110, .3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110, 110, 110, .3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{padding-inline-start:0.5rem}.font-weight-500{font-weight:500}.word-wrap-anywhere{word-wrap:anywhere}";
+const refineSelectionCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-color-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;line-height:1.3em;background-color:var(--calcite-color-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110, 110, 110, .3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110, 110, 110, .3)}.display-flex{display:flex}.font-bold{font-weight:bold}.width-full{width:100%}.label-margin-0{--calcite-label-margin-bottom:0}.padding-start-1-2{padding-inline-start:0.5rem}.font-weight-500{font-weight:500}.word-wrap-anywhere{word-wrap:anywhere}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);max-width:400px}";
 const RefineSelectionStyle0 = refineSelectionCss;
 
 const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection extends HTMLElement {
@@ -117,7 +117,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class RefineSelection e
      */
     render() {
         const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-        return (h(Host, { key: '8220100e14abd8339947a74df2d8072d06fb2a25' }, h("div", { key: '1d7426778d638f347b563bfd29478fae7598e2dd', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'cfb649989c24c403bde7d358794933f8f7959bb8', class: "display-flex" }, h("calcite-label", { key: 'dce85bbfa526941a0fb46c1aeba57f4b028948ef', class: "font-bold width-full label-margin-0" }, h("div", { key: '86c19198643381fd99681c53bf0b2b5e66ecf7dc', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '392022947cd9f53b4b83895992c5b0b32e56fb06', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'd0946a46e7a79fc613b9eb9aa3e6f896c12bef92', enabledLayerIds: this._enabledLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '3b733fd5e7ceb011446112e65aa1ee1b0c5899c7', closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { key: '2076104710f4fbdd1de1f31b552b17749ebf9239', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '040efdfd6a269244790101cc0712a1cb0bac40d8', class: "padding-1" }, h("div", { key: 'be963f2cb157fda55980166359e53139a5713405', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '459fa98e8852ea96afd0c9ab5864787f80ff6559', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '965fa774838ecd3292c19a430cdbdfc7b44c82b2', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: 'e0b6fddbded9c78fa98674709ff03f050fd47300', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '56e453183fc559ddbce5b041095fad5a8d6262ab', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: '13593da569557fa57822c98e12a5654cade219a1', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '029fec164d9475274294a1d740a434cab2535cdc' }, h("map-draw-tools", { key: 'a212c5d21b2b1cdf7ba284a95dacaf83cf0180c9', active: true, drawMode: EDrawMode.REFINE, locale: this.locale, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: '352a0523461cfeeae3bae09ae1cc6f8fa759616b' }), (h("calcite-list", { key: '948c7f0aa24d827d29cbc1c2c702deb52134e771', class: "list-border", label: "" }, this._getRefineSelectionSetList())))));
+        return (h(Host, { key: '8220100e14abd8339947a74df2d8072d06fb2a25' }, h("div", { key: '1d7426778d638f347b563bfd29478fae7598e2dd', class: layerPickerClass + " padding-top-sides-1" }, h("div", { key: 'cfb649989c24c403bde7d358794933f8f7959bb8', class: "display-flex" }, h("calcite-label", { key: 'dce85bbfa526941a0fb46c1aeba57f4b028948ef', class: "font-bold width-full label-margin-0" }, h("div", { key: '86c19198643381fd99681c53bf0b2b5e66ecf7dc', class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { key: '392022947cd9f53b4b83895992c5b0b32e56fb06', class: "padding-start-1-2 icon", flipRtl: !(this.locale?.toLowerCase() === "he"), icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { key: 'd0946a46e7a79fc613b9eb9aa3e6f896c12bef92', enabledLayerIds: this._enabledLayerIds, locale: this.locale, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id], showTables: false })), h("calcite-popover", { key: '9963f5ca97481ca45f35b90045cd864f2feb6d42', closable: true, label: "", overlayPositioning: "fixed", referenceElement: "refine-input-layer" }, h("span", { key: 'e67b1770261fc0f147acc79c805eeb73932bf595', class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { key: '22e2aae1be025a115cf9f1d898888b78d90e3662', class: "padding-1" }, h("div", { key: 'd1930131978f7edc53db10baaa44f1e105a98e68', class: "padding-bottom-1" }, h("calcite-segmented-control", { key: '03a307eeaf42312eab41488443676407955089ab', class: "w-100", width: "full" }, h("calcite-segmented-control-item", { key: '7ff52920fa3da0f19215cb77d633beab1fae1148', checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { key: '38875379650fe63cf1b24f1e7999f41457dc3156', class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { key: '13e689528e58f405074b5144f96c90c558c09672', checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { key: 'f4ebb951dd08a430fd4dd528dd3d4a69c3a3e41a', class: "font-weight-500" }, this._translations.remove)))), h("div", { key: '346c1e1e022fa21beb692b3770703243de74a5e1' }, h("map-draw-tools", { key: '5b9334556aef8ac57ce6593eb290fb0c3d1169f1', active: true, drawMode: EDrawMode.REFINE, locale: this.locale, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: this._refineSelectionSet?.redoStack.length > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: this._refineSelectionSet?.undoStack.length > 0 })), h("br", { key: '9263c5740e0d5e8145336f8001688d420e43a325' }), (h("calcite-list", { key: 'f29edcd01d9f48b27181eda806fe492e917dadc3', class: "list-border", label: "" }, this._getRefineSelectionSetList())))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -137,7 +137,7 @@ const CardManager = class {
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, h("info-card", { key: '0b9b30182fbc3482e9edf49b79f68aec8cf86adc', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: '94b646061956a78dec4f96d9d1d9dedc5ad6aee7', class: "position-relative " + messageClass }, h("calcite-panel", { key: '00b660d474234f8156f3d4c627626f5891754051' }, h("div", { key: 'adb0732ff59c4fdedb19367a32ad9e3e060ddb60', class: "padding-1" }, h("calcite-notice", { key: 'a2c88bd4a0827111b0d1f3056ae571b47e5b380b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: 'bffc2630de3f0376b6ea5827c89f65dc605a5356', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '08bef5c20d6b60e17abcfc9fc19d7d1eb5d04b1c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '833a8de60b491008006034c1696fcb29f1bb6a08', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'dd2ae4509e4bec5a90f33484f8a28f422c0eeee4' }, h("calcite-panel", { key: '8fa68650f1933a88cdaf1fee8391cf433b7b54e9', heading: heading }, h("calcite-action", { key: '2b205887ff8703e01ef356cae09ce5d15dbec7c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '0977a3974583266f6d90e18c8fbbc3e18f803983', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, h("info-card", { key: '0b9b30182fbc3482e9edf49b79f68aec8cf86adc', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: '94b646061956a78dec4f96d9d1d9dedc5ad6aee7', class: "position-relative " + messageClass }, h("calcite-panel", { key: '00b660d474234f8156f3d4c627626f5891754051' }, h("div", { key: 'adb0732ff59c4fdedb19367a32ad9e3e060ddb60', class: "padding-1" }, h("calcite-notice", { key: 'a2c88bd4a0827111b0d1f3056ae571b47e5b380b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: 'bffc2630de3f0376b6ea5827c89f65dc605a5356', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '08bef5c20d6b60e17abcfc9fc19d7d1eb5d04b1c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '833a8de60b491008006034c1696fcb29f1bb6a08', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'fe3e33e8c733266ac97d85a656aec4cb75d7fa1d', selected: true }, h("calcite-panel", { key: 'e8de18fa82d9a8ba377f02855080ac1e35ce181a', heading: heading }, h("calcite-action", { key: '063ed2e572c64056d20601085012b86980c5d304', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'add0dbef4bca18905717b92ff584d006ebd81ca8', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -148,7 +148,7 @@ const CardManager = class {
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
-            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsgWhileDrawing: false })));
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsg: false, showGuidingMsgWhileDrawing: false })));
     }
     //--------------------------------------------------------------------------
     //
@@ -830,8 +830,8 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: 'a0a998de3a1b29c311a9fdfa87f3bd836481ba5a' }, h("div", { key: 'aafaf9f925ed7321e1ca7f15fc7db369212dc1dc' }, h("calcite-scrim", { key: '86459aed994823dbf1d774aad01e8207a7df5f4f', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: 'b29896a197cba444d2ac377779670394e29ecaf6' }, this._getTableControlRow("header"), h("div", { key: '0456651ac46f399eb04253387d7aae76995f4683', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '9ba484159832fea630bbb653bc2fc4e99e602674', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'bd4b72db51f44c2954e893e8ef7ec2a30efc4c45', class: "search-container" }, h("calcite-input", { key: '8811ff1dd71408fda37a0d7d2403671df24b5b7b', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '44a419089cf1e207f52ce19015c2870ce956e261', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '096f4fc7f5cc9500e7982bbfaceb2fcc4c82a1dd', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '5141283322c3492f26768af0b712df01ebb734ad' }, h("div", { key: '3a1742f91134a896a5cf8298e2359d2370a95b51' }, h("calcite-scrim", { key: 'e50e99752b35ad923bfa2adb005cc004d655c6fb', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: '51c5b8cd436c352144f5072ea07f26518b3602f4' }, this._getTableControlRow("header"), h("div", { key: '74ac951ac1a460ed555b70db37d6502585fd702d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '0afcdaa113b15a7c4a95fb2615f7b8e19bffc5f3', class: "height-full width-full" }, showSearch &&
+            h("div", { key: 'eae1850675897ebf1f2f34a2c13f9b7e19a5b962', class: "search-container" }, h("calcite-input", { key: 'cde8ce3a6bf1d9da95825fc543c7e3d72643a1f6', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '78beeb6521f065fd4dbbf233f6807acefcc7fa66', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'bc258046891b9d8ca3e6e67fb16b9b7c909f2bbc', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
@@ -912,16 +912,14 @@ const LayerTable = class {
             this._clearSearchDefinitionExpression();
         }
         let searchedIds = [];
-        if (this._fullTextSearchInfo.length) {
-            if (this._fullTextSearchInfo[0].searchTerm) {
-                const searchQueryParams = this._layer.createQuery();
-                searchQueryParams.fullText = this._fullTextSearchInfo;
-                searchedIds = await this._layer.queryObjectIds(searchQueryParams);
-                if (showSelected && selectedIds?.length) {
-                    searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
-                }
-                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+        if (this._fullTextSearchInfo?.length && this._fullTextSearchInfo[0].searchTerm) {
+            const searchQueryParams = this._layer.createQuery();
+            searchQueryParams.fullText = this._fullTextSearchInfo;
+            searchedIds = await this._layer.queryObjectIds(searchQueryParams);
+            if (showSelected && selectedIds?.length) {
+                searchedIds = searchedIds.filter((id) => selectedIds.includes(id));
             }
+            await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
         }
         // highlight the feature only when selected feature is present in applied filter
         if (showSelected && searchedIds?.length) {

package/dist/esm/create-feature_4.entry.js

@@ -392,7 +392,8 @@ const CreateFeature = class {
             visibleElements: {
                 snappingControls: false,
                 createFeaturesSection: true,
-                editFeaturesSection: false
+                editFeaturesSection: false,
+                flow: false
             },
             container: this._container
         });
@@ -1071,6 +1072,7 @@ const EditCard = class {
                 view: this.mapView,
                 layerInfos,
                 visibleElements: {
+                    flow: true,
                     snappingControls: false
                 },
                 container
@@ -1393,8 +1395,8 @@ const InfoCard = class {
         // if user has navigated to the related feature then pass the related feature to the graphics
         const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
         const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
-        return (h(Host, { key: '9f75eb2e7aba944474e85c34b2abe23982629558' }, h("calcite-shell", { key: '748f9e50cd3aa7a52dd7910b171c0d7f54d09203', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'feced4d4a66df36958644436acaa53ddabdfc02a', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '3bb912c80d610a21a5e283c6bd19ab0c63023c45', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '479dcbda08f837b32bd19ed7f40856f081e92a6e', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'dd78b02ba8506c391aada6c5233691ec9babcfbe', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c5a807609c60151a433fa9c0055fbfdf20b2935f', 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, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'a4cd4c77e982e23675ec9eaf08e2135de6c83b65', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '22533608996d1c87b9b04e339506ec01176379b0' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '183ff7da57a06de8f5419edf5973f18b41c46097', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '77e59229d1d516ccdc8f7c5be2f89a5ad9d5004b' }, h("calcite-button", { key: '4b6a6f1f85e9199e14d626ba66b6b319283d0c32', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7056c5cb3c790c804194f09f2586864a28dce5e1', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '923fc5425a9faced6952a1b9acff9b7d0f3da286' }, this._translations.back))), h("calcite-action", { key: 'a34bfb4ae71a91373fd476e7b704a6a2f8f23157', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '101a0fa592af65b540123c835e9031a18671ad8b', class: "pagination-count" }, this._count)), h("div", { key: 'c4f88f464a3091dfc77578470de4f42d05b9f5c7' }, h("calcite-button", { key: 'e4e35e539f0c7e01a31e0047db545d4d334ef2d8', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '40244ecf5566fde448b311272d2ee00d70bc531a', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'db01e2a2b9da9a80f9a25caf49bf8beb872e6ad9' }, this._translations.next))))), h("edit-card", { key: 'cfa193b01b67f7709ea6a491caa0c647c536e9e3', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '709fd6d681d32a03fcf5fba959e81a0153676e26', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bbdd9cc98fcda8ffba294a4322f08468072f6aef', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd07e32e9cd54cc82ff005e7e696e13e1b8bdaa4e', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '7662ad49543f574bbcb58f2b9611efefc0420259' }, h("calcite-shell", { key: '10075ee9cdf4d9e8a6dee615755c53eaaece8c21', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'fc668f26163e1135d37a5dee1c08d72d7feee9d5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '73faf27901ae65feaf4faae8227aa21bfb1fb0a3', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: 'ced1edadc747dd7a087fed7b0a8e378def491381', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: '3f1ab07a2d197730d03497d0c5c5a2970e0f42ec', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '946cb64983426ce95c8a209aa7ae59405124709f', 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, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '4123a740f077f6d203ae75338655a3e4f988b3dd', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '6968a12b2f41737cb221bc7ddbcab834f990fe3c' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '31d228643a734df28880c009f8d9a989f07acedb', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'f1dd88d8e5359e8acfc3508890185f8769365ec8' }, h("calcite-button", { key: '86190bfd8442bcf327c8aa60272a4071dead2dbc', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '6cf40e219e228547636a228d306dc6fc2929d186', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '39a43c0568c3d9e71587d3e3a38970a97f16efa4' }, this._translations.back))), h("calcite-action", { key: '373330d9385477e7b8701bff969d93ccf992f8b6', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'badd298438061c4c61b5f5561d0883fd063d1434', class: "pagination-count" }, this._count)), h("div", { key: '501d8970243fa398721c9db04cff5491f59fe045' }, h("calcite-button", { key: '9118e14df5f7932e91e823a5bd35fe6292af1c07', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '29a22347603b730ab160023667bb1fc7654e69d4', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '2404d5b018b0e6478a366d995c61e6ec40e9e486' }, this._translations.next))))), h("edit-card", { key: 'cad638e12cf79d7efbc8d4fa05da14ddd1140197', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'b0ce00184f525e8156d282e5efd30962b018e226', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '35f655f6dc9c274b07ccafe769e8e9af357862d1', slot: "title" }, this._translations.editDisabled), h("div", { key: 'e2b8de0fdb5eac8b37e5bb2a872fd390d9b42d29', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1455,6 +1457,7 @@ const InfoCard = class {
                     visibleElements: {
                         actionBar: false,
                         closeButton: this.showCloseBtn,
+                        featureMenuHeading: false,
                         heading: !this.isMobile
                     }
                 });

package/dist/esm/create-related-feature_3.entry.js

@@ -6,9 +6,9 @@
 import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment } from './index-df5db8e9.js';
 import { l as loadModules, g as getLocaleComponentStrings, f as formatNumber } from './locale-7874c756.js';
 import { b as getAllTables, d as getMapLayerHash, a as getAllLayers, c as getFeatureLayerView } from './mapViewUtils-9da9be1c.js';
-import './esri-loader-c6842c6b.js';
-import './_commonjsHelpers-089957fe.js';
+import { e as esriLoader } from './esri-loader-c6842c6b.js';
 import './interfaces-659e3836.js';
+import './_commonjsHelpers-089957fe.js';
 
 const createRelatedFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.display-none{display:none !important}.esri-editor__panel-content{padding-block:10px !important}.notice-msg{padding:10px;width:calc(100% - 20px)}";
 const CreateRelatedFeatureStyle0 = createRelatedFeatureCss;
@@ -193,6 +193,7 @@ const CreateRelatedFeature = class {
         this._editor = new this.Editor({
             view: this.mapView,
             visibleElements: {
+                flow: true,
                 snappingControls: false
             },
             container: this._container
@@ -817,6 +818,7 @@ const LayerList = class {
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this.applyLayerViewFilter = false;
+        this.filterByMapExtent = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -832,6 +834,14 @@ const LayerList = class {
      * ILayerItemHash: id/name lookup
      */
     _layerItemsHash;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -845,6 +855,17 @@ const LayerList = class {
         this.el.lang = this.locale;
         await this._getTranslations();
     }
+    /**
+     * Watch for filterByMapExtent change and update the layer list
+     */
+    filterByMapExtentWatchHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -881,7 +902,11 @@ const LayerList = class {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -893,15 +918,37 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: 'a151c8fd65c50aacb23dcd0c858e52c0c7cd7e5e' }, this._isLoading && h("calcite-loader", { key: '544a134bccc29048ca80b996844cc944bcd97a24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '7557f91c8c3349c120c043ea59458b4c834dce2e', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'ea8b20f8c7da5053641cfad56e3395ae3c6286f5', slot: "title" }, this._translations.error), h("div", { key: '38aaed7b456aba0b1dd70183be03e9133834dfb4', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '547b0681145fd8d8663b786472be9e5161cbd693', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'ac83dce884ea72ee461cc628efb51bce08cf4ce5' }, this._isLoading && h("calcite-loader", { key: '77d15458f7a081acdae63f26ffaf7b2a5ca143ec', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'd48169628cdaf271a1263f1ef3218a98e64897f1', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'e5568829b5c90524f0d9313e4812d30837609db2', slot: "title" }, this._translations.error), h("div", { key: '13f04655936656439c1119c56a0f7f919994f402', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: 'b20eeb9052c5f75a2bf798e797ec928d37729484', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [reactiveUtils] = await esriLoader.exports.loadModules([
+            "esri/core/reactiveUtils"
+        ]);
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Updates the layer list based on map view extent
+     * @protected
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.setLayers();
+        }, {
+            initial: true
+        });
+    }
     /**
      * Fetch the ids of the layers from the map
      * @returns Promise when the operation has completed
@@ -938,6 +985,7 @@ const LayerList = class {
                             q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
                         }
                     }
+                    q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -1022,7 +1070,8 @@ const LayerList = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
-        "locale": ["localeWatchHandler"]
+        "locale": ["localeWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentWatchHandler"]
     }; }
 };
 LayerList.style = LayerListStyle0;

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

@@ -477,7 +477,9 @@ const CrowdsourceManager = class {
         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" : "";
         // position-sticky added to avoid an issue where this dialog would overlap the delete message modal in some small screens
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} position-sticky`, style: {
+        // position-sticky not set when in tableView as it will cause the map-picker to not be visible
+        const stickyClass = this.appLayout !== "tableView" ? "position-sticky" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} ${stickyClass}`, 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 */