@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/split-button.js

@@ -0,0 +1,165 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { u as updateHostInteraction } from './interactive.js';
+import { d as defineCustomElement$4 } from './button.js';
+import { d as defineCustomElement$3 } from './dropdown.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './loader.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
+ */
+const CSS = {
+  container: "split-button__container",
+  dividerContainer: "split-button__divider-container",
+  divider: "split-button__divider",
+  widthAuto: "width-auto",
+  widthHalf: "width-half",
+  widthFull: "width-full"
+};
+
+const splitButtonCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-block}:host .split-button__container{display:flex;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}:host:host([color=blue]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([color=red]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([color=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host:host([color=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=transparent]):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=transparent]):host([color=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1)}:host([appearance=transparent]):host([color=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=clear]),:host([appearance=transparent]){--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=clear]):host([color=blue]),:host([appearance=outline]):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=clear]):host([color=red]),:host([appearance=outline]):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=clear]):host([color=neutral]),:host([appearance=outline]):host([color=neutral]){--calcite-split-button-divider:var(--calcite-ui-foreground-3)}:host([appearance=clear]):host([color=inverse]),:host([appearance=outline]):host([color=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.width-auto{inline-size:auto}.width-half{inline-size:50%}.width-full{inline-size:100%}.split-button__divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.split-button__divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline]) .split-button__divider-container,:host([appearance=clear]) .split-button__divider-container,:host([appearance=minimal]) .split-button__divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline]):hover .split-button__divider-container,:host([appearance=clear]):hover .split-button__divider-container,:host([appearance=minimal]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline]:hover) .split-button__divider-container,:host([appearance=clear]:hover) .split-button__divider-container,:host([appearance=minimal]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline]:focus-within):host([color=blue]),:host([appearance=clear]:focus-within):host([color=blue]),:host([appearance=minimal]:focus-within):host([color=blue]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline]:focus-within):host([color=red]),:host([appearance=clear]:focus-within):host([color=red]),:host([appearance=minimal]:focus-within):host([color=red]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline]:focus-within) .split-button__divider-container,:host([appearance=clear]:focus-within) .split-button__divider-container,:host([appearance=minimal]:focus-within) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
+
+const SplitButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 6);
+    this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 6);
+    /** Specifies the appearance style of the component. */
+    this.appearance = "solid";
+    /** Specifies the color of the component. */
+    this.color = "blue";
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    /**
+     * When `true`, the component is active.
+     *
+     * @internal
+     */
+    this.active = false;
+    /** Specifies the icon used for the dropdown menu. */
+    this.dropdownIconType = "chevron";
+    /**
+      When `true`, a busy indicator is displayed on the primary button.
+     */
+    this.loading = false;
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+     *
+     */
+    this.overlayPositioning = "absolute";
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /** Specifies the width of the component. */
+    this.width = "auto";
+    this.calciteSplitButtonPrimaryClickHandler = (event) => this.calciteSplitButtonPrimaryClick.emit(event);
+    this.calciteSplitButtonSecondaryClickHandler = (event) => this.calciteSplitButtonSecondaryClick.emit(event);
+  }
+  handleDisabledChange(value) {
+    if (!value) {
+      this.active = false;
+    }
+  }
+  activeHandler() {
+    if (this.disabled) {
+      this.active = false;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    const widthClasses = {
+      [CSS.container]: true,
+      [CSS.widthAuto]: this.width === "auto",
+      [CSS.widthHalf]: this.width === "half",
+      [CSS.widthFull]: this.width === "full"
+    };
+    const buttonWidth = this.width === "auto" ? "auto" : "full";
+    return (h("div", { class: widthClasses }, h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { active: this.active, disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, width: this.scale }, h("calcite-button", { appearance: this.appearance, color: this.color, disabled: this.disabled, "icon-start": this.dropdownIcon, label: this.dropdownLabel, scale: this.scale, slot: "dropdown-trigger", splitChild: "secondary", type: "button" }), h("slot", null))));
+  }
+  get dropdownIcon() {
+    return this.dropdownIconType === "chevron"
+      ? "chevronDown"
+      : this.dropdownIconType === "caret"
+        ? "caretDown"
+        : this.dropdownIconType === "ellipsis"
+          ? "ellipsis"
+          : "handle-vertical";
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "disabled": ["handleDisabledChange"],
+    "active": ["activeHandler"]
+  }; }
+  static get style() { return splitButtonCss; }
+}, [1, "calcite-split-button", {
+    "appearance": [513],
+    "color": [513],
+    "disabled": [516],
+    "active": [1540],
+    "dropdownIconType": [513, "dropdown-icon-type"],
+    "dropdownLabel": [513, "dropdown-label"],
+    "loading": [516],
+    "overlayPositioning": [513, "overlay-positioning"],
+    "primaryIconEnd": [513, "primary-icon-end"],
+    "primaryIconFlipRtl": [513, "primary-icon-flip-rtl"],
+    "primaryIconStart": [513, "primary-icon-start"],
+    "primaryLabel": [513, "primary-label"],
+    "primaryText": [513, "primary-text"],
+    "scale": [513],
+    "width": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-split-button", "calcite-button", "calcite-dropdown", "calcite-icon", "calcite-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-split-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SplitButton);
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SplitButton as S, defineCustomElement as d };

package/dist/components/store-manager.d.ts

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

package/dist/components/store-manager.js

@@ -0,0 +1,83 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
+
+const StoreManager$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.stateLoaded = createEvent(this, "stateLoaded", 7);
+    this.value = "";
+    this.templates = [];
+    this.authentication = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this._initValueObserver();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (null);
+  }
+  /**
+   * Initialize the observer that will monitor and respond to changes in the value.
+   * When we get a new value we are dealinmg with a new solution and need to fetch the items data and load the state.
+   */
+  _initValueObserver() {
+    //const self = this;
+    this._valueObserver = new MutationObserver(ml => {
+      ml.some(mutation => {
+        const newValue = mutation.target[mutation.attributeName];
+        if (mutation.type === 'attributes' && mutation.attributeName === "value" &&
+          newValue !== mutation.oldValue && newValue !== "") {
+          /*
+          const v = JSON.parse(newValue);
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          getItemDataAsJson(v, self.authentication).then(data => {
+            state.models = getModels(Array.isArray(v) ? v : [v], self.authentication, v);
+            state.featureServices = getFeatureServices(Array.isArray(v) ? v : [v])
+            state.get("spatialReferenceInfo") = getSpatialReferenceInfo(state.featureServices, data);
+            self.templates = v;
+            self.stateLoaded.emit(state);
+          });
+          */
+          return true;
+        }
+      });
+    });
+    this._valueObserver.observe(this.el, { attributes: true, attributeOldValue: true });
+  }
+  get el() { return this; }
+}, [0, "store-manager", {
+    "value": [1537],
+    "templates": [1040],
+    "authentication": [1040]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["store-manager"];
+  components.forEach(tagName => { switch (tagName) {
+    case "store-manager":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StoreManager$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const StoreManager = StoreManager$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { StoreManager, defineCustomElement };

package/dist/components/switch.js

@@ -0,0 +1,139 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as focusElement, t as toAriaBoolean } from './dom.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label2.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
+import { u as updateHostInteraction } from './interactive.js';
+import { i as isActivationKey } from './key.js';
+
+const switchCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([scale=s]) .container{block-size:0.75rem}:host([scale=s]) .track{block-size:0.75rem;inline-size:1.5rem}:host([scale=s]) .handle{block-size:0.5rem;inline-size:0.5rem}:host([scale=m]) .container{block-size:1rem}:host([scale=m]) .track{block-size:1rem;inline-size:2rem}:host([scale=m]) .handle{block-size:0.75rem;inline-size:0.75rem}:host([scale=l]) .container{block-size:1.5rem}:host([scale=l]) .track{block-size:1.5rem;inline-size:3rem}:host([scale=l]) .handle{block-size:1.25rem;inline-size:1.25rem}:host{position:relative;display:inline-block;inline-size:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host{inline-size:auto;outline-color:transparent}.track{pointer-events:none;position:relative;box-sizing:border-box;display:inline-block;border-radius:9999px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-2);vertical-align:top;transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.handle{pointer-events:none;position:absolute;display:block;border-radius:9999px;border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);transition-property:all;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);inset-block-start:-1px;inset-inline:-1px auto}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([checked]) .track{border-color:var(--calcite-ui-brand-hover);background-color:var(--calcite-ui-brand)}:host([checked]) .handle{border-color:var(--calcite-ui-brand);inset-inline:auto -1px}:host([checked]:hover) .track{border-color:var(--calcite-ui-brand-hover);background-color:var(--calcite-ui-brand)}:host([checked]:hover) .handle{border-color:var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}@media (forced-colors: active){:host([checked]) .track{background-color:canvasText}}.container:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+
+const Switch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
+    this.disabled = false;
+    /** Specifies the size of the component. */
+    this.scale = "m";
+    /**
+     * When `true`, the component is checked.
+     *
+     * @deprecated use `checked` instead.
+     */
+    this.switched = false;
+    /** When `true`, the component is checked. */
+    this.checked = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (!this.disabled && isActivationKey(event.key)) {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.setSwitchEl = (el) => {
+      this.switchEl = el;
+    };
+  }
+  switchedWatcher(switched) {
+    this.checked = switched;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    focusElement(this.switchEl);
+  }
+  onLabelClick() {
+    if (!this.disabled) {
+      this.toggle();
+      this.setFocus();
+    }
+  }
+  toggle() {
+    this.checked = !this.checked;
+    this.calciteSwitchChange.emit({
+      switched: this.checked
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    const initiallyChecked = this.checked || this.switched;
+    if (initiallyChecked) {
+      // if either prop is set, we ensure both are synced initially
+      this.switched = this.checked = initiallyChecked;
+    }
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", ref: this.setSwitchEl, role: "switch", tabIndex: 0 }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this }))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "switched": ["switchedWatcher"]
+  }; }
+  static get style() { return switchCss; }
+}, [1, "calcite-switch", {
+    "disabled": [516],
+    "label": [1],
+    "name": [513],
+    "scale": [513],
+    "switched": [1540],
+    "checked": [1540],
+    "value": [8],
+    "setFocus": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-switch"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-switch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Switch);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { Switch as S, defineCustomElement as d };

package/dist/components/tab-nav.js

@@ -0,0 +1,241 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as getElementDir, m as filterDirectChildren } from './dom.js';
+import { c as createObserver } from './observers.js';
+
+const tabNavCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:flex}:host([scale=s]){min-block-size:1.5rem}:host([scale=m]){min-block-size:2rem}:host([scale=l]){min-block-size:2.75rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-ui-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([position=below]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=below]) .tab-nav-active-indicator-container{inset-block-start:0px;inset-block-end:unset}:host([position=bottom]) .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered][position=below]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}:host([bordered][position=bottom]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}";
+
+const TabNav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.calciteTabChange = createEvent(this, "calciteTabChange", 6);
+    this.calciteInternalTabChange = createEvent(this, "calciteInternalTabChange", 6);
+    /**
+     * @internal
+     */
+    this.scale = "m";
+    /**
+     * @internal
+     */
+    this.layout = "inline";
+    /**
+     * @internal
+     */
+    this.position = "bottom";
+    /**
+     * @internal
+     */
+    this.bordered = false;
+    this.animationActiveDuration = 0.3;
+    this.resizeObserver = createObserver("resize", () => {
+      // remove active indicator transition duration during resize to prevent wobble
+      this.activeIndicatorEl.style.transitionDuration = "0s";
+      this.updateActiveWidth();
+      this.updateOffsetPosition();
+    });
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.handleContainerScroll = () => {
+      // remove active indicator transition duration while container is scrolling to prevent wobble
+      this.activeIndicatorEl.style.transitionDuration = "0s";
+      this.updateOffsetPosition();
+    };
+  }
+  async selectedTabChanged() {
+    if (localStorage &&
+      this.storageId &&
+      this.selectedTab !== undefined &&
+      this.selectedTab !== null) {
+      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));
+    }
+    this.calciteInternalTabChange.emit({
+      tab: this.selectedTab
+    });
+    this.selectedTabEl = await this.getTabTitleById(this.selectedTab);
+  }
+  selectedTabElChanged() {
+    this.updateOffsetPosition();
+    this.updateActiveWidth();
+    // reset the animation time on tab selection
+    this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    this.parentTabsEl = this.el.closest("calcite-tabs");
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  componentWillLoad() {
+    const storageKey = `calcite-tab-nav-${this.storageId}`;
+    if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
+      const storedTab = JSON.parse(localStorage.getItem(storageKey));
+      this.selectedTab = storedTab;
+    }
+  }
+  componentWillRender() {
+    const { parentTabsEl } = this;
+    this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
+    this.position = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.position;
+    this.scale = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.scale;
+    this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
+    // fix issue with active tab-title not lining up with blue indicator
+    if (this.selectedTabEl) {
+      this.updateOffsetPosition();
+    }
+  }
+  componentDidRender() {
+    // if every tab title is active select the first tab.
+    if (this.tabTitles.length &&
+      this.tabTitles.every((title) => !title.active) &&
+      !this.selectedTab) {
+      this.tabTitles[0].getTabIdentifier().then((tab) => {
+        this.calciteInternalTabChange.emit({
+          tab
+        });
+      });
+    }
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    const width = `${this.indicatorWidth}px`;
+    const offset = `${this.indicatorOffset}px`;
+    const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
+    return (h(Host, { role: "tablist" }, h("div", { class: "tab-nav", onScroll: this.handleContainerScroll, ref: (el) => (this.tabNavEl = el) }, h("div", { class: "tab-nav-active-indicator-container", ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { class: "tab-nav-active-indicator", ref: (el) => (this.activeIndicatorEl = el), style: indicatorStyle })), h("slot", null))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  focusPreviousTabHandler(event) {
+    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
+    const previousTab = this.enabledTabTitles[currentIndex - 1] ||
+      this.enabledTabTitles[this.enabledTabTitles.length - 1];
+    previousTab === null || previousTab === void 0 ? void 0 : previousTab.focus();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  focusNextTabHandler(event) {
+    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
+    const nextTab = this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0];
+    nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  internalActivateTabHandler(event) {
+    this.selectedTab = event.detail.tab
+      ? event.detail.tab
+      : this.getIndexOfTabTitle(event.target);
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  activateTabHandler(event) {
+    this.calciteTabChange.emit({
+      tab: this.selectedTab
+    });
+    event.stopPropagation();
+    event.preventDefault();
+  }
+  /**
+   * Check for active tabs on register and update selected
+   *
+   * @param event
+   */
+  updateTabTitles(event) {
+    if (event.target.active) {
+      this.selectedTab = event.detail;
+    }
+  }
+  globalInternalTabChangeHandler(event) {
+    if (this.syncId &&
+      event.target !== this.el &&
+      event.target.syncId === this.syncId &&
+      this.selectedTab !== event.detail.tab) {
+      this.selectedTab = event.detail.tab;
+    }
+    event.stopPropagation();
+  }
+  iconStartChangeHandler() {
+    this.updateActiveWidth();
+  }
+  updateOffsetPosition() {
+    var _a, _b, _c, _d, _e;
+    const dir = getElementDir(this.el);
+    const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
+    const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+    const offsetRight = navWidth - (tabLeft + tabWidth);
+    this.indicatorOffset =
+      dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
+  }
+  updateActiveWidth() {
+    var _a;
+    this.indicatorWidth = (_a = this.selectedTabEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+  }
+  getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
+    // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
+    // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.
+    return tabTitles.indexOf(el);
+  }
+  async getTabTitleById(id) {
+    return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {
+      return this.tabTitles[ids.indexOf(id)];
+    });
+  }
+  get tabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title");
+  }
+  get enabledTabTitles() {
+    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])");
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "selectedTab": ["selectedTabChanged"],
+    "selectedTabEl": ["selectedTabElChanged"]
+  }; }
+  static get style() { return tabNavCss; }
+}, [1, "calcite-tab-nav", {
+    "storageId": [513, "storage-id"],
+    "syncId": [513, "sync-id"],
+    "scale": [1537],
+    "layout": [1537],
+    "position": [1537],
+    "bordered": [1540],
+    "indicatorOffset": [1026, "indicator-offset"],
+    "indicatorWidth": [1026, "indicator-width"],
+    "selectedTab": [32],
+    "selectedTabEl": [32]
+  }, [[0, "calciteInternalTabsFocusPrevious", "focusPreviousTabHandler"], [0, "calciteInternalTabsFocusNext", "focusNextTabHandler"], [0, "calciteInternalTabsActivate", "internalActivateTabHandler"], [0, "calciteTabsActivate", "activateTabHandler"], [0, "calciteInternalTabTitleRegister", "updateTabTitles"], [16, "calciteInternalTabChange", "globalInternalTabChangeHandler"], [0, "calciteInternalTabIconChanged", "iconStartChangeHandler"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["calcite-tab-nav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "calcite-tab-nav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TabNav);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { TabNav as T, defineCustomElement as d };