@nanoporetech-digital/components 1.15.6 → 2.1.0

package/dist/components/nano-spinner.d.ts

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

package/dist/components/nano-spinner.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { S as Spinner, d as defineCustomElement$1 } from './spinner.js';
+
+const NanoSpinner = Spinner;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSpinner, defineCustomElement };
+
+//# sourceMappingURL=nano-spinner.js.map

package/dist/components/nano-spinner.js.map

@@ -0,0 +1 @@
+{"file":"nano-spinner.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-sticker.d.ts

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

package/dist/components/nano-sticker.js

@@ -0,0 +1,11 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { S as Sticker, d as defineCustomElement$1 } from './sticker.js';
+
+const NanoSticker = Sticker;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoSticker, defineCustomElement };
+
+//# sourceMappingURL=nano-sticker.js.map

package/dist/components/nano-sticker.js.map

@@ -0,0 +1 @@
+{"file":"nano-sticker.js","mappings":";;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/nano-tab-content.d.ts

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

package/dist/components/nano-tab-content.js

@@ -0,0 +1,49 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const tabContentCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:opacity 0.3s ease-in-out forwards;animation:opacity 0.3s ease-in-out forwards;opacity:1}@media only screen and (max-width: 768px){:host([animation-dir=left]){-webkit-animation:slide-right 0.3s ease-in-out;animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){-webkit-animation:slide-left 0.3s ease-in-out;animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@-webkit-keyframes opacity{0%{opacity:0}100%{opacity:100%}}@keyframes opacity{0%{opacity:0}100%{opacity:100%}}@-webkit-keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none !important;animation:none !important}}";
+
+let id = 0;
+let TabPanel = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tabContentId = `nano-tab-content-${++id}`;
+    /** The tab panel's name. */
+    this.name = '';
+    /** When true, the tab content will be shown. */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { id: this.host.id || this.tabContentId, style: { display: this.active ? 'block' : 'none' }, role: "tabpanel", "aria-hidden": this.active ? 'false' : 'true' }, h("div", { part: "base", class: "nano-tab-content" }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return tabContentCss; }
+};
+TabPanel = /*@__PURE__*/ proxyCustomElement(TabPanel, [1, "nano-tab-content", {
+    "name": [513],
+    "active": [516]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-tab-content"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-tab-content":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TabPanel);
+      }
+      break;
+  } });
+}
+
+const NanoTabContent = TabPanel;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoTabContent, defineCustomElement };
+
+//# sourceMappingURL=nano-tab-content.js.map

package/dist/components/nano-tab-content.js.map

@@ -0,0 +1 @@
+{"file":"nano-tab-content.js","mappings":";;;;;AAAA,MAAM,aAAa,GAAG,u/DAAu/D;;ACS7gE,IAAI,EAAE,GAAG,CAAC,CAAC;IAUE,QAAQ;EALrB;;;;IAMU,iBAAY,GAAG,oBAAoB,EAAE,EAAE,EAAE,CAAC;;IAKzB,SAAI,GAAG,EAAE,CAAC;;IAGV,WAAM,GAAG,KAAK,CAAC;GAgBzC;EAdC,MAAM;IACJ,QACE,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EACrC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAClD,IAAI,EAAC,UAAU,iBACF,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,IAE3C,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,IACvC,eAAQ,CACJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","./src/components/tabs/tab-content.tsx"],"sourcesContent":[":host {\n  display: block;\n  transform: translate3d(0, 0, 0);\n  animation: opacity 0.3s ease-in-out forwards;\n  opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 100%;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop({ reflect: true }) name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n      >\n        <div part=\"base\" class=\"nano-tab-content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nano-tab-group.d.ts

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

package/dist/components/nano-tab-group.js

@@ -0,0 +1,460 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { i as index } from './ResizeObserver.es.js';
+import { s as scrollIntoView } from './scroll.js';
+import { f as focusVisible } from './focus-visible.js';
+import { d as displayTransition } from './index2.js';
+import { C as ComponentStore } from './component-store.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { g as getDirectChildren, a as getOffset } from './dom.js';
+import { c as createColorClasses } from './theme.js';
+
+const tabGroupCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-track-color:#e4e6e8;--indicator-size:0;--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background-rgb:var(--nano-layer-bg-rgb, 255, 255, 255);--scroll-btn-color:\"currentColor\";--content-padding:2rem 2.5rem;--content-bg:rgb(var(--background-rgb));--content-border-radius:var(--border-radius);--tabs-padding-start:2.5rem;--tabs-padding-end:2.5rem;--tabs-padding-top:0;--tabs-padding-bottom:0;--tabs-container-bg:\"transparent\";--tabs-bg-rgb:var(--background-rgb);--tab-border-radius:var(--border-radius);--tab-text-color:#007495;--shadow-opacity:0.1;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host(.legacy) ::slotted(nano-tab){--tab-indicator-color:#90c6e7;--border-radius:3px;--tab-indicator-size:5px;--bg-rgb:255, 255, 255}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:-webkit-box;display:-ms-flexbox;display:flex;border-radius:0;width:100%;-webkit-box-flex:inherit;-ms-flex:inherit;flex:inherit}.nano-tab-group__tabs{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;width:100%}.nano-tab-group__active-tab-indicator{position:absolute;-webkit-transition:var(--indicator-transition) transform ease;transition:var(--indicator-transition) transform ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;top:0;bottom:0;border:unset;z-index:2;-webkit-transition:var(--nano-transition-fast, 0.3s) ease opacity;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color)}.nano-tab-group__scroll-button:focus{outline:none}.nano-tab-group__scroll-button.is-shown{opacity:1}.nano-tab-group__scroll-button.focus-visible:focus{-webkit-box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset;box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.nano-tab-group__scroll-button--left{left:0}.nano-tab-group__scroll-button--right{right:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:\"\";width:86%;-webkit-box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height:10px;position:absolute;left:7%;bottom:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-left:var(--tabs-padding-start);padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden;-webkit-transition:var(--nano-transition-medium, 0.5s) ease;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));-webkit-mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));mask-image:-webkit-gradient(linear, right top, left top, color-stop(0, rgba(0, 0, 0, 0)), color-stop(rgba(0, 0, 0, 0)), color-stop(black), color-stop(black), color-stop(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));mask-image:linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - (var(--tabs-padding-end) * 2)), rgba(0, 0, 0, 0) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, 0));-webkit-mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));mask-size:calc(100% + calc(var(--tabs-padding-end) * 4));-webkit-mask-position:calc(var(--tabs-padding-end) * -2);mask-position:calc(var(--tabs-padding-end) * -2)}.nano-tab-group--top .nano-tab-group__nav::-webkit-scrollbar{width:0;height:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--tabs-padding-start);padding-inline-start:var(--tabs-padding-start);-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top .nano-tab-group__nav::after{content:\" \";padding-left:0;padding-right:var(--tabs-padding-end);padding-top:var(--tabs-padding-top);padding-bottom:var(--tabs-padding-bottom);line-height:1;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nano-tab-group--top .nano-tab-group__nav::after{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--tabs-padding-end);padding-inline-end:var(--tabs-padding-end)}}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left .nano-tab-group__nav{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + (var(--tabs-padding-end) * 2));mask-size:calc(100% + (var(--tabs-padding-end) * 2))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-position:calc(var(--tabs-padding-end) * -1);mask-position:calc(var(--tabs-padding-end) * -1);-webkit-mask-size:calc(100% + var(--tabs-padding-end));mask-size:calc(100% + var(--tabs-padding-end))}.nano-tab-group--top.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right .nano-tab-group__nav{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.nano-tab-group--top .nano-tab-group__tabs{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;position:relative;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;text-align:center;color:var(--tab-text-color);width:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{bottom:-2px;border-bottom:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;background:var(--content-bg);position:relative;overflow:hidden;width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.nano-tab-group--start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb))}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__tabs{border-left:solid var(--indicator-size) var(--indicator-track-color);text-align:left}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__tabs{border-right:solid var(--indicator-size) var(--indicator-track-color);text-align:right}:host(:not([dir=rtl])) .nano-tab-group--start .nano-tab-group__active-tab-indicator{left:calc(-1 * 2px);border-left:solid var(--indicator-size) var(--indicator-color)}:host([dir=rtl]) .nano-tab-group--start .nano-tab-group__active-tab-indicator{right:calc(-1 * 2px);border-right:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;padding:var(--content-padding);overflow:hidden;border-top-left-radius:0;border-top-right-radius:var(--content-border-radius);border-bottom-right-radius:var(--content-border-radius);border-bottom-left-radius:0}.nano-tab-group--start .nano-tab-group__body[dir=rtl]{border-top-left-radius:var(--content-border-radius);border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:var(--content-border-radius)}";
+
+let TabGroup = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.nanoTabShow = createEvent(this, "nanoTabShow", 7);
+    this.nanoTabHide = createEvent(this, "nanoTabHide", 7);
+    this.nanoTabWillClose = createEvent(this, "nanoTabWillClose", 7);
+    this.nanoTabClose = createEvent(this, "nanoTabClose", 7);
+    this.initialTouchX = null;
+    this.initialTouchY = null;
+    this.hasScrollControls = false;
+    this.hideControlRight = true;
+    this.hideControlLeft = true;
+    this.isLegacy = !document.head.attachShadow;
+    /**
+     * The placement of the tabs.
+     */
+    this.placement = 'top';
+    /**
+     * Disables the scroll arrows that appear when tabs overflow.
+     */
+    this.noScrollControls = false;
+    /**
+     * The method of storage.
+     * Either session storage, url hash (after the '#') or url query (after the '?').
+     */
+    this.storeMethod = 'session';
+    this.updateScrollControls = () => {
+      if (this.noScrollControls) {
+        this.hasScrollControls = false;
+      }
+      else {
+        this.hasScrollControls =
+          ['top'].includes(this.placement) &&
+            this.nav.scrollWidth > this.nav.clientWidth &&
+            this.nav.scrollWidth > this.tabs.clientWidth;
+      }
+    };
+    this.handleClick = (event) => {
+      const target = event.target;
+      const tab = target.closest('nano-tab');
+      if (tab)
+        this.setActiveTab(tab);
+    };
+    this.handleKeyDown = (event) => {
+      // Activate a tab
+      if (['Enter', ' '].includes(event.key)) {
+        const target = event.target;
+        const tab = target.closest('nano-tab');
+        if (tab) {
+          this.setActiveTab(tab);
+          event.preventDefault();
+        }
+      }
+      // Move focus left or right
+      if ([
+        'ArrowLeft',
+        'ArrowRight',
+        'ArrowUp',
+        'ArrowDown',
+        'Home',
+        'End',
+      ].includes(event.key)) {
+        const activeEl = document.activeElement;
+        if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {
+          const tabs = this.getAllActiveTabs;
+          let index = tabs.indexOf(activeEl);
+          if (event.key === 'Home') {
+            index = 0;
+          }
+          else if (event.key === 'End') {
+            index = tabs.length - 1;
+          }
+          else if ((this.isRtl && event.key === 'ArrowRight') ||
+            (!this.isRtl && event.key === 'ArrowLeft')) {
+            index = Math.max(0, index - 1);
+          }
+          else if ((this.isRtl && event.key === 'ArrowLeft') ||
+            (!this.isRtl && event.key === 'ArrowRight')) {
+            index = Math.min(tabs.length - 1, index + 1);
+          }
+          tabs[index].setFocus();
+          if (['top'].includes(this.placement)) {
+            scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');
+          }
+          event.preventDefault();
+        }
+      }
+    };
+    this.handleTabScroll = () => {
+      if (!this.hasScrollControls) {
+        this.hideControlLeft = this.hideControlRight = true;
+        return;
+      }
+      let endRight = this.isRtl
+        ? this.nav.scrollLeft === 0
+        : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;
+      let endLeft = this.isRtl
+        ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth
+        : this.nav.scrollLeft === 0;
+      if (endLeft) {
+        this.hideControlLeft = true;
+        this.hideControlRight = false;
+      }
+      else if (endRight) {
+        this.hideControlLeft = false;
+        this.hideControlRight = true;
+      }
+      else {
+        this.hideControlRight = false;
+        this.hideControlLeft = false;
+      }
+    };
+    this.handleBtnClick = (goRight = false) => {
+      const navWidth = this.getNavWidth();
+      let leftAmt;
+      if (goRight)
+        leftAmt = this.nav.scrollLeft + navWidth - 20;
+      else
+        leftAmt = this.nav.scrollLeft - navWidth + 20;
+      try {
+        this.nav.scroll({
+          left: leftAmt,
+          behavior: 'smooth',
+        });
+      }
+      catch (e) {
+        this.nav.scrollLeft = leftAmt;
+      }
+    };
+    this.handleTouchStart = (event) => {
+      if (this.disableSwipe)
+        return;
+      const touch = event.changedTouches[0];
+      this.initialTouchX = touch.pageX;
+      this.initialTouchY = touch.pageY;
+    };
+    this.handleTouchEnd = (event) => {
+      if (this.disableSwipe)
+        return;
+      const touch = event.changedTouches[0];
+      const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled
+      const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled
+      const threshold = 70;
+      var xDiff = this.initialTouchX - touch.clientX;
+      var yDiff = this.initialTouchY - touch.clientY;
+      const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;
+      const tabs = this.getAllActiveTabs;
+      const currIndex = tabs.findIndex((el) => el.active);
+      if (isHorizontalSwipe) {
+        const toGo = (distX < 0 && this.placement === 'top') ||
+          (distX > 0 && this.placement !== 'top')
+          ? 1
+          : -1;
+        if (tabs[currIndex + toGo]) {
+          this.setActiveTab(tabs[currIndex + toGo]);
+          if (Math.abs(xDiff) > Math.abs(yDiff)) {
+            if (xDiff > 0)
+              this.activePanel.setAttribute('animation-dir', 'left');
+            else
+              this.activePanel.setAttribute('animation-dir', 'right');
+          }
+        }
+      }
+      this.initialTouchX = null;
+      this.initialTouchY = null;
+    };
+  }
+  handleTabNameChange() {
+    if (this.activeTab && this.activeTab.panel === this.tab)
+      return;
+    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);
+    this.setActiveTab(tab);
+  }
+  handlePlacementChange() {
+    this.syncActiveTabIndicator();
+  }
+  handleNoScrollControlsChange() {
+    this.updateScrollControls();
+  }
+  hideRightBtn() {
+    if (!this.rightBtn)
+      return;
+    displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);
+  }
+  hideLeftBtn() {
+    if (!this.leftBtn)
+      return;
+    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);
+  }
+  watchScrollControls() {
+    if (this.hasScrollControls)
+      setTimeout((_) => this.handleTabScroll(), 20);
+    else
+      setTimeout((_) => {
+        this.hideControlLeft = this.hideControlRight = true;
+      }, 20);
+  }
+  /** Shows the specified tab panel. */
+  async show(panel) {
+    if (this.activeTab && this.activeTab.panel === panel)
+      return;
+    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);
+    if (tab)
+      this.setActiveTab(tab);
+  }
+  // Internal Methods
+  get getAllActiveTabs() {
+    return this.getAllTabs.filter((el) => !el.disabled);
+  }
+  get getAllTabs() {
+    return getDirectChildren(this.host, 'nano-tab');
+  }
+  get getAllPanels() {
+    return getDirectChildren(this.host, 'nano-tab-content');
+  }
+  get getActiveTab() {
+    return this.getAllActiveTabs.find((el) => el.active);
+  }
+  setActiveTab(tab, emitEvents = true) {
+    if (tab &&
+      tab !== this.activeTab &&
+      !tab.disabled &&
+      this.getAllActiveTabs.includes(tab)) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+      this.tab = tab.panel;
+      // Sync tabs and panels
+      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));
+      this.getAllPanels.map((el) => {
+        if (el.name === this.activeTab.panel) {
+          el.active = true;
+          this.activePanel = el;
+        }
+        else
+          el.active = false;
+        el.removeAttribute('animation-dir');
+      });
+      // active tab can be changed on init - this won't be ready. No big thing
+      this.syncActiveTabIndicator();
+      if (['top'].includes(this.placement)) {
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
+      }
+      // Emit events
+      if (emitEvents) {
+        if (previousTab) {
+          this.nanoTabHide.emit({ name: previousTab.panel });
+        }
+        this.nanoTabShow.emit({ name: this.activeTab.panel });
+      }
+    }
+  }
+  setAriaLabels() {
+    const tabs = this.getAllActiveTabs;
+    const panels = this.getAllPanels;
+    // Link each tab with its corresponding panel
+    tabs.map((tab) => {
+      const panel = panels.find((el) => el.name === tab.panel);
+      if (panel) {
+        tab.setAttribute('aria-controls', panel.getAttribute('id'));
+        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));
+      }
+    });
+  }
+  syncActiveTabIndicator() {
+    var _a;
+    this.getAllTabs.forEach((tab) => tab.setAttribute('direction', this.placement === 'top' ? 'horizontal' : 'vertical'));
+    const tab = this.getActiveTab;
+    const width = ((_a = tab.shadowRoot.querySelector('.nanotab')) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+    const height = tab.clientHeight;
+    const offset = getOffset(tab, this.tabs);
+    const offsetTop = offset.top + this.nav.scrollTop;
+    const offsetLeft = offset.left;
+    switch (this.placement) {
+      case 'top':
+        this.activeTabIndicator.style.width = `${width}px`;
+        this.activeTabIndicator.style.height = null;
+        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
+        break;
+      case 'start':
+        this.activeTabIndicator.style.width = null;
+        this.activeTabIndicator.style.height = `${height}px`;
+        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
+        break;
+    }
+  }
+  getNavWidth() {
+    if (!this.nav)
+      return 0;
+    const computedStyle = getComputedStyle(this.nav);
+    let clientWidth = this.nav.clientWidth;
+    return (clientWidth -=
+      parseFloat(computedStyle.paddingLeft) +
+        parseFloat(computedStyle.paddingRight));
+  }
+  // Event handlers
+  handleTabClose(ev) {
+    var _a;
+    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);
+    const tab = ev.target;
+    if (tabIndex < 0)
+      return;
+    const panel = this.getAllPanels.find((el) => el.name === tab.panel);
+    if (!panel)
+      return;
+    ev.stopImmediatePropagation();
+    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });
+    if (closeEv.defaultPrevented)
+      return;
+    // Show the previous tab if the tab is currently active
+    if (tab.active) {
+      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;
+      const prevTab = (_a = this.getAllActiveTabs[tabIndex]) === null || _a === void 0 ? void 0 : _a.panel;
+      if (prevTab)
+        this.host.show(prevTab);
+    }
+    tab.remove();
+    panel.remove();
+    this.nanoTabClose.emit({ name: tab.panel });
+  }
+  // Stencil hooks
+  componentDidLoad() {
+    // Initial IO - watching for all content to be loaded
+    const observer = new IntersectionObserver((entries, observer) => {
+      if (entries[0].intersectionRatio > 0) {
+        this.setAriaLabels();
+        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
+        if (this.storeId)
+          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);
+        observer.unobserve(entries[0].target);
+      }
+    });
+    observer.observe(this.host);
+    focusVisible.observe(this.tabGroup);
+    if (this.leftBtn) {
+      focusVisible.observe(this.leftBtn);
+      focusVisible.observe(this.rightBtn);
+    }
+    this.resizeObserver = new index(() => this.updateScrollControls());
+    this.resizeObserver.observe(this.nav);
+    this.mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => {
+        return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);
+      })) {
+        setTimeout(() => this.setAriaLabels());
+      }
+      setTimeout(() => {
+        this.handleTabScroll();
+        this.syncActiveTabIndicator();
+      }, 500);
+      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);
+      if (this.activeTab)
+        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');
+    });
+    this.mutationObserver.observe(this.host, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    });
+    requestAnimationFrame(() => this.updateScrollControls());
+  }
+  connectedCallback() {
+    this.isRtl =
+      this.host.dir === 'rtl' ||
+        this.host.ownerDocument.dir === 'rtl';
+  }
+  disconnectedCallback() {
+    if (this.mutationObserver)
+      this.mutationObserver.disconnect();
+    focusVisible.unobserve(this.tabGroup);
+    if (this.leftBtn) {
+      focusVisible.unobserve(this.leftBtn);
+      focusVisible.unobserve(this.rightBtn);
+    }
+    if (this.resizeObserver)
+      this.resizeObserver.unobserve(this.nav);
+  }
+  render() {
+    this.isRtl = this.host.ownerDocument.dir === 'rtl';
+    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { legacy: this.isLegacy }), dir: this.isRtl ? 'rtl' : null }, h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+        'nano-tab-group': true,
+        'nano-tab-group--top': this.placement === 'top',
+        'nano-tab-group--start': this.placement === 'start',
+        'nano-tab-group--has-scroll-controls': this.hasScrollControls,
+        'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,
+        'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,
+      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "nano-tab-group__nav-container", part: "nav" }, this.placement === 'top' && (h("button", { class: {
+        'nano-tab-group__scroll-button': true,
+        'nano-tab-group__scroll-button--left': true,
+      }, ref: (btn) => (this.leftBtn = btn), onClick: () => this.handleBtnClick(false) }, h("nano-icon", { name: "light/chevron-left" }))), h("div", { ref: (el) => (this.nav = el), class: "nano-tab-group__nav", onScroll: this.handleTabScroll }, h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "nano-tab-group__tabs", role: "tablist" }, h("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "nano-tab-group__active-tab-indicator" }), h("slot", { name: "tabs" }))), this.placement === 'top' && (h("button", { class: {
+        'nano-tab-group__scroll-button': true,
+        'nano-tab-group__scroll-button--right': true,
+      }, ref: (btn) => (this.rightBtn = btn), onClick: () => this.handleBtnClick(true) }, h("nano-icon", { name: "light/chevron-right" })))), h("slot", { name: "tab-content-header" }), h("div", { part: "body", class: "nano-tab-group__body", onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("slot", null)))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "tab": ["handleTabNameChange"],
+    "placement": ["handlePlacementChange"],
+    "noScrollControls": ["handleNoScrollControlsChange"],
+    "hideControlRight": ["hideRightBtn"],
+    "hideControlLeft": ["hideLeftBtn"],
+    "hasScrollControls": ["watchScrollControls"]
+  }; }
+  static get style() { return tabGroupCss; }
+};
+TabGroup = /*@__PURE__*/ proxyCustomElement(TabGroup, [1, "nano-tab-group", {
+    "placement": [1],
+    "noScrollControls": [4, "no-scroll-controls"],
+    "color": [1],
+    "storeId": [1, "store-id"],
+    "storeMethod": [1, "store-method"],
+    "disableSwipe": [4, "disable-swipe"],
+    "hasScrollControls": [32],
+    "hideControlRight": [32],
+    "hideControlLeft": [32],
+    "isLegacy": [32],
+    "tab": [32],
+    "show": [64]
+  }, [[0, "nanoTabClose", "handleTabClose"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["nano-tab-group", "nano-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "nano-tab-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TabGroup);
+      }
+      break;
+    case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const NanoTabGroup = TabGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { NanoTabGroup, defineCustomElement };
+
+//# sourceMappingURL=nano-tab-group.js.map