@esri/solutions-components 0.2.1 → 0.2.2

package/dist/components/store-manager.js

@@ -1,85 +0,0 @@
-/*!
- * 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 };
-
-//# sourceMappingURL=store-manager.js.map

package/dist/components/store-manager.js.map

@@ -1 +0,0 @@
-{"file":"store-manager.js","mappings":";;;;;;;MAmCaA,cAAY;;;;;iBAmByB,EAAE;qBAKS,EAAE;;;;;;;;EAa7D,iBAAiB;IACf,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;;;;EAKD,MAAM;IACJ,QAAQ,IAAI,EAAE;GACf;;;;;EAsBS,kBAAkB;;IAE1B,IAAI,CAAC,cAAc,GAAG,IAAI,gBAAgB,CAAC,EAAE;MAC3C,EAAE,CAAC,IAAI,CAAC,QAAQ;QACd,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;QACzD,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO;UACtE,QAAQ,KAAK,QAAQ,CAAC,QAAQ,IAAI,QAAQ,KAAK,EAAE,EAAE;;;;;;;;;;;;UAYnD,OAAO,IAAI,CAAC;SACb;OACF,CAAC,CAAA;KACH,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,EAAE,CAAC,CAAC;GACrF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StoreManager"],"sources":["./src/components/store-manager/store-manager.tsx"],"sourcesContent":["/** @license\r\n * Copyright 2022 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\n/**\r\n * The json-editor componet leverages a stencil/store to manage data.\r\n * If a component uses the json-editor but does not have logic to hydrate the store this component can be used.\r\n * It will create and hydrate the store based on the value provided.\r\n *\r\n * The value must be a string so it can be observed by the MutationObserver implemented below.\r\n * The observer does not notify when passing complex attributes as you can with stencil.\r\n *\r\n *\r\n*/\r\n\r\nimport { Component, Element, Event, EventEmitter, Prop, VNode } from '@stencil/core';\r\n//import { state } from '../../utils/editStore';\r\nimport { /*getItemDataAsJson,*/ UserSession } from '@esri/solution-common';\r\n\r\n@Component({\r\n  tag: 'store-manager',\r\n  shadow: false\r\n})\r\nexport class StoreManager {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Host element access\r\n  //\r\n  //--------------------------------------------------------------------------\r\n  @Element() el: HTMLStoreManagerElement;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Contains source json as a string\r\n   *\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) value = \"\";\r\n\r\n  /**\r\n   * Templates for the current solution\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) templates: any[] = [];\r\n\r\n  /**\r\n   * Credentials for requests\r\n   */\r\n  @Prop({ mutable: true }) authentication: UserSession;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Lifecycle\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  connectedCallback(): void {\r\n    this._initValueObserver();\r\n  }\r\n\r\n  /**\r\n   * Renders the component.\r\n   */\r\n  render(): VNode {\r\n    return (null);\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  @Event() stateLoaded: EventEmitter<any>;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Private Methods\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  protected _valueObserver;\r\n\r\n  /**\r\n   * Initialize the observer that will monitor and respond to changes in the value.\r\n   * When we get a new value we are dealinmg with a new solution and need to fetch the items data and load the state.\r\n   */\r\n  protected _initValueObserver(): void {\r\n    //const self = this;\r\n    this._valueObserver = new MutationObserver(ml => {\r\n      ml.some(mutation => {\r\n        const newValue = mutation.target[mutation.attributeName];\r\n        if (mutation.type === 'attributes' && mutation.attributeName === \"value\" &&\r\n          newValue !== mutation.oldValue && newValue !== \"\") {\r\n          /*\r\n          const v = JSON.parse(newValue);\r\n          // eslint-disable-next-line @typescript-eslint/no-floating-promises\r\n          getItemDataAsJson(v, self.authentication).then(data => {\r\n            state.models = getModels(Array.isArray(v) ? v : [v], self.authentication, v);\r\n            state.featureServices = getFeatureServices(Array.isArray(v) ? v : [v])\r\n            state.get(\"spatialReferenceInfo\") = getSpatialReferenceInfo(state.featureServices, data);\r\n            self.templates = v;\r\n            self.stateLoaded.emit(state);\r\n          });\r\n          */\r\n          return true;\r\n        }\r\n      })\r\n    });\r\n    this._valueObserver.observe(this.el, { attributes: true, attributeOldValue: true });\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/switch.js

@@ -1,141 +0,0 @@
-/*!
- * 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 };
-
-//# sourceMappingURL=switch.js.map

package/dist/components/switch.js.map

@@ -1 +0,0 @@
-{"file":"switch.js","mappings":";;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,27HAA27H;;MCWh8H,MAAM;EACjB;;;;;;;;;;;IAOE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;;IAEtB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;;;;;;IAMjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;;IAEtB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;;;;;;IAMrB,IAAI,CAAC,cAAc,GAAG,CAAC,KAAK;MAC1B,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAChD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;KACF,CAAC;IACF,IAAI,CAAC,YAAY,GAAG;MAClB,IAAI,CAAC,MAAM,EAAE,CAAC;KACf,CAAC;IACF,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;KACpB,CAAC;GACH;EACD,eAAe,CAAC,QAAQ;IACtB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;GACzB;;;;;;;EAOD,MAAM,QAAQ;IACZ,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GAC7B;EACD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,MAAM,EAAE,CAAC;MACd,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;GACF;EACD,MAAM;IACJ,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;MAC5B,QAAQ,EAAE,IAAI,CAAC,OAAO;KACvB,CAAC,CAAC;GACJ;;;;;;EAMD,iBAAiB;IACf,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC;IACvD,IAAI,gBAAgB,EAAE;;MAEpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,gBAAgB,CAAC;KACjD;IACD,YAAY,CAAC,IAAI,CAAC,CAAC;IACnB,WAAW,CAAC,IAAI,CAAC,CAAC;GACnB;EACD,oBAAoB;IAClB,eAAe,CAAC,IAAI,CAAC,CAAC;IACtB,cAAc,CAAC,IAAI,CAAC,CAAC;GACtB;EACD,kBAAkB;IAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;GAC7B;;;;;;EAMD,MAAM;IACJ,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,YAAY,EAAE,YAAY,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;GACjW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./node_modules/@esri/calcite-components/dist/collection/components/switch/switch.css?tag=calcite-switch&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/switch/switch.js"],"sourcesContent":["/* mixins & extensions */\n@keyframes in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes in-down {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, -5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-up {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, 5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-scale {\n  0% {\n    opacity: 0;\n    transform: scale3D(0.95, 0.95, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3D(1, 1, 1);\n  }\n}\n:root {\n  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n  opacity: 0;\n  animation-fill-mode: both;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n  animation-name: in;\n}\n\n.calcite-animate__in-down {\n  animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n  animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n  animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0.01;\n  }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n  --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  cursor: default;\n  -webkit-user-select: none;\n          user-select: none;\n  opacity: var(--calcite-ui-opacity-disabled);\n}\n\n:host([scale=s]) .container {\n  block-size: 0.75rem;\n}\n:host([scale=s]) .track {\n  block-size: 0.75rem;\n  inline-size: 1.5rem;\n}\n:host([scale=s]) .handle {\n  block-size: 0.5rem;\n  inline-size: 0.5rem;\n}\n\n:host([scale=m]) .container {\n  block-size: 1rem;\n}\n:host([scale=m]) .track {\n  block-size: 1rem;\n  inline-size: 2rem;\n}\n:host([scale=m]) .handle {\n  block-size: 0.75rem;\n  inline-size: 0.75rem;\n}\n\n:host([scale=l]) .container {\n  block-size: 1.5rem;\n}\n:host([scale=l]) .track {\n  block-size: 1.5rem;\n  inline-size: 3rem;\n}\n:host([scale=l]) .handle {\n  block-size: 1.25rem;\n  inline-size: 1.25rem;\n}\n\n:host {\n  position: relative;\n  display: inline-block;\n  inline-size: auto;\n  cursor: pointer;\n  -webkit-user-select: none;\n          user-select: none;\n  vertical-align: middle;\n  tap-highlight-color: transparent;\n}\n\n:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled] {\n  /* prevent opacity stacking */\n  opacity: 1;\n}\n\n:host {\n  inline-size: auto;\n  outline-color: transparent;\n}\n\n.track {\n  pointer-events: none;\n  position: relative;\n  box-sizing: border-box;\n  display: inline-block;\n  border-radius: 9999px;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--calcite-ui-border-2);\n  background-color: var(--calcite-ui-foreground-2);\n  vertical-align: top;\n  transition-property: all;\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.handle {\n  pointer-events: none;\n  position: absolute;\n  display: block;\n  border-radius: 9999px;\n  border-width: 2px;\n  border-style: solid;\n  border-color: var(--calcite-ui-border-input);\n  background-color: var(--calcite-ui-foreground-1);\n  transition-property: all;\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  inset-block-start: -1px;\n  inset-inline: -1px auto;\n}\n\n:host(:hover) .handle, \n:host(:focus) .handle {\n  border-color: var(--calcite-ui-brand);\n  box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);\n}\n\n:host([checked]) .track {\n  border-color: var(--calcite-ui-brand-hover);\n  background-color: var(--calcite-ui-brand);\n}\n:host([checked]) .handle {\n  border-color: var(--calcite-ui-brand);\n  inset-inline: auto -1px;\n}\n\n:host([checked]:hover) .track {\n  border-color: var(--calcite-ui-brand-hover);\n  background-color: var(--calcite-ui-brand);\n}\n:host([checked]:hover) .handle {\n  border-color: var(--calcite-ui-brand-hover);\n  box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);\n}\n\n@media (forced-colors: active) {\n  :host([checked]) .track {\n    background-color: canvasText;\n  }\n}\n.container:focus {\n  outline: 2px solid var(--calcite-ui-brand);\n  outline-offset: 2px;\n}\n\n::slotted(input[slot=hidden-form-input]) {\n  margin: 0 !important;\n  opacity: 0 !important;\n  outline: none !important;\n  padding: 0 !important;\n  position: absolute !important;\n  inset: 0 !important;\n  transform: none !important;\n  -webkit-appearance: none !important;\n  z-index: -1 !important;\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { h, Host } from \"@stencil/core\";\nimport { focusElement, toAriaBoolean } from \"../../utils/dom\";\nimport { connectLabel, disconnectLabel, getLabelText } from \"../../utils/label\";\nimport { connectForm, disconnectForm, HiddenFormInputSlot } from \"../../utils/form\";\nimport { updateHostInteraction } from \"../../utils/interactive\";\nimport { isActivationKey } from \"../../utils/key\";\nexport class Switch {\n  constructor() {\n    //--------------------------------------------------------------------------\n    //\n    //  Properties\n    //\n    //--------------------------------------------------------------------------\n    /** When `true`, interaction is prevented and the component is displayed with lower opacity. */\n    this.disabled = false;\n    /** Specifies the size of the component. */\n    this.scale = \"m\";\n    /**\n     * When `true`, the component is checked.\n     *\n     * @deprecated use `checked` instead.\n     */\n    this.switched = false;\n    /** When `true`, the component is checked. */\n    this.checked = false;\n    //--------------------------------------------------------------------------\n    //\n    //  Private Methods\n    //\n    //--------------------------------------------------------------------------\n    this.keyDownHandler = (event) => {\n      if (!this.disabled && isActivationKey(event.key)) {\n        this.toggle();\n        event.preventDefault();\n      }\n    };\n    this.clickHandler = () => {\n      this.toggle();\n    };\n    this.setSwitchEl = (el) => {\n      this.switchEl = el;\n    };\n  }\n  switchedWatcher(switched) {\n    this.checked = switched;\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n  /** Sets focus on the component. */\n  async setFocus() {\n    focusElement(this.switchEl);\n  }\n  onLabelClick() {\n    if (!this.disabled) {\n      this.toggle();\n      this.setFocus();\n    }\n  }\n  toggle() {\n    this.checked = !this.checked;\n    this.calciteSwitchChange.emit({\n      switched: this.checked\n    });\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n  connectedCallback() {\n    const initiallyChecked = this.checked || this.switched;\n    if (initiallyChecked) {\n      // if either prop is set, we ensure both are synced initially\n      this.switched = this.checked = initiallyChecked;\n    }\n    connectLabel(this);\n    connectForm(this);\n  }\n  disconnectedCallback() {\n    disconnectLabel(this);\n    disconnectForm(this);\n  }\n  componentDidRender() {\n    updateHostInteraction(this);\n  }\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n  render() {\n    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 }))));\n  }\n  static get is() { return \"calcite-switch\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"switch.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"switch.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"disabled\": {\n        \"type\": \"boolean\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, interaction is prevented and the component is displayed with lower opacity.\"\n        },\n        \"attribute\": \"disabled\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"label\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Accessible name for the component.\"\n        },\n        \"attribute\": \"label\",\n        \"reflect\": false\n      },\n      \"name\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the name of the component on form submission.\"\n        },\n        \"attribute\": \"name\",\n        \"reflect\": true\n      },\n      \"scale\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"Scale\",\n          \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\"\",\n          \"references\": {\n            \"Scale\": {\n              \"location\": \"import\",\n              \"path\": \"../interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the size of the component.\"\n        },\n        \"attribute\": \"scale\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"m\\\"\"\n      },\n      \"switched\": {\n        \"type\": \"boolean\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"deprecated\",\n              \"text\": \"use `checked` instead.\"\n            }],\n          \"text\": \"When `true`, the component is checked.\"\n        },\n        \"attribute\": \"switched\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"checked\": {\n        \"type\": \"boolean\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"When `true`, the component is checked.\"\n        },\n        \"attribute\": \"checked\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"value\": {\n        \"type\": \"any\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"any\",\n          \"resolved\": \"any\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"The component's value.\"\n        },\n        \"attribute\": \"value\",\n        \"reflect\": false\n      }\n    };\n  }\n  static get events() {\n    return [{\n        \"method\": \"calciteSwitchChange\",\n        \"name\": \"calciteSwitchChange\",\n        \"bubbles\": true,\n        \"cancelable\": false,\n        \"composed\": true,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Fires when the `checked` value has changed.\\n\\n**Note:** The event payload is deprecated, use the component's `checked` property instead.\"\n        },\n        \"complexType\": {\n          \"original\": \"DeprecatedEventPayload\",\n          \"resolved\": \"any\",\n          \"references\": {\n            \"DeprecatedEventPayload\": {\n              \"location\": \"import\",\n              \"path\": \"../interfaces\"\n            }\n          }\n        }\n      }];\n  }\n  static get methods() {\n    return {\n      \"setFocus\": {\n        \"complexType\": {\n          \"signature\": \"() => Promise<void>\",\n          \"parameters\": [],\n          \"references\": {\n            \"Promise\": {\n              \"location\": \"global\"\n            }\n          },\n          \"return\": \"Promise<void>\"\n        },\n        \"docs\": {\n          \"text\": \"Sets focus on the component.\",\n          \"tags\": []\n        }\n      }\n    };\n  }\n  static get elementRef() { return \"el\"; }\n  static get watchers() {\n    return [{\n        \"propName\": \"switched\",\n        \"methodName\": \"switchedWatcher\"\n      }];\n  }\n}\n"],"version":3}

package/dist/components/tab-nav.js

@@ -1,243 +0,0 @@
-/*!
- * 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 };
-
-//# sourceMappingURL=tab-nav.js.map

package/dist/components/tab-nav.js.map

@@ -1 +0,0 @@
-{"file":"tab-nav.js","mappings":"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","names":[],"sources":["./node_modules/@esri/calcite-components/dist/collection/components/tab-nav/tab-nav.css?tag=calcite-tab-nav&encapsulation=shadow","./node_modules/@esri/calcite-components/dist/collection/components/tab-nav/tab-nav.js"],"sourcesContent":["/* mixins & extensions */\n@keyframes in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes in-down {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, -5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-up {\n  0% {\n    opacity: 0;\n    transform: translate3D(0, 5px, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translate3D(0, 0, 0);\n  }\n}\n@keyframes in-scale {\n  0% {\n    opacity: 0;\n    transform: scale3D(0.95, 0.95, 1);\n  }\n  100% {\n    opacity: 1;\n    transform: scale3D(1, 1, 1);\n  }\n}\n:root {\n  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);\n  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));\n  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));\n}\n\n.calcite-animate {\n  opacity: 0;\n  animation-fill-mode: both;\n  animation-duration: var(--calcite-animation-timing);\n}\n\n.calcite-animate__in {\n  animation-name: in;\n}\n\n.calcite-animate__in-down {\n  animation-name: in-down;\n}\n\n.calcite-animate__in-up {\n  animation-name: in-up;\n}\n\n.calcite-animate__in-scale {\n  animation-name: in-scale;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0.01;\n  }\n}\n/**\n* Currently only used in Checkbox.\n*/\n:root {\n  --calcite-floating-ui-transition: var(--calcite-animation-timing);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host {\n  position: relative;\n  display: flex;\n}\n\n:host([scale=s]) {\n  min-block-size: 1.5rem;\n}\n\n:host([scale=m]) {\n  min-block-size: 2rem;\n}\n\n:host([scale=l]) {\n  min-block-size: 2.75rem;\n}\n\n.tab-nav {\n  display: flex;\n  inline-size: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n}\n\n.tab-nav-active-indicator-container {\n  position: absolute;\n  inset-inline: 0px;\n  inset-block-end: 0px;\n  block-size: 0.125rem;\n  inline-size: 100%;\n  overflow: hidden;\n}\n\n.tab-nav-active-indicator {\n  position: absolute;\n  inset-block-end: 0px;\n  display: block;\n  block-size: 0.125rem;\n  background-color: var(--calcite-ui-brand);\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n:host([position=below]) .tab-nav-active-indicator {\n  inset-block-end: unset;\n  inset-block-start: 0px;\n}\n\n:host([position=bottom]) .tab-nav-active-indicator {\n  inset-block-end: unset;\n  inset-block-start: 0px;\n}\n\n:host([position=below]) .tab-nav-active-indicator-container {\n  inset-block-start: 0px;\n  inset-block-end: unset;\n}\n\n:host([position=bottom]) .tab-nav-active-indicator-container {\n  inset-block-end: unset;\n  inset-block-start: 0px;\n}\n\n:host([bordered]) .tab-nav-active-indicator-container {\n  inset-block-end: unset;\n}\n\n:host([bordered][position=below]) .tab-nav-active-indicator-container {\n  inset-block-end: 0;\n  inset-block-start: unset;\n}\n\n:host([bordered][position=bottom]) .tab-nav-active-indicator-container {\n  inset-block-end: 0;\n  inset-block-start: unset;\n}\n\n@media (forced-colors: active) {\n  .tab-nav-active-indicator {\n    background-color: highlight;\n  }\n}","/*!\n * All material copyright ESRI, All Rights Reserved, unless otherwise specified.\n * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.\n * v1.0.0-beta.97\n */\nimport { h, Host } from \"@stencil/core\";\nimport { getElementDir, filterDirectChildren } from \"../../utils/dom\";\nimport { createObserver } from \"../../utils/observers\";\n/**\n * @slot - A slot for adding `calcite-tab-title`s.\n */\nexport class TabNav {\n  constructor() {\n    /**\n     * @internal\n     */\n    this.scale = \"m\";\n    /**\n     * @internal\n     */\n    this.layout = \"inline\";\n    /**\n     * @internal\n     */\n    this.position = \"bottom\";\n    /**\n     * @internal\n     */\n    this.bordered = false;\n    this.animationActiveDuration = 0.3;\n    this.resizeObserver = createObserver(\"resize\", () => {\n      // remove active indicator transition duration during resize to prevent wobble\n      this.activeIndicatorEl.style.transitionDuration = \"0s\";\n      this.updateActiveWidth();\n      this.updateOffsetPosition();\n    });\n    //--------------------------------------------------------------------------\n    //\n    //  Private Methods\n    //\n    //--------------------------------------------------------------------------\n    this.handleContainerScroll = () => {\n      // remove active indicator transition duration while container is scrolling to prevent wobble\n      this.activeIndicatorEl.style.transitionDuration = \"0s\";\n      this.updateOffsetPosition();\n    };\n  }\n  async selectedTabChanged() {\n    if (localStorage &&\n      this.storageId &&\n      this.selectedTab !== undefined &&\n      this.selectedTab !== null) {\n      localStorage.setItem(`calcite-tab-nav-${this.storageId}`, JSON.stringify(this.selectedTab));\n    }\n    this.calciteInternalTabChange.emit({\n      tab: this.selectedTab\n    });\n    this.selectedTabEl = await this.getTabTitleById(this.selectedTab);\n  }\n  selectedTabElChanged() {\n    this.updateOffsetPosition();\n    this.updateActiveWidth();\n    // reset the animation time on tab selection\n    this.activeIndicatorEl.style.transitionDuration = `${this.animationActiveDuration}s`;\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n  connectedCallback() {\n    var _a;\n    this.parentTabsEl = this.el.closest(\"calcite-tabs\");\n    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);\n  }\n  disconnectedCallback() {\n    var _a;\n    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();\n  }\n  componentWillLoad() {\n    const storageKey = `calcite-tab-nav-${this.storageId}`;\n    if (localStorage && this.storageId && localStorage.getItem(storageKey)) {\n      const storedTab = JSON.parse(localStorage.getItem(storageKey));\n      this.selectedTab = storedTab;\n    }\n  }\n  componentWillRender() {\n    const { parentTabsEl } = this;\n    this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;\n    this.position = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.position;\n    this.scale = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.scale;\n    this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;\n    // fix issue with active tab-title not lining up with blue indicator\n    if (this.selectedTabEl) {\n      this.updateOffsetPosition();\n    }\n  }\n  componentDidRender() {\n    // if every tab title is active select the first tab.\n    if (this.tabTitles.length &&\n      this.tabTitles.every((title) => !title.active) &&\n      !this.selectedTab) {\n      this.tabTitles[0].getTabIdentifier().then((tab) => {\n        this.calciteInternalTabChange.emit({\n          tab\n        });\n      });\n    }\n  }\n  render() {\n    const dir = getElementDir(this.el);\n    const width = `${this.indicatorWidth}px`;\n    const offset = `${this.indicatorOffset}px`;\n    const indicatorStyle = dir !== \"rtl\" ? { width, left: offset } : { width, right: offset };\n    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))));\n  }\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n  focusPreviousTabHandler(event) {\n    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);\n    const previousTab = this.enabledTabTitles[currentIndex - 1] ||\n      this.enabledTabTitles[this.enabledTabTitles.length - 1];\n    previousTab === null || previousTab === void 0 ? void 0 : previousTab.focus();\n    event.stopPropagation();\n    event.preventDefault();\n  }\n  focusNextTabHandler(event) {\n    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);\n    const nextTab = this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0];\n    nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();\n    event.stopPropagation();\n    event.preventDefault();\n  }\n  internalActivateTabHandler(event) {\n    this.selectedTab = event.detail.tab\n      ? event.detail.tab\n      : this.getIndexOfTabTitle(event.target);\n    event.stopPropagation();\n    event.preventDefault();\n  }\n  activateTabHandler(event) {\n    this.calciteTabChange.emit({\n      tab: this.selectedTab\n    });\n    event.stopPropagation();\n    event.preventDefault();\n  }\n  /**\n   * Check for active tabs on register and update selected\n   *\n   * @param event\n   */\n  updateTabTitles(event) {\n    if (event.target.active) {\n      this.selectedTab = event.detail;\n    }\n  }\n  globalInternalTabChangeHandler(event) {\n    if (this.syncId &&\n      event.target !== this.el &&\n      event.target.syncId === this.syncId &&\n      this.selectedTab !== event.detail.tab) {\n      this.selectedTab = event.detail.tab;\n    }\n    event.stopPropagation();\n  }\n  iconStartChangeHandler() {\n    this.updateActiveWidth();\n  }\n  updateOffsetPosition() {\n    var _a, _b, _c, _d, _e;\n    const dir = getElementDir(this.el);\n    const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;\n    const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;\n    const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;\n    const offsetRight = navWidth - (tabLeft + tabWidth);\n    this.indicatorOffset =\n      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);\n  }\n  updateActiveWidth() {\n    var _a;\n    this.indicatorWidth = (_a = this.selectedTabEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;\n  }\n  getIndexOfTabTitle(el, tabTitles = this.tabTitles) {\n    // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.\n    // However, when doing relative index operations, it makes sense to pass in this.enabledTabTitles as the 2nd arg.\n    return tabTitles.indexOf(el);\n  }\n  async getTabTitleById(id) {\n    return Promise.all(this.tabTitles.map((el) => el.getTabIdentifier())).then((ids) => {\n      return this.tabTitles[ids.indexOf(id)];\n    });\n  }\n  get tabTitles() {\n    return filterDirectChildren(this.el, \"calcite-tab-title\");\n  }\n  get enabledTabTitles() {\n    return filterDirectChildren(this.el, \"calcite-tab-title:not([disabled])\");\n  }\n  static get is() { return \"calcite-tab-nav\"; }\n  static get encapsulation() { return \"shadow\"; }\n  static get originalStyleUrls() {\n    return {\n      \"$\": [\"tab-nav.scss\"]\n    };\n  }\n  static get styleUrls() {\n    return {\n      \"$\": [\"tab-nav.css\"]\n    };\n  }\n  static get properties() {\n    return {\n      \"storageId\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies the name when saving selected `calcite-tab` data to `localStorage`.\"\n        },\n        \"attribute\": \"storage-id\",\n        \"reflect\": true\n      },\n      \"syncId\": {\n        \"type\": \"string\",\n        \"mutable\": false,\n        \"complexType\": {\n          \"original\": \"string\",\n          \"resolved\": \"string\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [],\n          \"text\": \"Specifies text to update multiple components to keep in sync if one changes.\"\n        },\n        \"attribute\": \"sync-id\",\n        \"reflect\": true\n      },\n      \"scale\": {\n        \"type\": \"string\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"Scale\",\n          \"resolved\": \"\\\"l\\\" | \\\"m\\\" | \\\"s\\\"\",\n          \"references\": {\n            \"Scale\": {\n              \"location\": \"import\",\n              \"path\": \"../interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"scale\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"m\\\"\"\n      },\n      \"layout\": {\n        \"type\": \"string\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"TabLayout\",\n          \"resolved\": \"\\\"center\\\" | \\\"inline\\\"\",\n          \"references\": {\n            \"TabLayout\": {\n              \"location\": \"import\",\n              \"path\": \"../tabs/interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"layout\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"inline\\\"\"\n      },\n      \"position\": {\n        \"type\": \"string\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"TabPosition\",\n          \"resolved\": \"\\\"above\\\" | \\\"below\\\" | \\\"bottom\\\" | \\\"top\\\"\",\n          \"references\": {\n            \"TabPosition\": {\n              \"location\": \"import\",\n              \"path\": \"../tabs/interfaces\"\n            }\n          }\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"position\",\n        \"reflect\": true,\n        \"defaultValue\": \"\\\"bottom\\\"\"\n      },\n      \"bordered\": {\n        \"type\": \"boolean\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"boolean\",\n          \"resolved\": \"boolean\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"bordered\",\n        \"reflect\": true,\n        \"defaultValue\": \"false\"\n      },\n      \"indicatorOffset\": {\n        \"type\": \"number\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"number\",\n          \"resolved\": \"number\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"indicator-offset\",\n        \"reflect\": false\n      },\n      \"indicatorWidth\": {\n        \"type\": \"number\",\n        \"mutable\": true,\n        \"complexType\": {\n          \"original\": \"number\",\n          \"resolved\": \"number\",\n          \"references\": {}\n        },\n        \"required\": false,\n        \"optional\": false,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"attribute\": \"indicator-width\",\n        \"reflect\": false\n      }\n    };\n  }\n  static get states() {\n    return {\n      \"selectedTab\": {},\n      \"selectedTabEl\": {}\n    };\n  }\n  static get events() {\n    return [{\n        \"method\": \"calciteTabChange\",\n        \"name\": \"calciteTabChange\",\n        \"bubbles\": true,\n        \"cancelable\": false,\n        \"composed\": true,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"see\",\n              \"text\": \"[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)\"\n            }],\n          \"text\": \"Emits when the selected `calcite-tab` changes.\"\n        },\n        \"complexType\": {\n          \"original\": \"TabChangeEventDetail\",\n          \"resolved\": \"TabChangeEventDetail\",\n          \"references\": {\n            \"TabChangeEventDetail\": {\n              \"location\": \"import\",\n              \"path\": \"../tab/interfaces\"\n            }\n          }\n        }\n      }, {\n        \"method\": \"calciteInternalTabChange\",\n        \"name\": \"calciteInternalTabChange\",\n        \"bubbles\": true,\n        \"cancelable\": false,\n        \"composed\": true,\n        \"docs\": {\n          \"tags\": [{\n              \"name\": \"internal\",\n              \"text\": undefined\n            }],\n          \"text\": \"\"\n        },\n        \"complexType\": {\n          \"original\": \"TabChangeEventDetail\",\n          \"resolved\": \"TabChangeEventDetail\",\n          \"references\": {\n            \"TabChangeEventDetail\": {\n              \"location\": \"import\",\n              \"path\": \"../tab/interfaces\"\n            }\n          }\n        }\n      }];\n  }\n  static get elementRef() { return \"el\"; }\n  static get watchers() {\n    return [{\n        \"propName\": \"selectedTab\",\n        \"methodName\": \"selectedTabChanged\"\n      }, {\n        \"propName\": \"selectedTabEl\",\n        \"methodName\": \"selectedTabElChanged\"\n      }];\n  }\n  static get listeners() {\n    return [{\n        \"name\": \"calciteInternalTabsFocusPrevious\",\n        \"method\": \"focusPreviousTabHandler\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabsFocusNext\",\n        \"method\": \"focusNextTabHandler\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabsActivate\",\n        \"method\": \"internalActivateTabHandler\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteTabsActivate\",\n        \"method\": \"activateTabHandler\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabTitleRegister\",\n        \"method\": \"updateTabTitles\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabChange\",\n        \"method\": \"globalInternalTabChangeHandler\",\n        \"target\": \"body\",\n        \"capture\": false,\n        \"passive\": false\n      }, {\n        \"name\": \"calciteInternalTabIconChanged\",\n        \"method\": \"iconStartChangeHandler\",\n        \"target\": undefined,\n        \"capture\": false,\n        \"passive\": false\n      }];\n  }\n}\n"],"version":3}