@esri/solutions-components 0.8.2 → 0.8.3

package/dist/cjs/map-layer-picker.cjs.entry.js

@@ -0,0 +1,346 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const locale = require('./locale-42a9e623.js');
+const mapViewUtils = require('./mapViewUtils-6fa5bab1.js');
+const publicNotificationStore = require('./publicNotificationStore-f690e171.js');
+require('./loadModules-b5f244cd.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./queryUtils-aba29fcf.js');
+require('./interfaces-7cd0a48a.js');
+require('./index-af047760.js');
+
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom:0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}";
+
+const MapLayerPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.idsFound = index.createEvent(this, "idsFound", 7);
+        this.noLayersFound = index.createEvent(this, "noLayersFound", 7);
+        this.layerSelectionChange = index.createEvent(this, "layerSelectionChange", 7);
+        //--------------------------------------------------------------------------
+        //
+        //  Properties (protected)
+        //
+        //--------------------------------------------------------------------------
+        /**
+         * boolean: When true the default layer has been loaded once and should no longer be used
+         */
+        this.defaultLayerHonored = false;
+        this.appearance = "transparent";
+        this.defaultLayerId = "";
+        this.display = "inline-block";
+        this.enabledLayerIds = [];
+        this.enabledTableIds = [];
+        this.height = undefined;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.onlyShowUpdatableLayers = undefined;
+        this.placeholderIcon = "";
+        this.selectedIds = [];
+        this.scale = "m";
+        this.showTables = undefined;
+        this.showSingleLayerAsLabel = false;
+        this.type = "select";
+        this._hasMultipleLayers = true;
+        this._hasValidLayers = true;
+        this._isDropdownOpen = undefined;
+        this.ids = [];
+        this.selectedName = "";
+        this._translations = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async mapViewWatchHandler() {
+        await this._setLayers();
+        if (this.ids.length > 0) {
+            this._hasValidLayers = true;
+            this._hasMultipleLayers = this.ids.length > 1;
+            this._setSelectedLayer(this.ids[0]);
+        }
+        else {
+            this._hasValidLayers = false;
+            this.noLayersFound.emit();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+        await this._setLayers();
+        if (this.ids.length > 0 || this.selectedIds.length === 1) {
+            this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
+        }
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        const id = "map-layer-picker";
+        let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
+        style = Object.assign(Object.assign({}, style), { "display": this.display });
+        return (index.h(index.Host, null, index.h("div", { class: "map-layer-picker-container", style: style }, index.h("div", { 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)))));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        if (this.ids.length > 0 || this.selectedIds.length === 1) {
+            const id = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
+            if (this.type === "select") {
+                this._layerElement.value = id;
+            }
+            else if (this.type === "dropdown") {
+                this.selectedName = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+                    this._layerNameHash[id].name : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+                    this._tableNameHash[id].name : "";
+            }
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Create a notice to inform the user that no layers were found
+     *
+     * @returns Calcite Notice component with the message
+     */
+    _getInvalidPlaceholder() {
+        return (index.h("div", null, index.h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, index.h("div", { slot: "message" }, this._translations.noLayersFound)), index.h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, index.h("span", null, this._translations.enableEditUpdate))));
+    }
+    /**
+     * Show layer name as a label with icon
+     *
+     * @returns Calcite label with the layer name and icon
+     */
+    _getSingleLayerPlaceholder() {
+        return (index.h("div", { class: "layer-picker-label-container cursor-default" }, index.h("calcite-icon", { icon: "layers", scale: "s" }), index.h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
+    }
+    /**
+     * Create a list of layers from the map
+     * Used for selecting a single layer.
+     *
+     * @param id the id for the select component used to support the tooltip
+     *
+     * @returns Calcite Select component with the ids of the layers from the map
+     */
+    _getSelect(id) {
+        return (index.h("calcite-select", { id: id, label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._getMapLayerOptions()));
+    }
+    /**
+     * Create a list of layer ids from the map
+     * Used for selecting multiple layers
+     *
+     * @param id the id for the combobox component used to support the tooltip
+     *
+     * @returns Calcite ComboBox component with the ids of the layers from the map
+     */
+    _getCombobox(id) {
+        return (index.h("calcite-combobox", { clearDisabled: true, id: id, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._getMapLayerOptions()));
+    }
+    /**
+     * Hydrate a dropdown component with items to display the layer names
+     *
+     * @param id the id for the dropdown component used to support the tooltip
+     *
+     * @returns Array of Dropdown items with layer names
+     */
+    _getDropdown(id) {
+        return (index.h("calcite-dropdown", { class: "layer-picker-dropdown", onCalciteDropdownBeforeClose: () => this._isDropdownOpen = false, onCalciteDropdownBeforeOpen: () => this._isDropdownOpen = true }, this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id), index.h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
+    }
+    /**
+     * Get the button that will open the dropdown list wrapped in an action
+     *
+     * @returns the node for the action and button
+     */
+    _getActionDropdownButton(id) {
+        return (index.h("calcite-action", { id: id, slot: "trigger", text: "" }, this._getDropdownButton()));
+    }
+    /**
+     * Get the button that will open the dropdown list
+     *
+     * @returns the node for the button
+     */
+    _getDropdownButton() {
+        const buttonClass = this.isMobile ? "" : "max-width-350";
+        const buttonSlot = this.isMobile ? "trigger" : "";
+        const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
+        return (index.h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: "layers", kind: "neutral", slot: buttonSlot, width: "full" }, index.h("div", null, this.selectedName)));
+    }
+    /**
+     * Get the appropriate type of dom nodes for each valid layer or table
+     *
+     * @returns Array of dom nodes with the names of the layers and optionally of the tables
+     */
+    _getMapLayerOptions() {
+        return this.ids.reduce((prev, cur) => {
+            if (this._validLayer(cur)) {
+                prev.push(this._getItem(cur, "layer"));
+            }
+            else if (this._validTable(cur)) {
+                prev.push(this._getItem(cur, "table"));
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Get the appropriate type of dom node for the current layer or table id
+     *
+     * @returns A dom node with the name of the layer or table
+     */
+    _getItem(id, itemType) {
+        const item = itemType === "layer" ? this._layerNameHash[id] : this._tableNameHash[id];
+        const disabled = this.onlyShowUpdatableLayers ? !item.supportsUpdate : false;
+        const name = item.name;
+        const selected = this.selectedIds.indexOf(id) > -1;
+        return this.type === "combobox" ? (index.h("calcite-combobox-item", { disabled: disabled, selected: selected, textLabel: name, value: id })) :
+            this.type === "select" ? (index.h("calcite-option", { disabled: disabled, label: name, selected: selected, value: id })) : (index.h("calcite-dropdown-group", { class: disabled ? "disabled" : "", selectionMode: disabled ? "none" : "single" }, index.h("calcite-dropdown-item", { onClick: disabled ? undefined : () => void this._setSelectedLayer(id), selected: selected }, name)));
+    }
+    /**
+     * Store the layer name based on the user selection
+     */
+    _setSelectedLayer(id) {
+        let item;
+        const hasDefaultLayer = this.defaultLayerId && !this.defaultLayerHonored;
+        if (hasDefaultLayer) {
+            item = this._getLayerFromHash(this.defaultLayerId);
+            this.defaultLayerHonored = item !== undefined;
+            id = this.defaultLayerHonored ? this.defaultLayerId : id;
+        }
+        item = item ? item : this._getLayerFromHash(id);
+        this.selectedName = item === null || item === void 0 ? void 0 : item.name;
+        this.selectedIds = [id];
+        this.layerSelectionChange.emit(this.selectedIds);
+    }
+    /**
+     * Fetch layer hash info for the given id
+     *
+     * @returns ILayerHashInfo for the id
+     */
+    _getLayerFromHash(id) {
+        return Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+            this._layerNameHash[id] : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+            this._tableNameHash[id] : undefined;
+    }
+    /**
+     * Fetch the ids of the layers from the map
+     *
+     * @returns Promise when the operation has completed
+     */
+    async _setLayers() {
+        if (this.mapView) {
+            await this._initLayerTableHash();
+            const layerIds = this.onlyShowUpdatableLayers ?
+                this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
+            const tableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+                this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
+            this.ids = [
+                ...layerIds.reverse().filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.reverse().indexOf(n) > -1 : true; }),
+                ...tableIds.reverse().filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.reverse().indexOf(n) > -1 : true; }),
+            ];
+            this.idsFound.emit({
+                layerIds,
+                tableIds
+            });
+        }
+    }
+    /**
+     * Fetch the ids of all layers that support edits with the update capability
+     *
+     * @returns array of layer ids
+     */
+    _getEditableIds(hash) {
+        return Object.keys(hash).reduce((prev, cur) => {
+            if (hash[cur].supportsUpdate) {
+                prev.push(cur);
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Create a layer id:title hash for layer name display
+     *
+     * @returns Promise when the operation has completed
+     */
+    async _initLayerTableHash() {
+        this._layerNameHash = await mapViewUtils.getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+        this._tableNameHash = this.showTables ? await mapViewUtils.getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
+    }
+    /**
+     * Evaluate if the id exists in the current hash and verify if it should be excluded
+     *
+     * @returns boolean when true the layer will be used in the current layer picker type
+     */
+    _validLayer(id) {
+        var _a;
+        const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
+        return name && publicNotificationStore.state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+            this.enabledLayerIds.indexOf(id) > -1 : true);
+    }
+    /**
+     * Evaluate if the id exists in the current hash and verify if it should be excluded
+     *
+     * @returns boolean when true the table will be used in the current layer picker type
+     */
+    _validTable(id) {
+        var _a;
+        const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
+        const validName = name && this.showTables;
+        return validName ? publicNotificationStore.state.managedTables.indexOf(name) < 0 &&
+            (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
+    }
+    /**
+     * Fetch the ids of the layers from the map
+     *
+     * @returns Promise when the operation has completed
+     */
+    _layerSelectionChange() {
+        const ids = Array.isArray(this._layerElement.value) ? this._layerElement.value : [this._layerElement.value];
+        if (JSON.stringify(ids) !== JSON.stringify([""])) {
+            this.selectedIds = ids;
+            this.layerSelectionChange.emit(this.selectedIds);
+        }
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await locale.getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+MapLayerPicker.style = mapLayerPickerCss;
+
+exports.map_layer_picker = MapLayerPicker;

package/dist/cjs/map-legend.cjs.entry.js

@@ -0,0 +1,109 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const loadModules = require('./loadModules-b5f244cd.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+
+const mapLegendCss = ":host{display:block}";
+
+const MapLegend = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mapView = undefined;
+        this.legendWidget = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    async mapViewWatchHandler() {
+        await this.mapView.when(() => {
+            this._initLegend(this.mapView);
+        });
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Events (public)
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     */
+    async componentWillLoad() {
+        return this._initModules();
+    }
+    /**
+     * StencilJS: Renders the component.
+     */
+    render() {
+        return (index.h(index.Host, null, index.h("div", { ref: (el) => { this._legendElement = el; } })));
+    }
+    /**
+     * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+     */
+    async componentDidLoad() {
+        if (this.mapView) {
+            await this.mapViewWatchHandler();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Legend] = await loadModules.loadModules([
+            "esri/widgets/Legend"
+        ]);
+        this.Legend = Legend;
+    }
+    /**
+     * Initialize the basemap gallery or reset the current view if it already exists
+     */
+    _initLegend(view) {
+        if (view && this.Legend) {
+            if (!this.legendWidget) {
+                this.legendWidget = new this.Legend({
+                    container: this._legendElement,
+                    view
+                });
+            }
+            else {
+                this.legendWidget.view = view;
+            }
+        }
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "mapView": ["mapViewWatchHandler"]
+    }; }
+};
+MapLegend.style = mapLegendCss;
+
+exports.map_legend = MapLegend;

package/dist/cjs/map-picker.cjs.entry.js

@@ -0,0 +1,174 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const locale = require('./locale-42a9e623.js');
+require('./loadModules-b5f244cd.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+
+const mapPickerCss = ":host{display:block;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.align-center{align-items:center}";
+
+const MapPicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mapInfoChange = index.createEvent(this, "mapInfoChange", 7);
+        /**
+         * string: the id of map currently displayed
+         */
+        this._loadedId = "";
+        this.mapInfos = [];
+        this._mapListExpanded = false;
+        this._translations = undefined;
+        this._webMapInfo = undefined;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Called each time the _webMapInfo prop is changed.
+     */
+    _webMapInfoWatchHandler(v, oldV) {
+        if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+            this._loadedId = v === null || v === void 0 ? void 0 : v.id;
+            this.mapInfoChange.emit(v);
+        }
+    }
+    /**
+     * Called each time the mapInfos prop is changed.
+     */
+    async mapInfosWatchHandler(v, oldV) {
+        if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+            this._webMapSelected(v[0]);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    async setMapByID(id) {
+        var _a;
+        const mapInfos = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === id);
+        if (id && (mapInfos === null || mapInfos === void 0 ? void 0 : mapInfos.length) > 0) {
+            this._webMapSelected(mapInfos[0]);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (lifecycle)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
+    /**
+     * Renders the component.
+     */
+    render() {
+        return (index.h(index.Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+    }
+    /**
+     * Called once after the component has loaded
+     */
+    async componentDidLoad() {
+        const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
+        if (webMapInfo) {
+            this._webMapSelected(webMapInfo);
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Functions (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Get a calcite action group for the map list
+     * Actions do not support multiple icons so this uses a block
+     *
+     * @returns the dom node for the action group
+     *
+     * @protected
+     */
+    _getMapPicker() {
+        var _a;
+        const id = "map-picker-expand-toggle";
+        const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
+        return (index.h("div", { class: "width-full" }, index.h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.switchMap))));
+    }
+    /**
+     * Create the toolbar (controls used for map and app interactions)
+     *
+     * @returns The dom node with the toolbar
+     *
+     * @protected
+     */
+    _getToolbar() {
+        return (index.h("div", { class: "display-flex" }, index.h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    }
+    /**
+     * Get a pick list for all maps in mapInfos
+     *
+     * @param show boolean to indicate if the list should be shown or hidden
+     *
+     * @returns the dom node for the list of maps
+     *
+     * @protected
+     */
+    _getMapNameList(show) {
+        const listClass = show ? "map-list border-bottom-1" : "display-none";
+        return (index.h("div", { class: listClass }, index.h("calcite-list", { id: "mapList", ref: (el) => this._list = el, selectionAppearance: "border", selectionMode: "single" }, this.mapInfos.map(mapInfo => {
+            return (index.h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
+        }))));
+    }
+    /**
+     * Fired when the user clicks on the map list
+     *
+     * @param webMapInfo the web map id and name selected from the list
+     */
+    _webMapSelected(webMapInfo) {
+        this._mapListExpanded = false;
+        this._webMapInfo = webMapInfo;
+    }
+    /**
+     * Toggles the open/close state of the map list
+     *
+     * @returns the dom node for the action group
+     *
+     * @protected
+     */
+    _chooseMap() {
+        this._mapListExpanded = !this._mapListExpanded;
+    }
+    /**
+     * Fetches the component's translations
+     *
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await locale.getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "_webMapInfo": ["_webMapInfoWatchHandler"],
+        "mapInfos": ["mapInfosWatchHandler"]
+    }; }
+};
+MapPicker.style = mapPickerCss;
+
+exports.map_picker = MapPicker;