@nanoporetech-digital/components 7.4.4 → 7.5.0

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

@@ -1 +1 @@
-{"version":3,"names":["spinnerCss","NanoSpinnerStyle0","Spinner","hasText","type","overlay","componentWillLoad","this","el","childNodes","length","render","h","key","class"],"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{tokens.$progress-indicator-color-rgb}\n   * @prop --indicator-color: default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));\n   * @prop --track-color: default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{tokens.$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{tokens.$progress-indicator-color-rgb};\n  --indicator-color:\n    var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );\n  --track-color: var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n  --overlay-color: #{tokens.$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    inset: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-block-start-color: var(--indicator-color);\n    border-inline-end-color: var(--indicator-color);\n    border-inline-start-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding-block: 0;\n    padding-inline: 0.625em;\n    block-size: 4.375em;\n    inline-size: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 1.875em;\n      inset-inline-start: 50%;\n      transform: translateX(-50%) translateZ(0);\n      inline-size: 0.0625em;\n      inline-size: #{'max(.0625em, 1px)'};\n      block-size: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    inset-inline-start: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-block-start: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation. dna should be used for larger, page loads. Circle for smaller component loaders. */\n  @Prop() type: 'dna' | 'circle' = 'dna';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\" key=\"spinner-text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && (\n          <div class=\"spinner__overlay\" key=\"spinner-overlay\"></div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAa,siHACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,M,iDAETC,QAAmB,MAGpBC,KAAyB,MAGRC,QAAmB,MAE5C,iBAAAC,GACEC,KAAKJ,UAAYI,KAAKC,GAAGC,WAAWC,M,CAGtC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,UAAS,YAAW,OAAM,YAAW,UAC9CF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACRP,KAAKH,OAAS,OACbQ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CAIhBP,KAAKH,OAAS,UAAYQ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAExCP,KAAKJ,SACJS,EAAA,OAAKE,MAAM,gBAAgBD,IAAI,gBAC7BD,EAAA,QAAAC,IAAA,8CAGHN,KAAKF,SACJO,EAAA,OAAKE,MAAM,mBAAmBD,IAAI,oB","ignoreList":[]}
+{"version":3,"names":["spinnerCss","NanoSpinnerStyle0","Spinner","hasText","type","overlay","componentWillLoad","this","el","childNodes","length","render","h","key","class"],"sources":["src/components/spinner/spinner.scss?tag=nano-spinner&encapsulation=shadow","src/components/spinner/spinner.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{tokens.$progress-indicator-color-rgb}\n   * @prop --indicator-color: default var(--nano-indicator-color, rgb(var(--base-color-rgb) / 10%));\n   * @prop --track-color: default var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n   * @prop --spinner-scale: optional scaling of the spinner. default contextual font-size\n   * @prop --overlay-color: #{tokens.$layer-overlay-light};\n   */\n\n  display: inline-block;\n\n  // --spinner-scale: 5em;\n  --base-color-rgb: #{tokens.$progress-indicator-color-rgb};\n  --indicator-color:\n    var(\n      --nano-indicator-color,\n      rgb(var(--base-color-rgb) / 100%)\n    );\n  --track-color: var(--nano-track-color, rgb(var(--base-color-rgb) / 20%));\n  --overlay-color: #{tokens.$layer-overlay-light};\n}\n\n.spinner {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  :host([overlay]:not([overlay='false'])) & {\n    position: absolute;\n    inset: 0;\n\n    .spinner__loader,\n    .spinner__text {\n      z-index: 1;\n    }\n  }\n\n  &__overlay {\n    background: var(--overlay-color);\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    backdrop-filter: blur(#{tokens.$layer-overlay-blur});\n  }\n\n  &__loader {\n    font-size: var(--spinner-scale, 1em);\n  }\n\n  &__spin {\n    display: block;\n    margin: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    border-radius: 50%;\n    border: solid 0.1em var(--track-color);\n    border-block-start-color: var(--indicator-color);\n    border-inline-end-color: var(--indicator-color);\n    border-inline-start-color: var(--indicator-color);\n    animation: 1s linear infinite spin;\n  }\n\n  &__dna {\n    font-size: 0.2286em;\n    display: flex;\n  }\n\n  &__dnatrack {\n    position: relative;\n    padding-block: 0;\n    padding-inline: 0.625em;\n    block-size: 4.375em;\n    inline-size: 0.625em;\n    overflow: hidden;\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset-block-start: 1.875em;\n      inset-inline-start: 50%;\n      transform: translateX(-50%) translateZ(0);\n      inline-size: 0.0625em;\n      inline-size: #{'max(.0625em, 1px)'};\n      block-size: 0.625em;\n      background: var(--track-color);\n      animation: flex 1.5s linear infinite;\n      transform-origin: center center;\n    }\n\n    &--2::before {\n      animation: flex 1.5s -1.3s linear infinite;\n    }\n\n    &--3::before {\n      animation: flex 1.5s -1.1s linear infinite;\n    }\n\n    &--4::before {\n      animation: flex 1.5s -0.9s linear infinite;\n    }\n\n    &--5::before {\n      animation: flex 1.5s -0.75s linear infinite;\n    }\n  }\n\n  &__dnadot {\n    position: absolute;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: 50%;\n    background: var(--indicator-color);\n    animation: rotate 1.5s linear infinite;\n    transform-origin: center center;\n    inset-inline-start: 50%;\n    transform: translateX(-50%) translateZ(0) translateY(0);\n\n    &--2 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--3 {\n      animation: rotate 1.5s -1.3s linear infinite;\n    }\n\n    &--4 {\n      animation: rotate 1.5s -0.55s linear infinite;\n    }\n\n    &--5 {\n      animation: rotate 1.5s -1.1s linear infinite;\n    }\n\n    &--6 {\n      animation: rotate 1.5s -0.35s linear infinite;\n    }\n\n    &--7 {\n      animation: rotate 1.5s -0.9s linear infinite;\n    }\n\n    &--8 {\n      animation: rotate 1.5s -0.15s linear infinite;\n    }\n\n    &--9 {\n      animation: rotate 1.5s -0.75s linear infinite;\n    }\n\n    &--10 {\n      animation: rotate 1.5s 0s linear infinite;\n    }\n  }\n\n  &__text {\n    text-align: center;\n    position: relative;\n    margin-block-start: 0.5em;\n  }\n\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes rotate {\n    0%,\n    100% {\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n\n    25% {\n      transform: translateX(-50%) translateY(1.875em) scale(2);\n    }\n\n    50% {\n      transform: translateX(-50%) translateY(3.75em) scale(1);\n    }\n\n    75% {\n      transform: translateX(-50%) translateY(1.875em) scale(0.3);\n    }\n  }\n\n  @keyframes flex {\n    0%,\n    100% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    25% {\n      transform: translateX(-50%) scaleY(1);\n    }\n\n    50% {\n      transform: translateX(-50%) scaleY(5);\n    }\n\n    75% {\n      transform: translateX(-50%) scaleY(1);\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  ComponentInterface,\n  Prop,\n  Element,\n  State,\n} from '@stencil/core';\n\n/**\n * Spinners are used to show the progress of an indeterminate operation.\n * @slot - Used for loading messages\n */\n@Component({\n  tag: 'nano-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner implements ComponentInterface {\n  @Element() el: HTMLNanoSpinnerElement;\n  @State() hasText: boolean = false;\n\n  /** The type of spinner animation */\n  @Prop() type: 'dna' | 'circle' = 'circle';\n\n  /** Displays absolutely with an overlay */\n  @Prop({ reflect: true }) overlay: boolean = false;\n\n  componentWillLoad() {\n    this.hasText = !!this.el.childNodes.length;\n  }\n\n  render() {\n    return (\n      <div class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"spinner__loader\">\n          {this.type === 'dna' && (\n            <div class=\"spinner__dna\">\n              <div class=\"spinner__dnatrack spinner__dnatrack--1\">\n                <div class=\"spinner__dnadot spinner__dnadot--1\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--2\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--2\">\n                <div class=\"spinner__dnadot spinner__dnadot--3\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--4\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--3\">\n                <div class=\"spinner__dnadot spinner__dnadot--5\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--6\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--4\">\n                <div class=\"spinner__dnadot spinner__dnadot--7\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--8\"></div>\n              </div>\n              <div class=\"spinner__dnatrack spinner__dnatrack--5\">\n                <div class=\"spinner__dnadot spinner__dnadot--9\"></div>\n                <div class=\"spinner__dnadot spinner__dnadot--10\"></div>\n              </div>\n            </div>\n          )}\n          {this.type === 'circle' && <span class=\"spinner__spin\"></span>}\n        </div>\n        {this.hasText && (\n          <div class=\"spinner__text\" key=\"spinner-text\">\n            <slot />\n          </div>\n        )}\n        {this.overlay && (\n          <div class=\"spinner__overlay\" key=\"spinner-overlay\"></div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAa,siHACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,M,iDAETC,QAAmB,MAGpBC,KAAyB,SAGRC,QAAmB,MAE5C,iBAAAC,GACEC,KAAKJ,UAAYI,KAAKC,GAAGC,WAAWC,M,CAGtC,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,UAAS,YAAW,OAAM,YAAW,UAC9CF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,mBACRP,KAAKH,OAAS,OACbQ,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,wCAEbF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,uCACXF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,0CAIhBP,KAAKH,OAAS,UAAYQ,EAAA,QAAAC,IAAA,2CAAMC,MAAM,mBAExCP,KAAKJ,SACJS,EAAA,OAAKE,MAAM,gBAAgBD,IAAI,gBAC7BD,EAAA,QAAAC,IAAA,8CAGHN,KAAKF,SACJO,EAAA,OAAKE,MAAM,mBAAmBD,IAAI,oB","ignoreList":[]}

package/dist/nano-components/nano-split-pane.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{g as i,r as t,c as e,h as s,a as n}from"./index-815d3f98.js";import{d as r}from"./drag-9d765d2d.js";import{c as o}from"./math-d160f8a6.js";import{d as a}from"./throttle-df960210.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical]):not([disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:"";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}';const d=h;const l=class{get host(){return i(this)}cachedPositionInPixels;ro;isAnimating=false;didLoad=false;get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}_shouldAnimate=true;constructor(i){t(this,i);this.nanoReposition=e(this,"nanoReposition",7);this.nanoDragging=e(this,"nanoDragging",7);this.handlePositionChange=a(this.handlePositionChange.bind(this),100)}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}_position;handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}positionInPixels;handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}vertical=false;disabled=false;primary;snap;snapThreshold=12;animationDuration=.6;nanoReposition;nanoDragging;async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let r=s;let o=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const h=()=>{o+=1/e;r=a(o,s,n,t);if(i>s&&r>=i||i<s&&r<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=r;requestAnimationFrame(h)};this.shouldAnimate=false;this.isAnimating=true;requestAnimationFrame(h)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){if(!window["ResizeObserver"])return;this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}handleDrag=i=>{if(this.disabled){return}i.preventDefault();r(this.host,{onMove:(i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}})};handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}};handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);requestAnimationFrame((()=>this.shouldAnimate=true))}};componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){requestAnimationFrame((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const e=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const r="auto";if(this.primary==="end"){i[t]=`${r} var(--divider-width) ${e}`}else{i[t]=`${e} var(--divider-width) ${r}`}return s(n,{style:i},s("div",{part:"panel start",class:"start"},s("slot",{name:"start"})),s("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},s("slot",{name:"handle"},!this.disabled&&this.vertical?s("nano-icon",{slot:"handle",name:"solid/grip-lines"}):s("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),s("div",{part:"panel end",class:"end"},s("slot",{name:"end"})))}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
+import{g as i,r as t,c as e,h as s,a as n}from"./index-3118109b.js";import{d as r}from"./drag-9d765d2d.js";import{c as o}from"./math-d160f8a6.js";import{d as a}from"./throttle-df960210.js";const h=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:grid}.start,.end{overflow:hidden}.divider{flex:0 0 var(--divider-width);display:flex;position:relative;align-items:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical]):not([disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:flex;content:"";position:absolute;block-size:100%;inset-inline-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);inline-size:var(--divider-hit-area)}:host([vertical]){flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;inline-size:100%;inset-block-start:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);block-size:var(--divider-hit-area)}';const d=h;const l=class{get host(){return i(this)}cachedPositionInPixels;ro;isAnimating=false;didLoad=false;get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}_shouldAnimate=true;constructor(i){t(this,i);this.nanoReposition=e(this,"nanoReposition",7);this.nanoDragging=e(this,"nanoDragging",7);this.handlePositionChange=a(this.handlePositionChange.bind(this),100)}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}_position;handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}positionInPixels;handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}vertical=false;disabled=false;primary;snap;snapThreshold=12;animationDuration=.6;nanoReposition;nanoDragging;async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let r=s;let o=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const h=()=>{o+=1/e;r=a(o,s,n,t);if(i>s&&r>=i||i<s&&r<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=r;requestAnimationFrame(h)};this.shouldAnimate=false;this.isAnimating=true;requestAnimationFrame(h)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){if(!window["ResizeObserver"])return;this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}handleDrag=i=>{if(this.disabled){return}i.preventDefault();r(this.host,{onMove:(i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}})};handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}};handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);requestAnimationFrame((()=>this.shouldAnimate=true))}};componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){requestAnimationFrame((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const e=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const r="auto";if(this.primary==="end"){i[t]=`${r} var(--divider-width) ${e}`}else{i[t]=`${e} var(--divider-width) ${r}`}return s(n,{style:i},s("div",{part:"panel start",class:"start"},s("slot",{name:"start"})),s("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},s("slot",{name:"handle"},!this.disabled&&this.vertical?s("nano-icon",{slot:"handle",name:"solid/grip-lines"}):s("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),s("div",{part:"panel end",class:"end"},s("slot",{name:"end"})))}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
 //# sourceMappingURL=nano-split-pane.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as i,g as s,h as e,a as h}from"./index-815d3f98.js";import{a as n}from"./dom-3db2202b.js";import{d as o}from"./throttle-df960210.js";import{f as r}from"./scroll-parent-be39fbd0.js";const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}';const c=a;function l(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function f(t,i){const s=i instanceof Document?document.documentElement:i;return n(t,s)}const d=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7)}isRtl=false;io;contentSizeObserver;parentSizeObserver;sticker;content;scrollPosCache=0;scrollPosThresholdCache=0;cacheOffset=0;slottedContent;pauseResizeWatcher=false;listenForScrollParent=false;stickToEleInitSize;positions=[];pauseHide=false;hasBootstrapped=false;get host(){return s(this)}isStuck=false;isRootSticker=true;hide=false;scrollHide=false;multiStickerHide=false;scrollingTo=false;quietModeIsOn=false;stuckCounter=0;stickerIndex=0;stickToEle;triggerPos;trigger;_offset=0;autoResize=true;isSticky=true;offset=0;position="top";quietMode={h:600,w:600};hideOnNewStickers=true;breakPointMax=null;breakPointMin=null;scrollParent;stickTo;nanoStuck;nanoUnstuck;nanoHide;nanoShow;async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=f(this.trigger,this.scrollParent)}stickerResizeListener(){if(!this.content||!window["ResizeObserver"])return;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")requestAnimationFrame((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")requestAnimationFrame((()=>this.quietModeIsOn=false))}setOffset(){if(this.trigger)this.trigger.setAttribute("style","");let t,i,s,e;const h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{const e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{const n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.minHeight="1px";this.trigger.style.maxHeight="1px";this.trigger.style.overflow="hidden"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){const t=this.host.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{this.stickToEle.appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(typeof this.stickTo==="string")this.stickToEle=this.scrollParent.querySelector(this.stickTo);else if(this.stickTo)this.stickToEle=this.stickTo;else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}setupParentResizeListener=()=>{if(!window["ResizeObserver"])return;if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new ResizeObserver((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));const t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};manageListenersOnParent(t,i){const s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(t){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}onStickEvent=async t=>{const i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};onScroll=()=>{const t=l(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t};handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker){i=f(this.trigger,this.scrollParent).top}else{i=this.trigger.getBoundingClientRect().top}this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=!t.isIntersecting||i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;const t=this.scrollParent||r(this.host);this.scrollParent=t===document.documentElement?document:t;this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.innerHTML="&nbsp;";this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=o(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false}render(){return e(h,{key:"8446391b0510c305f2bead6865154636c329ab9f",sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},e("div",{key:"2465296095699dd336a3f0af5663e61b151807eb",class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},e("div",{key:"351a73899ac20bb834f9610d4210c4860b3db836",class:"sticker-content",ref:t=>this.content=t},e("slot",{key:"eacb03d1f9e5637b352bb28b80f60d50bf3b5ac1"}))))}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};d.style=c;export{d as nano_sticker};
+import{r as t,c as i,g as s,h as e,a as h}from"./index-3118109b.js";import{a as n}from"./dom-d7f9f24c.js";import{d as o}from"./throttle-df960210.js";import{f as r}from"./scroll-parent-be39fbd0.js";const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-inline-size:100%}:host([sticky]){position:sticky;transition:0.3s ease transform;will-change:min-block-size}:host([sticky][stuck]){inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-inline-size:inherit;inline-size:100%}.sticker:not(.stuck){inline-size:auto !important}.sticker.sticky{transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;inset-inline:var(--stuck-left) var(--stuck-right);z-index:var(--stuck-z-index);transform:translateY(0)}:host([placed-top]) .sticker.stuck{inset-block-start:0}:host([placed-bottom]) .sticker.stuck{inset-block-end:0}:host([placed-top]) .sticker.stuck.hide{transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{transform:var(--bottom-hide)}.sticker-content{display:flex;flex-wrap:wrap}';const c=a;function l(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function f(t,i){const s=i instanceof Document?document.documentElement:i;return n(t,s)}const d=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7)}isRtl=false;io;contentSizeObserver;parentSizeObserver;sticker;content;scrollPosCache=0;scrollPosThresholdCache=0;cacheOffset=0;slottedContent;pauseResizeWatcher=false;listenForScrollParent=false;stickToEleInitSize;positions=[];pauseHide=false;hasBootstrapped=false;get host(){return s(this)}isStuck=false;isRootSticker=true;hide=false;scrollHide=false;multiStickerHide=false;scrollingTo=false;quietModeIsOn=false;stuckCounter=0;stickerIndex=0;stickToEle;triggerPos;trigger;_offset=0;autoResize=true;isSticky=true;offset=0;position="top";quietMode={h:600,w:600};hideOnNewStickers=true;breakPointMax=null;breakPointMin=null;scrollParent;stickTo;nanoStuck;nanoUnstuck;nanoHide;nanoShow;async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=f(this.trigger,this.scrollParent)}stickerResizeListener(){if(!this.content||!window["ResizeObserver"])return;if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new ResizeObserver((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")requestAnimationFrame((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")requestAnimationFrame((()=>this.quietModeIsOn=false))}setOffset(){if(this.trigger)this.trigger.setAttribute("style","");let t,i,s,e;const h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{const e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{const n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.minHeight="1px";this.trigger.style.maxHeight="1px";this.trigger.style.overflow="hidden"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){const t=this.host.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{this.stickToEle.appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else if(this.scrollParent){this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(typeof this.stickTo==="string")this.stickToEle=this.scrollParent.querySelector(this.stickTo);else if(this.stickTo)this.stickToEle=this.stickTo;else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}setupParentResizeListener=()=>{if(!window["ResizeObserver"])return;if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new ResizeObserver((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));const t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){requestAnimationFrame((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};manageListenersOnParent(t,i){const s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(t){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}onStickEvent=async t=>{const i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};onScroll=()=>{const t=l(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t};handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker){i=f(this.trigger,this.scrollParent).top}else{i=this.trigger.getBoundingClientRect().top}this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=!t.isIntersecting||i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;const t=this.scrollParent||r(this.host);this.scrollParent=t===document.documentElement?document:t;this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.innerHTML="&nbsp;";this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=o(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.scrollParent=null;this.hasBootstrapped=false}render(){return e(h,{key:"8446391b0510c305f2bead6865154636c329ab9f",sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},e("div",{key:"2465296095699dd336a3f0af5663e61b151807eb",class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},e("div",{key:"351a73899ac20bb834f9610d4210c4860b3db836",class:"sticker-content",ref:t=>this.content=t},e("slot",{key:"eacb03d1f9e5637b352bb28b80f60d50bf3b5ac1"}))))}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};d.style=c;export{d as nano_sticker};
 //# sourceMappingURL=nano-sticker.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as a,g as t,h as e,a as n}from"./index-815d3f98.js";const o=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";const i=o;let s=0;const r=class{constructor(t){a(this,t)}tabContentId=`nano-tab-content-${++s}`;ready=false;get host(){return t(this)}name="";active=false;componentDidLoad(){requestAnimationFrame((()=>this.ready=true))}render(){return e(n,{key:"508cfb7387f87be8af8a9db89081df45a922a420",id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true",class:{ready:this.ready}},e("div",{key:"9aa9cb6f89a514d7cfa8b102aaf465fe5e73fe91",part:"base",class:"nano-tab-content"},e("slot",{key:"0f76d3389f17a4262b0cf27ddd4a4c6045df8e4c"})))}};r.style=i;export{r as nano_tab_content};
+import{r as a,g as t,h as e,a as n}from"./index-3118109b.js";const o=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:block;opacity:1;animation:opacity 0.3s ease-in-out forwards;animation-duration:0s !important}:host(.ready){animation-duration:0.3s !important}@media only screen and (width <= 768px){:host([animation-dir=left]){animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@keyframes opacity{0%{opacity:0}100%{opacity:1}}@keyframes slide-left{0%{transform:translate3d(-100%, 0, 0)}50%{transform:translate3d(0%) translate3d(-0.9em)}100%{transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{transform:translate3d(100%, 0, 0)}50%{transform:translateX(0%) translate3d(0.9em)}100%{transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{animation:none !important}}";const i=o;let s=0;const r=class{constructor(t){a(this,t)}tabContentId=`nano-tab-content-${++s}`;ready=false;get host(){return t(this)}name="";active=false;componentDidLoad(){requestAnimationFrame((()=>this.ready=true))}render(){return e(n,{key:"508cfb7387f87be8af8a9db89081df45a922a420",id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true",class:{ready:this.ready}},e("div",{key:"9aa9cb6f89a514d7cfa8b102aaf465fe5e73fe91",part:"base",class:"nano-tab-content"},e("slot",{key:"0f76d3389f17a4262b0cf27ddd4a4c6045df8e4c"})))}};r.style=i;export{r as nano_tab_content};
 //# sourceMappingURL=nano-tab-content.entry.js.map

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as a,g as o,h as n,a as i}from"./index-815d3f98.js";import{g as r,a as s}from"./dom-3db2202b.js";import{s as e}from"./scroll-913c51a0.js";import{C as l}from"./component-store-a0eb3fb6.js";import{c as b}from"./theme-d553c17a.js";import{d as c}from"./transitions-c09bd7f6.js";import"./throttle-df960210.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{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) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (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);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--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:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;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{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{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;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:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + 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{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.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{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';const h=d;let p=0;const g=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7)}baseId=`nano-tab-group-${++p}`;activeTab;activePanel;activeTabIndicator;nav;tabs;rightBtn;leftBtn;isRtl;initialTouchX=null;initialTouchY=null;resizeObserver;mutationObservers=new WeakMap;get host(){return o(this)}hasScrollControls=false;hideControlRight=true;hideControlLeft=true;tab;placement="top";noScrollControls=false;color;storeId;storeMethod="session";disableSwipe;handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}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}};setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,o)=>{const n=a.find((a=>a.name===t.panel));if(n){if(!n.id)n.id=`${this.baseId}-panel-${o}`;if(!t.id)t.id=`${this.baseId}-tab-${o}`;t.setAttribute("aria-controls",n.id);n.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const n=s(t,this.tabs);if(!this.activeTabIndicator)return;const i=n.top+this.nav.scrollTop;const r=n.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const n=this.getAllPanels.find((t=>t.name===o.panel));if(!n)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:o.panel});if(i.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})}handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home")n=0;if(t.key==="End")n=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")n=Math.max(0,n-1);if(t.key==="ArrowDown")n=Math.min(o.length-1,n+1)}o[n].setFocus();if(this.placement==="top"){e(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=70;const i=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const s=Math.abs(o)>=n&&Math.abs(r)<=50;const e=this.getAllActiveTabs;const l=e.findIndex((t=>t.active));if(s){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(e[l+t]){this.setActiveTab(e[l+t]);if(Math.abs(i)>Math.abs(r)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)l.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{key:"8d4967674baaec3b7e35725357bd97373e87dde4",class:{...b(this.color)},dir:this.isRtl?"rtl":null},n("div",{key:"c328e6cf7a72d29693313364b6c51805219c3277",part:"base",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},n("div",{key:"8e83f952666a05adbd6a41ba736749ab7b26a72a",class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{key:"91844d716eb09a39971810a456deb1c4e00eeb52",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{key:"bb3a0ab77f3e743b6f114d95ce926b5d56f15822",name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),n("div",{key:"27668528c2ae2b4a0f108a0a0b047eca8ec5938f",ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{key:"957c570aeaf454c04b5f5ff21a1f0de7edeca69a",ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{key:"b8aa45670f49a8d9a5010067c5911abbaf208309",ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{key:"9abb15e1c0c72e26c9b2c22cf22434177d3547bb",name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{key:"51aa3796262bd0b38a70e8341ebb2657fafc91e3",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{key:"e1bbe3649b50ad1d4a9f10772b010ece7d70401b",name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),n("slot",{key:"020cca6e8b7970cfa5a6a3b67f43a8e46bb9b006",name:"tab-content-header"}),n("div",{key:"7caf231a70ccb0bd804c321e75576bd254480d6a",part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{key:"83e5b7705b469f79763fc68ae77a46f284779ccf",onSlotchange:this.handleContentSlotChange}))))}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};g.style=h;export{g as nano_tab_group};
+import{r as t,c as a,g as o,h as n,a as i}from"./index-3118109b.js";import{g as r,a as s}from"./dom-d7f9f24c.js";import{s as e}from"./scroll-f373a189.js";import{C as b}from"./component-store-b798181b.js";import{c as l}from"./theme-d553c17a.js";import{d as c}from"./transitions-c09bd7f6.js";import"./throttle-df960210.js";const d=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{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) var(--border-radius) 0 0;--tab-text-color:#007495;--shadow-opacity:0.1;--fade-transparency:0;display:block;position:relative;z-index:var(--nano-layer-index-raised, 5)}@media only screen and (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);--grab-offset-x:var(--tabs-padding-start)}:host([placement=start]){--content-border-radius:0 var(--border-radius) var(--border-radius) 0;--content-padding:1rem;--tab-border-radius:0;--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:rgb(var(--nano-color-base-rgb) / 70%)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;inline-size:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;inline-size:100%}.nano-tab-group__active-tab-indicator{position:absolute;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease}.nano-tab-group__body{background:var(--content-bg)}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{appearance:none;background-color:transparent}.nano-tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;inset-block:0;border:unset;z-index:2;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{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{inset-inline-start:0}.nano-tab-group__scroll-button--right{inset-inline-end:0}.nano-tab-group__scroll-button nano-icon{font-size:16px}.nano-tab-group--top{flex-direction:column}.nano-tab-group--top .nano-tab-group__nav-container::after{content:"";inline-size:86%;box-shadow:0 10px 40px 10px rgb(0 0 0/var(--shadow-opacity));block-size:10px;position:absolute;inset-inline-start:7%;inset-block-end:-10px;border-radius:10px;z-index:-1}.nano-tab-group--top .nano-tab-group__nav{scrollbar-width:none;-ms-overflow-style:none;padding-inline:var(--tabs-padding-start) var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);display:flex;overflow:auto hidden;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:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--tabs-padding-start), rgb(0, 0, 0) calc(var(--tabs-padding-start) * 2), rgb(0, 0, 0) calc(100% - var(--tabs-padding-end) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgb(0 0 0/var(--fade-transparency)));-webkit-mask-size:calc(100% + var(--tabs-padding-end) * 4);mask-size:calc(100% + 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{inline-size:0;block-size:0}.nano-tab-group--top .nano-tab-group__nav::after{content:" ";padding-inline:0 var(--tabs-padding-end);padding-block:var(--tabs-padding-top) var(--tabs-padding-bottom);line-height:1;flex:0 0 auto}.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{flex:1 1 auto;position:relative;flex-direction:row;text-align:center;color:var(--tab-text-color);inline-size:auto}.nano-tab-group--top .nano-tab-group__active-tab-indicator{inset-block-end:-2px;border-block-end:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--top .nano-tab-group__body{order:2;background:var(--content-bg);position:relative;overflow:hidden;inline-size:auto;display:flex;justify-content:center;padding:var(--content-padding);border-radius:var(--content-border-radius);flex:1 1 auto}.nano-tab-group--start{flex-direction:row}.nano-tab-group--start .nano-tab-group__nav{background:var(--content-bg)}.nano-tab-group--start .nano-tab-group__tabs{flex:0 0 auto;flex-direction:column;color:var(--tab-text-color);background:rgb(var(--tabs-bg-rgb));border-inline-start:solid var(--indicator-size) var(--indicator-track-color);text-align:start}.nano-tab-group--start .nano-tab-group__active-tab-indicator{inset-inline-start:-2px;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.nano-tab-group--start .nano-tab-group__body{flex:1 1 auto;order:2;padding:var(--content-padding);overflow:hidden;border-radius:var(--content-border-radius)}';const h=d;let p=0;const g=class{constructor(o){t(this,o);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7)}baseId=`nano-tab-group-${++p}`;activeTab;activePanel;activeTabIndicator;nav;tabs;rightBtn;leftBtn;isRtl;initialTouchX=null;initialTouchY=null;resizeObserver;mutationObservers=new WeakMap;get host(){return o(this)}hasScrollControls=false;hideControlRight=true;hideControlLeft=true;tab;placement="top";noScrollControls=false;color;storeId;storeMethod="session";disableSwipe;handleTabNameChange(){if(this.activeTab&&this.activeTab.panel===this.tab)return;const t=this.getAllActiveTabs.find((t=>t.panel===this.tab));this.setActiveTab(t)}handlePlacementChange(){this.syncActiveTabIndicator()}handleNoScrollControlsChange(){this.updateScrollControls()}hideRightBtn(){if(!this.rightBtn)return;c(this.rightBtn,{className:"is-shown",show:!this.hideControlRight})}hideLeftBtn(){if(!this.leftBtn)return;c(this.leftBtn,{className:"is-shown",show:!this.hideControlLeft})}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}nanoTabShow;nanoTabHide;nanoTabWillClose;nanoTabClose;async show(t){if(this.activeTab&&this.activeTab.panel===t)return;const a=this.getAllActiveTabs.find((a=>a.panel===t));if(a)this.setActiveTab(a)}get getAllActiveTabs(){return this.getAllTabs.filter((t=>!t.disabled))}get getAllTabs(){return r(this.host,"nano-tab")}get getAllPanels(){return r(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}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}};setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const o=this.activeTab;this.activeTab=t;this.tab=t.panel;this.getAllActiveTabs.map((t=>t.active=t===this.activeTab));this.getAllPanels.map((t=>{if(t.name===this.activeTab.panel){t.active=true;this.activePanel=t}else t.active=false;t.removeAttribute("animation-dir")}));this.syncActiveTabIndicator();if(this.nav&&["top"].includes(this.placement)){e(this.activeTab,this.nav,"horizontal","center")}if(a){if(o){this.nanoTabHide.emit({name:o.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map(((t,o)=>{const n=a.find((a=>a.name===t.panel));if(n){if(!n.id)n.id=`${this.baseId}-panel-${o}`;if(!t.id)t.id=`${this.baseId}-tab-${o}`;t.setAttribute("aria-controls",n.id);n.setAttribute("aria-labelledby",t.id)}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;if(!t)return;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const o=t.clientHeight;const n=s(t,this.tabs);if(!this.activeTabIndicator)return;const i=n.top+this.nav.scrollTop;const r=n.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${r}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${o}px`;this.activeTabIndicator.style.transform=`translateY(${i}px)`;break}}getNavWidth(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let a=this.nav.clientWidth;return a-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}handleTabClose(t){let a=this.getAllActiveTabs.indexOf(t.target);const o=t.target;if(a<0)return;const n=this.getAllPanels.find((t=>t.name===o.panel));if(!n)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:o.panel});if(i.defaultPrevented)return;if(o.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}o.remove();n.remove();this.nanoTabClose.emit({name:o.panel})}handleClick=t=>{const a=t.target;const o=a.closest("nano-tab");if(o)this.setActiveTab(o)};handleKeyDown=t=>{const a=document.activeElement;if(!a||a.tagName.toLowerCase()!=="nano-tab")return;if(["Enter"," "].includes(t.key)){const a=t.target;const o=a.closest("nano-tab");if(o){this.setActiveTab(o);t.preventDefault();t.stopPropagation()}}if(!["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key))return;const o=this.getAllActiveTabs;let n=o.indexOf(a);if(t.key==="Home")n=0;if(t.key==="End")n=o.length-1;if(this.placement==="top"){if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){n=Math.max(0,n-1)}if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){n=Math.min(o.length-1,n+1)}}if(this.placement==="start"){if(t.key==="ArrowUp")n=Math.max(0,n-1);if(t.key==="ArrowDown")n=Math.min(o.length-1,n+1)}o[n].setFocus();if(this.placement==="top"){e(o[n],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()};handleTabScroll=()=>{if(!this.hasScrollControls){this.hideControlLeft=this.hideControlRight=true;return}const t=this.isRtl?this.nav.scrollLeft===0:this.nav.scrollWidth-this.nav.scrollLeft===this.nav.clientWidth;const a=this.isRtl?this.nav.scrollWidth+this.nav.scrollLeft===this.nav.clientWidth:this.nav.scrollLeft===0;if(a){this.hideControlLeft=true;this.hideControlRight=false}else if(t){this.hideControlLeft=false;this.hideControlRight=true}else{this.hideControlRight=false;this.hideControlLeft=false}};handleBtnClick=(t=false)=>{const a=this.getNavWidth();let o;if(t)o=this.nav.scrollLeft+a-20;else o=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:o,behavior:"smooth"})}catch(t){this.nav.scrollLeft=o}};handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const o=a.pageX-this.initialTouchX;const n=70;const i=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const s=Math.abs(o)>=n&&Math.abs(r)<=50;const e=this.getAllActiveTabs;const b=e.findIndex((t=>t.active));if(s){const t=o<0&&this.placement==="top"||o>0&&this.placement!=="top"?1:-1;if(e[b+t]){this.setActiveTab(e[b+t]);if(Math.abs(i)>Math.abs(r)){if(i>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedElements({flatten:true});a.forEach((t=>{if(!this.mutationObservers.get(t)){const a=new MutationObserver((()=>{setTimeout((()=>{this.syncActiveTabIndicator();this.handleTabScroll();this.updateScrollControls()}),500)}));this.mutationObservers.set(t,a);a.observe(t,{characterData:true,childList:true,subtree:true})}}))};componentDidLoad(){const t=new IntersectionObserver(((t,a)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);if(this.storeId)b.init(this,["tab"],this.storeMethod,this.storeId);a.unobserve(t[0].target)}}));t.observe(this.host);requestAnimationFrame((()=>this.updateScrollControls()));if(!window["ResizeObserver"])return;this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();e(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(i,{key:"8d4967674baaec3b7e35725357bd97373e87dde4",class:{...l(this.color)},dir:this.isRtl?"rtl":null},n("div",{key:"c328e6cf7a72d29693313364b6c51805219c3277",part:"base",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},n("div",{key:"8e83f952666a05adbd6a41ba736749ab7b26a72a",class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{key:"91844d716eb09a39971810a456deb1c4e00eeb52",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--left":true},ref:t=>this.leftBtn=t,onClick:()=>this.handleBtnClick(false)},n("nano-icon",{key:"bb3a0ab77f3e743b6f114d95ce926b5d56f15822",name:"light/chevron-left",ariaLabel:"Scroll tabs towards the start"})),n("div",{key:"27668528c2ae2b4a0f108a0a0b047eca8ec5938f",ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{key:"957c570aeaf454c04b5f5ff21a1f0de7edeca69a",ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist","aria-orientation":this.placement==="start"?"vertical":"horizontal"},n("div",{key:"b8aa45670f49a8d9a5010067c5911abbaf208309",ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{key:"9abb15e1c0c72e26c9b2c22cf22434177d3547bb",name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{key:"51aa3796262bd0b38a70e8341ebb2657fafc91e3",disabled:!this.hasScrollControls,class:{"nano-tab-group__scroll-button":true,"nano-tab-group__scroll-button--right":true},ref:t=>this.rightBtn=t,onClick:()=>this.handleBtnClick(true)},n("nano-icon",{key:"e1bbe3649b50ad1d4a9f10772b010ece7d70401b",name:"light/chevron-right",ariaLabel:"Scroll tabs towards the end"}))),n("slot",{key:"020cca6e8b7970cfa5a6a3b67f43a8e46bb9b006",name:"tab-content-header"}),n("div",{key:"7caf231a70ccb0bd804c321e75576bd254480d6a",part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{key:"83e5b7705b469f79763fc68ae77a46f284779ccf",onSlotchange:this.handleContentSlotChange}))))}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};g.style=h;export{g as nano_tab_group};
 //# sourceMappingURL=nano-tab-group.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tabGroupCss","NanoTabGroupStyle0","id","TabGroup","baseId","activeTab","activePanel","activeTabIndicator","nav","tabs","rightBtn","leftBtn","isRtl","initialTouchX","initialTouchY","resizeObserver","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","tab","placement","noScrollControls","color","storeId","storeMethod","disableSwipe","handleTabNameChange","this","panel","getAllActiveTabs","find","el","setActiveTab","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","updateScrollControls","hideRightBtn","displayTransition","className","show","hideLeftBtn","watchScrollControls","setTimeout","_","handleTabScroll","nanoTabShow","nanoTabHide","nanoTabWillClose","nanoTabClose","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","getActiveTab","active","includes","scrollWidth","clientWidth","emitEvents","previousTab","map","name","removeAttribute","scrollIntoView","emit","setAriaLabels","panels","i","setAttribute","forEach","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","left","style","transform","getNavWidth","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","ev","tabIndex","indexOf","target","stopImmediatePropagation","closeEv","defaultPrevented","prevTab","remove","handleClick","event","closest","handleKeyDown","activeEl","document","activeElement","tagName","toLowerCase","key","preventDefault","stopPropagation","index","length","Math","max","min","setFocus","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","leftAmt","scroll","behavior","_e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","toGo","handleContentSlotChange","handleTabSlotChange","nodes","assignedElements","flatten","node","get","mo","MutationObserver","set","observe","characterData","childList","subtree","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","ComponentStore","init","unobserve","requestAnimationFrame","window","ResizeObserver","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","createColorClasses","part","onClick","onKeyDown","ref","btn","ariaLabel","onScroll","role","onSlotchange","onTouchStart","onTouchEnd"],"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{tokens.$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get(tokens.$colors, lightblue)} on placement 'top' and #{map.get(tokens.$colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{tokens.$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n  * @prop --tab-text-color: defaults to #{map.get(tokens.$colors, blue)} on placement 'top' and #{map.get(tokens.$colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{tokens.$transition-fast};\n  --indicator-color: #{map.get(tokens.$colors, lightblue)};\n  --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{tokens.$layer-border-radius};\n  --background-rgb: #{tokens.$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n  --tab-text-color: #{map.get(tokens.$colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{tokens.$layer-index-raised};\n\n  @media only screen and (width <= 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n    --grab-offset-x: var(--tabs-padding-start);\n  }\n}\n\n:host([placement='start']) {\n  --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --content-padding: 1rem;\n  --tab-border-radius: 0;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get(tokens.$colors, darkgrey)};\n  --indicator-color: #{map.get(tokens.$colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{tokens.nano-color(primary, tint)});\n  --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{tokens.nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  inline-size: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    inline-size: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset-block: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{tokens.$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      box-shadow: #{tokens.$control-focus-style} inset;\n    }\n\n    &--left {\n      inset-inline-start: 0;\n    }\n\n    &--right {\n      inset-inline-end: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        inline-size: 86%;\n        box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n        block-size: 10px;\n        position: absolute;\n        inset-inline-start: 7%;\n        inset-block-end: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include mx.hide-scrollbar();\n\n      padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n      padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n      display: flex;\n      overflow: auto hidden;\n      transition: #{tokens.$transition-medium} ease;\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n          rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--tabs-padding-end)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        padding-inline: 0 var(--tabs-padding-end);\n        padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      inline-size: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-block-end: -2px;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      inline-size: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n      border-inline-start:\n        solid var(--indicator-size)\n        var(--indicator-track-color);\n      text-align: start;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-inline-start: calc(-1 * 2px);\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      border-radius: var(--content-border-radius);\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n  Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../types/shared';\n\nlet id = 0;\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private baseId = `nano-tab-group-${++id}`;\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, {\n      className: 'is-shown',\n      show: !this.hideControlRight,\n    });\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, {\n      className: 'is-shown',\n      show: !this.hideControlLeft,\n    });\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n\n      this.syncActiveTabIndicator();\n\n      // active tab can be changed on init - this won't be ready. No big thing\n      if (this.nav && ['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab, i) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        if (!panel.id) panel.id = `${this.baseId}-panel-${i}`;\n        if (!tab.id) tab.id = `${this.baseId}-tab-${i}`;\n\n        tab.setAttribute('aria-controls', panel.id);\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    if (!tab) return;\n\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n\n    if (!this.activeTabIndicator) return;\n\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const activeEl = document.activeElement as any;\n    if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      ![\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    )\n      return;\n\n    const tabs = this.getAllActiveTabs;\n    let index = tabs.indexOf(activeEl);\n\n    if (event.key === 'Home') index = 0;\n    if (event.key === 'End') index = tabs.length - 1;\n\n    if (this.placement === 'top') {\n      if (\n        (this.isRtl && event.key === 'ArrowRight') ||\n        (!this.isRtl && event.key === 'ArrowLeft')\n      ) {\n        index = Math.max(0, index - 1);\n      }\n      if (\n        (this.isRtl && event.key === 'ArrowLeft') ||\n        (!this.isRtl && event.key === 'ArrowRight')\n      ) {\n        index = Math.min(tabs.length - 1, index + 1);\n      }\n    }\n\n    if (this.placement === 'start') {\n      if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n      if (event.key === 'ArrowDown')\n        index = Math.min(tabs.length - 1, index + 1);\n    }\n\n    tabs[index].setFocus();\n\n    if (this.placement === 'top') {\n      scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n    }\n    // need to stop bubbling otherwise it will focus on parent tabs if nested\n    event.stopPropagation();\n    // stop the browser moving about\n    event.preventDefault();\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    const endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    const endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (_e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist travelled\n    const threshold = 70;\n\n    const xDiff = this.initialTouchX - touch.clientX;\n    const yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(yDiff) <= 50;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedElements({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    if (!window['ResizeObserver']) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    if (Build.isServer) {\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.setAriaLabels();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = this.host.ownerDocument.dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon\n                  name=\"light/chevron-left\"\n                  ariaLabel=\"Scroll tabs towards the start\"\n                ></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n                aria-orientation={\n                  this.placement === 'start' ? 'vertical' : 'horizontal'\n                }\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon\n                  name=\"light/chevron-right\"\n                  ariaLabel=\"Scroll tabs towards the end\"\n                ></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabGroupCss","NanoTabGroupStyle0","id","TabGroup","baseId","activeTab","activePanel","activeTabIndicator","nav","tabs","rightBtn","leftBtn","isRtl","initialTouchX","initialTouchY","resizeObserver","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","tab","placement","noScrollControls","color","storeId","storeMethod","disableSwipe","handleTabNameChange","this","panel","getAllActiveTabs","find","el","setActiveTab","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","updateScrollControls","hideRightBtn","displayTransition","className","show","hideLeftBtn","watchScrollControls","setTimeout","_","handleTabScroll","nanoTabShow","nanoTabHide","nanoTabWillClose","nanoTabClose","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","getActiveTab","active","includes","scrollWidth","clientWidth","emitEvents","previousTab","map","name","removeAttribute","scrollIntoView","emit","setAriaLabels","panels","i","setAttribute","forEach","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","left","style","transform","getNavWidth","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","ev","tabIndex","indexOf","target","stopImmediatePropagation","closeEv","defaultPrevented","prevTab","remove","handleClick","event","closest","handleKeyDown","activeEl","document","activeElement","tagName","toLowerCase","key","preventDefault","stopPropagation","index","length","Math","max","min","setFocus","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","leftAmt","scroll","behavior","_e","handleTouchStart","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","toGo","handleContentSlotChange","handleTabSlotChange","nodes","assignedElements","flatten","node","get","mo","MutationObserver","set","observe","characterData","childList","subtree","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","ComponentStore","init","unobserve","requestAnimationFrame","window","ResizeObserver","connectedCallback","dir","ownerDocument","disconnectedCallback","render","h","Host","class","createColorClasses","part","onClick","onKeyDown","ref","btn","ariaLabel","onScroll","role","onSlotchange","onTouchStart","onTouchEnd"],"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{tokens.$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get(tokens.$colors, lightblue)} on placement 'top' and #{map.get(tokens.$colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{tokens.$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{tokens.$layer-bg-color-rgb};\n  * @prop --shadow-opacity: opacity of the shadow behind tabs. defaults to 0.1;\n  * @prop --scroll-btn-color: defaults to 'currentcolor';\n\n  * @prop --content-padding: defaults to 2rem 2.5rem;\n  * @prop --content-bg: defaults to rgb(var(--background-rgb));\n  * @prop --content-border-radius: defaults to `var(--border-radius)` `position=\"top\"`. `0 var(--border-radius) var(--border-radius) 0` `position=\"start\"`;\n\n  * @prop --tabs-padding-start: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-end: defaults to 2.5rem on placement 'top' and 0 on placement 'start';\n  * @prop --tabs-padding-top: defaults to 0;\n  * @prop --tabs-padding-bottom: defaults to 0;\n  * @prop --tabs-bg-rgb: defaults to var(--bg-color);\n  * @prop --tab-border-radius: defaults to `var(--border-radius) var(--border-radius) 0 0` `position=\"top\"`. `0` `position=\"start\"`. ;\n  * @prop --tab-text-color: defaults to #{map.get(tokens.$colors, blue)} on placement 'top' and #{map.get(tokens.$colors, darkgrey)} on placement 'start';\n  * @prop --fade-transparency: controls the strength of the fade on overflowing tabs, defaults to 0;\n  */\n\n:host {\n  --indicator-transition: #{tokens.$transition-fast};\n  --indicator-color: #{map.get(tokens.$colors, lightblue)};\n  --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{tokens.$layer-border-radius};\n  --background-rgb: #{tokens.$layer-bg-color-rgb};\n  --scroll-btn-color: 'currentColor';\n  --content-padding: 2rem 2.5rem;\n  --content-bg: rgb(var(--background-rgb));\n  --content-border-radius: var(--border-radius);\n  --tabs-padding-start: 2.5rem;\n  --tabs-padding-end: 2.5rem;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tabs-container-bg: 'transparent';\n  --tabs-bg-rgb: var(--background-rgb);\n  --tab-border-radius: var(--border-radius) var(--border-radius) 0 0;\n  --tab-text-color: #{map.get(tokens.$colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{tokens.$layer-index-raised};\n\n  @media only screen and (width <= 768px) {\n    --tabs-padding-start: 1.5rem;\n    --tabs-padding-end: 1.5rem;\n  }\n\n  ::slotted(nano-tab) {\n    --tab-indicator-color: var(--indicator-color);\n    --bg-rgb: var(--tabs-bg-rgb);\n    --border-radius: var(--tab-border-radius);\n    --grab-offset-x: var(--tabs-padding-start);\n  }\n}\n\n:host([placement='start']) {\n  --content-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --content-padding: 1rem;\n  --tab-border-radius: 0;\n  --tabs-padding-start: 0;\n  --tabs-padding-end: 0;\n  --tabs-padding-top: 0;\n  --tabs-padding-bottom: 0;\n  --tab-text-color: #{map.get(tokens.$colors, darkgrey)};\n  --indicator-color: #{map.get(tokens.$colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{tokens.nano-color(primary, tint)});\n  --tab-text-color: rgb(var(--nano-color-base-rgb) / 70%);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{tokens.nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  inline-size: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    inline-size: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  .nano-tab-group__nav-container {\n    position: relative;\n    display: flex;\n    background: var(--tabs-container-bg);\n  }\n\n  button {\n    appearance: none;\n    background-color: transparent;\n  }\n\n  &__scroll-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    inset-block: 0;\n    border: unset;\n    z-index: 2;\n    transition: #{tokens.$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n    }\n\n    &:focus-visible {\n      box-shadow: #{tokens.$control-focus-style} inset;\n    }\n\n    &--left {\n      inset-inline-start: 0;\n    }\n\n    &--right {\n      inset-inline-end: 0;\n    }\n\n    nano-icon {\n      font-size: 16px;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Top\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--top {\n    flex-direction: column;\n\n    .nano-tab-group__nav-container {\n      &::after {\n        content: '';\n        inline-size: 86%;\n        box-shadow: 0 10px 40px 10px rgb(0 0 0 / var(--shadow-opacity));\n        block-size: 10px;\n        position: absolute;\n        inset-inline-start: 7%;\n        inset-block-end: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include mx.hide-scrollbar();\n\n      padding-inline: var(--tabs-padding-start) var(--tabs-padding-end);\n      padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n      display: flex;\n      overflow: auto hidden;\n      transition: #{tokens.$transition-medium} ease;\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to left,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--tabs-padding-start),\n          rgb(0 0 0 / 100%) calc(var(--tabs-padding-start) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--tabs-padding-end)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      mask-size: calc(100% + calc(var(--tabs-padding-end) * 4));\n      mask-position: calc(var(--tabs-padding-end) * -2);\n\n      &::after {\n        content: ' ';\n        padding-inline: 0 var(--tabs-padding-end);\n        padding-block: var(--tabs-padding-top) var(--tabs-padding-bottom);\n        line-height: 1;\n        flex: 0 0 auto;\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left {\n      .nano-tab-group__nav {\n        mask-position: 0;\n        mask-size: calc(100% + (var(--tabs-padding-end) * 2));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-position: calc(var(--tabs-padding-end) * -1);\n        mask-size: calc(100% + var(--tabs-padding-end));\n      }\n    }\n\n    &.nano-tab-group--has-scroll-controls-left.nano-tab-group--has-scroll-controls-right {\n      .nano-tab-group__nav {\n        mask-size: 100%;\n        mask-position: 0;\n      }\n    }\n\n    .nano-tab-group__tabs {\n      flex: 1 1 auto;\n      position: relative;\n      flex-direction: row;\n      text-align: center;\n      color: var(--tab-text-color);\n      inline-size: auto;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-block-end: -2px;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      order: 2;\n      background: var(--content-bg);\n      position: relative;\n      overflow: hidden;\n      inline-size: auto;\n      display: flex;\n      justify-content: center;\n      padding: var(--content-padding);\n      border-radius: var(--content-border-radius);\n      flex: 1 1 auto;\n    }\n  }\n\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n  // Start\n  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n  &--start {\n    flex-direction: row;\n\n    .nano-tab-group__nav {\n      background: var(--content-bg);\n    }\n\n    .nano-tab-group__tabs {\n      flex: 0 0 auto;\n      flex-direction: column;\n      color: var(--tab-text-color);\n      background: rgb(var(--tabs-bg-rgb));\n      border-inline-start:\n        solid var(--indicator-size)\n        var(--indicator-track-color);\n      text-align: start;\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      inset-inline-start: calc(-1 * 2px);\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n      border-radius: var(--content-border-radius);\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Host,\n  Listen,\n  Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../types/shared';\n\nlet id = 0;\n\n/**\n * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n *\n * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n *\n * @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n *\n * @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n */\n\n@Component({\n  tag: 'nano-tab-group',\n  styleUrl: 'tab-group.scss',\n  shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n  private baseId = `nano-tab-group-${++id}`;\n  private activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabs: HTMLElement;\n  private rightBtn: HTMLButtonElement;\n  private leftBtn: HTMLButtonElement;\n\n  private isRtl: boolean;\n  private initialTouchX: number = null;\n  private initialTouchY: number = null;\n\n  private resizeObserver: ResizeObserver;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  @Element() host: HTMLNanoTabGroupElement;\n\n  @State() hasScrollControls = false;\n  @State() hideControlRight = true;\n  @State() hideControlLeft = true;\n  @State() tab: string;\n\n  /**\n   * The placement of the tabs.\n   */\n  @Prop({ reflect: true }) placement: 'top' | 'start' = 'top';\n\n  /**\n   * Disables the scroll arrows that appear when tabs overflow.\n   */\n  @Prop() noScrollControls = false;\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Store the currently open tab (against this ID) in the component store.\n   * Use in conjunction with storeMethod\n   */\n  @Prop() storeId?: string;\n\n  /**\n   * The method of storage.\n   * Either session storage, url hash (after the '#') or url query (after the '?').\n   */\n  @Prop() storeMethod: StorageMethods = 'session';\n\n  /**\n   * Disable 'swipe to change tab' on devices with touch\n   */\n  @Prop() disableSwipe: boolean;\n\n  @Watch('tab')\n  handleTabNameChange() {\n    if (this.activeTab && this.activeTab.panel === this.tab) return;\n    const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n    this.setActiveTab(tab);\n  }\n\n  @Watch('placement')\n  handlePlacementChange() {\n    this.syncActiveTabIndicator();\n  }\n\n  @Watch('noScrollControls')\n  handleNoScrollControlsChange() {\n    this.updateScrollControls();\n  }\n\n  @Watch('hideControlRight')\n  hideRightBtn() {\n    if (!this.rightBtn) return;\n    displayTransition(this.rightBtn, {\n      className: 'is-shown',\n      show: !this.hideControlRight,\n    });\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, {\n      className: 'is-shown',\n      show: !this.hideControlLeft,\n    });\n  }\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n    else\n      setTimeout((_) => {\n        this.hideControlLeft = this.hideControlRight = true;\n      }, 20);\n  }\n\n  /** Emitted when a tab is shown. */\n  @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n  /** Emitted when a tab is hidden. */\n  @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n  /** Emitted when a closable tab is removed. */\n  @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n  /** Shows the specified tab panel. */\n  @Method()\n  async show(panel: string) {\n    if (this.activeTab && this.activeTab.panel === panel) return;\n\n    const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n    if (tab) this.setActiveTab(tab);\n  }\n\n  // Internal Methods\n\n  get getAllActiveTabs() {\n    return this.getAllTabs.filter((el: any) => !el.disabled);\n  }\n\n  get getAllTabs() {\n    return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n  }\n\n  get getAllPanels() {\n    return getDirectChildren<HTMLNanoTabContentElement>(\n      this.host,\n      'nano-tab-content'\n    );\n  }\n\n  get getActiveTab() {\n    return this.getAllActiveTabs.find((el) => el.active);\n  }\n\n  private updateScrollControls = () => {\n    if (this.noScrollControls) {\n      this.hasScrollControls = false;\n    } else {\n      this.hasScrollControls =\n        ['top'].includes(this.placement) &&\n        this.nav.scrollWidth > this.nav.clientWidth &&\n        this.nav.scrollWidth > this.tabs.clientWidth;\n    }\n  };\n\n  private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n    if (\n      tab &&\n      tab !== this.activeTab &&\n      !tab.disabled &&\n      this.getAllActiveTabs.includes(tab)\n    ) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n      this.tab = tab.panel;\n\n      // Sync tabs and panels\n      this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n      this.getAllPanels.map((el) => {\n        if (el.name === this.activeTab.panel) {\n          el.active = true;\n          this.activePanel = el;\n        } else el.active = false;\n        el.removeAttribute('animation-dir');\n      });\n\n      this.syncActiveTabIndicator();\n\n      // active tab can be changed on init - this won't be ready. No big thing\n      if (this.nav && ['top'].includes(this.placement)) {\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }\n\n      // Emit events\n      if (emitEvents) {\n        if (previousTab) {\n          this.nanoTabHide.emit({ name: previousTab.panel });\n        }\n\n        this.nanoTabShow.emit({ name: this.activeTab.panel });\n      }\n    }\n  }\n\n  private setAriaLabels() {\n    const tabs = this.getAllActiveTabs;\n    const panels = this.getAllPanels;\n\n    // Link each tab with its corresponding panel\n    tabs.map((tab, i) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        if (!panel.id) panel.id = `${this.baseId}-panel-${i}`;\n        if (!tab.id) tab.id = `${this.baseId}-tab-${i}`;\n\n        tab.setAttribute('aria-controls', panel.id);\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n    });\n  }\n\n  private syncActiveTabIndicator() {\n    this.getAllTabs.forEach((tab) =>\n      tab.setAttribute(\n        'direction',\n        this.placement === 'top' ? 'horizontal' : 'vertical'\n      )\n    );\n\n    const tab = this.getActiveTab;\n    if (!tab) return;\n\n    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\n\n    if (!this.activeTabIndicator) return;\n\n    const offsetTop = offset.top + this.nav.scrollTop;\n    const offsetLeft = offset.left;\n\n    switch (this.placement) {\n      case 'top':\n        this.activeTabIndicator.style.width = `${width}px`;\n        this.activeTabIndicator.style.height = null;\n        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'start':\n        this.activeTabIndicator.style.width = null;\n        this.activeTabIndicator.style.height = `${height}px`;\n        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n  }\n\n  private getNavWidth() {\n    if (!this.nav) return 0;\n    const computedStyle = getComputedStyle(this.nav);\n    let clientWidth = this.nav.clientWidth;\n    return (clientWidth -=\n      parseFloat(computedStyle.paddingLeft) +\n      parseFloat(computedStyle.paddingRight));\n  }\n\n  // Event handlers\n\n  @Listen('nanoTabClose')\n  handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n    let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n    const tab = ev.target;\n    if (tabIndex < 0) return;\n\n    const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n    if (!panel) return;\n\n    ev.stopImmediatePropagation();\n\n    const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n    if (closeEv.defaultPrevented) return;\n\n    // Show the previous tab if the tab is currently active\n    if (tab.active) {\n      tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n      const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n      if (prevTab) this.host.show(prevTab);\n    }\n\n    tab.remove();\n    panel.remove();\n    this.nanoTabClose.emit({ name: tab.panel });\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const tab = target.closest('nano-tab');\n\n    if (tab) this.setActiveTab(tab);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const activeEl = document.activeElement as any;\n    if (!activeEl || activeEl.tagName.toLowerCase() !== 'nano-tab') return;\n\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const target = event.target as HTMLElement;\n      const tab = target.closest('nano-tab');\n\n      if (tab) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    }\n\n    // Move focus left or right\n    if (\n      ![\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    )\n      return;\n\n    const tabs = this.getAllActiveTabs;\n    let index = tabs.indexOf(activeEl);\n\n    if (event.key === 'Home') index = 0;\n    if (event.key === 'End') index = tabs.length - 1;\n\n    if (this.placement === 'top') {\n      if (\n        (this.isRtl && event.key === 'ArrowRight') ||\n        (!this.isRtl && event.key === 'ArrowLeft')\n      ) {\n        index = Math.max(0, index - 1);\n      }\n      if (\n        (this.isRtl && event.key === 'ArrowLeft') ||\n        (!this.isRtl && event.key === 'ArrowRight')\n      ) {\n        index = Math.min(tabs.length - 1, index + 1);\n      }\n    }\n\n    if (this.placement === 'start') {\n      if (event.key === 'ArrowUp') index = Math.max(0, index - 1);\n      if (event.key === 'ArrowDown')\n        index = Math.min(tabs.length - 1, index + 1);\n    }\n\n    tabs[index].setFocus();\n\n    if (this.placement === 'top') {\n      scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n    }\n    // need to stop bubbling otherwise it will focus on parent tabs if nested\n    event.stopPropagation();\n    // stop the browser moving about\n    event.preventDefault();\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    const endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    const endLeft = this.isRtl\n      ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n      : this.nav.scrollLeft === 0;\n\n    if (endLeft) {\n      this.hideControlLeft = true;\n      this.hideControlRight = false;\n    } else if (endRight) {\n      this.hideControlLeft = false;\n      this.hideControlRight = true;\n    } else {\n      this.hideControlRight = false;\n      this.hideControlLeft = false;\n    }\n  };\n\n  private handleBtnClick = (goRight: boolean = false) => {\n    const navWidth = this.getNavWidth();\n    let leftAmt;\n    if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n    else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n    try {\n      this.nav.scroll({\n        left: leftAmt,\n        behavior: 'smooth',\n      });\n    } catch (_e) {\n      this.nav.scrollLeft = leftAmt;\n    }\n  };\n\n  private handleTouchStart = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    this.initialTouchX = touch.pageX;\n    this.initialTouchY = touch.pageY;\n  };\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    if (this.disableSwipe) return;\n    const touch = event.changedTouches[0];\n    const distX = touch.pageX - this.initialTouchX; // get horizontal dist travelled\n    const threshold = 70;\n\n    const xDiff = this.initialTouchX - touch.clientX;\n    const yDiff = this.initialTouchY - touch.clientY;\n\n    const isHorizontalSwipe =\n      Math.abs(distX) >= threshold && Math.abs(yDiff) <= 50;\n\n    const tabs = this.getAllActiveTabs;\n    const currIndex = tabs.findIndex((el) => el.active);\n\n    if (isHorizontalSwipe) {\n      const toGo =\n        (distX < 0 && this.placement === 'top') ||\n        (distX > 0 && this.placement !== 'top')\n          ? 1\n          : -1;\n\n      if (tabs[currIndex + toGo]) {\n        this.setActiveTab(tabs[currIndex + toGo]);\n\n        if (Math.abs(xDiff) > Math.abs(yDiff)) {\n          if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n          else this.activePanel.setAttribute('animation-dir', 'right');\n        }\n      }\n    }\n    this.initialTouchX = null;\n    this.initialTouchY = null;\n  };\n\n  private handleContentSlotChange = () => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n    });\n  };\n\n  private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n    setTimeout(() => {\n      this.setAriaLabels();\n      this.handleTabScroll();\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.updateScrollControls();\n    }, 500);\n\n    /** maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n    const nodes = ev.target.assignedElements({ flatten: true });\n    nodes.forEach((node) => {\n      if (!this.mutationObservers.get(node)) {\n        const mo = new MutationObserver(() => {\n          setTimeout(() => {\n            this.syncActiveTabIndicator();\n            this.handleTabScroll();\n            this.updateScrollControls();\n          }, 500);\n        });\n        this.mutationObservers.set(node, mo);\n\n        mo.observe(node, {\n          characterData: true,\n          childList: true,\n          subtree: true,\n        });\n      }\n    });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    // Initial IO - watching for all content to be loaded\n    const observer = new IntersectionObserver((entries, observer) => {\n      if (entries[0].intersectionRatio > 0) {\n        this.setAriaLabels();\n        this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n\n        if (this.storeId)\n          ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n        observer.unobserve(entries[0].target);\n      }\n    });\n    observer.observe(this.host);\n\n    requestAnimationFrame(() => this.updateScrollControls());\n\n    if (!window['ResizeObserver']) return;\n\n    this.resizeObserver = new ResizeObserver(() => {\n      setTimeout(() => {\n        this.updateScrollControls();\n        this.syncActiveTabIndicator();\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n      }, 500);\n    });\n    this.resizeObserver.observe(this.nav);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    if (Build.isServer) {\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      this.setAriaLabels();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = this.host.ownerDocument.dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={this.isRtl ? 'rtl' : null}\n      >\n        <div\n          part=\"base\"\n          class={{\n            'nano-tab-group': true,\n            'nano-tab-group--top': this.placement === 'top',\n            'nano-tab-group--start': this.placement === 'start',\n            'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n            'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n            'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--left': true,\n                }}\n                ref={(btn) => (this.leftBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n              >\n                <nano-icon\n                  name=\"light/chevron-left\"\n                  ariaLabel=\"Scroll tabs towards the start\"\n                ></nano-icon>\n              </button>\n            )}\n            <div\n              ref={(el) => (this.nav = el)}\n              class=\"nano-tab-group__nav\"\n              onScroll={this.handleTabScroll}\n            >\n              <div\n                ref={(el) => (this.tabs = el)}\n                part=\"tabs\"\n                class=\"nano-tab-group__tabs\"\n                role=\"tablist\"\n                aria-orientation={\n                  this.placement === 'start' ? 'vertical' : 'horizontal'\n                }\n              >\n                <div\n                  ref={(el) => (this.activeTabIndicator = el)}\n                  part=\"active-tab-indicator\"\n                  class=\"nano-tab-group__active-tab-indicator\"\n                />\n                <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n              </div>\n            </div>\n            {this.placement === 'top' && (\n              <button\n                disabled={!this.hasScrollControls}\n                class={{\n                  'nano-tab-group__scroll-button': true,\n                  'nano-tab-group__scroll-button--right': true,\n                }}\n                ref={(btn) => (this.rightBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n              >\n                <nano-icon\n                  name=\"light/chevron-right\"\n                  ariaLabel=\"Scroll tabs towards the end\"\n                ></nano-icon>\n              </button>\n            )}\n          </div>\n          <slot name=\"tab-content-header\" />\n          <div\n            part=\"body\"\n            class=\"nano-tab-group__body\"\n            onTouchStart={this.handleTouchStart}\n            onTouchEnd={this.handleTouchEnd}\n          >\n            <slot onSlotchange={this.handleContentSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as a,c as e,g as t,h as o,a as n}from"./index-815d3f98.js";const i=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding-v:0.75rem;--padding-h:1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;--border-radius:inherit;display:inline-block;cursor:pointer;border-radius:var(--border-radius)}:host([direction=vertical]){--padding-v:1rem;--padding-h:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host(.nano-sortable__dragged){box-shadow:none}:host(.nano-sortable__dragged) .nanotab{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);margin-block-start:var(--tab-indicator-size);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{margin-block-start:0;border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);margin-inline-end:var(--tab-spacing);padding-block:var(--padding-v);padding-inline:var(--padding-h);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;align-items:center;position:relative}.nanotab ::slotted(*){display:flex;align-items:center}.nanotab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;background:var(--inactive-bg);z-index:1}:host(:last-of-type) .nanotab{margin-inline-end:0}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab--closable{padding-inline-end:0}.nanotab__tab{display:flex;border-radius:inherit}.nanotab__tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab__tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab__tab::before{content:"";position:absolute;inset:0;border-radius:inherit}.nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow) inset}.nanotab--active .nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow)}.nanotab__close-button{margin-inline:var(--nano-spacing-small, 8px) calc(var(--padding-h) / 2);appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) !important}';const r=i;let s=0;const b=class{constructor(t){a(this,t);this.nanoTabClose=e(this,"nanoTabClose",7)}tabId=`nano-tab-${++s}`;tab;get host(){return t(this)}panel="";active=false;disabled=false;closable=false;nanoTabClose;async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}handleCloseClick=()=>{this.nanoTabClose.emit()};handleCloseKeydown=a=>{if(a.key===" ")this.handleCloseClick()};render(){return o(n,{key:"d563546e0cf992e2dd33534b6a39706e1ed3094a",id:this.host.id||this.tabId,role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false"},o("div",{key:"a467e6b0bf36c32efe02a00f7596eaea92ac21c9",part:"base",class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled,"nanotab--closable":this.closable}},o("slot",{key:"b7d6bfeca2bb488155bfdb7c2c7ab97ef6f68280",name:"start"}),o("div",{key:"035e2c120ed6773969dee5477b871314938e60d2",part:"tab",ref:a=>this.tab=a,tabindex:this.disabled||!this.active?"-1":"0",class:"nanotab__tab"},o("slot",{key:"6690cc8020408cd2b30bfcc5b5eac9f24e461156"})),this.closable&&!this.disabled&&o("nano-icon-button",{key:"4dc8951c12d07a89acfec20dbc722bb147cae53d",label:"Close this tab",iconName:"light/xmark",class:"nanotab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,part:"close-btn"}),o("slot",{key:"0f54d47bb9b53e5de97ca9ed6b4362087727c8f6",name:"end"})))}};b.style=r;export{b as nano_tab};
+import{r as a,c as e,g as t,h as o,a as n}from"./index-3118109b.js";const i=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--padding-v:0.75rem;--padding-h:1rem;--bg-rgb:var(--nano-layer-bg-rgb, 255 255 255);--active-bg:rgb(var(--bg-rgb) / 100%);--inactive-bg:rgb(var(--bg-rgb) / 70%);--disabled-bg-rgb:var(--bg-rgb);--text-color:#007495;--disabled-text-color:#455556;--active-text-color:#0c5a71;--h-font-size:0.93em;--v-font-size:0.875em;--tab-spacing:0.5rem;--tab-divider-size:0;--tab-divider-color:#90c6e7;--tab-indicator-size:5px;--border-radius:inherit;display:inline-block;cursor:pointer;border-radius:var(--border-radius)}:host([direction=vertical]){--padding-v:1rem;--padding-h:1rem}:host([direction=vertical]) .nanotab{font-size:var(--v-font-size)}:host([direction=vertical]) .nanotab.nanotab--active{font-weight:600;color:var(--active-text-color)}:host(.nano-sortable__dragged){box-shadow:none}:host(.nano-sortable__dragged) .nanotab{box-shadow:var(--nano-layer-shadow-large, 0 2px 8px rgba(0, 0, 0, 0.2))}:host([direction=horizontal]) .nanotab{font-size:var(--h-font-size);margin-block-start:var(--tab-indicator-size);border-inline-end:solid var(--tab-divider-size) var(--tab-divider-color)}:host([direction=horizontal]) .nanotab.nanotab--active{margin-block-start:0;border-block-start:solid var(--tab-indicator-size) var(--tab-indicator-color);background:var(--active-bg);color:var(--active-text-color)}.nanotab{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--border-radius);margin-inline-end:var(--tab-spacing);padding-block:var(--padding-v);padding-inline:var(--padding-h);display:flex;block-size:100%;inline-size:auto;background:var(--inactive-bg);-webkit-user-select:none;user-select:none;overflow:visible;white-space:nowrap;align-items:center;position:relative}.nanotab ::slotted(*){display:flex;align-items:center}.nanotab ::slotted(.nano-sortable__keyboard-handle){position:absolute;inset-inline-end:-1em;background:var(--inactive-bg);z-index:1}:host(:last-of-type) .nanotab{margin-inline-end:0}.nanotab--disabled{background:rgb(var(--disabled-bg-rgb)/100%);opacity:0.5;cursor:not-allowed;color:var(--disabled-text-color)}.nanotab--closable{padding-inline-end:0}.nanotab__tab{display:flex;border-radius:inherit}.nanotab__tab:hover:not(.tab--disabled){text-shadow:0 0 0.01px var(--text-color)}.nanotab__tab:focus{outline:none;outline-style:none;box-shadow:none;border-color:transparent}.nanotab__tab::before{content:"";position:absolute;inset:0;border-radius:inherit}.nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow) inset}.nanotab--active .nanotab__tab:focus-visible:not(.nanotab--disabled)::before{box-shadow:var(--focus-shadow)}.nanotab__close-button{margin-inline:var(--nano-spacing-small, 8px) calc(var(--padding-h) / 2);appearance:none !important;--padding:var(--nano-spacing-xsmall, 4px) !important}';const r=i;let s=0;const b=class{constructor(t){a(this,t);this.nanoTabClose=e(this,"nanoTabClose",7)}tabId=`nano-tab-${++s}`;tab;get host(){return t(this)}panel="";active=false;disabled=false;closable=false;nanoTabClose;async setFocus(){this.tab.focus({preventScroll:true})}async removeFocus(){this.tab.blur()}handleCloseClick=()=>{this.nanoTabClose.emit()};handleCloseKeydown=a=>{if(a.key===" ")this.handleCloseClick()};render(){return o(n,{key:"d563546e0cf992e2dd33534b6a39706e1ed3094a",id:this.host.id||this.tabId,role:"tab","aria-disabled":this.disabled?"true":"false","aria-selected":this.active?"true":"false"},o("div",{key:"a467e6b0bf36c32efe02a00f7596eaea92ac21c9",part:"base",class:{nanotab:true,"nanotab--active":this.active,"nanotab--disabled":this.disabled,"nanotab--closable":this.closable}},o("slot",{key:"b7d6bfeca2bb488155bfdb7c2c7ab97ef6f68280",name:"start"}),o("div",{key:"035e2c120ed6773969dee5477b871314938e60d2",part:"tab",ref:a=>this.tab=a,tabindex:this.disabled||!this.active?"-1":"0",class:"nanotab__tab"},o("slot",{key:"6690cc8020408cd2b30bfcc5b5eac9f24e461156"})),this.closable&&!this.disabled&&o("nano-icon-button",{key:"4dc8951c12d07a89acfec20dbc722bb147cae53d",label:"Close this tab",iconName:"light/xmark",class:"nanotab__close-button",onClick:this.handleCloseClick,onKeyDown:this.handleCloseKeydown,part:"close-btn"}),o("slot",{key:"0f54d47bb9b53e5de97ca9ed6b4362087727c8f6",name:"end"})))}};b.style=r;export{b as nano_tab};
 //# sourceMappingURL=nano-tab.entry.js.map