@nanoporetech-digital/components 2.3.0 → 2.5.0

package/dist/nano-components/p-ad0715d1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","[object Object]","hostRef","this","initialTouchX","initialTouchY","mutationObservers","WeakMap","hasScrollControls","hideControlRight","hideControlLeft","isLegacy","document","head","attachShadow","placement","noScrollControls","storeMethod","updateScrollControls","includes","nav","scrollWidth","clientWidth","tabs","handleClick","event","target","tab","closest","setActiveTab","handleKeyDown","key","preventDefault","activeEl","activeElement","tagName","toLowerCase","getAllActiveTabs","index","indexOf","length","isRtl","Math","max","min","setFocus","scrollIntoView","handleTabScroll","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","activeTab","panel","find","rightBtn","displayTransition","leftBtn","_","getAllTabs","filter","disabled","getDirectChildren","host","getAllPanels","emitEvents","previousTab","map","name","removeAttribute","nanoTabHide","emit","nanoTabShow","panels","getAttribute","width","_a","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","unobserve","focusVisible","tabGroup","resizeObserver","ResizeObserver","raf","dir","ownerDocument","h","Host","class","Object","assign","createColorClasses","color","legacy","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  */\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\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// IE bugfix - set this stuff statically\n:host(.legacy) {\n  ::slotted(nano-tab) {\n    --tab-indicator-color: #{map.get($colors, lightblue)};\n    --border-radius: 3px;\n    --tab-indicator-size: 5px;\n    --bg-rgb: 255, 255, 255;\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    top: 0;\n    bottom: 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      left: 0;\n    }\n\n    &--right {\n      right: 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        left: 7%;\n        bottom: -10px;\n        border-radius: 10px;\n        z-index: -1;\n      }\n    }\n\n    .nano-tab-group__nav {\n      @include hide-scrollbar();\n      @include padding(\n        var(--tabs-padding-top),\n        var(--tabs-padding-end),\n        var(--tabs-padding-bottom),\n        var(--tabs-padding-start)\n      );\n\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, 0) 0,\n          rgba(0, 0, 0, 0) 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, 0) calc(100% - var(--tabs-padding-end)),\n          rgba(0, 0, 0, 0)\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\n        @include padding(\n          var(--tabs-padding-top),\n          var(--tabs-padding-end),\n          var(--tabs-padding-bottom),\n          0\n        );\n\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      bottom: -2px;\n      border-bottom: 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\n      @include ltr-host() {\n        border-left: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: left;\n      }\n\n      @include rtl-host() {\n        border-right: solid var(--indicator-size) var(--indicator-track-color);\n        text-align: right;\n      }\n    }\n\n    .nano-tab-group__active-tab-indicator {\n      @include ltr-host() {\n        left: calc(-1 * 2px);\n        border-left: solid var(--indicator-size) var(--indicator-color);\n      }\n\n      @include rtl-host() {\n        right: calc(-1 * 2px);\n        border-right: solid var(--indicator-size) var(--indicator-color);\n      }\n    }\n\n    .nano-tab-group__body {\n      flex: 1 1 auto;\n      order: 2;\n      padding: var(--content-padding);\n      overflow: hidden;\n\n      @include border-radius(\n        0,\n        var(--content-border-radius),\n        var(--content-border-radius),\n        0\n      );\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';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nimport { scrollIntoView } from '../../utils/scroll';\nimport { focusVisible } from '../../utils/focus-visible';\nimport {\n  displayTransition,\n  createColorClasses,\n  getOffset,\n  getDirectChildren,\n  raf,\n} from '../../utils';\nimport { Color } from '../../interface';\nimport {\n  ComponentStore,\n  StorageMethods,\n} from '../../utils/store/component-store';\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() isLegacy = !document.head.attachShadow;\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        event.preventDefault();\n      }\n    }\n  };\n\n  private handleTabScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlLeft = this.hideControlRight = true;\n      return;\n    }\n    let endRight = this.isRtl\n      ? this.nav.scrollLeft === 0\n      : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n    let 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    var xDiff = this.initialTouchX - touch.clientX;\n    var 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    raf(() => 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), legacy: this.isLegacy }}\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-c20b6f1c.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,a){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,o){function r(t){try{l(a.next(t))}catch(e){o(e)}}function s(t){try{l(a["throw"](t))}catch(e){o(e)}}function l(t){t.done?n(t.value):i(t.value).then(r,s)}l((a=a.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},a,i,o,r;return r={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function s(t){return function(e){return l([t,e])}}function l(r){if(a)throw new TypeError("Generator is already executing.");while(n)try{if(a=1,i&&(o=r[0]&2?i["return"]:r[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,r[1])).done)return o;if(i=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:n.label++;return{value:r[1],done:false};case 5:n.label++;i=r[1];r=[0];continue;case 7:r=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){n=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){n.label=r[1];break}if(r[0]===6&&n.label<o[1]){n.label=o[1];o=r;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(r);break}if(o[2])n.ops.pop();n.trys.pop();continue}r=e.call(t,n)}catch(s){r=[6,s];i=0}finally{a=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(t,e){for(var n=0,a=e.length,i=t.length;n<a;n++,i++)t[i]=e[n];return t};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-1d13dbdf.system.js","./p-ea5eb591.system.js","./p-ef053a2f.system.js","./p-89edc042.system.js","./p-09d2d944.system.js"],(function(t){"use strict";var e,n,a,i,o,r,s,l,d,c,u,p,h,g,b;return{setters:[function(t){e=t.r;n=t.c;a=t.h;i=t.e;o=t.g},function(t){r=t.d;s=t.r},function(t){l=t.b;d=t.g;c=t.c},function(t){u=t.F;p=t.a},function(t){h=t.a},function(t){g=t.c},function(t){b=t.g}],execute:function(){var v=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{opacity:inherit;display:block;color:var(--color) !important;margin:var(--margin)}:host ::slotted(*),:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host ::slotted(button),:host button{background:none;border:none}:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:var(--display, block);white-space:nowrap;color:var(--color) !important;background-color:var(--bg-color)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(button),:host ::slotted(a),:host ::slotted(a:visited),:host button,:host a,:host a:visited{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-start]){padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-start]){padding-right:unset;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host ::slotted(nano-icon[slot=icon-end]){padding-left:var(--padding-start)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host ::slotted(nano-icon[slot=icon-end]){padding-left:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);}}:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:var(--padding-start);padding-right:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-start]),:host .link ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host .link::slotted(nano-icon[slot=icon-end]),:host .link ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host .link,:host button,:host a{border-bottom:var(--border-bottom);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host .secondary-menu{display:none}:host ::slotted(a:hover),:host ::slotted(button:hover),:host .link:hover,:host button:hover,:host a:hover{text-decoration:inherit !important}:host button:focus,:host a:focus{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, none)}:host ::slotted(a:focus),:host ::slotted(button:focus){color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:none}.nav-item.selected .link,.nav-item.selected button,.nav-item.selected a{color:var(--color-selected, var(--color-open, var(--color))) !important;background-color:var(--bg-color-selected, var(--bg-color-open, var(--bg-color)))}.nav-item.secondary-open button,.nav-item.secondary-open a{color:var(--color-open, var(--color-selected, var(--color))) !important;background-color:var(--bg-color-open, var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color))))}.nav-item.disabled{opacity:0.6}.nav-item.disabled button,.nav-item.disabled a{color:var(--color-disabled, var(--color)) !important}.nav-item:not(.nano-menu) ::slotted(a:hover),.nav-item:not(.nano-menu) ::slotted(button:hover),.nav-item:not(.nano-menu) .link:hover,.nav-item:not(.nano-menu) button:hover,.nav-item:not(.nano-menu) a:hover{color:var(--color-hover, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-hover, var(--bg-color-focus, var(--bg-color)))}:host(.has-focus) .link{color:var(--color-focus, var(--color-hover, var(--color))) !important;background-color:var(--bg-color-focus, var(--bg-color-hover, var(--bg-color)));outline:var(--focus-outline, 5px auto -webkit-focus-ring-color)}:host(.nano-global-nav-menu) a,:host(.nano-global-nav-menu) a:visited,:host(.nano-global-nav-menu) button,:host(.nano-global-nav-menu) .link,:host(.nano-menu) a,:host(.nano-menu) a:visited,:host(.nano-menu) button,:host(.nano-menu) .link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:"currentColor";text-decoration:inherit;white-space:normal;cursor:pointer;line-height:1.2;width:100%}:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:0;padding-right:var(--padding-end);-webkit-box-flex:1;-ms-flex:1;flex:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) .text,:host(.nano-menu) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(a),:host(.nano-global-nav-menu) ::slotted(button),:host(.nano-menu) ::slotted(a),:host(.nano-menu) ::slotted(button){-webkit-box-flex:1;-ms-flex:1;flex:1}:host(.nano-global-nav-menu) ::slotted(a:focus),:host(.nano-global-nav-menu) ::slotted(button:focus),:host(.nano-menu) ::slotted(a:focus),:host(.nano-menu) ::slotted(button:focus){-webkit-box-shadow:none;box-shadow:none}:host(.nano-global-nav-menu) .secondary-menu,:host(.nano-menu) .secondary-menu{display:none;position:absolute;color:var(--secondary-color, "currentColor");min-height:100%;top:0;left:0;width:100%;z-index:1;opacity:0;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease;transition:opacity 0.2s ease, transform 0.3s ease, -webkit-transform 0.3s ease;background-color:var(--secondary-bg-color, white);-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-global-nav-menu) .secondary-menu:focus,:host(.nano-menu) .secondary-menu:focus{outline:none}:host(.nano-global-nav-menu) .secondary-menu.open,:host(.nano-menu) .secondary-menu.open{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, -webkit-transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease;transition:opacity 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 10px;flex:0 0 10px;pointer-events:none}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-global-nav-menu) button ::slotted(nano-icon[slot=icon-end]),:host(.nano-global-nav-menu) a ::slotted(nano-icon[slot=icon-end]){padding:0}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu,:host(.nano-menu[dir=rtl]) .secondary-menu{left:auto;right:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}:host(.nano-global-nav-menu[dir=rtl]) .secondary-menu.open,:host(.nano-menu[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(0);transform:translateX(0)}:host(.nano-menu) .secondary-menu-content{padding-left:var(--secondary-padding-start);padding-right:var(--secondary-padding-end);padding-top:var(--secondary-padding-top);padding-bottom:var(--secondary-padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu) .secondary-menu-content{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start);padding-inline-start:var(--secondary-padding-start);-webkit-padding-end:var(--secondary-padding-end);padding-inline-end:var(--secondary-padding-end)}}:host(.nano-global-nav-bar.legacy){margin:0 11px}:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:6px;padding-right:6px;padding-top:7px;padding-bottom:7px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:6px;padding-inline-start:6px;-webkit-padding-end:6px;padding-inline-end:6px}}:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-menu.legacy) ::slotted(a){padding-left:unset;padding-right:unset;-webkit-padding-start:12px;padding-inline-start:12px;-webkit-padding-end:12px;padding-inline-end:12px}}:host(.nano-global-nav-bar) .link,:host(.nano-global-nav-bar) a,:host(.nano-global-nav-bar) button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-stretch:expanded}:host(.nano-global-nav-bar) .text{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:var(--padding-end);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-end]){margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding-end);margin-inline-start:var(--padding-end);-webkit-margin-end:0;margin-inline-end:0}}:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:0;margin-right:var(--padding-start);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-global-nav-bar) ::slotted(nano-icon[slot=icon-start]){margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding-start);margin-inline-end:var(--padding-start)}}:host(.nano-global-nav-bar.has-secondary) button{position:relative;font-stretch:expanded}:host(.nano-global-nav-bar.has-secondary) button::before{content:"";background:#86bee2;height:3px;left:0;bottom:-14px;right:5px;position:absolute;-webkit-transform:translateZ(0) scaleX(0);transform:translateZ(0) scaleX(0);-webkit-transform-origin:0;transform-origin:0;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}:host(.nano-global-nav-bar.has-secondary) .selected button::before,:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{-webkit-transform:translateZ(0) scaleX(1);transform:translateZ(0) scaleX(1)}:host(.nano-global-nav-bar.has-secondary) .secondary-open button::before{opacity:0.5}:host(.nano-global-nav-bar.has-secondary) .secondary-menu{display:none;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease;-webkit-transform:translateY(-100%) translateZ(0);transform:translateY(-100%) translateZ(0);background-color:var(--secondary-bg-color, #196c82);color:var(--secondary-color);position:absolute;-webkit-box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);box-shadow:0 1px 25px 0 rgba(0, 0, 0, 0.15);left:0;right:0;z-index:-2;outline:none}:host(.nano-global-nav-bar.has-secondary) .secondary-menu.open{-webkit-transform:translateY(12px) translateZ(0);transform:translateY(12px) translateZ(0)}:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:var(--padding-start);padding-right:0;padding-top:calc(var(--padding-top) / 2);padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:currentColor;text-decoration:inherit;white-space:normal;border:none;cursor:pointer;line-height:1.2;width:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .link,:host(.nano-menu-drawer) a,:host(.nano-menu-drawer) button{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}:host(.nano-menu-drawer) .text{padding-left:0;padding-right:var(--padding-end);text-align:left;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:130px;width:130px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .text{padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:var(--icon-size);width:var(--icon-size);-webkit-box-flex:0;-ms-flex:0 0 var(--icon-size);flex:0 0 var(--icon-size)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-start]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(.nano-menu-drawer) .secondary-menu{display:none;position:absolute;background-color:var(--secondary-bg-color);color:var(--secondary-color);height:100vh;top:0;right:0;left:auto;bottom:0;-webkit-transform:translateX(0);transform:translateX(0);z-index:-1;-webkit-transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:opacity 0.2s ease, -webkit-transform 0.3s ease;transition:transform 0.3s ease, opacity 0.2s ease;transition:transform 0.3s ease, opacity 0.2s ease, -webkit-transform 0.3s ease;overflow-y:auto;width:var(--secondary-width, 400px);max-width:62vw;opacity:1;padding-left:var(--secondary-padding-start, var(--padding-start));padding-right:var(--secondary-padding-end, var(--padding-end));padding-top:var(--secondary-padding-top, var(--padding-top));padding-bottom:var(--secondary-padding-bottom, var(--padding-bottom))}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer) .secondary-menu{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--secondary-padding-start, var(--padding-start));padding-inline-start:var(--secondary-padding-start, var(--padding-start));-webkit-padding-end:var(--secondary-padding-end, var(--padding-end));padding-inline-end:var(--secondary-padding-end, var(--padding-end))}}:host(.nano-menu-drawer) .secondary-menu:focus{outline:none}:host(.nano-menu-drawer) .secondary-menu.open{-webkit-transform:translateX(100%);transform:translateX(100%)}:host(.nano-menu-drawer.legacy) .link,:host(.nano-menu-drawer.legacy) a,:host(.nano-menu-drawer.legacy) button{width:auto}:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:0;padding-right:calc(var(--padding-end) * 2);padding-top:0;padding-bottom:0;font-size:10px;-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;min-width:20px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.nano-menu-drawer.legacy) ::slotted(nano-icon[slot=icon-end]){padding-left:unset;padding-right:unset;-webkit-padding-start:0;padding-inline-start:0;-webkit-padding-end:calc(var(--padding-end) * 2);padding-inline-end:calc(var(--padding-end) * 2)}}:host(.nano-menu-drawer[dir=rtl]) .text{text-align:right}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu{right:auto;left:0;-webkit-transform:translateX(0%);transform:translateX(0%)}:host(.nano-menu-drawer[dir=rtl]) .secondary-menu.open{-webkit-transform:translateX(-100%);transform:translateX(-100%);opacity:1}';var f=t("nano_nav_item",function(){function t(t){var a=this;e(this,t);this.nanoClose=n(this,"nanoClose",7);this.nanoOpen=n(this,"nanoOpen",7);this.nanoOpening=n(this,"nanoOpening",7);this.nanoClosing=n(this,"nanoClosing",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.hasSecondarySlot=false;this.hasAnchorEle=false;this.didBlur=false;this.animating=false;this.didOpen=false;this.isInGlobalNav=false;this.isInMenuDrawer=false;this.isInMenu=false;this.isLegacy=!document.head.attachShadow;this.hasFocus=false;this.href=null;this.target="_self";this.disabled=false;this.open=false;this.selected=false;this.secondaryActiveWidth=0;this.secondaryFallback=function(){};this.closeOnBlur=true;this.closeSecondary=function(){return __awaiter(a,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.open=false;if(!this.hasSecondarySlot||!this.didOpen)return[2];this.nanoClosing.emit({secondaryMenu:this.secondaryDiv});return[4,r(this.secondaryDiv,"open",false)];case 1:t=e.sent();this.didOpen=t!=="hidden";return[2]}}))}))};this.openSecondary=function(){return __awaiter(a,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(window.innerWidth<this.secondaryActiveWidth){this.secondaryFallback.call(this);return[2]}this.open=true;if(!this.hasSecondarySlot||this.didOpen)return[2];this.nanoOpening.emit({secondaryMenu:this.secondaryDiv});return[4,r(this.secondaryDiv,"open",true)];case 1:t=e.sent();this.didOpen=t==="shown";return[2]}}))}))};this.toggleSecondary=function(){if(!a.hasSecondarySlot)return;if(a.didOpen)a.closeSecondary();else a.openSecondary()};this.handleFocus=function(){a.hasFocus=true;if(a.href&&!a.animating&&a.hasSecondarySlot)a.openSecondary();a.nanoFocus.emit()};this.handleHostBlur=function(){if(a.animating)return;a.el.removeAttribute("tabindex");a.hasFocus=false;a.nanoBlur.emit()};this.handleHostClick=function(t){if(!a.hasAnchorEle)return;var e=t.target.closest("a, button");if(!e)a.btn.click()};this.handleMouseEnter=function(){return __awaiter(a,void 0,void 0,(function(){var t;var e=this;return __generator(this,(function(n){if(!this.href||this.animating||!this.hasSecondarySlot||this.globalNavEle&&!this.globalNavEle.classList.contains("ready"))return[2];t=0;if(l(this.el,".secondary-open.has-secondary").length)t=300;clearTimeout(this.waitHide);this.fromHover=true;this.animating=true;this.waitShow=window.setTimeout((function(){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.openSecondary()];case 1:return[2,t.sent()]}}))}))}),t);this.animating=false;return[2]}))}))};this.handleMouseLeave=function(){if(!a.href)return;clearTimeout(a.waitShow);a.fromHover=true;a.animating=true;a.waitHide=window.setTimeout((function(){return __awaiter(a,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.closeSecondary()];case 1:return[2,t.sent()]}}))}))}),300);a.animating=false};this.handleClick=function(){var t;a.fromHover=false;if(a.hasSecondarySlot)a.toggleSecondary();else(t=a.el.querySelector("*"))===null||t===void 0?void 0:t.click()};this.blur=function(t){if(!a.didOpen||a.animating)return;if(!a.closeOnBlur)return;if(t&&t.relatedTarget){if(t.relatedTarget===a.el||t.relatedTarget===a.btn||a.foundThisNavEle(t.relatedTarget)){a.secondaryDiv.focus({preventScroll:true});return}}a.btn.removeEventListener("focusout",a.blur);a.secondaryDiv.removeEventListener("focusout",a.blur);window.removeEventListener("blur",a.blur);a.didBlur=true;a.open=false;if(!t.relatedTarget)setTimeout((function(){a.el.focus({preventScroll:true})}),50)}}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.btn)return[2];this.btn.focus();return[2]}))}))};t.prototype.openChange=function(){this.open?this.openSecondary():this.closeSecondary()};t.prototype.didOpenChange=function(){var t=this;if(!this.hasSecondarySlot)return;if(!this.didOpen){if(!this.fromHover){this.btn.removeEventListener("focusout",this.blur);this.secondaryDiv.removeEventListener("focusout",this.blur)}setTimeout((function(){if(!t.fromHover&&!t.didBlur)t.btn.focus({preventScroll:true});t.nanoClose.emit({secondaryMenu:t.secondaryDiv})}),50)}else{this.didBlur=false;if(!this.fromHover){var e=new window.IntersectionObserver((function(n){if(n[0].boundingClientRect.top<0){t.secondaryDiv.scrollIntoView({behavior:"smooth"})}e.disconnect()}),{threshold:1});e.observe(this.secondaryDiv);this.secondaryDiv.focus({preventScroll:true});this.btn.addEventListener("focusout",this.blur);this.secondaryDiv.addEventListener("focusout",this.blur);window.addEventListener("blur",this.blur);this.el.tabIndex=-1;this.nanoOpen.emit({secondaryMenu:this.secondaryDiv})}}};t.prototype.foundThisNavEle=function(t){var e=t.closest("nano-nav-item");e=e===t?t.parentElement.closest("nano-nav-item"):e;if(!e)return false;if(e===this.el)return true;return this.foundThisNavEle(e)};t.prototype.componentWillLoad=function(){var t=this.el.querySelector('[slot="secondary"]');this.hasSecondarySlot=!!t;var e=d(this.el,"a, button")[0];this.hasAnchorEle=!!e;if(e){this.href=e.href?e.href:null;this.btn=e;if(this.hasSecondarySlot)this.btn.addEventListener("click",this.toggleSecondary);this.btn.addEventListener("focus",this.handleFocus);this.btn.addEventListener("blur",this.handleHostBlur)}};t.prototype.connectedCallback=function(){this.isInGlobalNav=false;this.isInMenuDrawer=false;this.globalNavEle=this.el.closest("nano-global-nav");this.isInMenuDrawer=!!this.el.closest("nano-menu-drawer");this.isInMenu=!!this.el.closest("nano-menu");this.isInGlobalNav=this.el.parentElement===this.globalNavEle||!!this.el.closest(".global-nav")};t.prototype.render=function(){var t=this;return a(i,{class:{"has-secondary":this.hasSecondarySlot,"secondary-open":this.open,selected:this.selected,"has-focus":this.hasFocus,disabled:this.disabled,"nano-global-nav":this.isInGlobalNav,"nano-menu-drawer":this.isInMenuDrawer,"nano-menu":this.isInMenu,legacy:this.isLegacy},onBlur:this.handleHostBlur,dir:this.el.ownerDocument.dir==="rtl"?"rtl":null,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onClick:this.handleHostClick,role:"menuitem"},a("div",{class:{"nav-item":true,"secondary-open":this.open,selected:this.selected}},this.href&&!this.hasAnchorEle&&!this.disabled&&a("a",{target:this.target,ref:function(e){return t.btn=e},href:this.href,onFocus:this.handleFocus},a("slot",{name:"icon-start"}),a("span",{class:"text"},a("slot",null)),a("slot",{name:"icon-end"})),(!this.hasAnchorEle&&!this.href||this.disabled)&&a("button",{ref:function(e){return t.btn=e},onClick:this.handleClick,onFocus:this.handleFocus,disabled:this.disabled},a("slot",{name:"icon-start"}),a("span",{class:"text"},a("slot",null)),a("slot",{name:"icon-end"})),this.hasAnchorEle&&!this.disabled&&a("div",{class:"link"},a("slot",{name:"icon-start"}),a("slot",null),a("slot",{name:"icon-end"})),this.hasSecondarySlot&&!this.disabled&&a("div",{class:"secondary-menu",ref:function(e){return t.secondaryDiv=e},tabindex:"-1"},a("div",{class:"secondary-menu-content"},a("slot",{name:"secondary"})),a("div",{class:"secondary-menu-mask",onClick:this.closeSecondary}))))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openChange"],didOpen:["didOpenChange"]}},enumerable:false,configurable:true});return t}());f.style=v;var m='.sc-nano-select-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-select,*.sc-nano-select::before,*.sc-nano-select::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-select{display:none !important}label.sc-nano-select,.more.sc-nano-select,.error.sc-nano-select,.helper.sc-nano-select{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-select,.more.visually-hide.sc-nano-select,.error.visually-hide.sc-nano-select,.helper.visually-hide.sc-nano-select{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.placeholder-as-label.sc-nano-select{padding-left:var(--padding-start);padding-right:0;padding-top:0;padding-bottom:0;color:var(--label-color);position:absolute;font-size:1.4em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:0.7}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.placeholder-as-label.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:0;padding-inline-end:0}}.is-invalid.sc-nano-select-h .placeholder-as-label.sc-nano-select{color:var(--invalid-msg-color)}.has-value.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:50%}.has-focus.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-select-h .textarea.sc-nano-select .placeholder-as-label.sc-nano-select{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.label.sc-nano-select{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.label.sc-nano-select .label-placeholder.sc-nano-select{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.label.sc-nano-select .placeholder.sc-nano-select{margin-left:0;margin-right:5px;margin-top:0;margin-bottom:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .placeholder.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:5px;margin-inline-end:5px}}.label.sc-nano-select .charcount.sc-nano-select{margin-left:auto;margin-right:0;margin-top:0;margin-bottom:0;font-size:0.9em;opacity:0.5}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.label.sc-nano-select .charcount.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:0;margin-inline-end:0}}.has-value.sc-nano-select-h .label.sc-nano-select .placeholder.sc-nano-select{opacity:0.5}.has-focus.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--focus)}.is-invalid.sc-nano-select-h .label.sc-nano-select{color:var(--label-color--invalid)}.more.sc-nano-select{height:1em;margin-left:3px;margin-right:0;margin-top:4px;margin-bottom:var(--padding-bottom);position:relative}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.more.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:3px;margin-inline-start:3px;-webkit-margin-end:0;margin-inline-end:0}}.helper.sc-nano-select,.error.sc-nano-select{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.helper.sc-nano-select{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-select-h:not([show-inline-error=false]).is-invalid .helper.sc-nano-select{opacity:0}.error.sc-nano-select{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-select-h .error.sc-nano-select{opacity:1}.input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;border-radius:var(--input-border-radius);width:100%;padding:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size)}.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width)}.is-invalid.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width)}.is-invalid.has-focus.sc-nano-select-h .input.sc-nano-select{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width)}.native-input-wrap.sc-nano-select{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.input-clear-icon.sc-nano-select,.end.sc-nano-select,.start.sc-nano-select,.value-end.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;--nano-icon-size:1.4em;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-select .start.sc-nano-select{display:none}.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{--nano-icon-size:1.4em;font-size:1em;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.start.sc-nano-select-s>*,.start .sc-nano-select-s>*,.end.sc-nano-select-s>*,.end .sc-nano-select-s>*,.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.sc-nano-select-h[disabled]:not([disabled=false]) .start.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .start .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .end .sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end.sc-nano-select-s>*,.sc-nano-select-h[disabled]:not([disabled=false]) .value-end .sc-nano-select-s>*,[disabled].sc-nano-select-h:not([disabled=false]) .value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.value-end.sc-nano-select-s>*,.value-end .sc-nano-select-s>*,.value-end.sc-nano-select *.sc-nano-select{pointer-events:none}.input-clear-icon.sc-nano-select{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-select-h .input-clear-icon.sc-nano-select{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;opacity:1;width:auto}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.has-value.sc-nano-select-h .input-clear-icon.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.input-clear-icon.sc-nano-select:hover{color:var(--clear-btn-color--hover)}.sc-nano-select-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--input-border-width-sh, var(--nano-input-border-width, 2px));--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #fac6c3);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #f36d64);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, #fee8de);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #90c6e7);position:relative;width:100%;padding:0 !important;font-family:var(--nano-font-family, inherit);display:inline-block}.nano-color.sc-nano-select-h{--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--multi-input-value-bg:var(--nano-color-tint-rgb);--multi-input-value-border:var(--nano-color-shade);--multi-input-value-text-color:var(--nano-color-contrast);color:var(--nano-color-base)}nano-item.sc-nano-select-h:not(.item-label),nano-item:not(.item-label) .sc-nano-select-h{--padding-start:0}[disabled].sc-nano-select-h:not([disabled=false]){opacity:0.7}[disabled].sc-nano-select-h:not([disabled=false]) *.sc-nano-select{pointer-events:none !important}select.sc-nano-select{display:none}.native-input.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:2.5em;min-height:2.5em;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;cursor:default}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.native-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input.sc-nano-select::selection{background:transparent}.native-input.sc-nano-select::-moz-selection{background:transparent}.native-input[disabled].sc-nano-select{opacity:0.4}.native-input.sc-nano-select::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:2.5em;min-height:2.5em}.native-input.sc-nano-select::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.native-input.sc-nano-select:-webkit-autofill{background-color:transparent}.native-input.sc-nano-select::-webkit-search-decoration,.native-input.sc-nano-select::-webkit-search-cancel-button,.native-input.sc-nano-select::-webkit-search-results-button,.native-input.sc-nano-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.native-input.sc-nano-select:invalid{-webkit-box-shadow:none;box-shadow:none}.native-input.sc-nano-select::-ms-clear,.native-input.sc-nano-select::-ms-reveal{display:none}.native-input.resizable.sc-nano-select{resize:vertical;overflow:auto}.textarea.sc-nano-select .native-input.sc-nano-select{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);white-space:pre-wrap}.textarea.sc-nano-select .native-input.sc-nano-select::-webkit-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-moz-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select:-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::-ms-input-placeholder{line-height:1.5em}.textarea.sc-nano-select .native-input.sc-nano-select::placeholder{line-height:1.5em}.has-float-label.sc-nano-select .native-input.sc-nano-select{padding-top:1.4em}.has-float-label.textarea.sc-nano-select .native-input.sc-nano-select{padding-top:1.8em}.legacy.sc-nano-select .native-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.masked.sc-nano-select-h .native-input.sc-nano-select{opacity:0;position:absolute;left:0;top:0}.select-mask.sc-nano-select{border-radius:var(--input-border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:0;padding-bottom:0;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;pointer-events:none;line-height:2.5em;min-height:2.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.select-mask.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.multi-wrap.sc-nano-select{padding-left:0;padding-right:0;padding-top:0;padding-bottom:calc(var(--padding-bottom) / 2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.has-float-label.sc-nano-select-h .multi-wrap.sc-nano-select{padding-top:1.3em}.multi-input.sc-nano-select{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:calc(var(--padding-top) / 2);padding-bottom:0;min-width:50px;max-width:100%;max-height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;outline:none;display:inline-block;background:transparent;-webkit-box-flex:0;-ms-flex:0;flex:0;position:relative;min-height:calc(2.78em - var(--padding-top));-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-input.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}.legacy.sc-nano-select-h .multi-input.sc-nano-select{-webkit-box-sizing:content-box;box-sizing:content-box}.multi-input.sc-nano-select:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}.multi-value.sc-nano-select{margin-left:4px;margin-right:0;margin-top:4px;margin-bottom:0;background:rgba(var(--multi-input-value-bg), 0.8);color:var(--multi-input-value-text-color);border:1px solid;border-color:var(--multi-input-value-border);padding:0.3em 0.5em;border-radius:3px;line-height:1;max-width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:var(--input-font-size);font-weight:600;letter-spacing:1px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value.sc-nano-select{margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:0;margin-inline-end:0}}.multi-value.sc-nano-select span.sc-nano-select{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1.4}.multi-value-remove.sc-nano-select{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;background-position:center;padding-left:0.5em;padding-right:0;padding-top:0;padding-bottom:0;color:inherit;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;top:0;font-size:1em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.multi-value-remove.sc-nano-select{padding-left:unset;padding-right:unset;-webkit-padding-start:0.5em;padding-inline-start:0.5em;-webkit-padding-end:0;padding-inline-end:0}}.multi-value-remove.sc-nano-select nano-icon.sc-nano-select{--color:var(--multi-input-value-text-color)}.has-focus.has-multiple.sc-nano-select-h .placeholder-as-label.sc-nano-select{-webkit-transform:translateY(-120%);transform:translateY(-120%);font-size:0.9em}.has-focus.sc-nano-select-h select.sc-nano-select,.has-focus.sc-nano-select-h a.sc-nano-select,.has-focus.sc-nano-select-h button.sc-nano-select{pointer-events:auto}';var w=0;var y=t("nano_select",function(){function t(t){var a=this;e(this,t);this.nanoChange=n(this,"nanoChange",7);this.nanoBlur=n(this,"nanoBlur",7);this.nanoFocus=n(this,"nanoFocus",7);this.nanoDidLoad=n(this,"nanoDidLoad",7);this.nanoDidUnload=n(this,"nanoDidUnload",7);this.nanoSearchChange=n(this,"nanoSearchChange",7);this.nanoValidate=n(this,"nanoValidate",7);this.valueItems=[];this.selectId="nano-select-"+w++;this.rtl=false;this.onInit=true;this.isLegacy="registerElement"in document;this.currInsertIndex=-1;this.showErrorMsg=false;this.errorMessage="";this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.inputSearchVal="";this._invalid=false;this.autofocus=false;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.multiple=false;this.name=this.selectId+"-name";this.readonly=false;this.required=false;this.allowCustomValues=false;this._value=this.multiple?[]:"";this._options=[];this._eOptions=[];this.clearSelect=false;this.mask=false;this.debounce=0;this.dropDownConfig={};this.customValidate=function(){a.nativeSelect.setCustomValidity("");if(a.required&&!a.valArray.length){a.nativeSelect.setCustomValidity("Please fill in this field.");return true}if(a.valArray.length&&!a.allowCustomValues&&!a.isValidValues()){a.nativeSelect.setCustomValidity("Please choose an item from this field.");return true}if(a.max&&a.valArray.length>a.max){a.nativeSelect.setCustomValidity("Only up to "+a.max+" values are allowed.");return true}if(a.min&&a.valArray.length<a.min){a.nativeSelect.setCustomValidity("You must select a minimum of "+a.min+" values.");return true}return false};this.showInlineValidation=function(t){if(a.validateOn==="submitThenDirty")a.validateOn="dirty";a._invalid=false;a.showErrorMsg=false;a.errorMessage="";if(!a.nativeSelect.validity.valid){a.errorMessage=a.nativeSelect.validationMessage;a._invalid=true;a.showErrorMsg=true}a.nanoValidate.emit({isValid:!a.invalid,errorMessage:a.errorMessage,originalEvent:t})};this.handleInvalid=function(t){a._invalid=true;if(a.validateOn==="submit")a._invalid=a.showErrorMsg=a.customValidate();if(a.showInlineError)t.preventDefault();setTimeout((function(e){return a.showInlineValidation(t)}),20)};this.setValue=function(t){t.preventDefault();if(!a.multiple){a.value=t.detail.value;a.inputCtrl.focus();return}if(a.value&&a.value.length&&a.value.includes(t.detail.value))return;if(a.max&&a.value.length===a.max)return;a.currInsertIndex++;a.value=__spreadArray(__spreadArray(__spreadArray([],a.value.slice(0,a.currInsertIndex)),[t.detail.value]),a.value.slice(a.currInsertIndex));a.inputSearchVal=""};this.removeValue=function(t){if(!a.multiple||!a.value.length)return;if(!t)t=a.value[a.value.length-1];a.value=a.value.filter((function(e){return e!==t}));a.currInsertIndex--;a.setFocus()};this.setOptions=function(){if(!a.datalist||!a.datalist.activeOptions||!a.datalist.activeOptions.length)return;a._eOptions=a.datalist.activeOptions.map((function(t){var e=t.value,n=t.selected,a=t.label,i=t.filterMeta;return{value:e,selected:n,label:a,filterMeta:i}}))};this.handleDocumentKeyDown=function(t){if(!a.multiple||!a.hasFocus)return;if(!a.inputSearchVal){var e=void 0;switch(t.key){case"Backspace":if(a.inputCtrl.previousElementSibling)e=a.inputCtrl.previousElementSibling;else break;a.removeValue(e.dataset.value||null);break;case"Delete":if(a.inputCtrl.nextElementSibling)e=a.inputCtrl.nextElementSibling;else break;a.removeValue(e.dataset.value||null);break;case"ArrowLeft":case"ArrowRight":if(!a.value.length)break;if(t.key==="ArrowLeft"&&a.inputCtrl.previousSibling)a.currInsertIndex--;if(t.key==="ArrowRight"&&a.inputCtrl.nextSibling)a.currInsertIndex++;setTimeout((function(){a.inputCtrl.focus()}),20);t.preventDefault();break}}};this.onBlur=function(){a.hasFocus=false;setTimeout((function(){if(a.validateOn==="dirty"&&!a.hasFocus)a.showInlineValidation()}),20);a.nanoBlur.emit();if(!a.allowCustomValues&&a.multiple){a.inputSearchVal="";var t=new window.Event("change");a.inputCtrl.dispatchEvent(t)}};this.onFocus=function(){a.hasFocus=true;a.nanoFocus.emit()};this.clearSelectValue=function(t){if(a.clearSelect&&!a.readonly&&!a.disabled&&t){t.preventDefault();t.stopPropagation()}if(a.multiple){a.value=[];a.currInsertIndex=-1}else a.value="";a.inputCtrl.value="";var e=new window.Event("change");a.inputCtrl.dispatchEvent(e)};this.onClick=function(){a.setFocus()};this.onDragStart=function(t){var e=t.target;a.dragVal=e.dataset.value};this.onDragEnd=function(t){a.dragVal=null;t.preventDefault()};this.onDragLeave=function(t){var e=t.target;var n=e.dataset&&e.dataset.value?e.dataset.value:null;if(!n||a.dragVal===n||!a.value.includes(a.dragVal)){t.preventDefault();return}var i=a.value.indexOf(n);var o=a.value.indexOf(a.dragVal);var r=a.value;var s=r[i];r[i]=r[o];r[o]=s;a.value=__spreadArray([],r)};this.onMultiInput=function(t){a.inputSearchVal=t.target.value.trim();a.nanoSearchChange.emit({value:t.target.value.trim()})}}Object.defineProperty(t.prototype,"selectWrap",{get:function(){return this._selectWrap},set:function(t){if(this._selectWrap===t)return;this._selectWrap=t;this.setDataListOpts()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"datalist",{get:function(){return this._datalist},set:function(t){if(this._datalist===t)return;this._datalist=t;this.setDataListOpts()},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"value",{get:function(){return this._value},set:function(t){if(typeof t==="string"){if(this.multiple)this._value=t.split(",");else this._value=t}else if(Array.isArray(t)){if(this.multiple)this._value=t;else this._value=t[0]}},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"options",{get:function(){if(this._options.length)return this._options;if(!this.datalist||!this.datalist.activeOptions)return[];return this._eOptions.map((function(t){var e=t.value,n=t.selected,a=t.label,i=t.filterMeta;return{value:e,selected:n,label:a,filterMeta:i}}))},set:function(t){this._options=t.map((function(t){if(typeof t==="string")return{value:t,label:t};else return t}))},enumerable:false,configurable:true});t.prototype.debounceChanged=function(){this.nanoSearchChange=h(this.nanoSearchChange,this.debounce)};t.prototype.shouldValidate=function(){if(this.onInit)return;if(this.invalid)this.showErrorMsg=this._invalid=false;this.customValidate();if(this.validateOn!=="dirty")return;this.showInlineValidation()};t.prototype.valueChanged=function(){var t=this;if(this.onInit){if(this.multiple)this.currInsertIndex=this.value.length-1;return}setTimeout((function(e){return t.shouldValidate()}),20);this.nanoChange.emit({value:this.value})};t.prototype.setDataListOpts=function(){if(!this.datalist||!this.selectWrap)return;var t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign(Object.assign({},t),this.dropDownConfig),{tetherTo:this.selectWrap});this.datalist.input=this.inputCtrl};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(t)this.showInlineValidation();return[2,{isValid:!this.invalid,errorMessage:this.errorMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){this.inputCtrl.focus();setTimeout((function(){return t.inputCtrl.click()}),50);return[2]}))}))};t.prototype.getSelectElement=function(){return Promise.resolve(this.nativeSelect)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeSelect){this.nativeSelect.setCustomValidity(t);this.showInlineValidation()}return[2]}))}))};Object.defineProperty(t.prototype,"valArray",{get:function(){return typeof this.value==="string"?this.value.length?[this.value]:[]:this.value},enumerable:false,configurable:true});t.prototype.isValidValues=function(){var t=this;return this.valArray.find((function(e){return t.options.find((function(t){return t.value===e}))}))};t.prototype.slotChangeObserver=function(){var t=this;var e=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));e.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]').length;this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');if(!!this.el.querySelector('select:not([class*="sc-nano-select"]) option')){console.warn("nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}};t.prototype.getLabel=function(t){var e=this.options.find((function(e){var n;return!e.disabled&&((n=e.value)===null||n===void 0?void 0:n.length)&&e.value===t}));return e&&e.label?e.label:t};t.prototype.handleBlur=function(t){var e=this;if(!this.hasFocus)return;var n=t;var a;s((function(){if(n.key){if(n.key!=="Tab")return;a=b()}else a=t.target;if(c(e.el.tagName.toLowerCase(),a)!==e.el){e.onBlur()}}))};t.prototype.connectedCallback=function(){this.debounceChanged();this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))};t.prototype.disconnectedCallback=function(){document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}));if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){var t=this;this.slotChangeObserver();this.customValidate();this.setDataListOpts();s((function(){return t.onInit=false}))};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this;var e=this.selectId+"-lbl";var n=this.showInlineError||this.hasHelperSlot?this.selectId+"-moreId":"";this.rtl=this.el.ownerDocument.dir==="rtl";this.valueItems=[];var o=function(t){var e=t.el,n=t.floatLabel,a=t.label,i=t.errorMessage,o=t.showInlineError,r=t.hasHelperSlot,s=t.hasLabelSlot,l=t.hideLabel,d=t.placeholder,c=t.rtl;return{el:e,floatLabel:n,label:a,errorMessage:i,showInlineError:o,hasHelperSlot:r,hasLabelSlot:s,hideLabel:l,placeholder:d,rtl:c}}(this);var r=Object.assign(Object.assign({},o),{labelId:e,moreId:n,hasValue:!!this.value.length||!!this.inputSearchVal.length,controlId:this.selectId});var s=function(e){var n=e.readonly,a=e.disabled;return{readonly:n,disabled:a,clearControl:t.clearSelect}}(this);return a(i,{type:this.multiple?"select-multiple":"select-one","aria-disabled":this.disabled?"true":null,class:Object.assign(Object.assign({},g(this.color)),{"has-value":!!this.value.length||!!this.inputSearchVal.length,"has-focus":this.hasFocus,"is-invalid":this.invalid,"has-label":this.label!==null&&!this.floatLabel,"has-float-label":this.label!==null&&this.floatLabel,rtl:this.rtl,"has-multiple":this.multiple,"has-clr-btn":this.clearSelect,masked:this.mask,legacy:this.isLegacy})},a(u,Object.assign({},r),a(p,Object.assign({},s,{onClearText:this.clearSelectValue,control:this.el,ref:function(e){return t.selectWrap=e},endValueSlot:a("slot",{name:"down-arrow"},a("nano-icon",{slot:"value-end",name:"light/chevron-down"}))}),this.multiple&&a("div",{class:"multi-wrap"},this.multipleValues(e,n)),!this.multiple&&[this.mask&&a("div",{class:"select-mask"},this.getLabel(this.value)),a("input",{id:this.selectId,class:"native-input",ref:function(e){return t.inputCtrl=e},"aria-labelledby":e+" "+n,disabled:this.disabled,form:this.form,placeholder:!this.floatLabel&&this.placeholder?this.placeholder:"",readOnly:true,required:this.required,value:this.getLabel(this.value),onFocus:this.onFocus})])),!this.readonly&&!this.disabled&&a("nano-datalist",{onNanoOptionsUpdated:this.setOptions,ref:function(e){return t.datalist=e},selected:this.valArray,type:this.multiple?"selctMulti":"select",onNanoSelect:this.setValue,onNanoDeselect:function(e){e.preventDefault();t.removeValue(e.detail.value)},options:this._options.length?this._options:undefined},this.allowCustomValues&&this.multiple&&!!this.inputSearchVal&&a("nano-option",{slot:"list-top",value:this.inputSearchVal,selected:false,label:this.inputSearchVal,onNanoSelect:function(){return t.inputCtrl.focus()}},a("span",{slot:"check-icon"}),"Add '",this.inputSearchVal,"'"),a("slot",null)),a("select",{id:this.selectId+"-hidden",class:"native-select",ref:function(e){return t.nativeSelect=e},"aria-labelledby":e+" "+n,disabled:this.disabled,form:this.form,multiple:this.multiple,name:this.name,required:this.required,onInvalid:this.handleInvalid},this.allowCustomValues&&this.valArray.map((function(t){return a("option",{value:t,selected:true},t)})),!this.allowCustomValues&&this.options.map((function(e){return a("option",{value:e.value,selected:t.valArray.includes(e.value),disabled:e.disabled,label:e.label},t.valArray.includes(e.value))}))))};t.prototype.multipleValues=function(t,e){var n=this;var i=a("input",{class:"multi-input",id:this.selectId,ref:function(t){return n.inputCtrl=t},readOnly:this.readonly,disabled:this.disabled,autoFocus:this.autofocus,autocomplete:"off",onKeyDown:this.handleDocumentKeyDown,onInput:this.onMultiInput,value:this.inputSearchVal,onTouchStart:this.onClick,onMouseDown:this.onClick,onFocus:this.onFocus,placeholder:this.placeholder&&!this.floatLabel&&!this.value.length?this.placeholder:"","aria-labelledby":t+" "+e});if(!this.value.length)return i;return this.value.map((function(t,e){var o=a("span",{onDragStart:n.onDragStart,onDragLeave:n.onDragLeave,onDragEnd:n.onDragEnd,onDragOver:function(t){return t.preventDefault()},draggable:true,"data-value":t,ref:function(t){return n.valueItems.push(t)},class:"multi-value"},a("span",null,n.getLabel(t)),a("button",{class:"multi-value-remove",type:"button",tabindex:"-1",onTouchEnd:function(){n.removeValue(t)},onMouseUp:function(){n.removeValue(t)}},a("nano-icon",{name:"light/times"})));if(e===0&&n.currInsertIndex<0)o=[i,o];else if(e===n.currInsertIndex)o=[o,i];return o}))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{debounce:["debounceChanged"],required:["shouldValidate"],disabled:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],value:["valueChanged"],dropDownConfig:["setDataListOpts"]}},enumerable:false,configurable:true});return t}());y.style=m}}}));
-//# sourceMappingURL=p-c20b6f1c.system.entry.js.map

package/dist/nano-components/p-c20b6f1c.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/nav-item/nav-item.scss?tag=nano-nav-item&encapsulation=shadow","src/components/nav-item/nav-item.tsx","src/components/select/select.scss?tag=nano-select&encapsulation=scoped","src/components/select/select.tsx"],"names":["navItemCss","NavItem","exports","class_1","hostRef","_this","this","hasSecondarySlot","hasAnchorEle","didBlur","animating","didOpen","isInGlobalNav","isInMenuDrawer","isInMenu","isLegacy","document","head","attachShadow","hasFocus","href","target","disabled","open","selected","secondaryActiveWidth","secondaryFallback","closeOnBlur","closeSecondary","__awaiter","nanoClosing","emit","secondaryMenu","secondaryDiv","displayTransition","status","_b","sent","openSecondary","window","innerWidth","call","nanoOpening","toggleSecondary","handleFocus","nanoFocus","handleHostBlur","el","removeAttribute","nanoBlur","handleHostClick","ev","foundlink","closest","btn","click","handleMouseEnter","globalNavEle","classList","contains","timeToWait","getSiblings","length","clearTimeout","waitHide","fromHover","waitShow","setTimeout","__generator","handleMouseLeave","handleClick","_a","querySelector","blur","relatedTarget","foundThisNavEle","focus","preventScroll","removeEventListener","prototype","setFocus","openChange","didOpenChange","nanoClose","panelio_1","IntersectionObserver","data","boundingClientRect","top","scrollIntoView","behavior","disconnect","threshold","observe","addEventListener","tabIndex","nanoOpen","found","parentElement","componentWillLoad","secondaryEle","link","getDirectChildren","connectedCallback","render","h","Host","class","has-secondary","secondary-open","has-focus","nano-global-nav","nano-menu-drawer","nano-menu","legacy","onBlur","dir","ownerDocument","onMouseEnter","onMouseLeave","onClick","role","nav-item","ref","a","onFocus","name","div","tabindex","selectCss","selectIds","Select","class_2","valueItems","selectId","rtl","onInit","currInsertIndex","showErrorMsg","errorMessage","hasLabelSlot","hasHelperSlot","inputSearchVal","_invalid","autofocus","validateOn","showInlineError","hideLabel","floatLabel","multiple","readonly","required","allowCustomValues","_value","_options","_eOptions","clearSelect","mask","debounce","dropDownConfig","customValidate","nativeSelect","setCustomValidity","valArray","isValidValues","max","min","showInlineValidation","validity","valid","validationMessage","nanoValidate","isValid","invalid","originalEvent","handleInvalid","preventDefault","_","setValue","e","value","detail","inputCtrl","includes","__spreadArray","slice","removeValue","toFind","filter","val","setOptions","datalist","activeOptions","map","ao","label","filterMeta","handleDocumentKeyDown","rm","key","previousElementSibling","dataset","nextElementSibling","previousSibling","nextSibling","event","Event","dispatchEvent","clearSelectValue","stopPropagation","onDragStart","ele","dragVal","onDragEnd","onDragLeave","spanVal","to","indexOf","from","tmpArr","tmpVal","onMultiInput","trim","nanoSearchChange","Object","defineProperty","_selectWrap","setDataListOpts","_datalist","split","Array","isArray","opts","opt","debounceChanged","debounceEvent","shouldValidate","valueChanged","nanoChange","selectWrap","currDWConfig","assign","tetherTo","input","reportValidity","validateFirst","getSelectElement","Promise","resolve","showError","message","find","options","slotChangeObserver","mo","MutationObserver","processSlottedContent","childList","subtree","querySelectorAll","console","warn","getLabel","handleBlur","kev","raf","getActiveElement","closestElement","tagName","toLowerCase","CustomEvent","disconnectedCallback","componentDidLoad","labelId","moreId","compWrapOptions","placeholder","wrapOptions","hasValue","controlId","controlOptions","clearControl","type","aria-disabled","createColorClasses","color","has-value","is-invalid","has-label","has-float-label","has-multiple","has-clr-btn","masked","FormControlWrap","FormControl","onClearText","control","endValueSlot","slot","multipleValues","id","aria-labelledby","form","readOnly","onNanoOptionsUpdated","onNanoSelect","onNanoDeselect","undefined","select","onInvalid","autoFocus","autocomplete","onKeyDown","onInput","onTouchStart","onMouseDown","i","toReturn","onDragOver","draggable","data-value","span","push","onTouchEnd","onMouseUp"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  // These can be overwritten, but are autatically set from context components\n\n  // --padding-top: inherit;\n  // --padding-bottom: inherit;\n  // --padding-start: inherit;\n  // --padding-end: inherit;\n  // --margin: inherit;\n\n  // --secondary-padding-top: inherit;\n  // --secondary-padding-bottom: inherit;\n  // --secondary-padding-start: inherit;\n  // --secondary-padding-end: inherit;\n\n  // --border-bottom: inherit;\n  // --icon-size: inherit;\n\n  // --color: inherit;\n  // --color-hover: inherit;\n  // --color-focus: inherit;\n  // --color-selected: inherit;\n  // --color-open: inherit;\n\n  // --bg-color: inherit;\n  // --bg-color-hover: inherit;\n  // --bg-color-selected: inherit;\n  // --bg-color-open: inherit;\n  // --bg-color-focus: inherit;\n\n  // --secondary-bg-color: inherit;\n  // --secondary-color: inherit;\n\n  opacity: inherit;\n  display: block;\n  color: var(--color) !important;\n  margin: var(--margin);\n\n  ::slotted(*),\n  * {\n    box-sizing: border-box;\n  }\n\n  ::slotted(button),\n  button {\n    background: none;\n    border: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(a:visited),\n  button,\n  a,\n  a:visited {\n    @include text-inherit();\n    @include padding(\n      var(--padding-top),\n      var(--padding-end),\n      var(--padding-bottom),\n      var(--padding-start)\n    );\n\n    display: var(--display, block);\n    white-space: nowrap;\n    color: var(--color) !important;\n    background-color: var(--bg-color);\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(null, var(--padding-end), null, null);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(null, null, null, var(--padding-start));\n  }\n\n  .link {\n    &::slotted(nano-icon[slot='icon-start']),\n    ::slotted(nano-icon[slot='icon-start']) {\n      @include padding(null, 0, null, var(--padding-start));\n    }\n\n    &::slotted(nano-icon[slot='icon-end']),\n    ::slotted(nano-icon[slot='icon-end']) {\n      @include padding(null, var(--padding-end), null, 0);\n    }\n  }\n\n  .link,\n  button,\n  a {\n    border-bottom: var(--border-bottom);\n    display: flex;\n    align-items: center;\n  }\n\n  .secondary-menu {\n    display: none;\n  }\n\n  ::slotted(a:hover),\n  ::slotted(button:hover),\n  .link:hover,\n  button:hover,\n  a:hover {\n    text-decoration: inherit !important;\n  }\n\n  button:focus,\n  a:focus {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, none);\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: none;\n  }\n}\n\n.nav-item {\n  &.selected {\n    .link,\n    button,\n    a {\n      color: var(--color-selected, var(--color-open, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-selected,\n          var(--bg-color-open, var(--bg-color))\n        );\n    }\n  }\n\n  &.secondary-open {\n    button,\n    a {\n      color: var(--color-open, var(--color-selected, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-open,\n          var(--secondary-bg-color, var(--bg-color-selected, var(--bg-color)))\n        );\n    }\n  }\n\n  &.disabled {\n    opacity: 0.6;\n\n    button,\n    a {\n      color: var(--color-disabled, var(--color)) !important;\n    }\n  }\n\n  &:not(.nano-menu) {\n    ::slotted(a:hover),\n    ::slotted(button:hover),\n    .link:hover,\n    button:hover,\n    a:hover {\n      color: var(--color-hover, var(--color-hover, var(--color))) !important;\n      background-color:\n        var(\n          --bg-color-hover,\n          var(--bg-color-focus, var(--bg-color))\n        );\n    }\n  }\n}\n\n:host(.has-focus) {\n  .link {\n    color: var(--color-focus, var(--color-hover, var(--color))) !important;\n    background-color:\n      var(\n        --bg-color-focus,\n        var(--bg-color-hover, var(--bg-color))\n      );\n    outline: var(--focus-outline, 5px auto -webkit-focus-ring-color);\n  }\n}\n\n:host(.nano-global-nav-menu),\n:host(.nano-menu) {\n  a,\n  a:visited,\n  button,\n  .link {\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: 'currentColor';\n    text-decoration: inherit;\n    white-space: normal;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    flex: 1;\n  }\n\n  ::slotted(a),\n  ::slotted(button) {\n    flex: 1;\n  }\n\n  ::slotted(a:focus),\n  ::slotted(button:focus) {\n    box-shadow: none;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    color: var(--secondary-color, 'currentColor');\n    min-height: 100%;\n    top: 0;\n    left: 0;\n    width: 100%;\n    z-index: 1;\n    opacity: 0;\n    transition: opacity 0.2s ease, transform 0.3s ease;\n    background-color: var(--secondary-bg-color, white);\n    transform: translateX(100%);\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      opacity: 1;\n      transform: translateX(0);\n      transition: opacity 0.3s ease, transform 0.2s ease;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu) {\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 10px;\n    pointer-events: none;\n  }\n\n  button,\n  a {\n    ::slotted(nano-icon[slot='icon-end']) {\n      padding: 0;\n    }\n  }\n}\n\n:host(.nano-global-nav-menu[dir='rtl']),\n:host(.nano-menu[dir='rtl']) {\n  .secondary-menu {\n    left: auto;\n    right: 0;\n    transform: translateX(-100%);\n\n    &.open {\n      transform: translateX(0);\n    }\n  }\n}\n\n:host(.nano-menu) {\n  .secondary-menu-content {\n    @include padding(\n      var(--secondary-padding-top),\n      var(--secondary-padding-end),\n      var(--secondary-padding-bottom),\n      var(--secondary-padding-start)\n    );\n  }\n}\n\n// I'm sorry. Horrible IE fixes for collapsing stuff :/\n:host(.nano-global-nav-bar.legacy) {\n  margin: 0 11px;\n\n  ::slotted(a) {\n    @include padding(7px, 6px, 7px, 6px);\n  }\n}\n\n:host(.nano-global-nav-menu.legacy) {\n  ::slotted(a) {\n    @include padding(8px, 12px, 8px, 12px);\n  }\n}\n\n:host(.nano-global-nav-bar) {\n  .link,\n  a,\n  button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-stretch: expanded;\n  }\n\n  .text {\n    flex: 1 0 auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include margin(0, 0, 0, var(--padding-end));\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include margin(0, var(--padding-start), 0, 0);\n  }\n}\n\n:host(.nano-global-nav-bar.has-secondary) {\n  button {\n    position: relative;\n    font-stretch: expanded;\n\n    &::before {\n      content: '';\n      background: rgb(134, 190, 226);\n      height: 3px;\n      left: 0;\n      bottom: -14px;\n      right: 5px;\n      position: absolute;\n      transform: translateZ(0) scaleX(0);\n      transform-origin: 0;\n      transition: 0.2s ease transform;\n    }\n  }\n\n  .selected button::before,\n  .secondary-open button::before {\n    transform: translateZ(0) scaleX(1);\n  }\n\n  .secondary-open button::before {\n    opacity: 0.5;\n  }\n\n  .secondary-menu {\n    display: none;\n    transition: transform 0.3s ease;\n    transform: translateY(-100%) translateZ(0);\n    background-color: var(--secondary-bg-color, #196c82);\n    color: var(--secondary-color);\n    position: absolute;\n    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.15);\n    left: 0;\n    right: 0;\n    z-index: -2;\n    outline: none;\n\n    &.open {\n      transform: translateY(12px) translateZ(0);\n    }\n  }\n}\n\n:host(.nano-menu-drawer) {\n  .link,\n  a,\n  button {\n    @include padding(\n      calc(var(--padding-top) / 2),\n      0,\n      calc(var(--padding-bottom) / 2),\n      var(--padding-start)\n    );\n\n    display: flex;\n    justify-content: flex-start;\n    flex-direction: row;\n    align-items: center;\n    color: currentColor;\n    text-decoration: inherit;\n    white-space: normal;\n    border: none;\n    cursor: pointer;\n    line-height: 1.2;\n    width: 100%;\n  }\n\n  .text {\n    @include padding(null, var(--padding-end), null, 0);\n\n    text-align: left;\n    flex: 0 1 auto;\n    min-width: 130px;\n    width: 130px;\n  }\n\n  ::slotted(nano-icon[slot='icon-start']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: var(--icon-size);\n    width: var(--icon-size);\n    flex: 0 0 var(--icon-size);\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, var(--padding-end), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n\n  .secondary-menu {\n    display: none;\n    position: absolute;\n    background-color: var(--secondary-bg-color);\n    color: var(--secondary-color);\n    height: 100vh;\n    top: 0;\n    right: 0;\n    left: auto;\n    bottom: 0;\n    transform: translateX(0);\n    z-index: -1;\n    transition: transform 0.3s ease, opacity 0.2s ease;\n    overflow-y: auto;\n    width: var(--secondary-width, 400px);\n    max-width: 62vw;\n    opacity: 1;\n\n    @include padding(\n      var(--secondary-padding-top, var(--padding-top)),\n      var(--secondary-padding-end, var(--padding-end)),\n      var(--secondary-padding-bottom, var(--padding-bottom)),\n      var(--secondary-padding-start, var(--padding-start))\n    );\n\n    &:focus {\n      outline: none;\n    }\n\n    &.open {\n      transform: translateX(100%);\n      // opacity: 1;\n    }\n  }\n}\n\n:host(.nano-menu-drawer.legacy) {\n  .link,\n  a,\n  button {\n    width: auto;\n  }\n\n  ::slotted(nano-icon[slot='icon-end']) {\n    @include padding(0, calc(var(--padding-end) * 2), 0, 0);\n\n    font-size: 10px;\n    flex: 0 0 20px;\n    min-width: 20px;\n  }\n}\n\n:host(.nano-menu-drawer[dir='rtl']) {\n  .text {\n    text-align: right;\n  }\n\n  .secondary-menu {\n    right: auto;\n    left: 0;\n    transform: translateX(0%);\n\n    &.open {\n      transform: translateX(-100%);\n      opacity: 1;\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  EventEmitter,\n  Event,\n  State,\n  Method,\n  ComponentInterface,\n} from '@stencil/core';\nimport { displayTransition, getDirectChildren, getSiblings } from '../../utils';\nimport { NavItemEventDetail } from '../../interface';\n\n/**\n * Nav items to be used with the various nav items.\n * [Globla-Nav](/story/compounds-global-nav)\n * [Menu-Drawer](/story/components-menu-drawer)\n * [Dropdown](/story/components-dropdown)\n */\n@Component({\n  tag: 'nano-nav-item',\n  styleUrl: 'nav-item.scss',\n  shadow: true,\n})\nexport class NavItem implements ComponentInterface {\n  private hasSecondarySlot: boolean = false;\n  private hasAnchorEle: boolean = false;\n  private secondaryDiv: HTMLDivElement;\n  private btn: HTMLButtonElement | HTMLAnchorElement;\n  private didBlur: boolean = false;\n  private fromHover: boolean;\n  private animating: boolean = false;\n  private waitHide: number;\n  private waitShow: number;\n  private globalNavEle?: HTMLNanoGlobalNavElement;\n\n  @State() didOpen: boolean = false;\n  @State() isInGlobalNav: boolean = false;\n  @State() isInMenuDrawer: boolean = false;\n  @State() isInMenu: boolean = false;\n  @State() isLegacy: boolean = !document.head.attachShadow;\n  @State() hasFocus: boolean = false;\n  @Element() private el: HTMLNanoNavItemElement;\n\n  /**\n   * Href to link to\n   */\n  @Prop({ mutable: true }) href: string = null;\n\n  /**\n   * Target to use for links\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /**\n   * Disable the nav item\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether a secondary menu should be or is currently open\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Whether this menu item is currently 'selected'\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Screen pixel width to activate the secondary menu\n   */\n  @Prop() secondaryActiveWidth: number = 0;\n\n  /**\n   * Secondary fallback function for when the secondary menu is no longer active.\n   */\n  @Prop() secondaryFallback = () => {};\n\n  /**\n   * Whether secondary menus should close on blur\n   */\n  @Prop() closeOnBlur: boolean = true;\n\n  /**\n   * Emitted when the nav item closes it's secondary navigation.\n   */\n  @Event() nanoClose!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item opens it's secondary navigation.\n   */\n  @Event() nanoOpen!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to open it's secondary navigation.\n   */\n  @Event() nanoOpening!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item is about to close it's secondary navigation.\n   */\n  @Event() nanoClosing!: EventEmitter<NavItemEventDetail>;\n\n  /**\n   * Emitted when the nav item loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the nav item has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the first button or anchor present. Use this method instead of the global\n   * `element.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (!this.btn) return;\n    this.btn.focus();\n  }\n\n  /**\n   * Public open watcher\n   */\n  @Watch('open')\n  openChange() {\n    this.open ? this.openSecondary() : this.closeSecondary();\n  }\n\n  /**\n   * Internal open watcher\n   */\n  @Watch('didOpen')\n  didOpenChange() {\n    if (!this.hasSecondarySlot) return;\n\n    if (!this.didOpen) {\n      /* the secondadry panel is not closing via hover,\n      remove blur events, add focus back to originating button */\n      if (!this.fromHover) {\n        this.btn.removeEventListener('focusout', this.blur);\n        this.secondaryDiv.removeEventListener('focusout', this.blur);\n      }\n      setTimeout(() => {\n        if (!this.fromHover && !this.didBlur)\n          this.btn.focus({ preventScroll: true });\n        this.nanoClose.emit({ secondaryMenu: this.secondaryDiv });\n      }, 50);\n    } else {\n      this.didBlur = false;\n\n      /* the secondadry panel is not opening via hover,\n      scroll content into view, focus on it and add blur events */\n      if (!this.fromHover) {\n        const panelio = new (window as any).IntersectionObserver(\n          (data: IntersectionObserverEntry[]) => {\n            if (data[0].boundingClientRect.top < 0) {\n              this.secondaryDiv.scrollIntoView({\n                behavior: 'smooth',\n              });\n            }\n            panelio.disconnect();\n          },\n          { threshold: 1 }\n        );\n        panelio.observe(this.secondaryDiv);\n        this.secondaryDiv.focus({ preventScroll: true });\n\n        this.btn.addEventListener('focusout', this.blur);\n        this.secondaryDiv.addEventListener('focusout', this.blur);\n        window.addEventListener('blur', this.blur);\n\n        this.el.tabIndex = -1;\n        this.nanoOpen.emit({ secondaryMenu: this.secondaryDiv });\n      }\n    }\n  }\n\n  private closeSecondary = async () => {\n    this.open = false;\n    if (!this.hasSecondarySlot || !this.didOpen) return;\n\n    this.nanoClosing.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', false);\n    this.didOpen = status !== 'hidden';\n  };\n\n  private openSecondary = async () => {\n    if (window.innerWidth < this.secondaryActiveWidth) {\n      this.secondaryFallback.call(this);\n      return;\n    }\n    this.open = true;\n    if (!this.hasSecondarySlot || this.didOpen) return;\n\n    this.nanoOpening.emit({ secondaryMenu: this.secondaryDiv });\n    let status = await displayTransition(this.secondaryDiv, 'open', true);\n    this.didOpen = status === 'shown';\n  };\n\n  private toggleSecondary = () => {\n    if (!this.hasSecondarySlot) return;\n    if (this.didOpen) this.closeSecondary();\n    else this.openSecondary();\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    // opens secondary panel when activated via hover\n    if (this.href && !this.animating && this.hasSecondarySlot)\n      this.openSecondary();\n    this.nanoFocus.emit();\n  };\n\n  private handleHostBlur = () => {\n    if (this.animating) return;\n\n    // tab index is added to host when secondary panel opens\n    // to return focus after secondary panel closes. Remove now if it was added\n    this.el.removeAttribute('tabindex');\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  // direct host clicks to internal button\n  private handleHostClick = (ev: MouseEvent) => {\n    if (!this.hasAnchorEle) return;\n    let foundlink = (ev.target as HTMLElement).closest('a, button');\n    if (!foundlink) this.btn.click();\n  };\n\n  // handles secondary menu hover behaviour.\n  private handleMouseEnter = async () => {\n    if (\n      !this.href ||\n      this.animating ||\n      !this.hasSecondarySlot ||\n      (this.globalNavEle && !this.globalNavEle.classList.contains('ready'))\n    )\n      return;\n\n    // if there are sibling secondary panels currently open,\n    // we need to wait before opening otherwise we get unwanted overlapping\n    let timeToWait = 0;\n    if (getSiblings(this.el, '.secondary-open.has-secondary').length)\n      timeToWait = 300;\n\n    clearTimeout(this.waitHide);\n    this.fromHover = true;\n    this.animating = true;\n    this.waitShow = window.setTimeout(\n      async () => await this.openSecondary(),\n      timeToWait\n    );\n    this.animating = false;\n  };\n\n  // handles secondary menu hover-out behaviour.\n  private handleMouseLeave = () => {\n    if (!this.href) return;\n    clearTimeout(this.waitShow);\n    this.fromHover = true;\n    this.animating = true;\n\n    // prevent closing immediately - makes navigating to items within more forgiving\n    this.waitHide = window.setTimeout(\n      async () => await this.closeSecondary(),\n      300\n    );\n    this.animating = false;\n  };\n\n  private handleClick = () => {\n    this.fromHover = false;\n    if (this.hasSecondarySlot) this.toggleSecondary();\n    else this.el.querySelector<HTMLElement>('*')?.click();\n  };\n\n  // utility to traverse up, to see if element is nested within current nav-item\n  private foundThisNavEle(el: HTMLElement): boolean {\n    let found = el.closest('nano-nav-item');\n    found = found === el ? el.parentElement.closest('nano-nav-item') : found;\n\n    if (!found) return false;\n    if (found === this.el) return true;\n    return this.foundThisNavEle(found);\n  }\n\n  private blur = (ev: FocusEvent) => {\n    if (!this.didOpen || this.animating) return;\n    if (!this.closeOnBlur) return;\n\n    // if event is associated with this element don't close\n    if (ev && ev.relatedTarget) {\n      if (\n        ev.relatedTarget === this.el ||\n        ev.relatedTarget === this.btn ||\n        this.foundThisNavEle(ev.relatedTarget as HTMLElement)\n      ) {\n        this.secondaryDiv.focus({ preventScroll: true });\n        return;\n      }\n    }\n\n    this.btn.removeEventListener('focusout', this.blur);\n    this.secondaryDiv.removeEventListener('focusout', this.blur);\n    window.removeEventListener('blur', this.blur);\n\n    this.didBlur = true;\n\n    this.open = false;\n    if (!ev.relatedTarget)\n      setTimeout(() => {\n        this.el.focus({ preventScroll: true });\n      }, 50);\n  };\n\n  componentWillLoad() {\n    let secondaryEle = this.el.querySelector('[slot=\"secondary\"]');\n    this.hasSecondarySlot = !!secondaryEle;\n\n    let link = getDirectChildren(this.el, 'a, button')[0] as\n      | HTMLAnchorElement\n      | HTMLButtonElement;\n    this.hasAnchorEle = !!link;\n\n    if (link) {\n      this.href = (link as HTMLAnchorElement).href\n        ? (link as HTMLAnchorElement).href\n        : null;\n      this.btn = link;\n      if (this.hasSecondarySlot)\n        this.btn.addEventListener('click', this.toggleSecondary);\n\n      this.btn.addEventListener('focus', this.handleFocus);\n      this.btn.addEventListener('blur', this.handleHostBlur);\n    }\n  }\n\n  connectedCallback() {\n    this.isInGlobalNav = false;\n    this.isInMenuDrawer = false;\n    this.globalNavEle = this.el.closest('nano-global-nav');\n\n    this.isInMenuDrawer = !!this.el.closest('nano-menu-drawer');\n    this.isInMenu = !!this.el.closest('nano-menu');\n    this.isInGlobalNav =\n      this.el.parentElement === this.globalNavEle ||\n      !!this.el.closest('.global-nav');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'has-secondary': this.hasSecondarySlot,\n          'secondary-open': this.open,\n          selected: this.selected,\n          'has-focus': this.hasFocus,\n          disabled: this.disabled,\n          'nano-global-nav': this.isInGlobalNav,\n          'nano-menu-drawer': this.isInMenuDrawer,\n          'nano-menu': this.isInMenu,\n          legacy: this.isLegacy,\n        }}\n        onBlur={this.handleHostBlur}\n        dir={(this.el.ownerDocument as Document).dir === 'rtl' ? 'rtl' : null}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleHostClick}\n        role=\"menuitem\"\n      >\n        <div\n          class={{\n            'nav-item': true,\n            'secondary-open': this.open,\n            selected: this.selected,\n          }}\n        >\n          {this.href && !this.hasAnchorEle && !this.disabled && (\n            <a\n              target={this.target}\n              ref={(a) => (this.btn = a)}\n              href={this.href}\n              onFocus={this.handleFocus}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </a>\n          )}\n          {((!this.hasAnchorEle && !this.href) || this.disabled) && (\n            <button\n              ref={(btn) => (this.btn = btn)}\n              onClick={this.handleClick}\n              onFocus={this.handleFocus}\n              disabled={this.disabled}\n            >\n              <slot name=\"icon-start\" />\n              <span class=\"text\">\n                <slot />\n              </span>\n              <slot name=\"icon-end\" />\n            </button>\n          )}\n          {this.hasAnchorEle && !this.disabled && (\n            <div class=\"link\">\n              <slot name=\"icon-start\" />\n              <slot />\n              <slot name=\"icon-end\" />\n            </div>\n          )}\n          {this.hasSecondarySlot && !this.disabled && (\n            <div\n              class=\"secondary-menu\"\n              ref={(div) => (this.secondaryDiv = div)}\n              tabindex=\"-1\"\n            >\n              <div class=\"secondary-menu-content\">\n                <slot name=\"secondary\" />\n              </div>\n              <div\n                class=\"secondary-menu-mask\"\n                onClick={this.closeSecondary}\n              ></div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/layers';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  width: 100%;\n  padding: 0 !important;\n  font-family: $font-family-base;\n  display: inline-block;\n}\n\n:host(.nano-color) {\n  --input-border-style--focus: #{$input-border-style} var(--nano-color-tint, #{nano-color(primary, tint)});\n  --multi-input-value-bg: var(--nano-color-tint-rgb);\n  --multi-input-value-border: var(--nano-color-shade);\n  --multi-input-value-text-color: var(--nano-color-contrast);\n\n  color: current-color(base);\n}\n\n:host-context(nano-item:not(.item-label)) {\n  --padding-start: 0;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  * {\n    pointer-events: none !important;\n  }\n}\n\nselect {\n  display: none;\n}\n\n.native-input {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  width: 100%;\n  max-width: 100%;\n  max-height: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  cursor: default;\n\n  &::selection {\n    background: transparent;\n  }\n\n  &::-moz-selection {\n    background: transparent;\n  }\n\n  &[disabled] {\n    opacity: 0.4;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: 2.5em;\n    min-height: 2.5em;\n    // text-overflow: ellipsis;\n  }\n\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .textarea & {\n    line-height: 1.5em;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n  }\n\n  .has-float-label & {\n    padding-top: 1.4em;\n  }\n\n  .has-float-label.textarea & {\n    padding-top: 1.8em;\n  }\n\n  .legacy & {\n    box-sizing: content-box;\n  }\n\n  :host(.masked) & {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n}\n\n.select-mask {\n  @include border-radius(var(--input-border-radius));\n  @include padding(0, var(--padding-end), 0, var(--padding-start));\n  @include text-inherit();\n\n  pointer-events: none;\n  line-height: 2.5em;\n  min-height: 2.5em;\n}\n\n// multi stuff\n\n.multi {\n  &-wrap {\n    @include padding(\n      0,\n      0,\n      calc(var(--padding-bottom) / 2),\n      0\n    );\n\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    max-width: 100%;\n\n    :host(.has-float-label) & {\n      padding-top: 1.3em;\n    }\n  }\n\n  &-input {\n    @include text-inherit();\n    @include padding(\n      calc(var(--padding-top) / 2),\n      var(--padding-end),\n      0,\n      var(--padding-start)\n    );\n\n    min-width: 50px;\n    max-width: 100%;\n    max-height: 100%;\n    appearance: none;\n    border: 0;\n    outline: none;\n    display: inline-block;\n    background: transparent;\n    flex: 0;\n    position: relative;\n    min-height: calc(2.78em - var(--padding-top));\n    box-sizing: border-box;\n\n    :host(.legacy) & {\n      box-sizing: content-box;\n    }\n\n    &:last-child {\n      flex: 1;\n    }\n  }\n\n  &-value {\n    @include margin(4px, 0, 0, 4px);\n\n    background: rgba(var(--multi-input-value-bg), 0.8);\n    color: var(--multi-input-value-text-color);\n    border: 1px solid;\n    border-color: var(--multi-input-value-border);\n    padding: 0.3em 0.5em;\n    border-radius: 3px;\n    line-height: 1;\n    max-width: 100%;\n    display: flex;\n    align-items: center;\n    font-size: var(--input-font-size);\n    font-weight: 600;\n    letter-spacing: 1px;\n\n    span {\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      max-width: 100%;\n      overflow: hidden;\n      line-height: 1.4;\n    }\n  }\n\n  &-value-remove {\n    @include margin(0);\n    @include background-position(center);\n    @include padding(0, 0, 0, 0.5em);\n\n    color: inherit;\n    border: 0;\n    outline: none;\n    background-color: transparent;\n    background-repeat: no-repeat;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    top: 0;\n    font-size: 1em;\n\n    nano-icon {\n      --color: var(--multi-input-value-text-color);\n    }\n  }\n}\n\n.placeholder-as-label {\n  :host(.has-focus.has-multiple) & {\n    transform: translateY(-120%);\n    font-size: 0.9em;\n  }\n}\n\n:host(.has-focus) select,\n:host(.has-focus) a,\n:host(.has-focus) button {\n  pointer-events: auto;\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  VNode,\n  Listen,\n} from '@stencil/core';\n\nimport {\n  Color,\n  SelectChangeEventDetail,\n  InputChangeEventDetail,\n  ControlValidityEventDetail,\n  ControlValidity,\n} from '../../interface';\nimport {\n  debounceEvent,\n  createColorClasses,\n  closestElement,\n  raf,\n  getActiveElement,\n} from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport { OptionInterface } from '../option/option-interface';\n\nlet selectIds = 0;\n\n/**\n * The select component is a wrapper to the HTML select element with custom styling and additional functionality.\n * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\n * It's multi selection functionality is vastly improved from the native solution. It allows for the control of\n * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.\n *\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot down-arrow - use this to replace the default down arrow\n * @slot - default slot; nest `nano-option` elements\n */\n@Component({\n  tag: 'nano-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select implements ComponentInterface {\n  private nativeSelect?: HTMLSelectElement;\n  private inputCtrl?: HTMLInputElement;\n  private valueItems: Array<HTMLSpanElement> = [];\n  private dragVal: string;\n  private mo?: MutationObserver;\n  private selectId = `nano-select-${selectIds++}`;\n  private rtl: boolean = false;\n  private onInit: boolean = true;\n  private isLegacy: boolean = 'registerElement' in document;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _selectWrap: HTMLElement;\n  private get selectWrap() {\n    return this._selectWrap;\n  }\n  private set selectWrap(ele: HTMLElement) {\n    if (this._selectWrap === ele) return;\n    this._selectWrap = ele;\n    this.setDataListOpts();\n  }\n\n  private _datalist: HTMLNanoDatalistElement;\n  private get datalist() {\n    return this._datalist;\n  }\n  private set datalist(ele: HTMLNanoDatalistElement) {\n    if (this._datalist === ele) return;\n    this._datalist = ele;\n    this.setDataListOpts();\n  }\n\n  @State() currInsertIndex: number = -1;\n  @State() showErrorMsg = false;\n  @State() errorMessage: string = '';\n  @State() hasFocus = false;\n  @State() hasLabelSlot: boolean = false;\n  @State() hasHelperSlot: boolean = false;\n  @State() inputSearchVal: string = '';\n\n  @Element() el!: HTMLNanoSelectElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set.\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  private _invalid = false;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have select focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, the user cannot interact with the select.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submit';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively use the 'label' slot\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.selectId + '-name';\n\n  /**\n   * Instructional text that shows before the select has a value. Text set here will be placed inside the label when a value is set. If you don't want this behaviour just set the first option to have no value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * The initial size of the control.\n   */\n  @Prop() size?: number;\n\n  /**\n   * Maximum number of options that can be selected when multiple is true\n   */\n  @Prop() max?: number;\n\n  /**\n   * Minimum number of options that can be selected when multiple is true\n   */\n  @Prop() min?: number;\n\n  /**\n   * The form element to associate the select with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * in multiple mode, allow users to enter their own values\n   */\n  @Prop() allowCustomValues: boolean = false;\n\n  /**\n   * The value of the select.\n   */\n  @Prop()\n  get value() {\n    return this._value;\n  }\n  set value(val: string | string[]) {\n    if (typeof val === 'string') {\n      if (this.multiple) this._value = val.split(',');\n      else this._value = val;\n    } else if (Array.isArray(val)) {\n      if (this.multiple) this._value = val;\n      else this._value = val[0];\n    }\n  }\n  private _value: Array<string> | string = this.multiple ? [] : '';\n\n  /**\n   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or\n   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.\n   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`\n   * Regardless - reading `options` will return the current component options - slotted or otherwise\n   */\n  @Prop()\n  get options(): Array<OptionInterface | string> {\n    if (this._options.length) return this._options;\n\n    if (!this.datalist || !this.datalist.activeOptions) return [];\n\n    return this._eOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  }\n  set options(opts: Array<OptionInterface | string>) {\n    this._options = opts.map((opt) => {\n      if (typeof opt === 'string') return { value: opt, label: opt };\n      else return opt;\n    });\n  }\n  private _options: OptionInterface[] = [];\n  @State() _eOptions: OptionInterface[] = [];\n\n  /**\n   * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.\n   */\n  @Prop() clearSelect = false;\n\n  /**\n   * Hide the native select element and cover with a value 'mask'.\n   * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple=\"true\".\n   */\n  @Prop() mask = false;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoSearchChange = debounceEvent(this.nanoSearchChange, this.debounce);\n  }\n\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('min')\n  @Watch('max')\n  @Watch('validateOn')\n  @Watch('readonly')\n  protected shouldValidate() {\n    if (this.onInit) return;\n    if (this.invalid) this.showErrorMsg = this._invalid = false;\n\n    this.customValidate();\n    if (this.validateOn !== 'dirty') return;\n    this.showInlineValidation();\n  }\n\n  /**\n   * Update the native select element when the value changes\n   */\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('value')\n  valueChanged() {\n    if (this.onInit) {\n      if (this.multiple) this.currInsertIndex = this.value.length - 1;\n      return;\n    }\n    setTimeout((_) => this.shouldValidate(), 20);\n    this.nanoChange.emit({ value: this.value });\n  }\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop({ mutable: true }) dropDownConfig?: Partial<Dropdown> = {};\n\n  @Watch('dropDownConfig')\n  setDataListOpts() {\n    if (!this.datalist || !this.selectWrap) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      ...this.dropDownConfig,\n      tetherTo: this.selectWrap,\n    };\n    this.datalist.input = this.inputCtrl;\n  }\n\n  // Custom Events\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<SelectChangeEventDetail>;\n\n  /**\n   * Emitted when the select loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the select has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Emitted when a keyboard input occurred on a multiple=\"true\" input\n   */\n  @Event() nanoSearchChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  // Public Methods\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    if (validateFirst) this.showInlineValidation();\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n    };\n  }\n\n  /**\n   * Sets focus on the specified `nano-select`. Use this method instead of the global\n   * `select.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    this.inputCtrl.focus();\n    setTimeout(() => this.inputCtrl.click(), 50);\n  }\n\n  /**\n   * Returns the native `<select>` element used under the hood.\n   */\n  @Method()\n  getSelectElement(): Promise<HTMLSelectElement> {\n    return Promise.resolve(this.nativeSelect!);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message.\n   * To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeSelect) {\n      this.nativeSelect.setCustomValidity(message);\n      this.showInlineValidation();\n    }\n  }\n\n  /* Logic */\n\n  private get valArray() {\n    return typeof this.value === 'string'\n      ? this.value.length\n        ? [this.value]\n        : []\n      : this.value;\n  }\n\n  private isValidValues() {\n    return this.valArray.find((val) =>\n      (this.options as OptionInterface[]).find((opt) => opt.value === val)\n    );\n  }\n\n  private customValidate = () => {\n    this.nativeSelect.setCustomValidity('');\n\n    // add custom validations 'cos html5 validations are a bit rubbish on selects\n    if (this.required && !this.valArray.length) {\n      this.nativeSelect.setCustomValidity('Please fill in this field.');\n      return true;\n    }\n    if (\n      this.valArray.length &&\n      !this.allowCustomValues &&\n      !this.isValidValues()\n    ) {\n      this.nativeSelect.setCustomValidity(\n        'Please choose an item from this field.'\n      );\n      return true;\n    }\n    if (this.max && this.valArray.length > this.max) {\n      this.nativeSelect.setCustomValidity(\n        `Only up to ${this.max} values are allowed.`\n      );\n      return true;\n    }\n    if (this.min && this.valArray.length < this.min) {\n      this.nativeSelect.setCustomValidity(\n        `You must select a minimum of ${this.min} values.`\n      );\n      return true;\n    }\n    return false;\n  };\n\n  private showInlineValidation = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    this._invalid = false;\n    this.showErrorMsg = false;\n    this.errorMessage = '';\n\n    if (!this.nativeSelect.validity.valid) {\n      this.errorMessage = this.nativeSelect.validationMessage;\n      this._invalid = true;\n      this.showErrorMsg = true;\n    }\n    this.nanoValidate.emit({\n      isValid: !this.invalid,\n      errorMessage: this.errorMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private handleInvalid = (ev: Event) => {\n    this._invalid = true;\n\n    if (this.validateOn === 'submit')\n      this._invalid = this.showErrorMsg = this.customValidate();\n    if (this.showInlineError) ev.preventDefault();\n\n    setTimeout((_) => this.showInlineValidation(ev), 20);\n  };\n\n  private setValue = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.preventDefault();\n\n    if (!this.multiple) {\n      this.value = e.detail.value;\n      this.selectWrap.clientWidth; // force reflow\n      this.inputCtrl.focus();\n      return;\n    }\n    if (this.value && this.value.length && this.value.includes(e.detail.value))\n      return;\n    if (this.max && this.value.length === this.max) return;\n\n    this.currInsertIndex++;\n    this.value = [\n      ...this.value.slice(0, this.currInsertIndex),\n      e.detail.value,\n      ...this.value.slice(this.currInsertIndex),\n    ];\n    this.inputSearchVal = '';\n    // this.selectWrap.clientWidth; // force reflow\n  };\n\n  private removeValue = (toFind?: string) => {\n    if (!this.multiple || !this.value.length) return;\n\n    if (!toFind) toFind = this.value[this.value.length - 1];\n    this.value = (this.value as Array<string>).filter((val) => val !== toFind);\n\n    this.currInsertIndex--;\n    // this.selectWrap.clientWidth; // force reflow\n    this.setFocus();\n  };\n\n  private slotChangeObserver() {\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / helper content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]').length;\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n\n    // breaking change introduced in v2. Rm in v3\n    if (\n      !!this.el.querySelector('select:not([class*=\"sc-nano-select\"]) option')\n    ) {\n      console.warn(\n        'nesting `<option>` elements was removed in v2. Please update your code to use `<nano-option>` elements instead.',\n        this.el\n      );\n    }\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"legacy\"]')) {\n      console.warn(\n        'The `legacy` slot has been removed. Please update your code',\n        this.el\n      );\n    }\n  }\n\n  private getLabel(toFind: string) {\n    let label = (this.options as OptionInterface[]).find((opt) => {\n      return !opt.disabled && opt.value?.length && opt.value === toFind;\n    });\n    return label && label.label ? label.label : toFind;\n  }\n\n  /* Event handling */\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    raf(() => {\n      if (kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = getActiveElement();\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private setOptions = () => {\n    if (\n      !this.datalist ||\n      !this.datalist.activeOptions ||\n      !this.datalist.activeOptions.length\n    )\n      return;\n\n    this._eOptions = this.datalist.activeOptions.map((ao) => {\n      const { value, selected, label, filterMeta } = ao;\n      return { value, selected, label, filterMeta };\n    });\n  };\n\n  private handleDocumentKeyDown = (ev: KeyboardEvent) => {\n    if (!this.multiple || !this.hasFocus) return;\n\n    if (!this.inputSearchVal) {\n      let rm: HTMLSpanElement;\n\n      switch (ev.key) {\n        case 'Backspace':\n          if (this.inputCtrl.previousElementSibling)\n            rm = this.inputCtrl.previousElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'Delete':\n          if (this.inputCtrl.nextElementSibling)\n            rm = this.inputCtrl.nextElementSibling as HTMLSpanElement;\n          else break;\n\n          this.removeValue(rm.dataset.value || null);\n          break;\n\n        case 'ArrowLeft':\n        case 'ArrowRight':\n          if (!this.value.length) break;\n\n          if (ev.key === 'ArrowLeft' && this.inputCtrl.previousSibling)\n            this.currInsertIndex--;\n          if (ev.key === 'ArrowRight' && this.inputCtrl.nextSibling)\n            this.currInsertIndex++;\n\n          setTimeout(() => {\n            this.inputCtrl.focus();\n          }, 20);\n          ev.preventDefault();\n          break;\n      }\n    }\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n\n    setTimeout(() => {\n      if (this.validateOn === 'dirty' && !this.hasFocus)\n        this.showInlineValidation();\n    }, 20);\n    this.nanoBlur.emit();\n\n    if (!this.allowCustomValues && this.multiple) {\n      this.inputSearchVal = '';\n      const event = new window.Event('change');\n      this.inputCtrl.dispatchEvent(event);\n    }\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private clearSelectValue = (ev?: Event) => {\n    if (this.clearSelect && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    if (this.multiple) {\n      this.value = [];\n      this.currInsertIndex = -1;\n    } else this.value = '';\n\n    this.inputCtrl.value = '';\n    const event = new window.Event('change');\n    this.inputCtrl.dispatchEvent(event);\n  };\n\n  private onClick = () => {\n    this.setFocus();\n  };\n\n  /* Multi event handlers */\n\n  private onDragStart = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    this.dragVal = ele.dataset.value;\n  };\n\n  private onDragEnd = (ev) => {\n    this.dragVal = null;\n    ev.preventDefault();\n  };\n\n  private onDragLeave = (ev: MouseEvent) => {\n    let ele = ev.target as HTMLSpanElement;\n    let spanVal: string =\n      ele.dataset && ele.dataset.value ? ele.dataset.value : null;\n\n    if (\n      !spanVal ||\n      this.dragVal === spanVal ||\n      !this.value.includes(this.dragVal)\n    ) {\n      ev.preventDefault();\n      return;\n    }\n\n    let to = this.value.indexOf(spanVal);\n    let from = this.value.indexOf(this.dragVal);\n    let tmpArr = this.value as Array<string>;\n    let tmpVal = tmpArr[to];\n\n    tmpArr[to] = tmpArr[from];\n    tmpArr[from] = tmpVal;\n    this.value = [...tmpArr];\n  };\n\n  private onMultiInput = (ev) => {\n    this.inputSearchVal = ev.target.value.trim();\n    this.nanoSearchChange.emit({ value: ev.target.value.trim() });\n  };\n\n  /* Stencil Component lifecycle hooks */\n\n  connectedCallback() {\n    this.debounceChanged();\n\n    if (!Build.isBrowser) return;\n\n    this.el.dispatchEvent(\n      new CustomEvent('nanoDidLoad', {\n        detail: this.el,\n      })\n    );\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('nanoDidUnload', {\n        detail: this.el,\n      })\n    );\n\n    if (!Build.isBrowser) return;\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.customValidate();\n    this.setDataListOpts();\n    raf(() => (this.onInit = false));\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const labelId = this.selectId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot\n        ? this.selectId + '-moreId'\n        : '';\n\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n    this.valueItems = [];\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      rtl,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      hasValue: !!this.value.length || !!this.inputSearchVal.length,\n      controlId: this.selectId,\n    };\n\n    const controlOptions = (({ readonly, disabled }) => ({\n      readonly,\n      disabled,\n      clearControl: this.clearSelect,\n    }))(this);\n\n    return (\n      <Host\n        type={this.multiple ? 'select-multiple' : 'select-one'}\n        aria-disabled={this.disabled ? 'true' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': !!this.value.length || !!this.inputSearchVal.length,\n          'has-focus': this.hasFocus,\n          'is-invalid': this.invalid,\n          'has-label': this.label !== null && !this.floatLabel,\n          'has-float-label': this.label !== null && this.floatLabel,\n          rtl: this.rtl,\n          'has-multiple': this.multiple,\n          'has-clr-btn': this.clearSelect,\n          masked: this.mask,\n          legacy: this.isLegacy,\n        }}\n      >\n        <FormControlWrap {...wrapOptions}>\n          <FormControl\n            {...controlOptions}\n            onClearText={this.clearSelectValue}\n            control={this.el}\n            ref={(el) => (this.selectWrap = el)}\n            endValueSlot={\n              <slot name=\"down-arrow\">\n                <nano-icon slot=\"value-end\" name=\"light/chevron-down\" />\n              </slot>\n            }\n          >\n            {this.multiple && (\n              <div class=\"multi-wrap\">\n                {this.multipleValues(labelId, moreId)}\n              </div>\n            )}\n            {!this.multiple && [\n              this.mask && (\n                <div class=\"select-mask\">\n                  {this.getLabel(this.value as string)}\n                </div>\n              ),\n              <input\n                id={this.selectId}\n                class=\"native-input\"\n                ref={(input) => (this.inputCtrl = input)}\n                aria-labelledby={labelId + ' ' + moreId}\n                disabled={this.disabled}\n                form={this.form}\n                placeholder={\n                  !this.floatLabel && this.placeholder ? this.placeholder : ''\n                }\n                readOnly={true}\n                required={this.required}\n                value={this.getLabel(this.value as string)}\n                onFocus={this.onFocus}\n              />,\n            ]}\n          </FormControl>\n        </FormControlWrap>\n        {!this.readonly && !this.disabled && (\n          <nano-datalist\n            onNanoOptionsUpdated={this.setOptions}\n            ref={(el) => (this.datalist = el)}\n            selected={this.valArray}\n            type={this.multiple ? 'selctMulti' : 'select'}\n            onNanoSelect={this.setValue}\n            onNanoDeselect={(e) => {\n              e.preventDefault();\n              this.removeValue(e.detail.value);\n            }}\n            options={this._options.length ? this._options : undefined}\n          >\n            {this.allowCustomValues && this.multiple && !!this.inputSearchVal && (\n              <nano-option\n                slot=\"list-top\"\n                value={this.inputSearchVal}\n                selected={false}\n                label={this.inputSearchVal}\n                onNanoSelect={() => this.inputCtrl.focus()}\n              >\n                <span slot=\"check-icon\"></span>\n                Add '{this.inputSearchVal}'\n              </nano-option>\n            )}\n            <slot />\n          </nano-datalist>\n        )}\n\n        <select\n          id={this.selectId + '-hidden'}\n          class=\"native-select\"\n          ref={(select) => (this.nativeSelect = select)}\n          aria-labelledby={labelId + ' ' + moreId}\n          disabled={this.disabled}\n          form={this.form}\n          multiple={this.multiple}\n          name={this.name}\n          required={this.required}\n          onInvalid={this.handleInvalid}\n        >\n          {this.allowCustomValues &&\n            this.valArray.map((val) => {\n              return (\n                <option value={val} selected={true}>\n                  {val}\n                </option>\n              );\n            })}\n          {!this.allowCustomValues &&\n            this.options.map((opt: OptionInterface) => {\n              return (\n                <option\n                  value={opt.value}\n                  selected={this.valArray.includes(opt.value)}\n                  disabled={opt.disabled}\n                  label={opt.label}\n                >\n                  {this.valArray.includes(opt.value)}\n                </option>\n              );\n            })}\n        </select>\n      </Host>\n    );\n  }\n\n  private multipleValues(\n    labelId: string,\n    moreId: string\n  ): VNode | (VNode | VNode[])[] {\n    let input: VNode = (\n      <input\n        class=\"multi-input\"\n        id={this.selectId}\n        ref={(input) => (this.inputCtrl = input)}\n        readOnly={this.readonly}\n        disabled={this.disabled}\n        autoFocus={this.autofocus}\n        autocomplete=\"off\"\n        onKeyDown={this.handleDocumentKeyDown}\n        onInput={this.onMultiInput}\n        value={this.inputSearchVal}\n        onTouchStart={this.onClick}\n        onMouseDown={this.onClick}\n        onFocus={this.onFocus}\n        placeholder={\n          this.placeholder && !this.floatLabel && !this.value.length\n            ? this.placeholder\n            : ''\n        }\n        aria-labelledby={labelId + ' ' + moreId}\n      />\n    );\n    if (!this.value.length) return input;\n\n    return (this.value as Array<string>).map((val, i) => {\n      let toReturn: VNode | VNode[] = (\n        <span\n          onDragStart={this.onDragStart}\n          onDragLeave={this.onDragLeave}\n          onDragEnd={this.onDragEnd}\n          onDragOver={(e) => e.preventDefault()}\n          draggable\n          data-value={val}\n          ref={(span) => this.valueItems.push(span)}\n          class=\"multi-value\"\n        >\n          <span>{this.getLabel(val)}</span>\n          <button\n            class=\"multi-value-remove\"\n            type=\"button\"\n            tabindex=\"-1\"\n            onTouchEnd={() => {\n              this.removeValue(val);\n            }}\n            onMouseUp={() => {\n              this.removeValue(val);\n            }}\n          >\n            <nano-icon name=\"light/times\"></nano-icon>\n          </button>\n        </span>\n      );\n      if (i === 0 && this.currInsertIndex < 0)\n        toReturn = [input, toReturn as VNode];\n      else if (i === this.currInsertIndex)\n        toReturn = [toReturn as VNode, input];\n      return toReturn;\n    });\n  }\n}\n"]}

package/dist/nano-components/p-d9f2dda5.entry.js.map

@@ -1 +0,0 @@
-{"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","vertical","disabled","snapThreshold","animationDuration","handleDrag","e","preventDefault","host","newPositionInPixels","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","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  height: 100%;\n  left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  width: 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  width: 100%;\n  top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  height: 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} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\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 as a percentage 0-100. Defaults to 50% of the\n   * 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  // 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      raf(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    raf(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      raf(() => (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      raf(() => (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      raf(() => (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    raf(() => {\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"]}

package/dist/nano-components/p-e11bd40d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","aria-controls","aria-expanded","display","transform","name","ref","div","tabindex","id"],"mappings":";;;qLAAA,MAAMA,EAAa,+wKCgCNC,EAAO,MALpBC,YAAAC,2FAQUC,KAAAC,QAAU,gBAAgBC,MAI1BF,KAAAG,cAAyB,MAExBH,KAAAI,UAAY,KAUbJ,KAAAK,MAAgB,GAKgBL,KAAAM,KAAgB,MAKhDN,KAAAO,SAAoB,MAKpBP,KAAAQ,aAAuB,GA0BvBR,KAAAS,UAAaC,IACnB,OAAQA,EAAGC,KACT,IAAK,QACL,IAAK,IACHX,KAAKM,MAAQN,KAAKM,KAClB,QAIEN,KAAAY,YAAc,KACpB,GAAIZ,KAAKG,cAAe,OACxBH,KAAKM,MAAQN,KAAKM,MAjBpBR,cACEE,KAAKG,cAAgB,KACrB,GAAIH,KAAKM,KAAMN,KAAKa,YACfb,KAAKc,OAiBJhB,OACNE,KAAKe,WAAWC,KAAKhB,KAAKM,MAC1BW,EAAkBjB,KAAKkB,UAAW,WAAY,OAAOC,MACnD,IAAOnB,KAAKG,cAAgB,QAE9BH,KAAKkB,UAAUE,MAAMC,OAAS,MAGxBvB,OACNE,KAAKsB,WAAWN,OAChBC,EAAkBjB,KAAKkB,UAAW,WAAY,MAAMC,MAAK,KACvDnB,KAAKG,cAAgB,SAEvBH,KAAKkB,UAAUE,MAAMC,OAASrB,KAAKuB,YAAYC,aAAe,KAGxD1B,SACN,IACGE,KAAKM,OACLN,KAAKuB,cACLvB,KAAKkB,WACNlB,KAAKG,cAEL,OACFsB,GAAS,KACP,GAAIzB,KAAKuB,YAAYC,aAAe,EAAG,CACrCE,GAAU,KACR1B,KAAKkB,UAAUE,MAAMC,OAASrB,KAAKuB,YAAYC,aAAe,YAM9D1B,WACN,GAAIE,KAAK2B,KAAO3B,KAAKuB,YAAa,OAElC,MAAMI,EAAM3B,KAAK2B,GAAK,IAAIC,GAAe,IAAM5B,KAAK6B,WACpDF,EAAGG,QAAQ9B,KAAKuB,aAGlBzB,oBACEE,KAAK+B,eAAiB/B,KAAKgC,GAAGC,cAAc,uBAC5CjC,KAAKkC,aAAelC,KAAKgC,GAAGC,cAAc,qBAC1CE,YAAW,KACTnC,KAAKI,UAAY,QAChB,KAGLN,mBACE,GAAIE,KAAKM,KAAM,CAEb6B,YAAW,KACTnC,KAAKa,SACJ,GAELb,KAAKoC,WAGPtC,oBACE,MAAMuC,EAAMrC,KAAKqC,GAAK,IAAIC,kBAAiB,IAAMtC,KAAK6B,WACtDQ,EAAGP,QAAQ9B,KAAKgC,GAAI,CAAEO,UAAW,KAAMC,QAAS,KAAMC,WAAY,QAClEzC,KAAKoC,WAGPtC,uBACE,GAAIE,KAAKqC,GAAIrC,KAAKqC,GAAGK,aACrB,GAAI1C,KAAK2B,GAAI3B,KAAK2B,GAAGe,aAGvB5C,SACE,OACE6C,EAACC,EAAI,CAACC,MAAKC,OAAAC,OAAA,GAAOC,EAAmBhD,KAAKiD,SACxCN,EAAA,MAAA,CACEE,MAAO,CACLvC,KAAMN,KAAKM,KACX4C,QAASlD,KAAKI,YAGhBuC,EAAA,SAAA,CACElC,UAAWT,KAAKS,UAChBG,YAAaZ,KAAKY,YAAWuC,gBACdnD,KAAKC,QAAOmD,gBACZpD,KAAKM,KAAO,OAAS,QACpCc,MAAO,CAAEiC,QAASrD,KAAKO,SAAW,OAAS,KAE1CP,KAAK+B,aACJY,EAAA,OAAA,CACEE,MAAM,mBACNzB,MAAO,CACLkC,UAAWtD,KAAKM,KAAO,UAAUN,KAAKQ,mBAAqB,KAG7DmC,EAAA,OAAA,CAAMY,KAAK,gBACN,GAITZ,EAAA,MAAA,CAAKE,MAAM,SACR7C,KAAKK,MAAQL,KAAKK,MAAQsC,EAAA,OAAA,CAAMY,KAAK,WAEvCvD,KAAKkC,WACJS,EAAA,OAAA,CACEE,MAAM,iBACNzB,MAAO,CACLkC,UAAWtD,KAAKM,KAAO,UAAUN,KAAKQ,mBAAqB,KAG7DmC,EAAA,OAAA,CAAMY,KAAK,cACN,IAKXZ,EAAA,MAAA,CACEE,MAAM,UACNW,IAAMC,GAASzD,KAAKkB,UAAYuC,EAChCC,SAAS,KACTC,GAAI3D,KAAKC,SAET0C,EAAA,MAAA,CAAKa,IAAMC,GAASzD,KAAKuB,YAAckC,EAAMZ,MAAM,iBACjDF,EAAA,OAAA,uFASd,IAAIzC,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-bottom-right-radius: 0;\n    border-bottom-left-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      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\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 ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\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 */\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            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n          >\n            {this.hasStartSlot ? (\n              <span\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\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\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          >\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"]}