@esri/solutions-components 0.6.2 → 0.6.4

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

@@ -0,0 +1,659 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-d298aca9.js';
+import { g as getLocaleComponentStrings } from './locale-54cac39a.js';
+import { q as queryFeaturesByID, i as getLayer, j as getMapLayerIds, k as queryAllIds } from './mapViewUtils-55ea1e10.js';
+import { l as loadModules } from './loadModules-cd3569de.js';
+import { d as downloadCSV } from './downloadUtils-3b5f85d9.js';
+import './_commonjsHelpers-d5f9d613.js';
+import './interfaces-bf20e69c.js';
+
+const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.border-rounded{border:1px solid var(--calcite-ui-border-2);border-radius:5px}card-manager{display:block}";
+
+const CardManager = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.layer = undefined;
+    this.mapView = undefined;
+    this._cardLoading = false;
+    this._graphics = undefined;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Query the layer for the provided ids and store the result graphics
+   */
+  async featureSelectionChange(evt) {
+    const ids = evt.detail;
+    this._cardLoading = true;
+    // only query if we have some ids...query with no ids will result in all features being returned
+    const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
+    this._graphics = featureSet;
+    this._cardLoading = false;
+  }
+  /**
+   * Get the layer view for the provided layer id
+   */
+  async layerSelectionChange(evt) {
+    const id = evt.detail[0];
+    this.layer = await getLayer(this.mapView, id);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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() {
+    var _a, _b;
+    const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
+    const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
+    return (h(Host, null, h("div", { class: "border-rounded overflow-auto" }, h("calcite-shell", { class: "position-relative padding-1 " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return getElement(this); }
+};
+CardManager.style = cardManagerCss;
+
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}";
+
+const LayerTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
+    /**
+     * number[]: A list of all IDs for the current layer
+     */
+    this._allIds = [];
+    /**
+     * Store a reference to the table node after it's first created
+     * and initializes the FeatureTable
+     *
+     * @returns void
+     */
+    this.onTableNodeCreate = (node) => {
+      this._tableNode = node;
+      this._getTable(node);
+    };
+    this.mapView = undefined;
+    this._alertOpen = false;
+    this._fetchingData = false;
+    this._layer = undefined;
+    this._selectedIndexes = [];
+    this._showOnlySelected = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * watch for changes in map view and get the first layer
+   */
+  async mapViewWatchHandler() {
+    this._fetchingData = true;
+    const mapLayerIds = await getMapLayerIds(this.mapView);
+    this._layer = await getLayer(this.mapView, mapLayerIds[0]);
+    this._resetTable();
+    this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+      void this._mapClicked(event);
+    });
+    this._fetchingData = false;
+  }
+  /**
+   * watch for changes in layer view and verify if it has editing enabled
+   */
+  async _layerWatchHandler() {
+    this._fetchingData = true;
+    this._resetTable();
+    this._fetchingData = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the selected graphics
+   *
+   * @returns Promise that resolves when the operation is complete
+   */
+  async getSelectedGraphics() {
+    return this._selectedIndexes.length > 0 ?
+      await this._getGraphics(this._selectedIndexes) : [];
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+    await this._initModules();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    if (!this._layer) {
+      return null;
+    }
+    const tableNodeClass = this._fetchingData ? "display-none" : "";
+    const loadingClass = this._fetchingData ? "" : "display-none";
+    const alertActionClass = this._alertShowAction ? "" : "display-none";
+    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FeatureTable, reactiveUtils] = await loadModules([
+      "esri/widgets/FeatureTable",
+      "esri/core/reactiveUtils"
+    ]);
+    this.FeatureTable = FeatureTable;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Gets a row of controls that can be used for various interactions with the table
+   *
+   * @returns The dom node that contains the controls
+   */
+  _getTableControlRow(slot) {
+    const featuresSelected = this._selectedIndexes.length > 0;
+    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
+  }
+  /**
+   * Initialize the FeatureTable
+   *
+   * @returns void
+   */
+  _getTable(node) {
+    if (this._layer) {
+      this._table = new this.FeatureTable({
+        layer: this._layer,
+        view: this.mapView,
+        //editingEnabled: this._editEnabled,
+        highlightOnRowSelectEnabled: true,
+        multiSortEnabled: false,
+        visibleElements: {
+          header: false,
+          menu: false
+        },
+        container: node
+      });
+      this._table.highlightIds.on("change", () => {
+        this._selectedIndexes = this._table.highlightIds.toArray();
+        if (this._showOnlySelected) {
+          if (this._selectedIndexes.length > 0) {
+            this._table.filterBySelection();
+          }
+          else {
+            this._toggleShowSelected();
+          }
+        }
+        this.featureSelectionChange.emit(this._selectedIndexes);
+      });
+    }
+  }
+  /**
+   * Reset basic table props
+   *
+   * @returns void
+   */
+  _resetTable() {
+    if (this._layer && this._table) {
+      this._clearSelection();
+      this.featureSelectionChange.emit(this._selectedIndexes);
+      this._table.layer = this._layer;
+      this._editEnabled = this._layer.editingEnabled;
+      this._table.view = this.mapView;
+      this._table.editingEnabled = this._editEnabled;
+      this._table.clearSelectionFilter();
+      this._showOnlySelected = false;
+    }
+  }
+  /**
+   * Handle map click events to keep table and map click selection in sync
+   *
+   * @returns void
+   */
+  async _mapClicked(evt) {
+    const opts = {
+      include: this._layer
+    };
+    const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
+    if (hitTestResult.results.length > 0) {
+      hitTestResult.results.forEach((result) => {
+        const id = result.graphic.getObjectId();
+        const index = this._table.highlightIds.indexOf(id);
+        if (index > -1) {
+          this._table.highlightIds.removeAt(index);
+        }
+        else {
+          this._table.highlightIds.add(id);
+        }
+      });
+      if (this._showOnlySelected) {
+        this._table.filterBySelection();
+      }
+    }
+  }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
+  /**
+   * Select or deselect all rows
+   *
+   * @param checked When true all rows will be selected
+   *
+   * @returns void
+   */
+  _selectAll() {
+    const ids = this._allIds;
+    this._table.highlightIds.addMany(ids);
+    this._selectedIndexes = ids;
+  }
+  /**
+   * Toggle the show only selected flag
+   *  When showOnly is true only the selected features will be shown in the table
+   *
+   * @returns void
+   */
+  _toggleShowSelected() {
+    this._showOnlySelected = !this._showOnlySelected;
+    if (this._showOnlySelected) {
+      this._table.filterBySelection();
+    }
+    else {
+      this._table.clearSelectionFilter();
+    }
+  }
+  /**
+   * Clears the selected indexes
+   *
+   * @returns void
+   */
+  _clearSelection() {
+    this._selectedIndexes = [];
+    this._table.highlightIds.removeAll();
+  }
+  _filter() {
+    alert("do whatever this button is supposed to do");
+  }
+  /**
+   * Select all rows that are not currently selectd
+   *
+   * @returns void
+   */
+  _switchSelected() {
+    const currentIndexes = [...this._selectedIndexes];
+    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
+      if (currentIndexes.indexOf(i) < 0) {
+        prev.push(i);
+      }
+      return prev;
+    }, []);
+    this._table.highlightIds.removeAll();
+    this._table.highlightIds.addMany(this._selectedIndexes);
+  }
+  /**
+   * Export all selected rows as CSV
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _exportToCSV() {
+    const exportInfos = {};
+    const ids = this._table.highlightIds.toArray();
+    exportInfos[this._layer.id] = {
+      selectionSetNames: [],
+      ids,
+      layer: this._layer
+    };
+    void downloadCSV(exportInfos, false, // formatUsingLayerPopup
+    true);
+  }
+  /**
+   * Refreshes the table and maintains the curent scroll position
+   *
+   * @returns void
+   */
+  _refresh() {
+    void this._table.refresh();
+  }
+  /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _zoom() {
+    this._table.zoomToSelection();
+  }
+  /**
+   * Delete all selected records or shows an alert if the layer does not have editing enabled
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _delete() {
+    if (this._editEnabled) {
+      this._alertIcon = "trash";
+      this._alertTitle = this._translations.deleteRows;
+      this._alertActionText = this._translations.delete;
+      this._alertShowAction = true;
+      this._alertMessage = this._translations.confirm;
+      this._alertKind = "danger";
+      this._alertActionFunction = () => {
+        void this._layer.applyEdits({
+          deleteFeatures: this._table.highlightIds.toArray()
+        });
+        this._alertOpen = false;
+      };
+    }
+    else {
+      this._alertIcon = "layer-broken";
+      this._alertTitle = this._translations.deleteDisabled;
+      this._alertShowAction = false;
+      this._alertMessage = this._translations.enableEditing;
+      this._alertKind = "warning";
+    }
+    this._alertOpen = true;
+  }
+  /**
+   * Get the graphics for all selected indexes
+   *
+   * @param indexes the indexes for the graphics to fetch
+   *
+   * @returns An array of selected graphics
+   */
+  async _getGraphics(ids) {
+    return ids.length > 0 ? queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
+  }
+  /**
+   * Handles layer selection change to show new table
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _layerSelectionChanged(evt) {
+    const id = evt.detail[0];
+    if (id !== this._layer.id || this._allIds.length === 0) {
+      this._fetchingData = true;
+      this._table.highlightIds.removeAll();
+      this._layer = await getLayer(this.mapView, id);
+      this._allIds = await queryAllIds(this._layer);
+      this._selectedIndexes = [];
+      this._table.layer = this._layer;
+      this._table.render();
+      this._fetchingData = false;
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"],
+    "_layer": ["_layerWatchHandler"]
+  }; }
+};
+LayerTable.style = layerTableCss;
+
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.action-bar-size{height:51px;width:100%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.width-1-7{width:14.28%}.width-1-6{width:16.66%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.display-grid{display:inline-grid}.block-button{border-bottom:0}.block-button:hover{background-color:var(--calcite-ui-foreground-2)}.block-button:active{background-color:var(--calcite-ui-foreground-3)}.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-scrim-background);z-index:1;width:100%;height:-moz-fit-content;height:fit-content}.map-height{height:calc(100% - 58px)}.display-none{display:none}.esri-zoom{display:none !important}.map-tools{position:absolute;top:40px;right:0px;padding:1rem}";
+
+const MapCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mapChanged = createEvent(this, "mapChanged", 7);
+    /**
+     * string: the id of map currently displayed
+     */
+    this._loadedId = "";
+    this.mapInfos = [];
+    this.mapView = undefined;
+    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._loadMap(v);
+    }
+  }
+  /**
+   * Called each time the mapInfos prop is changed.
+   */
+  mapInfosWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._loadMap(v[0]);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+    await this._initModules();
+  }
+  /**
+   * StencilJS: Called after every render.
+   */
+  componentDidRender() {
+    // the container node for the map view needs to exist before the view is created
+    this._loadMap(this._webMapInfo);
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "map-tools" })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [WebMap, MapView] = await loadModules([
+      "esri/WebMap",
+      "esri/views/MapView"
+    ]);
+    this.WebMap = WebMap;
+    this.MapView = MapView;
+  }
+  /**
+   * Create the toolbar (controls used for map and app interactions)
+   *
+   * @returns The dom node with the toolbar
+   *
+   * @protected
+   */
+  _getToolbar() {
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+  }
+  /**
+   * Load the webmap for the provided webMapInfo
+   *
+   * @param webMapInfo the webmap id and name to load
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _loadMap(webMapInfo) {
+    const id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
+    // on the first render use the first child of the provided mapInfos
+    if ((id === "" || !id) && this.mapInfos.length > 0) {
+      this._webMapInfo = this.mapInfos[0];
+    }
+    if (this._loadedId !== id) {
+      const webMap = new this.WebMap({
+        portalItem: { id }
+      });
+      this.mapView = new this.MapView({
+        container: this._mapDiv,
+        map: webMap,
+        // TODO consider this more...seems to cause less overflow issues when the component is resized
+        resizeAlign: "top-left"
+      });
+      this._loadedId = id;
+      this.mapChanged.emit(this.mapView);
+    }
+  }
+  /**
+   * 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 mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
+    return (h("calcite-button", { alignment: "icon-end-space-between", appearance: "solid", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
+  }
+  /**
+   * 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" : "display-none";
+    return (h("div", { class: listClass }, h("calcite-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
+      return (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
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _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 getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_webMapInfo": ["_webMapInfoWatchHandler"],
+    "mapInfos": ["mapInfosWatchHandler"]
+  }; }
+};
+MapCard.style = mapCardCss;
+
+export { CardManager as card_manager, LayerTable as layer_table, MapCard as map_card };