@esri/solutions-components 0.10.39 → 0.10.41

package/dist/cjs/basemap-gallery_7.cjs.entry.js

@@ -261,7 +261,7 @@ const FloorFilter = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '7890927db517fe8e1133fce3e0fe977a441f2abf' }, index.h("div", { key: '34ad695eb04dd20a0b9893817a33df5020de7da1', ref: (el) => { this._floorFilterElement = el; } })));
+        return (index.h(index.Host, { key: '51da7a656e7f56ecc8cc4093d3dab856f77b5c7a' }, index.h("div", { key: 'd2fda7047f09a673216484f5c202f039fca20108', ref: (el) => { this._floorFilterElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is first loaded.
@@ -428,7 +428,7 @@ const MapFullscreen = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '350ebb01c52631c9441b6554f5b8e26f8ca1418e' }, index.h("div", { key: 'b09344b721da2cc18b74fb21f8017446ba5baa03', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (index.h(index.Host, { key: '28d49dabefbb64024028bd6d7b7a104fafd81eae' }, index.h("div", { key: '443af45e3ce2c83a797ebfaac9e442d57d05c34c', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.
@@ -555,7 +555,7 @@ const MapLegend = class {
      * StencilJS: Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '2c5cfbfd4048347ace5ff3cf17d411e85454be7a' }, index.h("div", { key: '3927ef8af3a4a93fbd558480a96f982ca5b477a2', ref: (el) => { this._legendElement = el; } })));
+        return (index.h(index.Host, { key: '6b8c415650cb42727d7f09d3d4d92f8aebc7526b' }, index.h("div", { key: '36fd4c49d4ab19411fe309822e5b87104736282a', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -613,6 +613,7 @@ const MapPicker = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.mapInfoChange = index.createEvent(this, "mapInfoChange", 7);
+        this.locale = undefined;
         this.mapInfos = [];
         this.isMapLayout = undefined;
         this._mapListExpanded = false;
@@ -647,6 +648,14 @@ const MapPicker = class {
             this.mapInfoChange.emit(v);
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Called each time the mapInfos prop is changed.
      */
@@ -706,7 +715,7 @@ const MapPicker = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '84cc43e195045e28fe01e35fe2f6f06cbe28fefd' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+        return (index.h(index.Host, { key: 'c6f59dfac8acfc06775a3a38cefa1fd2c2708722' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
     }
     /**
      * Called once after the component has loaded
@@ -792,6 +801,7 @@ const MapPicker = class {
     }
     static get watchers() { return {
         "_webMapInfo": ["_webMapInfoWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapInfos": ["mapInfosWatchHandler"]
     }; }
 };
@@ -890,7 +900,7 @@ const MapSearch = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: '482d8d891f8c6905eefee8b26f0837a4c7c2e525' }, index.h("div", { key: '9a3993ab8a7506299cf2bdbfab23b47ac7fe3037', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
+        return (index.h(index.Host, { key: '3464734a35e8cf89f033d508d21831eef665c9b2' }, index.h("div", { key: 'bf79025ba97e9f26681a6c6200dcdbc2ea227ce8', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1013,6 +1023,7 @@ const MapTools = class {
         this.enableSingleExpand = undefined;
         this.homeZoomToolsSize = "m";
         this.layout = "vertical";
+        this.locale = undefined;
         this.mapView = undefined;
         this.mapWidgetsSize = "m";
         this.position = "top-right";
@@ -1068,6 +1079,14 @@ const MapTools = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * When the mapView loads check if it supports floor awareness
      */
@@ -1188,7 +1207,7 @@ const MapTools = class {
         const toolMarginClass = this.enableSingleExpand ? "margin-top-1-2" : "";
         const toolOrder = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"];
         const shadowClass = this.stackTools ? "box-shadow" : "";
-        return (index.h(index.Host, { key: '224b99c53e7f8ac9c072efbd2c2093c6c9684a9a' }, index.h("div", { key: 'ead56063c6aa28146d4c50044b6e7c98fd2ed1ab', class: containerClass }, this.enableSingleExpand ? (index.h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, index.h("div", { key: '3fd7a2bd6225c10b89e282d4521486ad7eb5802a', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), index.h("basemap-gallery", { key: '43063099ee4b3a72d96b2ae6e4ca750dff109ae2', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { key: '5c149ea67f2a2450864e968a50acce565d95e0b6', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { key: 'd3add3a5f820c5d654fec793d3e6e46b6a8919a3', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), index.h("map-fullscreen", { key: 'e18a3a5d021d76e7c8fa9ecf3903105d5a43bed2', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), index.h("floor-filter", { key: 'cb5d92e503248818e9627ba4ee8d70c81495599d', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+        return (index.h(index.Host, { key: '6287cfedcd109c621812cc823ee75487a166f7c0' }, index.h("div", { key: '6f3f1a8ff1fb9c1d671be044143eec4ca6708062', class: containerClass }, this.enableSingleExpand ? (index.h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools()))) : undefined, index.h("div", { key: '156511461a6b6c4a98b47c62460754405f101574', class: `${toolMarginClass} ${shadowClass} ${toolsClass}` }, this._getMapWidgets(toolOrder))), index.h("basemap-gallery", { key: '7975fa8c2db0c3fc10534d538bc593f8543b330e', basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), index.h("map-search", { key: 'd7df2b0010bc62b9d2a9601018a962d3e8df2561', class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), index.h("map-legend", { key: '1bd19b87e9def0b81251aa422ef0024a938bd93d', class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), index.h("map-fullscreen", { key: 'c5a68a86acc284af7659f467f2fe98c6168b619e', class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), index.h("floor-filter", { key: '8d596ddeb353ac85635aa3ef550708e4ec4d5706', class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1371,6 +1390,7 @@ const MapTools = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
         "_showFloorFilter": ["_showFloorFilterWatchHandler"],

package/dist/cjs/buffer-tools_3.cjs.entry.js

@@ -30,6 +30,7 @@ const BufferTools = class {
         this.appearance = "text";
         this.distance = 0;
         this.geometries = [];
+        this.locale = undefined;
         this.max = undefined;
         this.min = 0;
         this.sliderTicks = 10;
@@ -76,6 +77,14 @@ const BufferTools = class {
     disabledWatchHandler() {
         this._buffer();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -127,7 +136,7 @@ const BufferTools = class {
      * Renders the component.
      */
     render() {
-        return (index.h(index.Host, { key: 'fe60961aabf178fd32c4c85e8d52b9bc61a349d0' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
+        return (index.h(index.Host, { key: '4fbfb01938d285a2b022834f712013cea10945f9' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
     }
     //--------------------------------------------------------------------------
     //
@@ -292,7 +301,8 @@ const BufferTools = class {
     }
     static get watchers() { return {
         "geometries": ["geometriesWatchHandler"],
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["disabledWatchHandler"],
+        "locale": ["localeWatchHandler"]
     }; }
 };
 BufferTools.style = BufferToolsStyle0;
@@ -366,6 +376,7 @@ const MapDrawTools = class {
         this.drawMode = interfaces.EDrawMode.SKETCH;
         this.editGraphicsEnabled = true;
         this.graphics = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.pointSymbol = undefined;
         this.polylineSymbol = undefined;
@@ -426,6 +437,14 @@ const MapDrawTools = class {
             this._sketchGraphicsLayer.addMany(v);
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Called each time the mapView prop is changed.
      */
@@ -515,7 +534,7 @@ const MapDrawTools = class {
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === interfaces.EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (index.h(index.Host, { key: 'c6717ea80242f622168f49efeaf2cebf497ca09e' }, index.h("div", { key: '2dd805c704381cb411d69b757072371d91fb243d', class: containerClass }, index.h("div", { key: '28b81cb37f3e11f66656195fc10b4c170f8d8fe9', ref: (el) => { this._sketchElement = el; } }), index.h("div", { key: 'a6de7ee6dbf4f02eb355c032c7bd9bf4ec4426e9', class: undoRedoClass }, index.h("calcite-action", { key: '2efeab5db057e1657c3639a39ae4d4150d331776', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), index.h("calcite-action", { key: '770693e30a6cfb58f593bb471342ea34556fc8d4', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (index.h(index.Host, { key: 'c94ac0dde3ba21569ef86cb3ba5e92a427acd10f' }, index.h("div", { key: 'c699bf597d5a28d62dbba20fa6ddca38f406294f', class: containerClass }, index.h("div", { key: '78058d9155a650bb59e59ab9064a0286b7479759', ref: (el) => { this._sketchElement = el; } }), index.h("div", { key: '8cfc53dda2d1b272841acf40bd70b951111c359e', class: undoRedoClass }, index.h("calcite-action", { key: '5a8f0d0429f7d3df587957ae77ed935b0f99a5a0', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), index.h("calcite-action", { key: '163067cba4a163dc32d23c2d96cb2d9d967d287e', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -748,6 +767,7 @@ const MapDrawTools = class {
     }
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };

package/dist/cjs/calcite-alert_5.cjs.entry.js

@@ -590,6 +590,7 @@ const CreateFeature = class {
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.locale = undefined;
         this.searchConfiguration = undefined;
         this.isMobile = undefined;
         this.floorLevel = undefined;
@@ -693,6 +694,14 @@ const CreateFeature = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     /**
      * Called each time the mapView prop is changed.
      */
@@ -839,8 +848,8 @@ const CreateFeature = class {
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (index.h(index.Fragment, { key: '89634bf5707ea8390416d3087bfbe4e747bafcd7' }, showGuidingMsg && index.h("calcite-notice", { key: '4269224c2904f29060081f6cb8f383f1cf8d741d', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, index.h("div", { key: 'ecc3cca85c81d1cb7ab7cdc89b99e31afcb55f76', slot: "message" }, guidingMsg)), index.h("calcite-loader", { key: '34e492c0c469b39d4cfbcda17c4ba196ccb39eb8', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: 'b2073ef4b6124b54038de34798cdf83337626023', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
-            index.h("div", { key: 'cd13e98b6a40d5d89d271b5785f797e9bfc19900', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), index.h("div", { key: '2575b2d20f7713b05a2024e77452af93eb64e147', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (index.h(index.Fragment, { key: '788b2ebb85b603452d4b4de05711510f7480c895' }, showGuidingMsg && index.h("calcite-notice", { key: 'cf41e701f5a7605531fa6351acf13ea20e219f7a', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, index.h("div", { key: '1bb493a8e5a962c8a8c75ac37156edbf866c3916', slot: "message" }, guidingMsg)), index.h("calcite-loader", { key: '5d2e9a465cb7c6dbde8d941497fda87b4fc7c258', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: '23b8651f4040443ba731173d1818b515b718b754', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            index.h("div", { key: '7f628d09111295d46fbf7b9605999c2ef88c258d', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), index.h("div", { key: '3def9aaab0a2f03076a6c4c645cf5a080bbb9e75', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1245,6 +1254,7 @@ const CreateFeature = class {
         this._translations = messages[0];
     }
     static get watchers() { return {
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "isMobile": ["isMobileHandler"],
         "_editorLoading": ["_editorLoadingWatchHandler"]
@@ -1263,6 +1273,7 @@ const EditCard = class {
         this.refreshGraphics = index.createEvent(this, "refreshGraphics", 7);
         this.enableEditGeometry = false;
         this.graphics = undefined;
+        this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
         this.graphicIndex = 0;
@@ -1346,6 +1357,14 @@ const EditCard = class {
             await this._closeEdit(true);
         }
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+    }
     async openWatchHandler(v) {
         if (v && this.graphics?.length > 0 && this.graphicIndex > -1) {
             this._editorLoading = true;
@@ -1430,7 +1449,7 @@ const EditCard = class {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (index.h(index.Host, { key: 'ff6d1819cfd084e9f11a1c87d89c49d13035b289' }, index.h("div", { key: '797882acbcc26283719be4c08936e93b93931bcd', class: "position-absolute" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { key: '34ce92da0b7c452f0fbae98d9f557543da59f5b8', class: "position-absolute" }, index.h("div", { key: '81af3854249e193d0d508c022cb4075be63f052d', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), index.h("calcite-loader", { key: 'd7aa82424f87c47039a8a8f8c61240da7a5ca971', class: loadingClass, label: "", scale: "s" })))));
+        return (index.h(index.Host, { key: '15ae3de9c8ab0a66a0185ffaafc27f03e19c77b7' }, index.h("div", { key: 'bbaa7dbc405259b64dfceca89e45abf6372c76c3', class: "position-absolute" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { key: 'eb8b08fa0b08cf93581fb8e76d59bd8b5446770f', class: "position-absolute" }, index.h("div", { key: '03e525373c09fbcd4dad213738d97b99f1549975', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), index.h("calcite-loader", { key: '1cc46d8f6499a90736e05c2eed9bff71aff35d12', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1536,6 +1555,7 @@ const EditCard = class {
     }
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "open": ["openWatchHandler"]
     }; }
 };
@@ -1556,6 +1576,7 @@ const InfoCard = class {
         this.mapView = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
+        this.locale = undefined;
         this.paginationEnabled = true;
         this.position = 'absolute';
         this._alertOpen = false;
@@ -1620,6 +1641,19 @@ const InfoCard = class {
     async isMobileWatchHandler() {
         await this._initFeaturesWidget();
     }
+    /**
+     * Fetch translations when the locale is updated
+     */
+    async localeWatchHandler() {
+        // to support url param and language switcher
+        this.el.lang = this.locale;
+        await this._getTranslations();
+        if (this._features) {
+            const graphics = [...this.graphics];
+            this.graphics = [];
+            this.graphics = graphics;
+        }
+    }
     /**
      * Watch for changes to the mapView and re-init the Feature widget
      */
@@ -1752,8 +1786,8 @@ const InfoCard = class {
         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 (index.h(index.Host, { key: 'e200fd8d903d1c3295247a45f352ae62394501d5' }, index.h("calcite-shell", { key: '0b467ed0b480944660ef2194b302070d56cb70e4', style: { position: this.position } }, this._getHeader(), index.h("calcite-loader", { key: 'cf6172f533f67274b04ac61af75f44ffe62cbc9e', class: loadingClass, label: this._translations.fetchingData }), index.h("div", { key: '06f3e0c61e14fe73c0fadd58c3cf2c7c03efff6d', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), index.h("div", { key: '0f964afa075abbd27db827f90d189b9bc2a7c9d4', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            index.h("div", { key: 'd518934d172425ecb46e6b28ea683427d8982382', class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { key: '4d4f3583b6448e33e3d3ad1aba8c9178f71d75b8', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, index.h("calcite-tooltip", { key: '5358ba4079f1906d23b6df5b1facb84eec9692d3', placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", { key: '8466cfb97ce12e46a06ed665afe974377911e101' }, this._translations.edit)), this.isMobile ? (index.h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && index.h("div", { key: '61c551cc2b0c0a2981daa9bf67c7e13318508ca6', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { key: '379dc6697743caedf8fdbea16423b83e9e823a5b' }, index.h("calcite-button", { key: '616a52367d2f56db0104ce279951a81fcf60a376', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), index.h("calcite-tooltip", { key: 'f7f83e145c25591de025650fd358ca6200c4b6c5', placement: "top", "reference-element": "solutions-back" }, index.h("span", { key: '8afbde57b91ee8597de237db87efda7eabc10d69' }, this._translations.back))), index.h("calcite-action", { key: '23344d4abac515d089b8770d63181a989971aa33', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, index.h("span", { key: 'a4c784c5a2c7dfeb9442a58f86961a3242f55055', class: "pagination-count" }, this._count)), index.h("div", { key: '75e33452a93e9a77f30505957e87b8758ab8d2dd' }, index.h("calcite-button", { key: '0283a96c401e1929588e28d6ec014eb28b93d1f1', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), index.h("calcite-tooltip", { key: '658a26b1bca471b96799cb81ee941f0556619dc9', placement: "top", "reference-element": "solutions-next" }, index.h("span", { key: '9892d4ee61a1b5656711bb0a188282d9b46bd3f9' }, this._translations.next))))), index.h("edit-card", { key: '541268c24631ab526bf1b65313d39f3ca606cb6d', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { key: '1cdff00f5d7e72b5db220750d290593a1baf68c4', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { key: 'bb250c5906f0e998a794b5c02c22f9643fab16a9', slot: "title" }, this._translations.editDisabled), index.h("div", { key: 'd330d1ce74473fc76630d2607ab3ca2584aabbd7', slot: "message" }, this._translations.enableEditing)))));
+        return (index.h(index.Host, { key: '54e47d0ec2be9149c3e667c9e940842804d96964' }, index.h("calcite-shell", { key: '14bb280d394ceaa74463979886ab09cdf393b26e', style: { position: this.position } }, this._getHeader(), index.h("calcite-loader", { key: '3226709e73de16c795c348513183b26b88b7a726', class: loadingClass, label: this._translations.fetchingData }), index.h("div", { key: 'ba4b0c34620c60e849bdf0ada785b9976156dd1c', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), index.h("div", { key: '440a4d3c0530f97031df2e2ab9511ef6035fb5da', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            index.h("div", { key: '172b2e2cc10bdfb104057376ceba5d7f5f19ad61', class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { key: '242daf0ec6c3fe4fcc11be4bbc19f810836714ec', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.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, index.h("calcite-tooltip", { key: '760f8fcd1bcff2060e0a98e84a222107e55fef22', placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", { key: '30656b92e9bdbf3a9548586d91fc23bce2da9db3' }, this._translations.edit)), this.isMobile ? (index.h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && index.h("div", { key: '161902561c9686d74a511338dfc02efce0095af7', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { key: 'afd1459e3f69f60d96103854fe3dae71f18fc41e' }, index.h("calcite-button", { key: '59063d7fa2cf886afca66857cb1f74e42789e59f', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), index.h("calcite-tooltip", { key: '412e00bc323494bb1e3a7dbeef59ab9bcd6ff8e0', placement: "top", "reference-element": "solutions-back" }, index.h("span", { key: '7c1512be35f16b4441c2a364e1b7a87e3c7caf97' }, this._translations.back))), index.h("calcite-action", { key: 'd4790efec0d13e6726ffe9d438683db6887d00b8', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, index.h("span", { key: '98663d5c3b2f445db4e38cba98b8149c53cbc474', class: "pagination-count" }, this._count)), index.h("div", { key: '6ca88610950cf2852e2dc67588c77fd464ece3c5' }, index.h("calcite-button", { key: '577739ef819676dfd9cdee560a8cd22edcd9c6b7', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), index.h("calcite-tooltip", { key: '73a4f907d1a2f46a980c451572f1ba1e1b0b0596', placement: "top", "reference-element": "solutions-next" }, index.h("span", { key: 'd5f67497df866592b30d6c328f9f45716eb16153' }, this._translations.next))))), index.h("edit-card", { key: 'c8094993be5203f464cea4f632c14dbefa263a73', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { key: '0b9fd2109d7c6b51b91088ecbec50956a2d8d3d8', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { key: 'c8b7b452430d6fedda5288fd58efae5526adeda7', slot: "title" }, this._translations.editDisabled), index.h("div", { key: 'b2dc954d43bb08908723f70796df5c77108d92d8', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1922,6 +1956,7 @@ const InfoCard = class {
     static get watchers() { return {
         "graphics": ["graphicsWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
+        "locale": ["localeWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
 };

package/dist/cjs/calcite-block_5.cjs.entry.js

@@ -1518,6 +1518,7 @@ const InstantAppsFilterList = class {
         index.registerInstance(this, hostRef);
         this.filterListReset = index.createEvent(this, "filterListReset", 7);
         this.filterUpdate = index.createEvent(this, "filterUpdate", 7);
+        this.isLayerExpUpdated = false;
         this.layerExpressions = undefined;
         this.autoUpdateUrl = false;
         this.closeBtn = false;
@@ -1538,7 +1539,6 @@ const InstantAppsFilterList = class {
         this.messages = undefined;
         this.baseClass = baseClassLight;
         this.disabled = true;
-        this.hasLayerExpression = false;
         this.initDefExpressions = undefined;
         this.initMapImageExpressions = undefined;
         this.initPointCloudFilters = undefined;
@@ -1547,11 +1547,9 @@ const InstantAppsFilterList = class {
         this.handleWhenView();
     }
     watchLayerExpressions() {
-        if (!this.hasLayerExpression) {
-            this.filterLayerExpressions = structuredClone(this.layerExpressions);
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
+        this.resetAllFilters();
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.handleLayerExpressionsUpdate();
     }
     getFilterInitState() {
         return Promise.resolve({
@@ -1561,7 +1559,6 @@ const InstantAppsFilterList = class {
         });
     }
     forceReset() {
-        this.filterLayerExpressions = structuredClone(this.layerExpressions);
         this.handleResetFilter();
         return this.initExpressions();
     }
@@ -1576,28 +1573,28 @@ const InstantAppsFilterList = class {
         }
         return this.initExpressions();
     }
+    connectedCallback() {
+        var _a;
+        if (this.layerExpressions == null && this.view == null)
+            return;
+        this.isLayerExpUpdated = true;
+        this.filterLayerExpressions = structuredClone(this.layerExpressions);
+        this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
+        this.handleLayerExpressionsUpdate();
+    }
     async componentWillLoad() {
         var _a;
         this.baseClass = mode.getMode(this.el) === 'dark' ? baseClassDark : baseClassLight;
         await this.initializeModules();
         locale$1.getMessages(this);
-        this.hasLayerExpression = this.layerExpressions != null;
+        if (this.isLayerExpUpdated)
+            return;
+        this.isLayerExpUpdated = true;
         this.filterLayerExpressions = this.layerExpressions != null ? structuredClone(this.layerExpressions) : [];
         this.disabled = ((_a = this.filterLayerExpressions) === null || _a === void 0 ? void 0 : _a.length) ? undefined : true;
-        this.reactiveUtils.whenOnce(() => this.view).then(() => this.handleLayerExpressionsUpdate());
-    }
-    componentShouldUpdate(newValue, _oldValue, name) {
-        if (name === 'view' && newValue != null) {
-            this.handleWhenView();
-        }
-        else if (name === 'layerExpressions') {
-            if (this.hasLayerExpression) {
-                this.resetAllFilters();
-            }
-            this.filterLayerExpressions = structuredClone(this.layerExpressions);
-            this.handleLayerExpressionsUpdate();
-            this.hasLayerExpression = true;
-        }
+        if (this.view == null)
+            return;
+        this.handleLayerExpressionsUpdate();
     }
     componentWillRender() {
         var _a;
@@ -1605,21 +1602,21 @@ const InstantAppsFilterList = class {
     }
     disconnectedCallback() {
         if (this.resetFiltersOnDisconnect) {
+            this.isLayerExpUpdated = false;
             this.filterLayerExpressions = structuredClone(this.layerExpressions);
             this.resetAllFilters();
         }
     }
     async initializeModules() {
-        const [intl, geometryJsonUtils, reactiveUtils] = await loadModules.loadModules(['esri/intl', 'esri/geometry/support/jsonUtils', 'esri/core/reactiveUtils']);
+        const [intl, geometryJsonUtils] = await loadModules.loadModules(['esri/intl', 'esri/geometry/support/jsonUtils']);
         this.geometryJsonUtils = geometryJsonUtils;
-        this.reactiveUtils = reactiveUtils;
         this.locale = intl.getLocale();
         this.intl = intl;
     }
     render() {
         const filterConfig = this.loading ? this.renderLoading() : this.initFilterConfig();
-        const footer = this.renderFooter(this.closeBtn, this.resetBtn);
-        return (index.h(index.Host, { key: '80c4918bd3bdf65d541ed6cf4cf4843ab0f0df01' }, index.h("calcite-panel", { key: 'f1da101b071420df42da5eb8f5478d0719b40cec', class: this.baseClass, ref: el => (this.panelEl = el) }, index.h("slot", { key: '8ebdbf20767027459470fa85fe4238e69bc47ab8', slot: "header-content", name: "filter-header-content" }), index.h("slot", { key: '177f8db80aa842eeb200344cd7b398cd51ca23f3', slot: "header-actions-end", name: "filter-header-actions-end" }), index.h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
+        const footer = this.renderFooter();
+        return (index.h(index.Host, { key: '055d2a02c5118e59462af8759c6bf2f39304fd75' }, index.h("calcite-panel", { key: '0335c9b28101257551902737ef373543aebee1f6', class: this.baseClass, ref: el => (this.panelEl = el) }, index.h("slot", { key: '4b471e66583b3f2fd733688d65ce8d3b2acbeb66', slot: "header-content", name: "filter-header-content" }), index.h("slot", { key: 'f5832075687a6812b902643fd057587b438b38cf', slot: "header-actions-end", name: "filter-header-actions-end" }), index.h("div", { key: "filter-container", class: CSS$1.filterContainer }, filterConfig, footer))));
     }
     renderLoading() {
         return index.h("calcite-loader", { label: "Loading filters..." });
@@ -1688,10 +1685,11 @@ const InstantAppsFilterList = class {
         const check = min != null && max != null;
         return check ? (index.h("label", { class: CSS$1.filterUIItemContainer }, index.h("span", null, expression === null || expression === void 0 ? void 0 : expression.name), index.h("div", { class: CSS$1.dateInputContainer }, index.h("calcite-input-date-picker", { id: expression === null || expression === void 0 ? void 0 : expression.id.toString(), onCalciteInputDatePickerChange: this.handleDatePickerRangeChange.bind(this, expression, layerExpression), min: min, max: max, "overlay-positioning": "fixed", lang: (_c = this.locale) !== null && _c !== void 0 ? _c : 'en', layout: "vertical", value: value, range: true }), index.h("calcite-action", { onClick: this.handleResetDatePicker.bind(this, expression, layerExpression), icon: "reset", text: (_d = this.messages) === null || _d === void 0 ? void 0 : _d.resetDatePicker, scale: "s" })))) : null;
     }
-    renderFooter(closeBtn, resetBtn) {
+    renderFooter() {
         var _a, _b, _c;
         const closeText = this.closeBtnText != null ? this.closeBtnText : (_a = this.messages) === null || _a === void 0 ? void 0 : _a.close;
-        return (index.h("div", { class: CSS$1.footer, slot: "footer" }, resetBtn ? (index.h("calcite-button", { appearance: "outline", width: "half", disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.resetFilter)) : undefined, closeBtn ? (index.h("calcite-button", { appearance: "solid", width: "half", kind: "brand", onClick: (_c = this.closeBtnOnClick) === null || _c === void 0 ? void 0 : _c.bind(this) }, closeText)) : undefined));
+        const btnWidth = this.closeBtn && this.resetBtn ? 'half' : 'full';
+        return (index.h("div", { class: CSS$1.footer, slot: "footer" }, this.resetBtn ? (index.h("calcite-button", { appearance: "outline", width: btnWidth, disabled: this.disabled, onClick: this.handleResetFilter.bind(this) }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.resetFilter)) : undefined, this.closeBtn ? (index.h("calcite-button", { appearance: "solid", width: btnWidth, kind: "brand", onClick: (_c = this.closeBtnOnClick) === null || _c === void 0 ? void 0 : _c.bind(this) }, closeText)) : undefined));
     }
     renderZoomTo(layerExpression) {
         var _a;
@@ -1722,23 +1720,21 @@ const InstantAppsFilterList = class {
     }
     async initExpressions() {
         this.loading = true;
-        if (this.filterLayerExpressions == null)
+        if (this.filterLayerExpressions == null || this.view == null)
             return;
-        const tmpLE = await this.processExpressions();
+        await this.processExpressions();
         this.loading = false;
-        this.filterLayerExpressions = [...tmpLE];
     }
     async processExpressions() {
         var _a;
         if (!this.filterLayerExpressions)
-            return [];
+            return;
         for (const layerExpression of this.filterLayerExpressions) {
             for (const expression of layerExpression.expressions || []) {
                 expression.active = (_a = expression.active) !== null && _a !== void 0 ? _a : expression.definitionExpression != null;
                 await this.setInitExpression(layerExpression, expression);
             }
         }
-        return this.filterLayerExpressions;
     }
     handleResetFilter() {
         var _a;
@@ -1808,6 +1804,8 @@ const InstantAppsFilterList = class {
     }
     resetAllFilters() {
         var _a, _b, _c, _d, _e;
+        if (this.initDefExpressions == null)
+            return;
         const allLayersAndTables = (_c = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.allLayers) === null || _c === void 0 ? void 0 : _c.concat((_e = (_d = this.view) === null || _d === void 0 ? void 0 : _d.map) === null || _e === void 0 ? void 0 : _e.allTables);
         allLayersAndTables === null || allLayersAndTables === void 0 ? void 0 : allLayersAndTables.forEach(layer => {
             var _a, _b;
@@ -1909,18 +1907,19 @@ const InstantAppsFilterList = class {
         }
         return false;
     }
-    updateCodedValueExpression(expression, layerField) {
+    async updateCodedValueExpression(layerExpression, expression, layerField) {
         var _a, _b;
         if (!(layerField === null || layerField === void 0 ? void 0 : layerField.domain) || ((_a = layerField === null || layerField === void 0 ? void 0 : layerField.domain) === null || _a === void 0 ? void 0 : _a.type) !== 'coded-value') {
             return false;
         }
+        const layer = this.findFilterLayer(layerExpression);
+        await this.getFeatureAttributes(layer, expression);
         const domain = layerField.domain;
         const codedValuesMap = domain.codedValues.reduce((acc, { code, name }) => {
             acc[code] = name;
             return acc;
         }, {});
         expression.codedValues = codedValuesMap;
-        expression.fields = Object.keys(codedValuesMap);
         if ((_b = expression.selectedFields) === null || _b === void 0 ? void 0 : _b.length) {
             const selectedFieldsExpression = expression.selectedFields.map((field) => (typeof field === 'number' ? field : `'${handleSingleQuote(field)}'`)).join(',');
             expression.definitionExpression = `${expression.field} IN (${selectedFieldsExpression})`;
@@ -1989,7 +1988,7 @@ const InstantAppsFilterList = class {
         if (features === null || features === void 0 ? void 0 : features.length) {
             expression.fields = [...new Set(features)];
             if (expression.type === 'string') {
-                expression.fields = expression.fields.sort();
+                expression.fields = expression.fields.sort((a, b) => a.localeCompare(b));
             }
             else if (expression.type === 'number') {
                 expression.fields = expression.fields.sort((a, b) => a - b);
@@ -2018,8 +2017,15 @@ const InstantAppsFilterList = class {
                     expression.fields.push(...features);
                 }
             });
-            expression.fields = [...new Set(expression.fields)].sort();
-            this.filterLayerExpressions = [...this.filterLayerExpressions];
+            if (expression.type === 'string') {
+                expression.fields = [...new Set(expression.fields)].sort((a, b) => a.localeCompare(b));
+            }
+            else if (expression.type === 'number') {
+                expression.fields = [...new Set(expression.fields)].sort((a, b) => a - b);
+            }
+            else {
+                expression.fields = [...new Set(expression.fields)].sort();
+            }
         });
     }
     async queryForFeatures(layer, query, field) {
@@ -2102,13 +2108,14 @@ const InstantAppsFilterList = class {
             case 'number':
                 return await this.updateNumberExpression(layerExpression, expression);
             case 'date':
-                return this.updateDateExpressionBasedOnDisplayOption(layerExpression, expression);
+                return await this.updateDateExpressionBasedOnDisplayOption(layerExpression, expression);
             case 'coded-value':
-                return this.updateCodedValueExpression(expression, layerField);
+                return await this.updateCodedValueExpression(layerExpression, expression, layerField);
             case 'range':
-                return this.updateRangeExpressionBasedOnDisplayOption(layerExpression, expression, layerField);
+                return await this.updateRangeExpressionBasedOnDisplayOption(layerExpression, expression, layerField);
             case 'checkbox':
             case null:
+            case undefined:
                 return (_a = expression.active) !== null && _a !== void 0 ? _a : false;
             default:
                 return false;
@@ -2308,31 +2315,9 @@ const InstantAppsFilterList = class {
         this.handleLayerExpressionsUpdate();
     }
     async handleLayerExpressionsUpdate() {
-        if (this.view == null)
-            return;
-        const map = this.view.map;
-        this.initDefExpressions = {};
-        this.initPointCloudFilters = {};
-        this.initMapImageExpressions = {};
-        map.allLayers.concat(map.allTables).forEach(layer => {
-            if (!supportedTypes.includes(layer.type))
-                return;
-            const fl = layer;
-            if (fl.type === 'point-cloud') {
-                this.initPointCloudFilters[fl.id] = fl.filters;
-            }
-            else if (fl.type === 'map-image') {
-                this.initMapImageExpressions[fl.id] = fl.allSublayers.reduce((acc, sublayer) => {
-                    acc[sublayer.id] = sublayer.definitionExpression;
-                    return acc;
-                }, {});
-            }
-            else {
-                this.initDefExpressions[fl.id] = fl.definitionExpression;
-            }
-        });
-        this.initExpressions();
+        this.updateInitExpressions();
         this.handleURLParams();
+        this.initExpressions();
     }
     async handleZoomTo(layerExpression) {
         const zoomId = (layerExpression === null || layerExpression === void 0 ? void 0 : layerExpression.sublayerId) ? `#zoom-to-${layerExpression.id}-${layerExpression.sublayerId}` : `#zoom-to-${layerExpression.id}`;
@@ -2503,6 +2488,31 @@ const InstantAppsFilterList = class {
         query.geometry = geometry;
         query.spatialRelationship = 'intersects';
     }
+    updateInitExpressions() {
+        if (this.view == null)
+            return;
+        const map = this.view.map;
+        this.initDefExpressions = {};
+        this.initPointCloudFilters = {};
+        this.initMapImageExpressions = {};
+        map.allLayers.concat(map.allTables).forEach(layer => {
+            if (!supportedTypes.includes(layer.type))
+                return;
+            const fl = layer;
+            if (fl.type === 'point-cloud') {
+                this.initPointCloudFilters[fl.id] = fl.filters;
+            }
+            else if (fl.type === 'map-image') {
+                this.initMapImageExpressions[fl.id] = fl.allSublayers.reduce((acc, sublayer) => {
+                    acc[sublayer.id] = sublayer.definitionExpression;
+                    return acc;
+                }, {});
+            }
+            else {
+                this.initDefExpressions[fl.id] = fl.definitionExpression;
+            }
+        });
+    }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "view": ["watchViewHandler"],