@esri/solutions-components 0.6.6 → 0.6.7

package/dist/components/layout-manager2.js

@@ -5,7 +5,7 @@
  */
 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 { E as ELayoutMode } from './interfaces.js';
 import { d as defineCustomElement$5 } from './action.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './loader.js';
@@ -14,122 +14,123 @@ import { d as defineCustomElement$1 } 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 = /*@__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() {
-  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);
-      }
-      break;
-    case "calcite-action":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "calcite-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "calcite-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "calcite-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const LayoutManager = /*@__PURE__*/ proxyCustomElement(class 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() {
+  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);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { LayoutManager as L, defineCustomElement as d };

package/dist/components/link.js

@@ -4,134 +4,134 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { g as getElementDir, f as focusElement } from './dom.js';
+import { b as getElementDir, C as CSS_UTILITY, j as focusElement } from './dom.js';
 import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
-import { C as CSS_UTILITY } from './resources.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const linkCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-ui-text-link);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
-const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.childElClickHandler = (event) => {
-      if (!event.isTrusted) {
-        // click was invoked internally, we stop it here
-        event.stopPropagation();
-      }
-    };
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.storeTagRef = (el) => {
-      this.childEl = el;
-    };
-    this.disabled = false;
-    this.download = false;
-    this.href = undefined;
-    this.iconEnd = undefined;
-    this.iconFlipRtl = undefined;
-    this.iconStart = undefined;
-    this.rel = undefined;
-    this.target = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    connectInteractive(this);
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  componentDidRender() {
-    updateHostInteraction(this);
-  }
-  disconnectedCallback() {
-    disconnectInteractive(this);
-  }
-  render() {
-    const { download, el } = this;
-    const dir = getElementDir(el);
-    const childElType = this.href ? "a" : "span";
-    const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-    const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    const Tag = childElType;
-    const role = childElType === "span" ? "link" : null;
-    const tabIndex = childElType === "span" ? 0 : null;
-    return (h(Host, { role: "presentation" }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
-      /*
-      When the 'download' property of type 'boolean | string' is set to true, the value is "".
-      This works around that issue for now.
-      */
-      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Events
-  //
-  //--------------------------------------------------------------------------
-  clickHandler(event) {
-    if (this.disabled) {
-      return;
-    }
-    // forwards the click() to the internal link for non user-initiated events
-    if (!event.isTrusted) {
-      this.childEl.click();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    await componentFocusable(this);
-    focusElement(this.childEl);
-  }
-  get el() { return this; }
-  static get style() { return linkCss; }
-}, [1, "calcite-link", {
-    "disabled": [516],
-    "download": [520],
-    "href": [513],
-    "iconEnd": [513, "icon-end"],
-    "iconFlipRtl": [513, "icon-flip-rtl"],
-    "iconStart": [513, "icon-start"],
-    "rel": [1],
-    "target": [1],
-    "setFocus": [64]
-  }, [[0, "click", "clickHandler"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["calcite-link", "calcite-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "calcite-link":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Link);
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const Link = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.childElClickHandler = (event) => {
+      if (!event.isTrusted) {
+        // click was invoked internally, we stop it here
+        event.stopPropagation();
+      }
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.storeTagRef = (el) => {
+      this.childEl = el;
+    };
+    this.disabled = false;
+    this.download = false;
+    this.href = undefined;
+    this.iconEnd = undefined;
+    this.iconFlipRtl = undefined;
+    this.iconStart = undefined;
+    this.rel = undefined;
+    this.target = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectInteractive(this);
+  }
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+  }
+  render() {
+    const { download, el } = this;
+    const dir = getElementDir(el);
+    const childElType = this.href ? "a" : "span";
+    const iconStartEl = (h("calcite-icon", { class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const Tag = childElType;
+    const role = childElType === "span" ? "link" : null;
+    const tabIndex = childElType === "span" ? 0 : null;
+    return (h(Host, { role: "presentation" }, h(Tag, { class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+      /*
+      When the 'download' property of type 'boolean | string' is set to true, the value is "".
+      This works around that issue for now.
+      */
+      download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
+      // eslint-disable-next-line react/jsx-sort-props
+      ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null)));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  clickHandler(event) {
+    if (this.disabled) {
+      return;
+    }
+    // forwards the click() to the internal link for non user-initiated events
+    if (!event.isTrusted) {
+      this.childEl.click();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    await componentFocusable(this);
+    focusElement(this.childEl);
+  }
+  get el() { return this; }
+  static get style() { return linkCss; }
+}, [1, "calcite-link", {
+    "disabled": [516],
+    "download": [520],
+    "href": [513],
+    "iconEnd": [513, "icon-end"],
+    "iconFlipRtl": [513, "icon-flip-rtl"],
+    "iconStart": [513, "icon-start"],
+    "rel": [1],
+    "target": [1],
+    "setFocus": [64]
+  }, [[0, "click", "clickHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-link", "calcite-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Link);
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { Link as L, defineCustomElement as d };