@esri/solutions-components 0.3.6 → 0.3.7

package/dist/solutions-components/p-815533de.js

@@ -3,14 +3,317 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import{f as t,a as s,t as i}from"./p-83166522.js";import{g as n}from"./p-e947d3b0.js";import{S as e}from"./p-ae1fd76b.js";import{d as o}from"./p-4e32bf8c.js";import{h as r,H as a}from"./p-c023e6a1.js";import{C as l,S as c}from"./p-b978636e.js";
+import { f as focusElement, a as getSlotted, t as toAriaBoolean } from './p-83166522.js';
+import { g as getRoundRobinIndex } from './p-e947d3b0.js';
+import { S as SLOTS } from './p-ae1fd76b.js';
+import { d as debounce } from './p-4e32bf8c.js';
+import { h, H as Host } from './p-c023e6a1.js';
+import { C as CSS, S as SLOTS$1 } from './p-b978636e.js';
+
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
- */function h(){this.setUpItems(),this.setUpFilter(),this.deselectRemovedItems()}const u=["ArrowUp","ArrowDown"];function f(){this.setUpItems(),this.setUpFilter(),this.emitCalciteListChange=o(j.bind(this),0)}function d(){var t;null===(t=this.mutationObserver)||void 0===t||t.observe(this.el,{childList:!0,subtree:!0})}function m(){var t;null===(t=this.mutationObserver)||void 0===t||t.disconnect()}function p(s){const{selectedValues:i}=this,{item:n,value:e,selected:o,shiftPressed:r}=s.detail;o?(this.multiple&&r&&this.selectSiblings(n),this.multiple||this.deselectSiblingItems(n),i.set(e,n)):(i.delete(e),this.multiple&&r&&this.selectSiblings(n,!0)),this.multiple||(C(n,o),o&&t(n)),this.lastSelectedItem=n,this.emitCalciteListChange()}function b(t){const s=t.detail.oldValue,i=this.selectedValues;if(i.has(s)){const n=i.get(s);i.delete(s),i.set(t.detail.newValue,n)}t.stopPropagation()}function v(t){const{el:s,items:i,multiple:n,selectedValues:e}=this;n||s.contains(t.relatedTarget)||A(i).forEach((s=>{C(s,0===e.size?s.contains(t.target)||t.target===s:s.selected)}))}function g(s){const{key:i,target:n}=s;if(!function(t){return!!u.find((s=>s===t))}(i))return;const{items:e,multiple:o,selectionFollowsFocus:r}=this,{length:a}=e,l=e.indexOf(n);if(!a||-1===l)return;s.preventDefault();const c=e[w(this,n,"ArrowUp"===i?"up":"down")];e.forEach((t=>C(t,t===c))),!o&&r&&(c.selected=!0),t(c)}function w(t,s,i){const{items:e}=t,{length:o}=e,r=e.indexOf(s),a="up"===i?-1:1;let l=1,c=n(r+a*l++,o);const h=c;for(;e[c].disabled&&(c=n(r+a*l++,o),c!==h););return c}function F(t,s){const{items:i}=t;return i.indexOf(s)}function A(t){return t.filter((t=>!t.disabled))}function j(){this.calciteListChange.emit(this.selectedValues)}function y(t){if(t.defaultPrevented)return;const s=t.target,i=this.selectedValues;"CALCITE-PICK-LIST-GROUP"===s.parentElement.tagName&&s.slot===e.parentItem?(s.parentElement.remove(),Array.from(s.parentElement.children).forEach((t=>i.delete(t.value)))):(s.remove(),i.delete(s.value)),this.emitCalciteListChange()}function C(t,s){t.disabled||(s?t.removeAttribute("tabindex"):t.setAttribute("tabindex","-1"))}async function E(s){var i;if(this.filterEnabled&&"filter"===s)return void await t(this.filterEl);const{items:n,multiple:e,selectionFollowsFocus:o}=this;if(0===n.length)return;if(e)return null===(i=A(n)[0])||void 0===i?void 0:i.setFocus();const r=A(n),a=r.find((t=>t.selected))||r[0];return o&&a&&(a.selected=!0),a.setFocus()}function x(t){this.items=Array.from(this.el.querySelectorAll(t));let s=!1;const{items:i}=this;i.forEach((t=>{t.icon=this.getIconType(),this.multiple||(t.disableDeselect=!0,C(t,!1)),t.selected&&(s=!0,C(t,!0),this.selectedValues.set(t.value,t))}));const[n]=i;s||!n||n.disabled||C(n,!0)}function I(){const t=this.selectedValues,s=this.items.map((({value:t})=>t));t.forEach((t=>{s.includes(t.value)||this.selectedValues.delete(t.value)}))}function L(t){this.items.forEach((s=>{s.value!==t.value&&(s.toggleSelected(!1),this.selectedValues.has(s.value)&&this.selectedValues.delete(s.value))}))}function P(t,s=!1){if(!this.lastSelectedItem)return;const{items:i}=this,n=i.findIndex((t=>t.value===this.lastSelectedItem.value)),e=i.findIndex((s=>s.value===t.value));i.slice(Math.min(n,e),Math.max(n,e)).forEach((t=>{t.toggleSelected(!s),s?this.selectedValues.delete(t.value):this.selectedValues.set(t.value,t)}))}let S;function k(t){const{filteredItems:i}=t.currentTarget,n=i.map((t=>t.value));let e=!1;S||(S=new Set);const o=this.items.filter((t=>{const s=t.parentElement;s.matches("calcite-pick-list-group")&&S.add(s);const i=n.includes(t.value);return t.hidden=!i,e||(e=i&&t.selected),i}));S.forEach((t=>{const i=o.some((s=>t.contains(s)));if(t.hidden=!i,!i)return;const n=s(t,"parent-item");n&&(n.hidden=!1,o.includes(n)&&Array.from(t.children).forEach((t=>t.hidden=!1)))})),S.clear(),o.length>0&&!e&&!this.multiple&&C(o[0],!0)}function U(){return this.items.map((t=>({label:t.label,description:t.description,metadata:t.metadata,value:t.value})))}
+ */
+function mutationObserverCallback() {
+  this.setUpItems();
+  this.setUpFilter();
+  this.deselectRemovedItems();
+}
+const SUPPORTED_ARROW_KEYS = ["ArrowUp", "ArrowDown"];
+// --------------------------------------------------------------------------
+//
+//  Lifecycle
+//
+// --------------------------------------------------------------------------
+function initialize() {
+  this.setUpItems();
+  this.setUpFilter();
+  this.emitCalciteListChange = debounce(internalCalciteListChangeEvent.bind(this), 0);
+}
+function initializeObserver() {
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+}
+function cleanUpObserver() {
+  var _a;
+  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+}
+// --------------------------------------------------------------------------
+//
+//  Listeners
+//
+// --------------------------------------------------------------------------
+function calciteListItemChangeHandler(event) {
+  const { selectedValues } = this;
+  const { item, value, selected, shiftPressed } = event.detail;
+  if (selected) {
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item);
+    }
+    if (!this.multiple) {
+      this.deselectSiblingItems(item);
+    }
+    selectedValues.set(value, item);
+  }
+  else {
+    selectedValues.delete(value);
+    if (this.multiple && shiftPressed) {
+      this.selectSiblings(item, true);
+    }
+  }
+  if (!this.multiple) {
+    toggleSingleSelectItemTabbing(item, selected);
+    if (selected) {
+      focusElement(item);
+    }
+  }
+  this.lastSelectedItem = item;
+  this.emitCalciteListChange();
+}
+function calciteInternalListItemValueChangeHandler(event) {
+  const oldValue = event.detail.oldValue;
+  const selectedValues = this.selectedValues;
+  if (selectedValues.has(oldValue)) {
+    const item = selectedValues.get(oldValue);
+    selectedValues.delete(oldValue);
+    selectedValues.set(event.detail.newValue, item);
+  }
+  event.stopPropagation();
+}
+// --------------------------------------------------------------------------
+//
+//  Private Methods
+//
+// --------------------------------------------------------------------------
+function isValidNavigationKey(key) {
+  return !!SUPPORTED_ARROW_KEYS.find((k) => k === key);
+}
+function calciteListFocusOutHandler(event) {
+  const { el, items, multiple, selectedValues } = this;
+  if (multiple) {
+    return;
+  }
+  const focusedInside = el.contains(event.relatedTarget);
+  if (focusedInside) {
+    return;
+  }
+  filterOutDisabled(items).forEach((item) => {
+    toggleSingleSelectItemTabbing(item, selectedValues.size === 0 ? item.contains(event.target) || event.target === item : item.selected);
+  });
+}
+function keyDownHandler(event) {
+  const { key, target } = event;
+  if (!isValidNavigationKey(key)) {
+    return;
+  }
+  const { items, multiple, selectionFollowsFocus } = this;
+  const { length: totalItems } = items;
+  const currentIndex = items.indexOf(target);
+  if (!totalItems || currentIndex === -1) {
+    return;
+  }
+  event.preventDefault();
+  const index = moveItemIndex(this, target, key === "ArrowUp" ? "up" : "down");
+  const item = items[index];
+  items.forEach((i) => toggleSingleSelectItemTabbing(i, i === item));
+  if (!multiple && selectionFollowsFocus) {
+    item.selected = true;
+  }
+  focusElement(item);
+}
+function moveItemIndex(list, item, direction) {
+  const { items } = list;
+  const { length: totalItems } = items;
+  const currentIndex = items.indexOf(item);
+  const directionFactor = direction === "up" ? -1 : 1;
+  let moveOffset = 1;
+  let index = getRoundRobinIndex(currentIndex + directionFactor * moveOffset++, totalItems);
+  const firstMovedIndex = index;
+  while (items[index].disabled) {
+    index = getRoundRobinIndex(currentIndex + directionFactor * moveOffset++, totalItems);
+    if (index === firstMovedIndex) {
+      break;
+    }
+  }
+  return index;
+}
+function getItemIndex(list, item) {
+  const { items } = list;
+  return items.indexOf(item);
+}
+function filterOutDisabled(items) {
+  return items.filter((item) => !item.disabled);
+}
+function internalCalciteListChangeEvent() {
+  this.calciteListChange.emit(this.selectedValues);
+}
+function removeItem(event) {
+  if (event.defaultPrevented) {
+    return;
+  }
+  const item = event.target;
+  const selectedValues = this.selectedValues;
+  if (item.parentElement.tagName === "CALCITE-PICK-LIST-GROUP" && item.slot === SLOTS.parentItem) {
+    item.parentElement.remove();
+    Array.from(item.parentElement.children).forEach((item) => selectedValues.delete(item.value));
+  }
+  else {
+    item.remove();
+    selectedValues.delete(item.value);
+  }
+  this.emitCalciteListChange();
+}
+function toggleSingleSelectItemTabbing(item, selectable) {
+  if (item.disabled) {
+    return;
+  }
+  // using attribute intentionally
+  if (selectable) {
+    item.removeAttribute("tabindex");
+  }
+  else {
+    item.setAttribute("tabindex", "-1");
+  }
+}
+async function setFocus(focusId) {
+  var _a;
+  if (this.filterEnabled && focusId === "filter") {
+    await focusElement(this.filterEl);
+    return;
+  }
+  const { items, multiple, selectionFollowsFocus } = this;
+  if (items.length === 0) {
+    return;
+  }
+  if (multiple) {
+    return (_a = filterOutDisabled(items)[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
+  }
+  const filtered = filterOutDisabled(items);
+  const focusTarget = filtered.find((item) => item.selected) || filtered[0];
+  if (selectionFollowsFocus && focusTarget) {
+    focusTarget.selected = true;
+  }
+  return focusTarget.setFocus();
+}
+function setUpItems(tagName) {
+  this.items = Array.from(this.el.querySelectorAll(tagName));
+  let hasSelected = false;
+  const { items } = this;
+  items.forEach((item) => {
+    item.icon = this.getIconType();
+    if (!this.multiple) {
+      item.disableDeselect = true;
+      toggleSingleSelectItemTabbing(item, false);
+    }
+    if (item.selected) {
+      hasSelected = true;
+      toggleSingleSelectItemTabbing(item, true);
+      this.selectedValues.set(item.value, item);
+    }
+  });
+  const [first] = items;
+  if (!hasSelected && first && !first.disabled) {
+    toggleSingleSelectItemTabbing(first, true);
+  }
+}
+function deselectRemovedItems() {
+  const selectedValues = this.selectedValues;
+  const itemValues = this.items.map(({ value }) => value);
+  selectedValues.forEach((selectedItem) => {
+    if (!itemValues.includes(selectedItem.value)) {
+      this.selectedValues.delete(selectedItem.value);
+    }
+  });
+}
+function deselectSiblingItems(item) {
+  this.items.forEach((currentItem) => {
+    if (currentItem.value !== item.value) {
+      currentItem.toggleSelected(false);
+      if (this.selectedValues.has(currentItem.value)) {
+        this.selectedValues.delete(currentItem.value);
+      }
+    }
+  });
+}
+function selectSiblings(item, deselect = false) {
+  if (!this.lastSelectedItem) {
+    return;
+  }
+  const { items } = this;
+  const start = items.findIndex((currentItem) => {
+    return currentItem.value === this.lastSelectedItem.value;
+  });
+  const end = items.findIndex((currentItem) => {
+    return currentItem.value === item.value;
+  });
+  items.slice(Math.min(start, end), Math.max(start, end)).forEach((currentItem) => {
+    currentItem.toggleSelected(!deselect);
+    if (!deselect) {
+      this.selectedValues.set(currentItem.value, currentItem);
+    }
+    else {
+      this.selectedValues.delete(currentItem.value);
+    }
+  });
+}
+let groups;
+function handleFilter(event) {
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
+  let hasSelectedMatch = false;
+  if (!groups) {
+    groups = new Set();
+  }
+  const matchedItems = this.items.filter((item) => {
+    const parent = item.parentElement;
+    const grouped = parent.matches("calcite-pick-list-group");
+    if (grouped) {
+      groups.add(parent);
+    }
+    const matches = values.includes(item.value);
+    item.hidden = !matches;
+    if (!hasSelectedMatch) {
+      hasSelectedMatch = matches && item.selected;
+    }
+    return matches;
+  });
+  groups.forEach((group) => {
+    const hasAtLeastOneMatch = matchedItems.some((item) => group.contains(item));
+    group.hidden = !hasAtLeastOneMatch;
+    if (!hasAtLeastOneMatch) {
+      return;
+    }
+    const parentItem = getSlotted(group, "parent-item");
+    if (parentItem) {
+      parentItem.hidden = false;
+      if (matchedItems.includes(parentItem)) {
+        Array.from(group.children).forEach((child) => (child.hidden = false));
+      }
+    }
+  });
+  groups.clear();
+  if (matchedItems.length > 0 && !hasSelectedMatch && !this.multiple) {
+    toggleSingleSelectItemTabbing(matchedItems[0], true);
+  }
+}
+function getItemData() {
+  return this.items.map((item) => ({
+    label: item.label,
+    description: item.description,
+    metadata: item.metadata,
+    value: item.value
+  }));
+}
+
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  * v1.0.0-beta.97
- */const M=({props:{disabled:t,loading:s,filterEnabled:n,dataForFilter:e,handleFilter:o,filterPlaceholder:h,setFilterEl:u,dragEnabled:f,storeAssistiveEl:d},...m})=>{const p=r("slot",null);return r(a,{"aria-busy":i(s),role:"menu",...m},r("section",null,f?r("span",{"aria-live":"assertive",class:"assistive-text",ref:d}):null,r("header",{class:{[l.sticky]:!0}},n?r("calcite-filter",{"aria-label":h,disabled:s||t,items:e,onCalciteFilterChange:o,placeholder:h,ref:u}):null,r("slot",{name:c.menuActions})),s?r("calcite-scrim",{loading:s}):null,p))};export{M as L,L as a,d as b,m as c,I as d,p as e,b as f,U as g,k as h,f as i,v as j,g as k,x as l,h as m,E as n,F as o,w as p,y as r,P as s}
+ */
+const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl, dragEnabled, storeAssistiveEl }, ...rest }) => {
+  const defaultSlot = h("slot", null);
+  return (h(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest }, h("section", null, dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-text", ref: storeAssistiveEl })) : null, h("header", { class: { [CSS.sticky]: true } }, filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null, h("slot", { name: SLOTS$1.menuActions })), loading ? h("calcite-scrim", { loading: loading }) : null, defaultSlot)));
+};
+
+export { List as L, deselectSiblingItems as a, initializeObserver as b, cleanUpObserver as c, deselectRemovedItems as d, calciteListItemChangeHandler as e, calciteInternalListItemValueChangeHandler as f, getItemData as g, handleFilter as h, initialize as i, calciteListFocusOutHandler as j, keyDownHandler as k, setUpItems as l, mutationObserverCallback as m, setFocus as n, getItemIndex as o, moveItemIndex as p, removeItem as r, selectSiblings as s };

package/dist/solutions-components/p-816622ca.entry.js

@@ -0,0 +1,248 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './p-c023e6a1.js';
+import { l as loadModules } from './p-1c567f3a.js';
+import { g as getLocaleComponentStrings } from './p-44da2507.js';
+import { a as EExpandType } from './p-dbc9a5a8.js';
+import './p-3b010ce1.js';
+
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.action-bar-size{height:3.5rem;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}.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-view{padding:0;margin:0;height:100%;width:100%}.map-list{position:absolute;inset:3.5rem 0 0 0;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}";
+
+const MapCard = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expandMap = createEvent(this, "expandMap", 7);
+    /**
+     * string: the id of map currently displayed
+     */
+    this._loadedId = "";
+    /**
+     * string: the id of the container div for the map
+     */
+    this._mapDivId = "map-div";
+    this.mapInfos = [];
+    this._mapListExpanded = false;
+    this._mapView = undefined;
+    this._translations = undefined;
+    this._webMapId = "";
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Called each time the _webMapId prop is changed.
+   */
+  _webMapIdWatchHandler(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].id);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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._webMapId);
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", id: this._mapDivId })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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(), this._getActionGroup("home", false, this._translations.home, () => this._goHome()), this._getActionGroup("list", false, this._translations.list, () => this._showList()), this._getActionGroup("magnifying-glass-plus", false, this._translations.search, () => this._search()), this._getActionGroup("plus", false, this._translations.zoomIn, () => this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => this._zoomOut()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()))));
+  }
+  /**
+   * Load the webmap for the provided id
+   *
+   * @param id the webmap id to load
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _loadMap(id) {
+    // on the first render use the first child of the provided mapInfos
+    if (id === "" && this.mapInfos.length > 0) {
+      id = this.mapInfos[0].id;
+    }
+    if (this._loadedId !== id) {
+      const webMap = new this.WebMap({
+        portalItem: { id }
+      });
+      this._mapView = new this.MapView({
+        container: this._mapDivId,
+        map: webMap,
+        // TODO consider this more...seems to cause less overflow issues when the component is resized
+        resizeAlign: "top-left"
+      });
+      this._loadedId = id;
+    }
+  }
+  /**
+   * Get a calcite action group for the current action
+   *
+   * @param icon the icon to display for the current action
+   * @param disabled should the action be disabled
+   * @param tip information tip to display helpful details to end user
+   * @param func the associated onClick function to execute
+   *
+   * @returns the dom node for the action group
+   *
+   * @protected
+   */
+  _getActionGroup(icon, disabled, tip, func) {
+    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-action", { alignment: "center", class: "width-full height-full", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+  }
+  /**
+   * 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() {
+    const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
+    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
+  }
+  /**
+   * 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-pick-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
+      return (h("calcite-pick-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo.id), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
+    }))));
+  }
+  /**
+   * Fired when the user clicks on the map list
+   *
+   * @param id the web map id selected from the list
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _webMapSelected(id) {
+    this._mapListExpanded = false;
+    this._webMapId = id;
+  }
+  /**
+   * Toggles the open/close state of the map list
+   *
+   * @returns the dom node for the action group
+   *
+   * @protected
+   */
+  _chooseMap() {
+    this._mapListExpanded = !this._mapListExpanded;
+  }
+  // Need to discuss this with the team
+  _goHome() {
+    alert("go home");
+  }
+  // need to discuss this with the team
+  _showList() {
+    alert("show list");
+  }
+  // Need to discuss this with the team
+  _search() {
+    alert("search");
+  }
+  // Need to explore map fixed zoom in considerations
+  _zoomIn() {
+    alert("zoom in");
+  }
+  // Need to explore map fixed zoom out considerations
+  _zoomOut() {
+    alert("zoom out");
+  }
+  /**
+   * Emit the expand map event
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _expand() {
+    this.expandMap.emit(EExpandType.EXPAND);
+  }
+  /**
+   * 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 {
+    "_webMapId": ["_webMapIdWatchHandler"],
+    "mapInfos": ["mapInfosWatchHandler"]
+  }; }
+};
+MapCard.style = mapCardCss;
+
+export { MapCard as map_card };