@esri/solutions-components 0.6.8 → 0.6.9

package/dist/components/layout-manager.js

@@ -3,7 +3,135 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { L as LayoutManager$1, d as defineCustomElement$1 } from './layout-manager2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { a as ELayoutMode } from './interfaces.js';
+import { d as defineCustomElement$6 } from './action.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './loader.js';
+import { d as defineCustomElement$3 } from './popover.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+
+const layoutManagerCss = ":host{display:block}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.display-flex{display:flex}.icon-color{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.horizontal-background{background-image:url('../../assets/data/images/horizontal.png')}.vertical-background{background-image:url('../../assets/data/images/vertical.png')}";
+
+const LayoutManager$1 = /*@__PURE__*/ proxyCustomElement(class LayoutManager extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.layoutChanged = createEvent(this, "layoutChanged", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Controls the layout of the application
+     */
+    this._layoutMode = ELayoutMode.GRID;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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 (h(Host, null, h("div", { class: "display-flex" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Store and emit the current layout mode
+   *
+   * @param imgClass string the css class to use
+   * @param layoutMode ELayoutMode the associated layout mode for the current action
+   * @param tip string the value to display as the tooltip for the action
+   *
+   * @protected
+   */
+  _getAction(imgClass, layoutMode, tip) {
+    return (h("div", null, h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, h("div", { class: imgClass + " img-background" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, h("span", null, tip))));
+  }
+  /**
+   * Store and emit the current layout mode
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   *
+   * @protected
+   */
+  _setLayoutMode(layoutMode) {
+    this._layoutMode = layoutMode;
+    this.layoutChanged.emit(this._layoutMode);
+  }
+  /**
+   * 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 this; }
+  static get style() { return layoutManagerCss; }
+}, [1, "layout-manager", {
+    "_translations": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["layout-manager", "calcite-action", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "layout-manager":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LayoutManager$1);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
 
 const LayoutManager = LayoutManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/list-item2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { p as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from './dom.js';
+import { h as slotChangeHasAssignedElement, g as getElementDir, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { a as getDepth, C as CSS, I as ICONS, S as SLOTS, g as getListItemChildren, u as updateListItemChildren } from './utils3.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';

package/dist/components/list.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { p as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
+import { h as slotChangeHasAssignedElement, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { u as updateListItemChildren, g as getListItemChildren, M as MAX_COLUMNS } from './utils3.js';
@@ -22,7 +22,7 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const CSS = {
   container: "container",

package/dist/components/loadable.js

@@ -8,7 +8,7 @@ import { Build, forceUpdate } from '@stencil/core/internal/client';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const resolveMap = new WeakMap();
 const promiseMap = new WeakMap();

package/dist/components/locale2.js

@@ -10,7 +10,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const unnecessaryDecimal = new RegExp(`\\${"."}(0+)?$`);
 const trailingZeros = new RegExp("0+$");
@@ -217,7 +217,7 @@ function addLocalizedTrailingDecimalZeros(localizedValue, value, formatter) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.0
+ * v1.6.1
  */
 const defaultLocale = "en";
 const t9nLocales = [

package/dist/components/map-card2.js

@@ -5,24 +5,25 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { d as defineCustomElement$l } from './basemap-gallery2.js';
-import { d as defineCustomElement$k } from './action.js';
-import { d as defineCustomElement$j } from './action-bar.js';
-import { d as defineCustomElement$i } from './action-group.js';
-import { d as defineCustomElement$h } from './action-menu.js';
-import { d as defineCustomElement$g } from './button.js';
-import { d as defineCustomElement$f } from './filter2.js';
-import { d as defineCustomElement$e } from './handle.js';
-import { d as defineCustomElement$d } from './icon.js';
-import { d as defineCustomElement$c } from './input.js';
-import { d as defineCustomElement$b } from './list.js';
-import { d as defineCustomElement$a } from './list-item2.js';
-import { d as defineCustomElement$9 } from './loader.js';
-import { d as defineCustomElement$8 } from './popover.js';
-import { d as defineCustomElement$7 } from './progress.js';
-import { d as defineCustomElement$6 } from './scrim.js';
-import { d as defineCustomElement$5 } from './stack.js';
-import { d as defineCustomElement$4 } from './tooltip.js';
+import { d as defineCustomElement$m } from './basemap-gallery2.js';
+import { d as defineCustomElement$l } from './action.js';
+import { d as defineCustomElement$k } from './action-bar.js';
+import { d as defineCustomElement$j } from './action-group.js';
+import { d as defineCustomElement$i } from './action-menu.js';
+import { d as defineCustomElement$h } from './button.js';
+import { d as defineCustomElement$g } from './filter2.js';
+import { d as defineCustomElement$f } from './handle.js';
+import { d as defineCustomElement$e } from './icon.js';
+import { d as defineCustomElement$d } from './input.js';
+import { d as defineCustomElement$c } from './list.js';
+import { d as defineCustomElement$b } from './list-item2.js';
+import { d as defineCustomElement$a } from './loader.js';
+import { d as defineCustomElement$9 } from './popover.js';
+import { d as defineCustomElement$8 } from './progress.js';
+import { d as defineCustomElement$7 } from './scrim.js';
+import { d as defineCustomElement$6 } from './stack.js';
+import { d as defineCustomElement$5 } from './tooltip.js';
+import { d as defineCustomElement$4 } from './map-legend2.js';
 import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
 import { d as defineCustomElement$1 } from './map-tools2.js';
@@ -113,7 +114,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
       await this.mapView.when(() => {
         this._loadedId = id;
         this._searchConfiguration = this._webMapInfo.searchConfiguration;
-        this.mapChanged.emit(this.mapView);
+        this.mapChanged.emit({
+          id: id,
+          mapView: this.mapView
+        });
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
       });
     }
@@ -130,7 +134,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack", "calcite-tooltip", "map-picker", "map-search", "map-tools"];
+  const components = ["map-card", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-button", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-stack", "calcite-tooltip", "map-legend", "map-picker", "map-search", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "map-card":
       if (!customElements.get(tagName)) {
@@ -139,90 +143,95 @@ function defineCustomElement() {
       break;
     case "basemap-gallery":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-handle":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "calcite-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "calcite-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "calcite-scrim":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "calcite-stack":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "map-legend":
       if (!customElements.get(tagName)) {
         defineCustomElement$4();
       }

package/dist/components/map-legend.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MapLegend extends Components.MapLegend, HTMLElement {}
+export const MapLegend: {
+  prototype: MapLegend;
+  new (): MapLegend;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/map-legend.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { M as MapLegend$1, d as defineCustomElement$1 } from './map-legend2.js';
+
+const MapLegend = MapLegend$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MapLegend, defineCustomElement };

package/dist/components/map-legend2.js

@@ -0,0 +1,118 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+
+const mapLegendCss = ":host{display:block}";
+
+const MapLegend = /*@__PURE__*/ proxyCustomElement(class MapLegend extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 (h(Host, null, h("div", { ref: (el) => { this._legendElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Legend] = await loadModules([
+      "esri/widgets/Legend"
+    ]);
+    this.Legend = Legend;
+  }
+  /**
+   * Initialize the basemap gallery or reset the current view if it already exists
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _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 this; }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+  static get style() { return mapLegendCss; }
+}, [1, "map-legend", {
+    "mapView": [16],
+    "legendWidget": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["map-legend"];
+  components.forEach(tagName => { switch (tagName) {
+    case "map-legend":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapLegend);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MapLegend as M, defineCustomElement as d };