@esri/solutions-components 0.10.7 → 0.10.8

package/dist/components/map-card2.js

@@ -3,28 +3,41 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { d as defineCustomElement$o } from './basemap-gallery2.js';
-import { d as defineCustomElement$n } from './action.js';
-import { d as defineCustomElement$m } from './action-bar.js';
-import { d as defineCustomElement$l } from './action-group.js';
-import { d as defineCustomElement$k } from './action-menu.js';
-import { d as defineCustomElement$j } from './button.js';
-import { d as defineCustomElement$i } from './filter2.js';
-import { d as defineCustomElement$h } from './handle.js';
-import { d as defineCustomElement$g } from './icon.js';
-import { d as defineCustomElement$f } from './input.js';
-import { d as defineCustomElement$e } from './list.js';
-import { d as defineCustomElement$d } from './list-item.js';
-import { d as defineCustomElement$c } from './loader.js';
-import { d as defineCustomElement$b } from './popover.js';
-import { d as defineCustomElement$a } from './progress.js';
-import { d as defineCustomElement$9 } from './scrim.js';
-import { d as defineCustomElement$8 } from './stack.js';
-import { d as defineCustomElement$7 } from './tooltip.js';
-import { d as defineCustomElement$6 } from './floor-filter2.js';
-import { d as defineCustomElement$5 } from './map-fullscreen2.js';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { c as getFeatureLayerView, b as goToSelection } from './mapViewUtils.js';
+import { d as defineCustomElement$z } from './basemap-gallery2.js';
+import { d as defineCustomElement$y } from './action.js';
+import { d as defineCustomElement$x } from './action-bar.js';
+import { d as defineCustomElement$w } from './action-group.js';
+import { d as defineCustomElement$v } from './action-menu.js';
+import { d as defineCustomElement$u } from './button.js';
+import { d as defineCustomElement$t } from './chip.js';
+import { d as defineCustomElement$s } from './combobox.js';
+import { d as defineCustomElement$r } from './combobox-item.js';
+import { d as defineCustomElement$q } from './dropdown.js';
+import { d as defineCustomElement$p } from './dropdown-group.js';
+import { d as defineCustomElement$o } from './dropdown-item.js';
+import { d as defineCustomElement$n } from './filter2.js';
+import { d as defineCustomElement$m } from './handle.js';
+import { d as defineCustomElement$l } from './icon.js';
+import { d as defineCustomElement$k } from './input.js';
+import { d as defineCustomElement$j } from './label2.js';
+import { d as defineCustomElement$i } from './list.js';
+import { d as defineCustomElement$h } from './list-item.js';
+import { d as defineCustomElement$g } from './loader.js';
+import { d as defineCustomElement$f } from './notice.js';
+import { d as defineCustomElement$e } from './option.js';
+import { d as defineCustomElement$d } from './popover.js';
+import { d as defineCustomElement$c } from './progress.js';
+import { d as defineCustomElement$b } from './scrim.js';
+import { d as defineCustomElement$a } from './select.js';
+import { d as defineCustomElement$9 } from './stack.js';
+import { d as defineCustomElement$8 } from './tooltip.js';
+import { d as defineCustomElement$7 } from './floor-filter2.js';
+import { d as defineCustomElement$6 } from './map-fullscreen2.js';
+import { d as defineCustomElement$5 } from './map-layer-picker2.js';
 import { d as defineCustomElement$4 } from './map-legend2.js';
 import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
@@ -69,7 +82,7 @@ function joinAppProxies(map, config, appProxies) {
     return map;
 }
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.height-50-px{height:50px}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 const MapCardStyle0 = mapCardCss;
 
 const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
@@ -78,8 +91,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.__registerHost();
         this.mapChanged = createEvent(this, "mapChanged", 7);
         this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
+        this.toggleFilter = createEvent(this, "toggleFilter", 7);
         this.appProxies = undefined;
         this.defaultWebmapId = "";
+        this.defaultLayerId = undefined;
         this.enableHome = undefined;
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
@@ -100,8 +115,17 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.stackTools = true;
         this.theme = undefined;
         this.toolOrder = undefined;
+        this.isMapLayout = undefined;
+        this.selectedFeaturesIds = undefined;
+        this.selectedLayer = undefined;
+        this.zoomToScale = undefined;
+        this.onlyShowUpdatableLayers = undefined;
+        this.isMobile = undefined;
+        this.mapInfo = undefined;
+        this._translations = undefined;
         this._searchConfiguration = undefined;
         this._webMapInfo = undefined;
+        this._showHideOpen = false;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -149,6 +173,22 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * HTMLMapToolsElement: the container div for the map tools
      */
     _mapTools;
+    /**
+     * HTMLCalciteDropdownElement: Dropdown the will support overflow tools that won't fit in the current display
+     */
+    _moreDropdown;
+    /**
+     * boolean: When true the show/hide fields list is forced open
+     */
+    _mapListExpanded = false;
+    /**
+     * boolean: When true an indicator will be shown on the action
+     */
+    _filterActive = false;
+    /**
+     * string: The current layers definition expression
+     */
+    _definitionExpression;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -160,11 +200,31 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     enableHomeWatchHandler() {
         this._initHome();
     }
+    /**
+     * watch for changes in layer view and verify if it has editing enabled
+     */
+    async selectedLayerWatchHandler() {
+        await this.selectedLayer?.when(async () => {
+            this._definitionExpression = this.selectedLayer.definitionExpression;
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Reset the filter
+     */
+    async filterReset() {
+        this._filterActive = false;
+    }
+    /**
+     * updates the filter
+     */
+    async updateFilter() {
+        this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -178,12 +238,23 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * Emitted before a new map is loaded
      */
     beforeMapChanged;
+    /**
+     * Emitted on demand when filter action is clicked
+     */
+    toggleFilter;
     /**
      * Listen for changes to map info and load the appropriate map
      */
     async mapInfoChange(evt) {
         await this._loadMap(evt.detail);
     }
+    /**
+     * Listen for change when mapview doesn't contain any layer
+     */
+    noLayersFound() {
+        this.selectedLayer = undefined;
+        this.selectedFeaturesIds = [];
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -193,17 +264,28 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * StencilJS: Called once just after the component is first connected to the DOM.
      */
     async componentWillLoad() {
+        await this._getTranslations();
         await this._initModules();
     }
     /**
      * Renders the component.
      */
     render() {
+        const mapContainerClass = this.isMapLayout ? "display-flex height-50-px" : "";
         const mapClass = this.hidden ? "visibility-hidden-1" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
         const mapHeightClass = this.mapInfos?.length > 1 ? "map-height" : "height-full";
-        return (h(Host, { key: '4f5c0cd408f92856ceb2ba281a02856064ef6a5a' }, h("map-picker", { key: 'f69742384dc5ba13bbf257592cc8c35de77590f0', class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: '3ddddf3f674d49ae59fe627af1c67ec59718c9a3', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '6cb9518e74af0594ab6b657f0caec3598c250cb2', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        const containerClass = this.isMobile ? "width-full" : "";
+        const mobileClass = this.isMobile ? "border-top" : "";
+        const headerElements = this.isMapLayout ? "" : "display-none";
+        return (h(Host, { key: '7029e518173a8c1e6e00049b8e68e23bed23d9cb' }, h("div", { key: '2b8d9197dcb68529562728fddeb53d0a7e9cbb86', class: `${mapContainerClass}` }, h("map-picker", { key: '2e50b7c70832f4151fafd06e860846a5efa8f6f1', class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: 'bc01ef7fb34400e3ff58151cab6abbabd9fa8a6f', class: `mapView-header display-flex ${headerElements}` }, h("div", { key: '1f1bf6ffb92fbc182be8333b4ae3d70271ea2f1b', class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { key: '47320f3794f060262c4ed29ec1400a50d9744a97', appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getDropDownItem())), h("div", { key: '7101bfed6c0e0932275b0d28eea0ea5e1603aa8e', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '8ca28e50a77a25699cd6c17fe4f31788ca1cb49d', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+    }
+    /**
+     * Called each time after the component is loaded
+     */
+    async componentDidRender() {
+        document.onclick = (e) => this._handleDocumentClick(e);
     }
     //--------------------------------------------------------------------------
     //
@@ -302,13 +384,105 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             this.mapView.ui.remove(this._homeWidget);
         }
     }
+    /**
+     * Toggle show/hide dropdown
+     */
+    _toggleShowHide() {
+        this._showHideOpen = !this._showHideOpen;
+    }
+    /**
+     * Open show/hide dropdown
+     */
+    _forceShowHide() {
+        if (this._moreDropdown) {
+            this._moreDropdown.open = this._showHideOpen;
+        }
+    }
+    /**
+     * Close show/hide dropdown when the user clicks outside of it
+     */
+    _handleDocumentClick(e) {
+        const id = e.target?.id;
+        if (this._showHideOpen && id !== "solutions-subset-list" && id !== "solutions-more" && id !== "chevron-down") {
+            if (this._moreDropdown) {
+                this._showHideOpen = false;
+                this._moreDropdown.open = false;
+            }
+        }
+        // if clicked on map picker then toggle the dropdown
+        if (e.target.tagName === 'MAP-PICKER') {
+            this._mapListExpanded = !this._mapListExpanded;
+            void this._mapPicker.toggle(this._mapListExpanded);
+        }
+        // if clicked on other place then just close the dropdown
+        if (e.target.tagName !== 'MAP-PICKER') {
+            this._mapListExpanded = false;
+            void this._mapPicker.close();
+        }
+    }
+    /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+    async _zoom() {
+        if (this.selectedLayer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayer.id);
+            await goToSelection(this.selectedFeaturesIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
+    }
+    async _toggleFilter() {
+        this.toggleFilter.emit();
+    }
+    /**
+     * Return true when we have at least 1 layer expression for the current layer
+     *
+     * @returns boolean
+     */
+    _hasFilterExpressions() {
+        let layerExpressions;
+        if (this.mapInfo?.filterConfig?.layerExpressions && this.selectedLayer?.id) {
+            layerExpressions = this.mapInfo.filterConfig.layerExpressions.filter((exp) => exp.id === this.selectedLayer.id);
+        }
+        return layerExpressions?.length > 0;
+    }
+    /**
+     * Get Dropdown action item
+     * @returns Dropdown item
+     */
+    _getDropDownItem() {
+        return (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this.selectedLayer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el, widthScale: "l" }, h("calcite-action", { appearance: "solid", id: 'solutions-more', label: "", onClick: () => this._toggleShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: this._showHideOpen ? "chevron-up" : "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { selectionMode: "none" }, this._getDropDownItems())));
+    }
+    /**
+     * Gets the dropdown items
+     * @returns dropdown items
+     */
+    _getDropDownItems() {
+        const featureSelected = this.selectedFeaturesIds?.length > 0;
+        const showMultipleEdits = this.selectedFeaturesIds?.length > 1;
+        const hasFilterExpressions = this._hasFilterExpressions();
+        return (h(Fragment, null, h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !showMultipleEdits, iconStart: "pencil", id: "solutions-subset-list", onClick: () => alert(this._translations.editMultiple) }, this._translations.editMultiple)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { iconStart: "refresh", id: "solutions-subset-list", onClick: () => { this.selectedLayer.refresh(); } }, this._translations.refresh)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !featureSelected, iconStart: "zoom-to-object", id: "solutions-subset-list", onClick: this._zoom.bind(this) }, this._translations.zoom)), hasFilterExpressions &&
+            h("calcite-dropdown-group", null, h("calcite-dropdown-item", { disabled: false, iconStart: "filter", id: "solutions-subset-list", onClick: this._toggleFilter.bind(this), selected: this._filterActive }, this._translations.filters))));
+    }
+    /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
     static get watchers() { return {
-        "enableHome": ["enableHomeWatchHandler"]
+        "enableHome": ["enableHomeWatchHandler"],
+        "selectedLayer": ["selectedLayerWatchHandler"]
     }; }
     static get style() { return MapCardStyle0; }
 }, [0, "map-card", {
         "appProxies": [8, "app-proxies"],
         "defaultWebmapId": [1, "default-webmap-id"],
+        "defaultLayerId": [1, "default-layer-id"],
         "enableHome": [4, "enable-home"],
         "enableLegend": [4, "enable-legend"],
         "enableFloorFilter": [4, "enable-floor-filter"],
@@ -329,16 +503,28 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         "stackTools": [4, "stack-tools"],
         "theme": [1],
         "toolOrder": [16],
+        "isMapLayout": [4, "is-map-layout"],
+        "selectedFeaturesIds": [16],
+        "selectedLayer": [16],
+        "zoomToScale": [2, "zoom-to-scale"],
+        "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
+        "isMobile": [4, "is-mobile"],
+        "mapInfo": [16],
+        "_translations": [32],
         "_searchConfiguration": [32],
-        "_webMapInfo": [32]
-    }, [[8, "mapInfoChange", "mapInfoChange"]], {
-        "enableHome": ["enableHomeWatchHandler"]
+        "_webMapInfo": [32],
+        "_showHideOpen": [32],
+        "filterReset": [64],
+        "updateFilter": [64]
+    }, [[8, "mapInfoChange", "mapInfoChange"], [8, "noLayersFound", "noLayersFound"]], {
+        "enableHome": ["enableHomeWatchHandler"],
+        "selectedLayer": ["selectedLayerWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack", "calcite-tooltip", "floor-filter", "map-fullscreen", "map-legend", "map-picker", "map-search", "map-tools"];
+    const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-stack", "calcite-tooltip", "floor-filter", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
     components.forEach(tagName => { switch (tagName) {
         case "map-card":
             if (!customElements.get(tagName)) {
@@ -347,100 +533,155 @@ function defineCustomElement() {
             break;
         case "basemap-gallery":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$z();
             }
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$y();
             }
             break;
         case "calcite-action-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$x();
             }
             break;
         case "calcite-action-group":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$w();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$v();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$u();
+            }
+            break;
+        case "calcite-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
+            }
+            break;
+        case "calcite-combobox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$s();
+            }
+            break;
+        case "calcite-combobox-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "calcite-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "calcite-dropdown-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "calcite-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$n();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$m();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$l();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$k();
+            }
+            break;
+        case "calcite-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$i();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$h();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-option":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "floor-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "map-fullscreen":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "map-layer-picker":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

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

@@ -176,7 +176,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class MapDrawTools extends
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (h(Host, { key: '1f9544ac97df4b51337260e1bb7cf3b5d923fa03' }, h("div", { key: 'eca20834d2eacf3cc4a30e6ecf15a2f8d894cb8f', class: containerClass }, h("div", { key: '32bbaf5a03251c035821880231acb894a452b8dd', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'cd446419c2b7d347711a48851baec46f24d20375', class: undoRedoClass }, h("calcite-action", { key: '03ce63c7805c1cc1b63e78336ba624199eef3336', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '0d688389277586163c589561865ab7778021ac10', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: '64c06f74fa05d6debb3a34bbb3d51bc9e2d1e8a6' }, h("div", { key: 'b3ac0f7c2f38da701fcee82580d7d4f55792ffb8', class: containerClass }, h("div", { key: '57625c7617de564ad7f62ed8952dd72108d46bbe', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'b1c8a28ef1fab0e0cb4a9617e9d366e1002d619d', class: undoRedoClass }, h("calcite-action", { key: 'ae27d672ad615b54bceb37fa56ac8e652f80df61', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '643d1413f98f8059590fb92c702074c9c732f9b1', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/map-fullscreen2.js

@@ -88,7 +88,7 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '943217d26f3cf5861c165c3300ba24736ce8f7dc' }, h("div", { key: '6c76ebf6e63dab19f24d776cd27cd86b74ea93d0', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '27267ebf4781a3c85addd8339028f7ac8d07bfb2' }, h("div", { key: '0966dae1c7ab9a2cba461d2f19b63bea8e5f28cf', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.

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

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as getMapLayerHash, e as getMapTableHash } from './mapViewUtils.js';
+import { g as getLayerOrTable, d as getMapLayerHash, e as getMapTableHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { d as defineCustomElement$f } from './action.js';
 import { d as defineCustomElement$e } from './button.js';
@@ -133,8 +133,14 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
     async componentWillLoad() {
         await this._getTranslations();
         await this._setLayers();
+    }
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillRender() {
         if (this.ids.length > 0 || this.selectedIds.length === 1) {
-            this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
+            const layer = await getLayerOrTable(this.mapView, this.selectedIds[0]);
+            this.selectedName = layer?.title;
         }
     }
     /**
@@ -144,7 +150,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = { ...style, "display": this.display };
-        return (h(Host, { key: 'a96e93924530d926c5e10dd2f7212f3f8c1cbe3c' }, h("div", { key: '4b96a73e43e86c31291e4ac60eb15976b01de6a2', class: "map-layer-picker-container", style: style }, h("div", { key: 'e75c61d8ce0853814dd3903b9e1952cc613b6fbb', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: '47a42a4855654930ebaf59b1567ab4bd5ccf3133' }, h("div", { key: 'acc05150c663d68ae633a7d293984ae282cfbdfa', class: "map-layer-picker-container", style: style }, h("div", { key: '811bde9a5118862f58b6a9ed99abec0f46fb4a1f', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));

package/dist/components/map-legend2.js

@@ -73,7 +73,7 @@ const MapLegend = /*@__PURE__*/ proxyCustomElement(class MapLegend extends HTMLE
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, { key: 'bdd3b848bec1aec6f8c7676f8bab5e9463b16064' }, h("div", { key: 'd7bb217db6971758ef8774d19d6ac5cfa94a0ddc', ref: (el) => { this._legendElement = el; } })));
+        return (h(Host, { key: 'd9f276c9f13ad09a606bda6e2aaf78707824f6e9' }, h("div", { key: 'f2db7bd093313a19ace2ec4340c5d0049b666bdc', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.