@esri/solutions-components 0.10.7 → 0.10.8

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

@@ -18,9 +18,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, Fragment } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
 // TODO navigation and accessability isn't right for the map list
 //   tab does not go into the list when it's open
 //   focus is not set when it opens
@@ -31,6 +33,7 @@ export class MapCard {
     constructor() {
         this.appProxies = undefined;
         this.defaultWebmapId = "";
+        this.defaultLayerId = undefined;
         this.enableHome = undefined;
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
@@ -51,8 +54,17 @@ export class MapCard {
         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;
     }
     //--------------------------------------------------------------------------
     //
@@ -105,6 +117,22 @@ export class MapCard {
      * 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
@@ -116,11 +144,31 @@ export class MapCard {
     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)
@@ -134,12 +182,23 @@ export class MapCard {
      * 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)
@@ -149,17 +208,28 @@ export class MapCard {
      * 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);
     }
     //--------------------------------------------------------------------------
     //
@@ -258,6 +328,96 @@ export class MapCard {
             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 is() { return "map-card"; }
     static get originalStyleUrls() {
         return {
@@ -306,6 +466,23 @@ export class MapCard {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "defaultLayerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: when provided this layer ID will be used when the app loads"
+                },
+                "attribute": "default-layer-id",
+                "reflect": false
+            },
             "enableHome": {
                 "type": "boolean",
                 "mutable": false,
@@ -679,13 +856,139 @@ export class MapCard {
                     "tags": [],
                     "text": "\r\nValid tools: \"legend\", \"search\", \"fullscreen\", \"basemap\", \"floorfilter\""
                 }
+            },
+            "isMapLayout": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true map will shown is full screen"
+                },
+                "attribute": "is-map-layout",
+                "reflect": false
+            },
+            "selectedFeaturesIds": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number[]: A list of ids that are currently selected"
+                }
+            },
+            "selectedLayer": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.FeatureLayer",
+                    "resolved": "FeatureLayer",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "__esri.FeatureLayer: Selected layer"
+                }
+            },
+            "zoomToScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: default scale to zoom to when zooming to a single point feature"
+                },
+                "attribute": "zoom-to-scale",
+                "reflect": false
+            },
+            "onlyShowUpdatableLayers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true only editable layers that support the update capability will be available"
+                },
+                "attribute": "only-show-updatable-layers",
+                "reflect": false
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the component will render an optimized view for mobile devices"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
+            },
+            "mapInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IMapInfo",
+                    "resolved": "IMapInfo",
+                    "references": {
+                        "IMapInfo": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::IMapInfo"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IMapInfo: key configuration details about the current map"
+                }
             }
         };
     }
     static get states() {
         return {
+            "_translations": {},
             "_searchConfiguration": {},
-            "_webMapInfo": {}
+            "_webMapInfo": {},
+            "_showHideOpen": {}
         };
     }
     static get events() {
@@ -725,13 +1028,69 @@ export class MapCard {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "toggleFilter",
+                "name": "toggleFilter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when filter action is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
+    static get methods() {
+        return {
+            "filterReset": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Reset the filter",
+                    "tags": []
+                }
+            },
+            "updateFilter": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "updates the filter",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "enableHome",
                 "methodName": "enableHomeWatchHandler"
+            }, {
+                "propName": "selectedLayer",
+                "methodName": "selectedLayerWatchHandler"
             }];
     }
     static get listeners() {
@@ -741,6 +1100,12 @@ export class MapCard {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "noLayersFound",
+                "method": "noLayersFound",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -183,7 +183,7 @@ export class MapDrawTools {
             "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/collection/components/map-fullscreen/map-fullscreen.js

@@ -95,7 +95,7 @@ export class MapFullscreen {
      * 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/collection/components/map-layer-picker/map-layer-picker.js

@@ -20,7 +20,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
+import { getLayerOrTable, getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
     constructor() {
@@ -129,8 +129,14 @@ export class MapLayerPicker {
     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;
         }
     }
     /**
@@ -140,7 +146,7 @@ export class MapLayerPicker {
         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/collection/components/map-legend/map-legend.js

@@ -86,7 +86,7 @@ export class MapLegend {
      * 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.

package/dist/collection/components/map-picker/map-picker.css

@@ -23,6 +23,10 @@
   width: 100%;
 }
 
+.width-25 {
+  width: 25% !important;
+}
+
 .height-full {
   height: 100%;
 }
@@ -38,6 +42,10 @@
   border-color: var(--calcite-color-border-3);
 }
 
+.border-right {
+  border-right: 1px solid var(--calcite-color-border-3);
+}
+
 .action-bar-size {
   height: 51px;
   width: 100%;