@nanoporetech-digital/components 3.2.0 → 3.3.1

package/dist/nano-components/{p-02df1f62.entry.js.map → p-1f347342.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","this","slideId","slideIds","stateChanging","onKeyDown","ev","key","open","onMouseDown","[object Object]","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","isLoading","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","createColorClasses","color","loaded","onTouchEnd","aria-controls","aria-expanded","display","noHandle","part","transform","iconRotation","name","label","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n * @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    this.attachRO();\n  }\n\n  connectedCallback() {\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            onTouchEnd={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            part=\"button\"\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\" part=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n            part=\"content\"\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}
+{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","this","slideId","slideIds","stateChanging","onKeyDown","ev","key","open","onMouseDown","[object Object]","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","isLoading","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","createColorClasses","color","loaded","onTouchEnd","aria-controls","aria-expanded","display","noHandle","part","transform","iconRotation","name","label","ref","div","tabindex","id"],"mappings":";;;iJAAA,MAAMA,EAAa,s8HCoCNC,EAAO,6GAGVC,KAAAC,QAAU,gBAAgBC,MAI1BF,KAAAG,cAAyB,MAqDzBH,KAAAI,UAAaC,IACnB,OAAQA,EAAGC,KACT,IAAK,QACL,IAAK,IACHN,KAAKO,MAAQP,KAAKO,KAClB,QAIEP,KAAAQ,YAAc,KACpB,GAAIR,KAAKG,cAAe,OACxBH,KAAKO,MAAQP,KAAKO,qBA9DC,gBAUG,aAKgC,oBAK5B,wBAKG,wBAoB/BE,cACET,KAAKG,cAAgB,KACrB,GAAIH,KAAKO,KAAMP,KAAKU,YACfV,KAAKW,OAiBJF,OACNT,KAAKY,WAAWC,KAAKb,KAAKO,MAC1BO,EAAkBd,KAAKe,UAAW,WAAY,OAAOC,MACnD,IAAOhB,KAAKG,cAAgB,QAE9BH,KAAKe,UAAUE,MAAMC,OAAS,MAGxBT,OACNT,KAAKmB,WAAWN,OAChBC,EAAkBd,KAAKe,UAAW,WAAY,MAAMC,MAAK,KACvDhB,KAAKG,cAAgB,SAEvBH,KAAKe,UAAUE,MAAMC,OAASlB,KAAKoB,YAAYC,aAAe,KAGxDZ,SACN,IACGT,KAAKO,OACLP,KAAKoB,cACLpB,KAAKe,WACNf,KAAKG,cAEL,OACFmB,GAAS,KACP,GAAItB,KAAKoB,YAAYC,aAAe,EAAG,CACrCE,GAAU,KACRvB,KAAKe,UAAUE,MAAMC,OAASlB,KAAKoB,YAAYC,aAAe,YAM9DZ,WACN,GAAIT,KAAKwB,KAAOxB,KAAKoB,YAAa,OAElC,MAAMI,EAAMxB,KAAKwB,GAAK,IAAIC,gBAAe,IAAMzB,KAAK0B,WACpDF,EAAGG,QAAQ3B,KAAKoB,aAGlBX,oBACET,KAAK4B,eAAiB5B,KAAK6B,GAAGC,cAAc,uBAC5C9B,KAAK+B,aAAe/B,KAAK6B,GAAGC,cAAc,qBAC1CE,YAAW,KACThC,KAAKiC,UAAY,QAChB,KAGLxB,mBACE,GAAIT,KAAKO,KAAM,CAEbyB,YAAW,KACThC,KAAKU,SACJ,GAELV,KAAKkC,WAGPzB,oBACE,MAAM0B,EAAMnC,KAAKmC,GAAK,IAAIC,kBAAiB,IAAMpC,KAAK0B,WACtDS,EAAGR,QAAQ3B,KAAK6B,GAAI,CAAEQ,UAAW,KAAMC,QAAS,KAAMC,WAAY,QAClEvC,KAAKkC,WAGPzB,uBACE,GAAIT,KAAKmC,GAAInC,KAAKmC,GAAGK,aACrB,GAAIxC,KAAKwB,GAAIxB,KAAKwB,GAAGgB,aAGvB/B,SACE,OACEgC,EAACC,EAAI,CAACC,MAAO,IAAKC,EAAmB5C,KAAK6C,SACxCJ,EAAA,MAAA,CACEE,MAAO,CACLpC,KAAMP,KAAKO,KACXuC,QAAS9C,KAAKiC,YAGhBQ,EAAA,SAAA,CACErC,UAAWJ,KAAKI,UAChBI,YAAaR,KAAKQ,YAClBuC,WAAY/C,KAAKQ,YAAWwC,gBACbhD,KAAKC,QAAOgD,gBACZjD,KAAKO,KAAO,OAAS,QACpCU,MAAO,CAAEiC,QAASlD,KAAKmD,SAAW,OAAS,IAC3CC,KAAK,UAEJpD,KAAK4B,aACJa,EAAA,OAAA,CACEW,KAAK,cACLT,MAAM,mBACN1B,MAAO,CACLoC,UAAWrD,KAAKO,KAAO,UAAUP,KAAKsD,mBAAqB,KAG7Db,EAAA,OAAA,CAAMc,KAAK,gBACN,GAITd,EAAA,MAAA,CAAKE,MAAM,QAAQS,KAAK,SACrBpD,KAAKwD,MAAQxD,KAAKwD,MAAQf,EAAA,OAAA,CAAMc,KAAK,WAEvCvD,KAAK+B,WACJU,EAAA,OAAA,CACEW,KAAK,YACLT,MAAM,iBACN1B,MAAO,CACLoC,UAAWrD,KAAKO,KAAO,UAAUP,KAAKsD,mBAAqB,KAG7Db,EAAA,OAAA,CAAMc,KAAK,cACN,IAKXd,EAAA,MAAA,CACEE,MAAM,UACNc,IAAMC,GAAS1D,KAAKe,UAAY2C,EAChCC,SAAS,KACTC,GAAI5D,KAAKC,QACTmD,KAAK,WAELX,EAAA,MAAA,CAAKgB,IAAMC,GAAS1D,KAAKoB,YAAcsC,EAAMf,MAAM,iBACjDF,EAAA,OAAA,uFASd,IAAIvC,EAAW","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-end-end-radius: 0;\n    border-end-start-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      margin-inline: 0 var(--padding);\n      margin-block: 0;\n    }\n\n    &--end {\n      margin-inline: var(--padding) 0;\n      margin-block: 0;\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n * @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    this.attachRO();\n  }\n\n  connectedCallback() {\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            onTouchEnd={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            part=\"button\"\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\" part=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n            part=\"content\"\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/p-23575705.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as s,c as t,h as i,g as n}from"./p-1fe12320.js";import{f as a}from"./p-f8f89998.js";import{c as o}from"./p-ee045579.js";const r=".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block-start:0;margin-block-end:0;margin-inline-start:calc(var(--symbol-spacing) * -1);margin-inline-end:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentColor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";const e=class{constructor(i){s(this,i);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.handleClick=s=>{if(this.disabled||this.readonly){return}const t=this.getValueFromMousePosition(s);this.value=t===this.value?0:t;this.isHovering=false};this.handleKeyDown=s=>{if(this.disabled||this.readonly){return}if(s.key==="ArrowLeft"){const t=s.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.max(0,this.value-t));s.preventDefault()}if(s.key==="ArrowRight"){const t=s.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.min(this.max,this.value+t));s.preventDefault()}if(s.key==="Home"){this.value=0;s.preventDefault()}if(s.key==="End"){this.value=this.max;s.preventDefault()}};this.handleMouseEnter=()=>{this.isHovering=true};this.handleMouseLeave=()=>{this.isHovering=false};this.handleFocus=()=>{this.nanoFocus.emit()};this.handleBlur=()=>{this.nanoBlur.emit()};this.handleMouseMove=s=>{this.hoverValue=this.getValueFromMousePosition(s)};this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=s=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){this.symbol=s=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(s){const t=this.rating.getBoundingClientRect().left;const i=this.rating.getBoundingClientRect().width;let n;n=this.roundToPrecision((s.clientX-t)/i*this.max,this.precision);if(this.isRtl)n=this.max+this.precision-n;return o(n,0,this.max)}roundToPrecision(s,t=.5){const i=1/t;return Math.ceil(s*i)/i}clip(s){if(!this.rating)return;const t=this.rating.getBoundingClientRect().width;if(this.isRtl)return`rect(0, ${t}px, 2em, ${t-t/100*(s/this.max*100)}px)`;return`rect(0, ${t/100*(s/this.max*100)}px, 2em, 0)`}componentDidLoad(){a.observe(this.rating);setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){a.unobserve(this.rating)}render(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";const s=Array.from(Array(this.max).keys());let t=0;if(this.disabled||this.readonly){t=this.value}else{t=this.isHovering?this.hoverValue:this.value}return i("div",{class:"rating-wrap"},i("div",{dir:this.isRtl?"rtl":null,ref:s=>this.rating=s,part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},i("span",{class:"rating__symbols rating__symbols--inactive"},s.map((s=>i("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(t)===s+1},role:"presentation",onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(s+1)})))),i("span",{ref:s=>this.indicator=s,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(t)}},s.map((s=>i("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(t)===s+1},role:"presentation",innerHTML:this.symbol(s+1)})))),i("input",{type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};e.style=r;export{e as nano_rating};
+//# sourceMappingURL=p-23575705.entry.js.map

package/dist/nano-components/{p-6958df8c.entry.js.map → p-23575705.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","Rating","this","handleClick","event","disabled","readonly","newValue","getValueFromMousePosition","value","isHovering","handleKeyDown","key","decrement","shiftKey","precision","roundToPrecision","Math","max","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","hoverValue","_number","symbolName","[object Object]","nanoChange","symbol","_","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","focusVisible","observe","setTimeout","indicator","style","clip","host","dir","ownerDocument","unobserve","counter","Array","from","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type","name"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: calc(var(--symbol-spacing) * -1);\n  margin-inline-end: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","Rating","this","handleClick","event","disabled","readonly","newValue","getValueFromMousePosition","value","isHovering","handleKeyDown","key","decrement","shiftKey","precision","roundToPrecision","Math","max","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","hoverValue","_number","symbolName","[object Object]","nanoChange","symbol","_","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","focusVisible","observe","setTimeout","indicator","style","clip","host","dir","ownerDocument","unobserve","counter","Array","from","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type","name"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: calc(var(--symbol-spacing) * -1);\n  margin-inline-end: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentColor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-244223f0.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as a,h as n,a as o,g as i}from"./p-1fe12320.js";import{g as s,a as r}from"./p-845ae77e.js";import{f as e}from"./p-f8f89998.js";import{s as h}from"./p-885b6950.js";import{C as l}from"./p-e3860f00.js";import{c}from"./p-7b3638b7.js";import{d}from"./p-167b9165.js";import"./p-9746b0a5.js";import"./p-69a3e911.js";const b=':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);--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 (max-width: 768px){:host{--tabs-padding-start:1.5rem;--tabs-padding-end:1.5rem}}:host ::slotted(nano-tab){--tab-indicator-color:var(--indicator-color);--bg-rgb:var(--tabs-bg-rgb);--border-radius:var(--tab-border-radius)}:host([placement=start]),:host([placement=end]){--content-padding:1rem;--tabs-padding-start:0;--tabs-padding-end:0;--tabs-padding-top:0;--tabs-padding-bottom:0;--tab-text-color:#455556;--indicator-color:#007495;--indicator-size:2px}:host(.nano-color){--indicator-color:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--tab-text-color:rgba(var(--nano-color-base-rgb), 0.7)}:host(.nano-color) ::slotted(nano-tab){--active-text-color:var(--nano-color-shade, var(--nano-color-primary-shade, #00637f))}.nano-tab-group{display:flex;border-radius:0;width:100%;flex:inherit}.nano-tab-group__tabs{display:flex;position:relative;width: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:not(.focus-visible) ::slotted(nano-tab){--focus-shadow:none}.nano-tab-group .nano-tab-group__nav-container{position:relative;display:flex;background:var(--tabs-container-bg)}.nano-tab-group button{-webkit-appearance:none;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:focus{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:"";width:86%;box-shadow:0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));height: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-x:auto;overflow-y: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, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(0, 0, 0, var(--fade-transparency)));mask-image:linear-gradient(to left, rgba(0, 0, 0, var(--fade-transparency)) 0, rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start), black calc(var(--tabs-padding-start) * 2), black calc(100% - var(--tabs-padding-end) * 2), rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)), rgba(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);width: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;width: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-start-start-radius:0;border-start-end-radius:var(--content-border-radius);border-end-end-radius:var(--content-border-radius);border-end-start-radius:0}';const p=class{constructor(n){t(this,n);this.nanoTabShow=a(this,"nanoTabShow",7);this.nanoTabHide=a(this,"nanoTabHide",7);this.nanoTabWillClose=a(this,"nanoTabWillClose",7);this.nanoTabClose=a(this,"nanoTabClose",7);this.initialTouchX=null;this.initialTouchY=null;this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(this.noScrollControls){this.hasScrollControls=false}else{this.hasScrollControls=["top"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth&&this.nav.scrollWidth>this.tabs.clientWidth}};this.handleClick=t=>{const a=t.target;const n=a.closest("nano-tab");if(n)this.setActiveTab(n)};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const a=t.target;const n=a.closest("nano-tab");if(n){this.setActiveTab(n);t.preventDefault()}}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const a=document.activeElement;if(a&&a.tagName.toLowerCase()==="nano-tab"){const n=this.getAllActiveTabs;let o=n.indexOf(a);if(t.key==="Home"){o=0}else if(t.key==="End"){o=n.length-1}else if(this.isRtl&&t.key==="ArrowRight"||!this.isRtl&&t.key==="ArrowLeft"){o=Math.max(0,o-1)}else if(this.isRtl&&t.key==="ArrowLeft"||!this.isRtl&&t.key==="ArrowRight"){o=Math.min(n.length-1,o+1)}n[o].setFocus();if(["top"].includes(this.placement)){h(n[o],this.nav,"horizontal","center")}t.stopPropagation();t.preventDefault()}}};this.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}};this.handleBtnClick=(t=false)=>{const a=this.getNavWidth();let n;if(t)n=this.nav.scrollLeft+a-20;else n=this.nav.scrollLeft-a+20;try{this.nav.scroll({left:n,behavior:"smooth"})}catch(t){this.nav.scrollLeft=n}};this.handleTouchStart=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{if(this.disableSwipe)return;const a=t.changedTouches[0];const n=a.pageX-this.initialTouchX;const o=a.pageY-this.initialTouchY;const i=70;const s=this.initialTouchX-a.clientX;const r=this.initialTouchY-a.clientY;const e=Math.abs(n)>=i&&Math.abs(o)<=i;const h=this.getAllActiveTabs;const l=h.findIndex((t=>t.active));if(e){const t=n<0&&this.placement==="top"||n>0&&this.placement!=="top"?1:-1;if(h[l+t]){this.setActiveTab(h[l+t]);if(Math.abs(s)>Math.abs(r)){if(s>0)this.activePanel.setAttribute("animation-dir","left");else this.activePanel.setAttribute("animation-dir","right")}}}this.initialTouchX=null;this.initialTouchY=null};this.handleContentSlotChange=()=>{setTimeout((()=>{this.setAriaLabels();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false)}))};this.handleTabSlotChange=t=>{setTimeout((()=>{this.setAriaLabels();this.handleTabScroll();this.setActiveTab(this.getActiveTab||this.getAllActiveTabs[0],false);this.updateScrollControls()}),500);const a=t.target.assignedNodes({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})}}))};this.hasScrollControls=false;this.hideControlRight=true;this.hideControlLeft=true;this.tab=undefined;this.placement="top";this.noScrollControls=false;this.color=undefined;this.storeId=undefined;this.storeMethod="session";this.disableSwipe=undefined}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;d(this.rightBtn,"is-shown",!this.hideControlRight)}hideLeftBtn(){if(!this.leftBtn)return;d(this.leftBtn,"is-shown",!this.hideControlLeft)}watchScrollControls(){if(this.hasScrollControls)setTimeout((t=>this.handleTabScroll()),20);else setTimeout((t=>{this.hideControlLeft=this.hideControlRight=true}),20)}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 s(this.host,"nano-tab")}get getAllPanels(){return s(this.host,"nano-tab-content")}get getActiveTab(){return this.getAllActiveTabs.find((t=>t.active))}setActiveTab(t,a=true){if(t&&t!==this.activeTab&&!t.disabled&&this.getAllActiveTabs.includes(t)){const n=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(["top"].includes(this.placement)){h(this.activeTab,this.nav,"horizontal","center")}if(a){if(n){this.nanoTabHide.emit({name:n.panel})}this.nanoTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllActiveTabs;const a=this.getAllPanels;t.map((t=>{const n=a.find((a=>a.name===t.panel));if(n){t.setAttribute("aria-controls",n.getAttribute("id"));n.setAttribute("aria-labelledby",t.getAttribute("id"))}}))}syncActiveTabIndicator(){this.getAllTabs.forEach((t=>t.setAttribute("direction",this.placement==="top"?"horizontal":"vertical")));const t=this.getActiveTab;const a=t.shadowRoot.querySelector(".nanotab")?.clientWidth||0;const n=t.clientHeight;const o=r(t,this.tabs);const i=o.top+this.nav.scrollTop;const s=o.left;switch(this.placement){case"top":this.activeTabIndicator.style.width=`${a}px`;this.activeTabIndicator.style.height=null;this.activeTabIndicator.style.transform=`translateX(${s}px)`;break;case"start":this.activeTabIndicator.style.width=null;this.activeTabIndicator.style.height=`${n}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 n=t.target;if(a<0)return;const o=this.getAllPanels.find((t=>t.name===n.panel));if(!o)return;t.stopImmediatePropagation();const i=this.nanoTabWillClose.emit({name:n.panel});if(i.defaultPrevented)return;if(n.active){a=a===0?1:a-1;const t=this.getAllActiveTabs[a]?.panel;if(t)this.host.show(t)}n.remove();o.remove();this.nanoTabClose.emit({name:n.panel})}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);e.observe(this.tabGroup);if(this.leftBtn){e.observe(this.leftBtn);e.observe(this.rightBtn)}this.resizeObserver=new ResizeObserver((()=>{setTimeout((()=>{this.updateScrollControls();this.syncActiveTabIndicator();h(this.activeTab,this.nav,"horizontal","center")}),500)}));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()))}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){e.unobserve(this.tabGroup);if(this.leftBtn){e.unobserve(this.leftBtn);e.unobserve(this.rightBtn)}if(this.resizeObserver)this.resizeObserver.unobserve(this.nav)}render(){this.isRtl=this.host.ownerDocument.dir==="rtl";return n(o,{class:{...c(this.color)},dir:this.isRtl?"rtl":null},n("div",{part:"base",ref:t=>this.tabGroup=t,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",{class:"nano-tab-group__nav-container",part:"nav"},this.placement==="top"&&n("button",{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",{name:"light/chevron-left"})),n("div",{ref:t=>this.nav=t,class:"nano-tab-group__nav",onScroll:this.handleTabScroll},n("div",{ref:t=>this.tabs=t,part:"tabs",class:"nano-tab-group__tabs",role:"tablist"},n("div",{ref:t=>this.activeTabIndicator=t,part:"active-tab-indicator",class:"nano-tab-group__active-tab-indicator"}),n("slot",{name:"tabs",onSlotchange:this.handleTabSlotChange}))),this.placement==="top"&&n("button",{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",{name:"light/chevron-right"}))),n("slot",{name:"tab-content-header"}),n("div",{part:"body",class:"nano-tab-group__body",onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},n("slot",{onSlotchange:this.handleContentSlotChange}))))}get host(){return i(this)}static get watchers(){return{tab:["handleTabNameChange"],placement:["handlePlacementChange"],noScrollControls:["handleNoScrollControlsChange"],hideControlRight:["hideRightBtn"],hideControlLeft:["hideLeftBtn"],hasScrollControls:["watchScrollControls"]}}};p.style=b;export{p as nano_tab_group};
+//# sourceMappingURL=p-244223f0.entry.js.map

package/dist/nano-components/{p-6cd59e58.entry.js.map → p-244223f0.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","stopPropagation","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","[object Object]","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","requestAnimationFrame","dir","ownerDocument","h","Host","class","createColorClasses","color","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$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);\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);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($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: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$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);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-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  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\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($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\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: #{$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:focus {\n      box-shadow: #{$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        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 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 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-x: auto;\n      overflow-y: hidden;\n      transition: #{$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          rgba(0, 0, 0, var(--fade-transparency)) 0,\n          rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n          rgba(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      width: 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      width: 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: solid var(--indicator-size) 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-start-start-radius: 0;\n      border-start-end-radius: var(--content-border-radius);\n      border-end-end-radius: var(--content-border-radius);\n      border-end-start-radius: 0;\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} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\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 '../../interface';\n\n/**\n * A tradtional 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 * Horizonal 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 activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: 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() 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, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\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      // active tab can be changed on init - this won't be ready. No big thing\n      this.syncActiveTabIndicator();\n      if (['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) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('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    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\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    // 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      }\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      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else 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        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\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  };\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 traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\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(distY) <= threshold;\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.assignedNodes({ 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    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\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    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).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          ref={(el) => (this.tabGroup = el)}\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                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 name=\"light/chevron-left\"></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              >\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                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 name=\"light/chevron-right\"></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"]}
+{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","updateScrollControls","noScrollControls","hasScrollControls","includes","placement","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","document","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","stopPropagation","handleTabScroll","hideControlLeft","hideControlRight","endRight","scrollLeft","endLeft","handleBtnClick","goRight","navWidth","getNavWidth","leftAmt","scroll","left","behavior","e","handleTouchStart","disableSwipe","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","xDiff","clientX","yDiff","clientY","isHorizontalSwipe","abs","currIndex","findIndex","el","active","toGo","activePanel","setAttribute","handleContentSlotChange","setTimeout","setAriaLabels","getActiveTab","handleTabSlotChange","ev","nodes","assignedNodes","flatten","forEach","node","get","mo","MutationObserver","syncActiveTabIndicator","set","observe","characterData","childList","subtree","[object Object]","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","show","remove","nanoTabClose","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","storeMethod","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","requestAnimationFrame","dir","ownerDocument","h","Host","class","createColorClasses","color","part","ref","nano-tab-group","nano-tab-group--top","nano-tab-group--start","nano-tab-group--has-scroll-controls","nano-tab-group--has-scroll-controls-left","nano-tab-group--has-scroll-controls-right","onClick","onKeyDown","nano-tab-group__scroll-button","nano-tab-group__scroll-button--left","btn","onScroll","role","onSlotchange","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --indicator-transition: Only relevant to placement 'start'. defaults to #{$transition-fast};\n  * @prop --indicator-color: defaults to #{map.get($colors, lightblue)} on placement 'top' and #{map.get($colors, blue)} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{map.get($colors, lightgrey)};\n  * @prop --indicator-size: defaults to 5px on placement 'top' and 2px on placement 'start';\n\n  * @prop --border-radius: defaults to #{$layer-border-radius};\n  * @prop --background-rgb: will be used as the default background colour for tabs and content. defaults to #{$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);\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);\n  * @prop --tab-text-color: defaults to #{map.get($colors, blue)} on placement 'top' and #{map.get($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: #{$transition-fast};\n  --indicator-color: #{map.get($colors, lightblue)};\n  --indicator-track-color: #{map.get($colors, lightgrey)};\n  --indicator-size: 0;\n  --border-radius: #{$layer-border-radius};\n  --background-rgb: #{$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);\n  --tab-text-color: #{map.get($colors, blue)};\n  --shadow-opacity: 0.1;\n  --fade-transparency: 0;\n\n  display: block;\n  position: relative;\n  z-index: #{$layer-index-raised};\n\n  @media only screen and (max-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  }\n}\n\n:host([placement='start']),\n:host([placement='end']) {\n  --content-padding: 1rem;\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($colors, darkgrey)};\n  --indicator-color: #{map.get($colors, blue)};\n  --indicator-size: 2px;\n}\n\n:host(.nano-color) {\n  --indicator-color: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --tab-text-color: rgba(var(--nano-color-base-rgb), 0.7);\n\n  ::slotted(nano-tab) {\n    --active-text-color: var(--nano-color-shade, #{nano-color(primary, shade)});\n  }\n}\n\n.nano-tab-group {\n  display: flex;\n  border-radius: 0;\n  width: 100%;\n  flex: inherit;\n\n  &__tabs {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n\n  &__active-tab-indicator {\n    position: absolute;\n    transition: var(--indicator-transition) transform ease, var(--indicator-transition) width ease;\n  }\n\n  &__body {\n    background: var(--content-bg);\n  }\n\n  &:not(.focus-visible) ::slotted(nano-tab) {\n    --focus-shadow: none;\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: #{$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:focus {\n      box-shadow: #{$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        width: 86%;\n        box-shadow: 0 10px 40px 10px rgba(0, 0, 0, var(--shadow-opacity));\n        height: 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 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-x: auto;\n      overflow-y: hidden;\n      transition: #{$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          rgba(0, 0, 0, var(--fade-transparency)) 0,\n          rgba(0, 0, 0, var(--fade-transparency)) var(--tabs-padding-start),\n          rgba(0, 0, 0, 1) calc(var(--tabs-padding-start) * 2),\n          rgba(0, 0, 0, 1) calc(100% - (var(--tabs-padding-end) * 2)),\n          rgba(0, 0, 0, var(--fade-transparency)) calc(100% - var(--tabs-padding-end)),\n          rgba(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      width: 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      width: 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: solid var(--indicator-size) 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-start-start-radius: 0;\n      border-start-end-radius: var(--content-border-radius);\n      border-end-end-radius: var(--content-border-radius);\n      border-end-start-radius: 0;\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} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\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 '../../interface';\n\n/**\n * A tradtional 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 * Horizonal 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 activeTab: HTMLNanoTabElement;\n  private activePanel: HTMLNanoTabContentElement;\n  private activeTabIndicator: HTMLElement;\n  private nav: HTMLElement;\n  private tabGroup: 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() 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, 'is-shown', !this.hideControlRight);\n  }\n\n  @Watch('hideControlLeft')\n  hideLeftBtn() {\n    if (!this.leftBtn) return;\n    displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\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      // active tab can be changed on init - this won't be ready. No big thing\n      this.syncActiveTabIndicator();\n      if (['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) => {\n      const panel = panels.find((el) => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute('aria-controls', panel.getAttribute('id'));\n        panel.setAttribute('aria-labelledby', tab.getAttribute('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    const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth || 0;\n    const height = tab.clientHeight;\n    const offset = getOffset(tab, this.tabs);\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    // 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      }\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      const activeEl = document.activeElement as any;\n\n      if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n        const tabs = this.getAllActiveTabs;\n        let index = tabs.indexOf(activeEl);\n\n        if (event.key === 'Home') {\n          index = 0;\n        } else if (event.key === 'End') {\n          index = tabs.length - 1;\n        } else if (\n          (this.isRtl && event.key === 'ArrowRight') ||\n          (!this.isRtl && event.key === 'ArrowLeft')\n        ) {\n          index = Math.max(0, index - 1);\n        } else 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        tabs[index].setFocus();\n\n        if (['top'].includes(this.placement)) {\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  };\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 traveled\n    const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\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(distY) <= threshold;\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.assignedNodes({ 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    focusVisible.observe(this.tabGroup);\n\n    if (this.leftBtn) {\n      focusVisible.observe(this.leftBtn);\n      focusVisible.observe(this.rightBtn);\n    }\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    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.tabGroup);\n    if (this.leftBtn) {\n      focusVisible.unobserve(this.leftBtn);\n      focusVisible.unobserve(this.rightBtn);\n    }\n    if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n  }\n\n  render() {\n    this.isRtl = (this.host.ownerDocument as Document).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          ref={(el) => (this.tabGroup = el)}\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                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 name=\"light/chevron-left\"></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              >\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                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 name=\"light/chevron-right\"></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"]}

package/dist/nano-components/p-284dd9a2.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as i,c as t,h as e,a as s,g as n}from"./p-1fe12320.js";import{c as r}from"./p-ee045579.js";import{d as o}from"./p-9746b0a5.js";function h(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const r=s.left+n.pageXOffset;const o=s.top+n.pageYOffset;const h=e.pageX-r;const a=e.pageY-o;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const a=':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],[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=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();h(this.host,((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=r(this.pixelsToPercentage(e),0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}))};this.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=r(t,0,100);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);requestAnimationFrame((()=>this.shouldAnimate=true))}};this.positionInPixels=undefined;this.vertical=false;this.disabled=false;this.primary=undefined;this.snap=undefined;this.snapThreshold=12;this.animationDuration=.6;this.handlePositionChange=o(this.handlePositionChange.bind(this),100)}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}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}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}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 h(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 a=()=>{o+=1/e;r=h(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(a)};this.shouldAnimate=false;this.isAnimating=true;requestAnimationFrame(a)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){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}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 n=`\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) ${n}`}else{i[t]=`${n} var(--divider-width) ${r}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};d.style=a;export{d as nano_split_pane};
+//# sourceMappingURL=p-284dd9a2.entry.js.map

package/dist/nano-components/{p-5107646c.entry.js.map → p-284dd9a2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","[object Object]","hostRef","this","isAnimating","didLoad","_shouldAnimate","handleDrag","e","disabled","preventDefault","host","newPositionInPixels","vertical","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","snapThreshold","shouldAnimate","position","clamp","pixelsToPercentage","requestAnimationFrame","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","animationDuration","animatePosition","percentageToPixels","positionInPixels","nanoReposition","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","detachRO","ro","ResizeObserver","observe","unobserve","undefined","handlePositionInPixelsChange","setTimeout","attachRO","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  block-size: 100%;\n  inset-inline-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  inline-size: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  inline-size: 100%;\n  inset-block-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  block-size: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge\n   * as a percentage 0-100. Defaults to 50% of the container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      requestAnimationFrame(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    requestAnimationFrame(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    requestAnimationFrame(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\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    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","[object Object]","hostRef","this","isAnimating","didLoad","_shouldAnimate","handleDrag","e","disabled","preventDefault","host","newPositionInPixels","vertical","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","snapThreshold","shouldAnimate","position","clamp","pixelsToPercentage","requestAnimationFrame","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","animationDuration","animatePosition","percentageToPixels","positionInPixels","nanoReposition","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","detachRO","ro","ResizeObserver","observe","unobserve","undefined","handlePositionInPixelsChange","setTimeout","attachRO","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  block-size: 100%;\n  inset-inline-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  inline-size: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  inline-size: 100%;\n  inset-block-start: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  block-size: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { clamp } from '../../utils/math';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge\n   * as a percentage 0-100. Defaults to 50% of the container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      requestAnimationFrame(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    requestAnimationFrame(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      requestAnimationFrame(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    requestAnimationFrame(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\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    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}