@nanoporetech-digital/components 1.15.6 → 2.0.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/tabs/tab-group.scss?tag=nano-tab-group&encapsulation=shadow","src/components/tabs/tab-group.tsx"],"names":["tabGroupCss","TabGroup","exports","class_1","hostRef","_this","this","initialTouchX","initialTouchY","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_1","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","prototype","handleTabNameChange","activeTab","panel","find","handlePlacementChange","syncActiveTabIndicator","handleNoScrollControlsChange","hideRightBtn","rightBtn","displayTransition","hideLeftBtn","leftBtn","watchScrollControls","setTimeout","_","show","Object","defineProperty","getAllTabs","filter","disabled","getDirectChildren","host","emitEvents","previousTab","map","getAllPanels","name","removeAttribute","nanoTabHide","emit","nanoTabShow","setAriaLabels","panels","getAttribute","forEach","getActiveTab","width","_a","shadowRoot","querySelector","height","clientHeight","offset","getOffset","offsetTop","top","scrollTop","offsetLeft","activeTabIndicator","style","transform","computedStyle","getComputedStyle","parseFloat","paddingLeft","paddingRight","handleTabClose","ev","tabIndex","stopImmediatePropagation","closeEv","nanoTabWillClose","defaultPrevented","prevTab","remove","nanoTabClose","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","storeId","ComponentStore","init","unobserve","observe","focusVisible","tabGroup","resizeObserver","ResizeObserver","mutationObserver","MutationObserver","mutations","some","mutation","attributeName","attributes","childList","subtree","requestAnimationFrame","connectedCallback","dir","ownerDocument","disconnectedCallback","disconnect","render","h","Host","class","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","nano-tab-group__scroll-button--right","onTouchStart","onTouchEnd"],"mappings":"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","sourcesContent":["@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 #{$color-lightblue} on placement 'top' and #{$color-blue} on placement 'start';\n  * @prop --indicator-track-color: Only relevant to placement 'start'. defaults to #{$color-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 #{$color-blue} on placement 'top' and #{$color-darkgrey} on placement 'start';\n  */\n\n:host {\n  --indicator-transition: #{$transition-fast};\n  --indicator-color: #{$color-lightblue};\n  --indicator-track-color: #{$color-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: #{$color-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: #{$color-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: #{$color-darkgrey};\n  --indicator-color: #{$color-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;\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} 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\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 mutationObserver: MutationObserver;\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  // 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(() => this.updateScrollControls());\n    this.resizeObserver.observe(this.nav);\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      if (\n        mutations.some((mutation) => {\n          return !['aria-labelledby', 'aria-controls'].includes(\n            mutation.attributeName\n          );\n        })\n      ) {\n        setTimeout(() => this.setAriaLabels());\n      }\n      setTimeout(() => this.handleTabScroll(), 500);\n\n      this.setActiveTab(this.getActiveTab || this.getAllActiveTabs[0], false);\n      if (this.activeTab)\n        scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n    });\n    this.mutationObserver.observe(this.host, {\n      attributes: true,\n      childList: true,\n      subtree: true,\n    });\n\n    requestAnimationFrame(() => this.updateScrollControls());\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) this.mutationObserver.disconnect();\n\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\">\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              key=\"nav\"\n              part=\"nav\"\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\" />\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 />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-731935b1.js → p-1805d59a.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{a as t}from"./p-9bd73d1d.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(c){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(c){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const r=i.top+n.scrollTop;const a=i.left+n.scrollLeft;const f=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(a<f)s(n,a);else if(a+o.clientWidth>l)s(n,a-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(r<u)s(n,r,true);else if(r+o.clientHeight>h){s(n,r-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
-//# sourceMappingURL=p-731935b1.js.map
+import{a as t}from"./p-b619500f.js";const o=new Set;function n(t){o.add(t);document.body.classList.add("nano-scroll-lock")}function c(t){o.delete(t);if(o.size===0){document.body.classList.remove("nano-scroll-lock")}}function s(t,o,n=false){if(!n){try{t.scrollTo({left:o,behavior:"smooth"})}catch(c){t.scrollLeft=o}return}try{t.scrollTo({top:o,behavior:"smooth"})}catch(c){t.scrollTop=o}}function e(o,n,c="vertical",e="start"){const i=t(o,n);const r=i.top+n.scrollTop;const a=i.left+n.scrollLeft;const f=n.scrollLeft;const l=n.scrollLeft+n.offsetWidth;const u=n.scrollTop;const h=n.scrollTop+n.offsetHeight;if(c==="horizontal"||c==="both"){if(e==="start"){if(a<f)s(n,a);else if(a+o.clientWidth>l)s(n,a-n.offsetWidth+o.clientWidth)}else s(n,n.scrollLeft+i.left-n.offsetWidth/2+o.offsetWidth/2)}if(c==="vertical"||c==="both"){if(r<u)s(n,r,true);else if(r+o.clientHeight>h){s(n,r-n.offsetHeight+o.clientHeight,true)}}}export{n as l,e as s,c as u};
+//# sourceMappingURL=p-1805d59a.js.map

package/dist/nano-components/p-1a293bd0.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as o,h as i,e as r,g as s}from"./p-ab5813a7.js";import{P as e}from"./p-d9c7909e.js";const n=':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{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip{max-width:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:black;font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:white;opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));-webkit-transform:translateY(10px) translateZ(0);transform:translateY(10px) translateZ(0);-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:opacity, transform;transition-property:opacity, transform, -webkit-transform;-webkit-transition-delay:var(--hide-delay);transition-delay:var(--hide-delay);-webkit-transition-duration:var(--hide-duration);transition-duration:var(--hide-duration);-webkit-transition-timing-function:var(--hide-timing-function);transition-timing-function:var(--hide-timing-function);white-space:normal}.tooltip-arrow{content:"";position:absolute;width:0;height:0;color:black;-webkit-transition:0.2s ease transform;transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);pointer-events:none}.tooltip-positioner[data-popper-placement^=top] .tooltip{-webkit-transform-origin:bottom;transform-origin:bottom;-webkit-transform:translateY(-10px) translateZ(0);transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{-webkit-transform-origin:top;transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{-webkit-transform-origin:right;transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{-webkit-transform-origin:left;transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;-webkit-transform:none;transform:none;-webkit-transition-delay:var(--show-delay);transition-delay:var(--show-delay);-webkit-transition-duration:var(--show-duration);transition-duration:var(--show-duration);-webkit-transition-timing-function:var(--show-timing-function);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{bottom:100%;left:calc(50% - 5px);border-bottom:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{top:100%;left:calc(50% - 5px);border-top:5px solid;border-left:5px solid transparent;border-right:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{left:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{right:5px;left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{top:calc(50% - 5px);left:100%;border-left:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{top:auto;bottom:5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{top:calc(50% - 5px);right:100%;border-right:5px solid;border-top:5px solid transparent;border-bottom:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{top:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{top:auto;bottom:5px}';let a=0;let p=class{constructor(i){t(this,i);this.nanoShow=o(this,"nanoShow",7);this.nanoAfterShow=o(this,"nanoAfterShow",7);this.nanoHide=o(this,"nanoHide",7);this.nanoAfterHide=o(this,"nanoAfterHide",7);this.componentId=`tooltip-${++a}`;this.isVisible=false;this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus";this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{this.target=this.getTarget()};this.handleTTSlotChange=()=>{const t=this.host.querySelector(`[id="${this.componentId}"]`)||this.host.shadowRoot.getElementById(this.componentId);Array.from(this.host.querySelectorAll('[slot="content"]')).filter((o=>o!==t)).forEach((o=>{t.appendChild(o)}))}}get target(){return this._target}set target(t){if(t!==this._target&&this._target){this._target.removeAttribute("aria-describedby")}t.setAttribute("aria-describedby",this.componentId);this._target=t}handleOpenChange(){this.open?this.show():this.hide()}async show(){if(this.isVisible){return}const t=this.nanoShow.emit();if(t.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;this.popover.show()}async hide(){if(!this.isVisible){return}const t=this.nanoHide.emit();if(t.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;this.popover.hide()}getTarget(){const t=[...Array.from(this.host.children)].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(!t){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.nanoAfterHide.emit(),onAfterShow:()=>this.nanoAfterShow.emit()})}componentDidLoad(){this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner);this.syncOptions();const t=this.host.shadowRoot.getElementById(this.componentId);t.slot="content";this.host.appendChild(t);this.handleTTSlotChange();this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){this.popover.destroy()}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut,onBlur:this.handleBlur,onFocus:this.handleFocus,onClick:this.handleClick},i("slot",{onSlotchange:this.handleSlotChange}),!this.disabled&&i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content",onSlotchange:this.handleTTSlotChange},i("div",{id:this.componentId},this.content)),i("div",{class:"tooltip-arrow","data-popper-arrow":true}))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=n;export{p as nano_tooltip};
+//# sourceMappingURL=p-1a293bd0.entry.js.map

package/dist/nano-components/{p-8b7f8ef4.entry.js.map → p-1a293bd0.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","_target","newTarget","removeAttribute","setAttribute","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","syncOptions","ele","slot","hidden","destroy","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":";;;oGAAA,MAAMA,EAAa,2xHCanB,IAAIC,EAAK,MAYIC,EAAO,MALpBC,YAAAC,6KAMUC,KAAAC,YAAc,aAAaL,IAC3BI,KAAAE,UAAY,MAoBZF,KAAAG,QAAU,GAMVH,KAAAI,UAYS,MAGTJ,KAAAK,SAAW,MAGXL,KAAAM,SAAW,GAGqBN,KAAAO,KAAO,MAGvCP,KAAAQ,SAAW,EAOXR,KAAAS,QAAkB,cAgGlBT,KAAAU,WAAa,KACnB,GAAIV,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAa,YAAc,KACpB,GAAIb,KAAKW,WAAW,SAAU,CAC5BX,KAAKO,KAAOP,KAAKY,OAASZ,KAAKc,SAI3Bd,KAAAe,YAAc,KACpB,GAAIf,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAgB,cAAiBC,IAEvB,GAAIjB,KAAKO,MAAQU,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNnB,KAAKY,SAIDZ,KAAAoB,gBAAkB,KACxB,GAAIpB,KAAKW,WAAW,SAAU,CAC5BX,KAAKc,SAIDd,KAAAqB,eAAiB,KACvB,GAAIrB,KAAKW,WAAW,SAAU,CAC5BX,KAAKY,SAIDZ,KAAAsB,iBAAmB,KACzBtB,KAAKuB,OAASvB,KAAKwB,aAGbxB,KAAAyB,mBAAqB,KAC3B,MAAMC,EACJ1B,KAAK2B,KAAKC,cAAc,QAAQ5B,KAAKC,kBACrCD,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aAC3C8B,MAAMC,KAAKhC,KAAK2B,KAAKM,iBAAiB,qBACnCC,QAAQC,GAAQA,IAAQT,IACxBU,SAASD,IACRT,EAAWW,YAAYF,OApM7BZ,aACE,OAAOvB,KAAKsC,QAEdf,WAAmBgB,GACjB,GAAIA,IAAcvC,KAAKsC,SAAWtC,KAAKsC,QAAS,CAC9CtC,KAAKsC,QAAQE,gBAAgB,oBAE/BD,EAAUE,aAAa,mBAAoBzC,KAAKC,aAChDD,KAAKsC,QAAUC,EA8CjBzC,mBACEE,KAAKO,KAAOP,KAAKc,OAASd,KAAKY,OAqBjCd,aAEE,GAAIE,KAAKE,UAAW,CAClB,OAGF,MAAMwC,EAAS1C,KAAK2C,SAASC,OAC7B,GAAIF,EAAOG,iBAAkB,CAC3B7C,KAAKO,KAAO,MACZ,OAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,KACZP,KAAK8C,QAAQhC,OAKfhB,aAEE,IAAKE,KAAKE,UAAW,CACnB,OAGF,MAAM6C,EAAS/C,KAAKgD,SAASJ,OAC7B,GAAIG,EAAOF,iBAAkB,CAC3B7C,KAAKO,KAAO,KACZ,OAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,MACZP,KAAK8C,QAAQlC,OAKPd,YAEN,MAAMyB,EAAS,IAAIQ,MAAMC,KAAKhC,KAAK2B,KAAKsB,WAAWC,MAChDC,GACCA,EAAGC,QAAQC,gBAAkB,SAC7BF,EAAGG,aAAa,UAAY,YAGhC,IAAK/B,EAAQ,CACX,MAAM,IAAIgC,MAAM,uDAGlB,OAAOhC,EAGDzB,WAAW0D,GACjB,MAAMC,EAAWzD,KAAKS,QAAQiD,MAAM,KACpC,OAAOD,EAASE,SAASH,GAGnB1D,cACNE,KAAK8C,QAAQc,WAAW,CACtBxD,UAAWJ,KAAKI,UAChBE,SAAUN,KAAKM,SACfE,SAAUR,KAAKQ,SACfqD,kBAAmB7D,KAAK8D,QACxBC,YAAa,IAAM/D,KAAKgE,cAAcpB,OACtCqB,YAAa,IAAMjE,KAAKkE,cAActB,SA6D1C9C,mBACEE,KAAKuB,OAASvB,KAAKwB,YACnBxB,KAAK8C,QAAU,IAAIqB,EAAQnE,KAAKuB,OAAQvB,KAAKoE,mBAC7CpE,KAAKqE,cAEL,MAAMC,EAAMtE,KAAK2B,KAAKE,WAAWC,eAAe9B,KAAKC,aACrDqE,EAAIC,KAAO,UACXvE,KAAK2B,KAAKU,YAAYiC,GACtBtE,KAAKyB,qBAGLzB,KAAKoE,kBAAkBI,QAAUxE,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKc,QAIThB,qBACEE,KAAKqE,cAGPvE,uBACEE,KAAK8C,QAAQ2B,UAGf3E,SACE,OACE4E,EAACC,EAAI,CACHC,UAAW5E,KAAKgB,cAChB6D,YAAa7E,KAAKoB,gBAClB0D,WAAY9E,KAAKqB,eACjB0D,OAAQ/E,KAAKU,WACbsE,QAAShF,KAAKe,YACdkE,QAASjF,KAAKa,aAEd6D,EAAA,OAAA,CAAMQ,aAAclF,KAAKsB,oBAEvBtB,KAAKK,UACLqE,EAAA,MAAA,CACES,IAAMhC,GAAQnD,KAAKoE,kBAAoBjB,EACvCiC,MAAM,sBAENV,EAAA,MAAA,CACEW,KAAK,OACLF,IAAMhC,GAAQnD,KAAK8D,QAAUX,EAC7BiC,MAAO,CACLtB,QAAS,KACTwB,gBAAiBtF,KAAKO,MAExBgF,KAAK,UAASC,cACDxF,KAAKO,KAAO,QAAU,QAEnCmE,EAAA,OAAA,CAAMe,KAAK,UAAUP,aAAclF,KAAKyB,oBACtCiD,EAAA,MAAA,CAAK9E,GAAII,KAAKC,aAAcD,KAAKG,UAEnCuE,EAAA,MAAA,CAAKU,MAAM,gBAAeM,oBAAA","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"names":["tooltipCss","id","Tooltip","[object Object]","hostRef","this","componentId","isVisible","content","placement","disabled","distance","open","skidding","trigger","handleBlur","hasTrigger","hide","handleClick","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","target","getTarget","handleTTSlotChange","contentDiv","host","querySelector","shadowRoot","getElementById","Array","from","querySelectorAll","filter","elm","forEach","appendChild","_target","newTarget","removeAttribute","setAttribute","slShow","nanoShow","emit","defaultPrevented","popover","slHide","nanoHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","split","includes","setOptions","transitionElement","tooltip","onAfterHide","nanoAfterHide","onAfterShow","nanoAfterShow","Popover","tooltipPositioner","syncOptions","ele","slot","hidden","destroy","h","Host","onKeyDown","onMouseOver","onMouseOut","onBlur","onFocus","onClick","onSlotchange","ref","class","part","tooltip--open","role","aria-hidden","name","data-popper-arrow"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-width: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n    pointer-events: none;\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      bottom: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-bottom: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      top: 100%;\n      left: calc(50% - #{$tooltip-arrow-size});\n      border-top: #{$tooltip-arrow-size} solid;\n      border-left: #{$tooltip-arrow-size} solid transparent;\n      border-right: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      left: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      right: #{$tooltip-arrow-offset};\n      left: auto;\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      left: 100%;\n      border-left: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      top: calc(50% - #{$tooltip-arrow-size});\n      right: 100%;\n      border-right: #{$tooltip-arrow-size} solid;\n      border-top: #{$tooltip-arrow-size} solid transparent;\n      border-bottom: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      top: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      top: auto;\n      bottom: #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible) {\n      return;\n    }\n\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n\n        {!this.disabled && (\n          <div\n            ref={(el) => (this.tooltipPositioner = el)}\n            class=\"tooltip-positioner\"\n          >\n            <div\n              part=\"base\"\n              ref={(el) => (this.tooltip = el)}\n              class={{\n                tooltip: true,\n                'tooltip--open': this.open,\n              }}\n              role=\"tooltip\"\n              aria-hidden={this.open ? 'false' : 'true'}\n            >\n              <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n                <div id={this.componentId}>{this.content}</div>\n              </slot>\n              <div class=\"tooltip-arrow\" data-popper-arrow></div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-1c216ca4.system.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register([],(function(t){"use strict";return{execute:function(){var e=t("r",(function(t){if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)}));var n=t("h",(function(t){return!!t.shadowRoot&&!!t.attachShadow}));var r=t("b",(function(){return window.CSS&&CSS.supports("color","var(--fake-var)")}));var i=t("a",(function(t,e,r,i,a){if(t||n(e)){var o=e.querySelector("input.aux-input");if(!o){o=e.ownerDocument.createElement("input");o.type="hidden";o.classList.add("aux-input");e.appendChild(o)}o.disabled=a;o.name=r;o.value=i||""}}));var a=t("c",(function(t,e,n){return Math.max(t,Math.min(e,n))}));var o=t("d",(function(t,e,n){if(n===void 0){n=true}return new Promise((function(r){if(n){t.addEventListener("transitionend",(function(e){if(e.target!==t)return;r("shown")}),{once:true});t.style.display="block";t.dataset.displayTransition="true";setTimeout((function(){return t.classList.add(e)}),20)}else{t.addEventListener("transitionend",(function(e){if(e.target!==t)return;t.style.display="none";r("hidden")}),{once:true});t.classList.remove(e)}}))}))}}}));
+//# sourceMappingURL=p-1c216ca4.system.js.map

package/dist/{esm-es5/index-f41ae118.js.map → nano-components/p-1c216ca4.system.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/utils/index.ts"],"names":["raf","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","hasShadowDom","el","shadowRoot","attachShadow","browserCanUseCssVariables","window","CSS","supports","renderHiddenInput","always","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","clamp","min","n","max","Math","transitionDone","Promise","resolve","removeEventListener","addEventListener","displayTransition","className","show","callbackOpen","callbackClosed","style","display","dataset","remove"],"mappings":";;;IAkBaA,IAAM,SAACC,GAClB,UAAWC,uCAAyC,WAAY,CAC9D,OAAOA,qCAAqCD,GAE9C,UAAWE,wBAA0B,WAAY,CAC/C,OAAOA,sBAAsBF,GAE/B,OAAOG,WAAWH,QAGPI,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,kBAG7BC,0BAA4B,WACvC,OAAOC,OAAOC,KAAOA,IAAIC,SAAS,QAAS,wBAGhCC,kBAAoB,SAC/BC,EACAC,EACAC,EACAC,EACAC,GAEA,GAAIJ,GAAUT,aAAaU,GAAY,CACrC,IAAII,EAAQJ,EAAUK,cACpB,mBAEF,IAAKD,EAAO,CACVA,EAAQJ,EAAUM,cAAeC,cAAc,SAC/CH,EAAMI,KAAO,SACbJ,EAAMK,UAAUC,IAAI,aACpBV,EAAUW,YAAYP,GAExBA,EAAMD,SAAWA,EACjBC,EAAMH,KAAOA,EACbG,EAAMF,MAAQA,GAAS,SAIdU,MAAQ,SAACC,EAAaC,EAAWC,GAC5C,OAAOC,KAAKD,IAAIF,EAAKG,KAAKH,IAAIC,EAAGC,SAyDtBE,eAAiB,SAC5B1B,GAEA,OAAO,IAAI2B,SAAQ,SAACC,GAClB,IAAMjC,EAAW,WACfK,EAAG6B,oBAAoB,gBAAiBlC,IAG1CK,EAAG8B,iBAAiB,gBAAiBnC,WAW5BoC,kBAAoB,SAC/B/B,EACAgC,EACAC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,KAEA,OAAO,IAAIN,SAAQ,SAACC,GAClB,IAAMM,EAAe,WACnBlC,EAAG6B,oBAAoB,gBAAiBK,GACxCN,EAAQ,UAGV,IAAMO,EAAiB,WACrBnC,EAAG6B,oBAAoB,gBAAiBM,GACxCnC,EAAGoC,MAAMC,QAAU,OACnBT,EAAQ,WAGV,GAAIK,EAAM,CACRjC,EAAG8B,iBAAiB,gBAAiBI,GACrClC,EAAGoC,MAAMC,QAAU,QACnBrC,EAAGsC,QAAQP,kBAAoB,OAC/BjC,YAAW,WAAM,OAAAE,EAAGkB,UAAUC,IAAIa,KAAY,QAEzC,CACLhC,EAAG8B,iBAAiB,gBAAiBK,GACrCnC,EAAGkB,UAAUqB,OAAOP","sourcesContent":["import { Side } from '../interface';\n\nexport * from './dom';\nexport * from './throttle';\nexport * from './legacy';\nexport * from './scroll';\nexport * from './slot';\nexport * from './theme';\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\ndeclare const requestAnimationFrame: any;\n\n/**\n * Patched Request Animation Frame method.\n * Perform a function between browser paints for less page jank\n * @param callback\n * @returns wrapped function\n */\nexport const raf = (callback: any) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow;\n};\n\nexport const browserCanUseCssVariables = () => {\n  return window.CSS && CSS.supports('color', 'var(--fake-var)');\n};\n\nexport const renderHiddenInput = (\n  always: boolean,\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  if (always || hasShadowDom(container)) {\n    let input = container.querySelector(\n      'input.aux-input'\n    ) as HTMLInputElement | null;\n    if (!input) {\n      input = container.ownerDocument!.createElement('input');\n      input.type = 'hidden';\n      input.classList.add('aux-input');\n      container.appendChild(input);\n    }\n    input.disabled = disabled;\n    input.name = name;\n    input.value = value || '';\n  }\n};\n\nexport const clamp = (min: number, n: number, max: number) => {\n  return Math.max(min, Math.min(n, max));\n};\n\nexport const assert = (actual: any, reason: string) => {\n  if (!actual) {\n    const message = 'ASSERT: ' + reason;\n    console.error(message);\n    debugger; // tslint:disable-line\n    throw new Error(message);\n  }\n};\n\nexport const now = (ev: UIEvent) => {\n  return ev.timeStamp || Date.now();\n};\n\nexport const pointerCoord = (ev: any): { x: number; y: number } => {\n  // get X coordinates for either a mouse click\n  // or a touch depending on the given event\n  if (ev) {\n    const changedTouches = ev.changedTouches;\n    if (changedTouches && changedTouches.length > 0) {\n      const touch = changedTouches[0];\n      return { x: touch.clientX, y: touch.clientY };\n    }\n    if (ev.pageX !== undefined) {\n      return { x: ev.pageX, y: ev.pageY };\n    }\n  }\n  return { x: 0, y: 0 };\n};\n\n/**\n * @hidden\n * Given a side, return if it should be on the end\n * based on the value of dir\n * @param side the side\n * @param isRTL whether the application dir is rtl\n */\nexport const isEndSide = (side: Side): boolean => {\n  const isRTL = document.dir === 'rtl';\n  switch (side) {\n    case 'start':\n      return isRTL;\n    case 'end':\n      return !isRTL;\n    default:\n      throw new Error(\n        `\"${side}\" is not a valid value for [side]. Use \"start\" or \"end\" instead.`\n      );\n  }\n};\n\n/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callbackOpen = () => {\n      el.removeEventListener('transitionend', callbackOpen);\n      resolve('shown');\n    };\n\n    const callbackClosed = () => {\n      el.removeEventListener('transitionend', callbackClosed);\n      el.style.display = 'none';\n      resolve('hidden');\n    };\n\n    if (show) {\n      el.addEventListener('transitionend', callbackOpen);\n      el.style.display = 'block';\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n      // el.classList.add(className)\n    } else {\n      el.addEventListener('transitionend', callbackClosed);\n      el.classList.remove(className);\n    }\n  });\n};\n"]}
+{"version":3,"sources":["src/utils/index.ts"],"names":["raf","exports","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","hasShadowDom","el","shadowRoot","attachShadow","browserCanUseCssVariables","window","CSS","supports","renderHiddenInput","always","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","clamp","min","n","max","Math","displayTransition","className","show","Promise","resolve","addEventListener","e","target","once","style","display","dataset","remove"],"mappings":";;;2EAmBaA,EAAGC,EAAA,KAAG,SAACC,GAClB,UAAWC,uCAAyC,WAAY,CAC9D,OAAOA,qCAAqCD,GAE9C,UAAWE,wBAA0B,WAAY,CAC/C,OAAOA,sBAAsBF,GAE/B,OAAOG,WAAWH,UAGPI,EAAYL,EAAA,KAAG,SAACM,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,oBAG7BC,EAAyBT,EAAA,KAAG,WACvC,OAAOU,OAAOC,KAAOA,IAAIC,SAAS,QAAS,0BAGhCC,EAAiBb,EAAA,KAAG,SAC/Bc,EACAC,EACAC,EACAC,EACAC,GAEA,GAAIJ,GAAUT,EAAaU,GAAY,CACrC,IAAII,EAAQJ,EAAUK,cACpB,mBAEF,IAAKD,EAAO,CACVA,EAAQJ,EAAUM,cAAeC,cAAc,SAC/CH,EAAMI,KAAO,SACbJ,EAAMK,UAAUC,IAAI,aACpBV,EAAUW,YAAYP,GAExBA,EAAMD,SAAWA,EACjBC,EAAMH,KAAOA,EACbG,EAAMF,MAAQA,GAAS,WAIdU,EAAK3B,EAAA,KAAG,SAAC4B,EAAaC,EAAWC,GAC5C,OAAOC,KAAKD,IAAIF,EAAKG,KAAKH,IAAIC,EAAGC,WA4EtBE,EAAiBhC,EAAA,KAAG,SAC/BM,EACA2B,EACAC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,KAEA,OAAO,IAAIC,SAAQ,SAACC,GAClB,GAAIF,EAAM,CACR5B,EAAG+B,iBACD,iBACA,SAACC,GACC,GAAIA,EAAEC,SAAWjC,EAAI,OACrB8B,EAAQ,WAEV,CAAEI,KAAM,OAEVlC,EAAGmC,MAAMC,QAAU,QACnBpC,EAAGqC,QAAQX,kBAAoB,OAC/B5B,YAAW,WAAM,OAAAE,EAAGkB,UAAUC,IAAIQ,KAAY,QACzC,CACL3B,EAAG+B,iBACD,iBACA,SAACC,GACC,GAAIA,EAAEC,SAAWjC,EAAI,OACrBA,EAAGmC,MAAMC,QAAU,OACnBN,EAAQ,YAEV,CAAEI,KAAM,OAEVlC,EAAGkB,UAAUoB,OAAOX","sourcesContent":["import { Side } from '../interface';\n\nexport * from './dom';\nexport * from './throttle';\nexport * from './scroll';\nexport * from './slot';\nexport * from './theme';\nexport * from './active-element';\nexport * from './tabbable';\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\ndeclare const requestAnimationFrame: any;\n\n/**\n * Patched Request Animation Frame method.\n * Perform a function between browser paints for less page jank\n * @param callback\n * @returns wrapped function\n */\nexport const raf = (callback: any) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow;\n};\n\nexport const browserCanUseCssVariables = () => {\n  return window.CSS && CSS.supports('color', 'var(--fake-var)');\n};\n\nexport const renderHiddenInput = (\n  always: boolean,\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  if (always || hasShadowDom(container)) {\n    let input = container.querySelector(\n      'input.aux-input'\n    ) as HTMLInputElement | null;\n    if (!input) {\n      input = container.ownerDocument!.createElement('input');\n      input.type = 'hidden';\n      input.classList.add('aux-input');\n      container.appendChild(input);\n    }\n    input.disabled = disabled;\n    input.name = name;\n    input.value = value || '';\n  }\n};\n\nexport const clamp = (min: number, n: number, max: number) => {\n  return Math.max(min, Math.min(n, max));\n};\n\nexport const assert = (actual: any, reason: string) => {\n  if (!actual) {\n    const message = 'ASSERT: ' + reason;\n    console.error(message);\n    debugger; // tslint:disable-line\n    throw new Error(message);\n  }\n};\n\nexport const now = (ev: UIEvent) => {\n  return ev.timeStamp || Date.now();\n};\n\nexport const pointerCoord = (ev: any): { x: number; y: number } => {\n  // get X coordinates for either a mouse click\n  // or a touch depending on the given event\n  if (ev) {\n    const changedTouches = ev.changedTouches;\n    if (changedTouches && changedTouches.length > 0) {\n      const touch = changedTouches[0];\n      return { x: touch.clientX, y: touch.clientY };\n    }\n    if (ev.pageX !== undefined) {\n      return { x: ev.pageX, y: ev.pageY };\n    }\n  }\n  return { x: 0, y: 0 };\n};\n\n/**\n * @hidden\n * Given a side, return if it should be on the end\n * based on the value of dir\n * @param side the side\n * @param isRTL whether the application dir is rtl\n */\nexport const isEndSide = (side: Side): boolean => {\n  const isRTL = document.dir === 'rtl';\n  switch (side) {\n    case 'start':\n      return isRTL;\n    case 'end':\n      return !isRTL;\n    default:\n      throw new Error(\n        `\"${side}\" is not a valid value for [side]. Use \"start\" or \"end\" instead.`\n      );\n  }\n};\n\n/**\n * Quality of life for transition handling.\n * Adds / removes transitionend events. Resolves on complete\n */\nexport const transitionDone = (\n  el: HTMLElement\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    const callback = () => {\n      el.removeEventListener('transitionend', callback);\n      resolve;\n    };\n    el.addEventListener('transitionend', callback);\n    // ??\n  });\n};\n\n/**\n * handles hiding and showing elements properly (with display),\n * along with transitions, so they are no longer viewable in the dom.\n * - OnHide remove show class, listen for transition end, then display: none on finish\n * - OnShow, display block on start then add a show class\n */\nexport const displayTransition = (\n  el: HTMLElement,\n  className: string,\n  show: boolean = true\n): Promise<'shown' | 'hidden'> => {\n  return new Promise((resolve) => {\n    if (show) {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (e.target !== el) return;\n          resolve('shown');\n        },\n        { once: true }\n      );\n      el.style.display = 'block';\n      el.dataset.displayTransition = 'true';\n      setTimeout(() => el.classList.add(className), 20);\n    } else {\n      el.addEventListener(\n        'transitionend',\n        (e: Event) => {\n          if (e.target !== el) return;\n          el.style.display = 'none';\n          resolve('hidden');\n        },\n        { once: true }\n      );\n      el.classList.remove(className);\n    }\n  });\n};\n"]}

package/dist/nano-components/p-1d13dbdf.system.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register([],(function(e){"use strict";return{execute:function(){e({a:r,c:t,g:o});function t(e,t){if(t===void 0){t=this}function o(t){if(!t||t===document||t===window)return null;if(t.assignedSlot)t=t.assignedSlot;var n=t.closest(e);return n?n:o(t.getRootNode().host)}return o(t)}function o(e,t,o){if(o===void 0){o=true}if(o===true){try{t=":scope > "+t.split(",").join(", :scope >");return Array.from(e.querySelectorAll(t))}catch(r){console.log("an error sad")}}if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector}var n=[];Array.from(e.childNodes).forEach((function(e){if(!!e.matches&&e.matches(t))n.push(e);else if(e.nodeName.toLowerCase()==="slot"){Array.from(e.assignedNodes()).forEach((function(e){if(e instanceof Element&&e.matches(t))n.push(e);else if(e instanceof Node&&!o)n.push(e)}))}else if(!o)n.push(e)}));return n}var n=e("b",(function(e,t){if(!Element.prototype.matches){Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector}var o=[];var n=e.parentNode.firstElementChild;do{if(!t||n!==e&&n.matches(t))o.push(n)}while(n=n.nextElementSibling);return o}));function r(e,t){if(!t||!e)return;return{top:e.getBoundingClientRect().top-t.getBoundingClientRect().top,left:e.getBoundingClientRect().left-t.getBoundingClientRect().left}}}}}));
+//# sourceMappingURL=p-1d13dbdf.system.js.map

package/dist/nano-components/p-1d13dbdf.system.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/dom.ts"],"names":["closestElement","selector","base","this","__closestFrom","el","document","window","assignedSlot","found","closest","getRootNode","host","getDirectChildren","sel","elesOnly","split","join","Array","from","querySelectorAll","e","console","log","Element","prototype","matches","msMatchesSelector","webkitMatchesSelector","ret","childNodes","forEach","push","nodeName","toLowerCase","assignedNodes","slotEl","Node","getSiblings","exports","siblings","firstChild","parentNode","firstElementChild","nextElementSibling","getOffset","element","parent","top","getBoundingClientRect","left"],"mappings":";;;iGAAgBA,EAAeC,EAAkBC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAAC,KAC/C,SAASC,EAAcC,GACrB,IAAKA,GAAMA,IAAOC,UAAYD,IAAOE,OAAQ,OAAO,KACpD,GAAKF,EAAuBG,aAC1BH,EAAMA,EAAuBG,aAC/B,IAAIC,EAASJ,EAAeK,QAAQT,GACpC,OAAOQ,EACHA,EACAL,EAAgBC,EAAeM,cAA6BC,MAElE,OAAOR,EAAcF,YAwBPW,EACdR,EACAS,EACAC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,KAEA,GAAIA,IAAa,KAAM,CACrB,IACED,EAAM,YAAcA,EAAIE,MAAM,KAAKC,KAAK,cACxC,OAAOC,MAAMC,KAAKd,EAAGe,iBAAiBN,IACtC,MAAOO,GACPC,QAAQC,IAAI,iBAGhB,IAAKC,QAAQC,UAAUC,QAAS,CAC9BF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,sBAGtB,IAAIC,EAAuB,GAC3BX,MAAMC,KAAKd,EAAGyB,YAAYC,SAAQ,SAACV,GACjC,KAAOA,EAAcK,SAAYL,EAAcK,QAAQZ,GAAMe,EAAIG,KAAKX,QACjE,GAAIA,EAAEY,SAASC,gBAAkB,OAAQ,CAC5ChB,MAAMC,KAAME,EAAsBc,iBAAiBJ,SAAQ,SAACK,GAC1D,GAAIA,aAAkBZ,SAAWY,EAAOV,QAAQZ,GAAMe,EAAIG,KAAKI,QAC1D,GAAIA,aAAkBC,OAAStB,EAAUc,EAAIG,KAAKI,WAEpD,IAAKrB,EAAUc,EAAIG,KAAKX,MAEjC,OAAOQ,MAGIS,EAAWC,EAAA,KAAG,SAAClC,EAAaS,GACvC,IAAKU,QAAQC,UAAUC,QAAS,CAC9BF,QAAQC,UAAUC,QAChBF,QAAQC,UAAUE,mBAClBH,QAAQC,UAAUG,sBAEtB,IAAIY,EAAW,GACf,IAAIC,EAAapC,EAAGqC,WAAWC,kBAC/B,EAAG,CACD,IAAK7B,GAAQ2B,IAAepC,GAAMoC,EAAWf,QAAQZ,GACnD0B,EAASR,KAAKS,SACRA,EAAaA,EAAWG,oBAClC,OAAOJ,cAGOK,EAAUC,EAAsBC,GAC9C,IAAKA,IAAWD,EAAS,OACzB,MAAO,CACLE,IACEF,EAAQG,wBAAwBD,IAAMD,EAAOE,wBAAwBD,IACvEE,KACEJ,EAAQG,wBAAwBC,KAChCH,EAAOE,wBAAwBC","sourcesContent":["export function closestElement(selector: string, base: Element = this) {\n  function __closestFrom(el: Element | Window | Document): Element {\n    if (!el || el === document || el === window) return null;\n    if ((el as HTMLSlotElement).assignedSlot)\n      el = (el as HTMLSlotElement).assignedSlot;\n    let found = (el as Element).closest(selector);\n    return found\n      ? found\n      : __closestFrom(((el as Element).getRootNode() as ShadowRoot).host);\n  }\n  return __closestFrom(base);\n}\n\n/**\n * Get direct child elements / nodes from from any element (for when querySelectorAll(':scope > .selector') fails)\n * @param el - a root element to query from\n * @param sel - a query selector string\n * @param elesOnly - return only Elements (no Nodes)\n */\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: true\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: 'slot'\n): Array<T>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly?: false\n): Array<T | Node>;\nexport function getDirectChildren<T = HTMLElement>(\n  el: Element,\n  sel: string,\n  elesOnly: boolean | 'slot' = true\n) {\n  if (elesOnly === true) {\n    try {\n      sel = ':scope > ' + sel.split(',').join(', :scope >');\n      return Array.from(el.querySelectorAll(sel)) as unknown as Array<T>;\n    } catch (e) {\n      console.log('an error sad');\n    }\n  }\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n\n  let ret: Array<Node | T> = [];\n  Array.from(el.childNodes).forEach((e) => {\n    if (!!(e as Element).matches && (e as Element).matches(sel)) ret.push(e);\n    else if (e.nodeName.toLowerCase() === 'slot') {\n      Array.from((e as HTMLSlotElement).assignedNodes()).forEach((slotEl) => {\n        if (slotEl instanceof Element && slotEl.matches(sel)) ret.push(slotEl);\n        else if (slotEl instanceof Node && !elesOnly) ret.push(slotEl as Node);\n      });\n    } else if (!elesOnly) ret.push(e as Node);\n  });\n  return ret;\n}\n\nexport const getSiblings = (el: Element, sel?: string): Array<Element> => {\n  if (!Element.prototype.matches) {\n    Element.prototype.matches =\n      Element.prototype.msMatchesSelector ||\n      Element.prototype.webkitMatchesSelector;\n  }\n  let siblings = [];\n  let firstChild = el.parentNode.firstElementChild;\n  do {\n    if (!sel || (firstChild !== el && firstChild.matches(sel)))\n      siblings.push(firstChild);\n  } while ((firstChild = firstChild.nextElementSibling));\n  return siblings;\n};\n\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n  if (!parent || !element) return;\n  return {\n    top:\n      element.getBoundingClientRect().top - parent.getBoundingClientRect().top,\n    left:\n      element.getBoundingClientRect().left -\n      parent.getBoundingClientRect().left,\n  };\n}\n"]}

package/dist/nano-components/p-1e974cad.entry.js

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

package/dist/nano-components/{p-7e60c331.entry.js.map → p-1e974cad.entry.js.map}

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

package/dist/nano-components/p-20387cde.system.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+System.register(["./p-59b3d24b.system.js"],(function(t){"use strict";var a,e,n,r;return{setters:[function(t){a=t.r;e=t.h;n=t.e;r=t.g}],execute:function(){var s=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{display:block;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-webkit-animation:opacity 0.3s ease-in-out forwards;animation:opacity 0.3s ease-in-out forwards;opacity:1}@media only screen and (max-width: 768px){:host([animation-dir=left]){-webkit-animation:slide-right 0.3s ease-in-out;animation:slide-right 0.3s ease-in-out;opacity:1}:host([animation-dir=right]){-webkit-animation:slide-left 0.3s ease-in-out;animation:slide-left 0.3s ease-in-out;opacity:1}}.nano-tab-content{position:relative}@-webkit-keyframes opacity{0%{opacity:0}100%{opacity:100%}}@keyframes opacity{0%{opacity:0}100%{opacity:100%}}@-webkit-keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-left{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{-webkit-transform:translate3d(0%) translate3d(-0.9em);transform:translate3d(0%) translate3d(-0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@-webkit-keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slide-right{0%{-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}50%{-webkit-transform:translateX(0%) translate3d(0.9em);transform:translateX(0%) translate3d(0.9em)}100%{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@media (prefers-reduced-motion: reduce){*{-webkit-animation:none !important;animation:none !important}}";var i=0;var o=t("nano_tab_content",function(){function t(t){a(this,t);this.tabContentId="nano-tab-content-"+ ++i;this.name="";this.active=false}t.prototype.render=function(){return e(n,{id:this.host.id||this.tabContentId,style:{display:this.active?"block":"none"},role:"tabpanel","aria-hidden":this.active?"false":"true"},e("div",{part:"base",class:"nano-tab-content"},e("slot",null)))};Object.defineProperty(t.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());o.style=s}}}));
+//# sourceMappingURL=p-20387cde.system.entry.js.map

package/dist/nano-components/{p-91778977.system.entry.js.map → p-20387cde.system.entry.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"names":["tabContentCss","id","TabPanel","exports","class_1","hostRef","this","tabContentId","name","active","prototype","render","h","Host","host","style","display","role","aria-hidden","part","class"],"mappings":";;;0JAAA,IAAMA,EAAgB,u9DCStB,IAAIC,EAAK,MAUIC,EAAQC,EAAA,mBAAA,WALrB,SAAAC,EAAAC,aAMUC,KAAAC,aAAe,uBAAsBN,EAKrCK,KAAAE,KAAO,GAGPF,KAAAG,OAAS,MAEjBL,EAAAM,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CACHZ,GAAIK,KAAKQ,KAAKb,IAAMK,KAAKC,aACzBQ,MAAO,CAAEC,QAASV,KAAKG,OAAS,QAAU,QAC1CQ,KAAK,WAAUC,cACFZ,KAAKG,OAAS,QAAU,QAErCG,EAAA,MAAA,CAAKO,KAAK,OAAOC,MAAM,6BACrBR,EAAA,OAAA,gIApBW","sourcesContent":[":host {\n  display: block;\n  transform: translate3d(0, 0, 0);\n  animation: opacity 0.3s ease-in-out forwards;\n  opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 100%;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop() name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop() active = false;\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n      >\n        <div part=\"base\" class=\"nano-tab-content slide-in\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/tabs/tab-content.scss?tag=nano-tab-content&encapsulation=shadow","src/components/tabs/tab-content.tsx"],"names":["tabContentCss","id","TabPanel","exports","class_1","hostRef","this","tabContentId","name","active","prototype","render","h","Host","host","style","display","role","aria-hidden","part","class"],"mappings":";;;0JAAA,IAAMA,EAAgB,w/DCStB,IAAIC,EAAK,MAUIC,EAAQC,EAAA,mBAAA,WALrB,SAAAC,EAAAC,aAMUC,KAAAC,aAAe,uBAAsBN,EAKpBK,KAAAE,KAAO,GAGPF,KAAAG,OAAS,MAElCL,EAAAM,UAAAC,OAAA,WACE,OACEC,EAACC,EAAI,CACHZ,GAAIK,KAAKQ,KAAKb,IAAMK,KAAKC,aACzBQ,MAAO,CAAEC,QAASV,KAAKG,OAAS,QAAU,QAC1CQ,KAAK,WAAUC,cACFZ,KAAKG,OAAS,QAAU,QAErCG,EAAA,MAAA,CAAKO,KAAK,OAAOC,MAAM,oBACrBR,EAAA,OAAA,gIApBW","sourcesContent":[":host {\n  display: block;\n  transform: translate3d(0, 0, 0);\n  animation: opacity 0.3s ease-in-out forwards;\n  opacity: 1;\n}\n\n@media only screen and (max-width: 768px) {\n  :host([animation-dir='left']) {\n    animation: slide-right 0.3s ease-in-out;\n    opacity: 1;\n  }\n\n  :host([animation-dir='right']) {\n    animation: slide-left 0.3s ease-in-out;\n    opacity: 1;\n  }\n}\n\n.nano-tab-content {\n  position: relative;\n}\n\n@keyframes opacity {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 100%;\n  }\n}\n\n@keyframes slide-left {\n  0% {\n    transform: translate3d(-100%, 0, 0);\n  }\n\n  50% {\n    transform: translate3d(0%) translate3d(-0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@keyframes slide-right {\n  0% {\n    transform: translate3d(100%, 0, 0);\n  }\n\n  50% {\n    transform: translateX(0%) translate3d(0.9em);\n  }\n\n  100% {\n    transform: translate3d(0, 0, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation: none !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab panel's content.\n */\n@Component({\n  tag: 'nano-tab-content',\n  styleUrl: 'tab-content.scss',\n  shadow: true,\n})\nexport class TabPanel implements ComponentInterface {\n  private tabContentId = `nano-tab-content-${++id}`;\n\n  @Element() host: HTMLNanoTabContentElement;\n\n  /** The tab panel's name. */\n  @Prop({ reflect: true }) name = '';\n\n  /** When true, the tab content will be shown. */\n  @Prop({ reflect: true }) active = false;\n\n  render() {\n    return (\n      <Host\n        id={this.host.id || this.tabContentId}\n        style={{ display: this.active ? 'block' : 'none' }}\n        role=\"tabpanel\"\n        aria-hidden={this.active ? 'false' : 'true'}\n      >\n        <div part=\"base\" class=\"nano-tab-content\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-20db18f3.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as e,c as o,h as n,e as c,g as a}from"./p-ab5813a7.js";import{c as t}from"./p-d99437a6.js";import{f as i}from"./p-f8f89998.js";const s='.sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #fac6c3);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104, 117, 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{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}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{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}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--invalid-shadow);box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{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}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';let r=0;let b=class{constructor(n){e(this,n);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId=`nano-cb-${r++}`;this.shouldReport=false;this._invalid=false;this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.required=false;this.type="checkbox";this.indeterminate=false;this.handleInvalid=e=>{this.shouldReport=true;this._invalid=!e.target.validity.valid};this.handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()}}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){let e=this.host.closest("form");let o;if(e){o=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{o=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form")))}o.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){if(!this.shouldReport)return false;return!this.input.validity.valid}async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e){if(!this.input)return;this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();i.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();i.force(this.input,false)}}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o=this.host.ownerDocument.dir==="rtl";return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("label",{class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("span",{hidden:this.label&&!!this.label.length},n("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=s;export{b as nano_checkbox};
+//# sourceMappingURL=p-20db18f3.entry.js.map