@nanoporetech-digital/components 2.10.1 → 2.13.0

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

package/dist/nano-components/p-0320410c.entry.js

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

package/dist/nano-components/p-0320410c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/sticker/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticker/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","[object Object]","hostRef","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","async","incomingTriggerPos","getTriggerPos","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","shouldStick","pause","trigger","contentSizeObserver","content","setAttribute","_v","_h","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","split","setOffset","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","addEventListener","passive","capture","removeEventListener","_","oldParent","manageListenersOnParent","oldEle","stickTo","nanoHide","nanoShow","io","root","IntersectionObserver","slice","addEvents","console","error","attachScrollListeners","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","getScrollParent","createElement","classList","add","positionChange","quietModeChange","handleParentEvents","querySelectorAll","filter","findIndex","stickerResizeListener","updateTriggerOffset","stickToChange","setupIO","debounce","dir","ownerDocument","setTimeout","bootstrapGurantor","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else if (this.scrollParent) {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.scrollParent = null;\n    this.hasBootstrapped = false;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-0d699368.system.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(n,t,e,o){function r(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,i){function a(n){try{s(o.next(n))}catch(t){i(t)}}function c(n){try{s(o["throw"](n))}catch(t){i(t)}}function s(n){n.done?e(n.value):r(n.value).then(a,c)}s((o=o.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(n){return function(t){return s([n,t])}}function s(a){if(o)throw new TypeError("Generator is already executing.");while(e)try{if(o=1,r&&(i=a[0]&2?r["return"]:a[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,a[1])).done)return i;if(r=0,i)a=[a[0]&2,i.value];switch(a[0]){case 0:case 1:i=a;break;case 4:e.label++;return{value:a[1],done:false};case 5:e.label++;r=a[1];a=[0];continue;case 7:a=e.ops.pop();e.trys.pop();continue;default:if(!(i=e.trys,i=i.length>0&&i[i.length-1])&&(a[0]===6||a[0]===2)){e=0;continue}if(a[0]===3&&(!i||a[1]>i[0]&&a[1]<i[3])){e.label=a[1];break}if(a[0]===6&&e.label<i[1]){e.label=i[1];i=a;break}if(i&&e.label<i[2]){e.label=i[2];e.ops.push(a);break}if(i[2])e.ops.pop();e.trys.pop();continue}a=t.call(n,e)}catch(c){a=[6,c];r=0}finally{o=i=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-1c216ca4.system.js","./p-ef053a2f.system.js","./p-9de508a5.system.js"],(function(n){"use strict";var t;return{setters:[function(e){t=e.r;n("nanoRaf",e.r)},function(t){var e={};e.nanoDebounce=t.d;e.nanoThrottle=t.t;n(e)},function(t){n("nanoGetTabElements",t.g)}],execute:function(){n({nanoCreateDialog:a,nanoShowAlert:i,nanoShowToast:r});var e=function(n,t){if(t===void 0){t=[]}return n+"\n    "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")};var o=function(n,t){if(t===void 0){t=[]}if(t.length){Array.from(n.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}};function r(n,r,i,a,c){if(r===void 0){r="tr"}if(c===void 0){c=[]}return __awaiter(this,void 0,void 0,(function(){var s,u;var l=this;return __generator(this,(function(f){s=Object.assign({color:"primary",duration:3e3,closable:true},a);i=i||"light/info-circle";u=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},s),{open:false,innerHTML:'\n        <nano-icon name="'+i+'" slot="icon"></nano-icon>\n        '+e(n,c)+"\n      "}));o(u,c);document.body.appendChild(u);return[2,new Promise((function(n){t((function(t){return __awaiter(l,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,u.toast(r)];case 1:t.sent();n(u);return[2]}}))}))}))}))]}))}))}function i(n,t,r,i,a){var c=this;if(t===void 0){t=[]}if(i===void 0){i="light/info-circle"}if(a===void 0){a={}}var s=Object.assign({color:"primary",duration:Infinity,closable:false},a);i=i||"light/info-circle";var u=Object.assign(document.createElement("nano-alert"),Object.assign(Object.assign({},s),{open:false,innerHTML:"\n        "+(i?'<nano-icon name="'+i+'" slot="icon"></nano-icon>':"")+"\n        "+e(n,t)+"\n      "}));o(u,t);document.body.appendChild(u);return new Promise((function(n){setTimeout((function(t){return __awaiter(c,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,u.alert(r)];case 1:t.sent();n(u);return[2]}}))}))}),100)}))}function a(n,t,e){if(t===void 0){t=[]}var o=Object.assign({noUserDismiss:false,label:"Dialog"},e);var r=Object.assign(document.createElement("nano-dialog"),Object.assign(Object.assign({},o),{open:false,innerHTML:"\n      "+n+"\n      "+(t.length?t.map((function(n,t){return'<button data-btn="'+t+'" class="button '+n.classes+'" slot="footer">'+n.content+"</button>"})).join(""):"")}));if(t.length){Array.from(r.querySelectorAll('button[slot="footer"]')).map((function(n){var e=t.find((function(t,e){return n.dataset.btn===e.toString()}));if(e&&e.handler){n.addEventListener("click",e.handler)}}))}document.body.appendChild(r);return r}}}}));
+//# sourceMappingURL=p-0d699368.system.js.map

package/dist/nano-components/{p-3258c568.system.js.map → p-0d699368.system.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts"],"names":["alertContent","message","buttons","length","map","btn","i","classes","content","join","addBtnHandlers","alert","Array","from","querySelectorAll","foundBtn","find","_fb","dataset","toString","handler","addEventListener","nanoShowToast","position","icon","alertOptions","opts","Object","assign","color","duration","closable","document","createElement","open","innerHTML","body","appendChild","Promise","resolve","raf","_","__awaiter","_this","toast","_a","sent","nanoShowAlert","label","Infinity","setTimeout","nanoCreateDialog","dialogOptions","noUserDismiss","dialog"],"mappings":"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","sourcesContent":["import { Color, AlertToastPosition } from '../../interface';\nimport { raf } from '../../utils';\n\ninterface ImperativeAlertOptions {\n  color?: Color;\n  duration?: number;\n  closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n  classes: string;\n  content: string;\n  handler?: (e: MouseEvent) => void;\n}\n\nconst alertContent = (\n  message: string,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  return `${message}\n    ${\n      buttons.length\n        ? buttons\n            .map(\n              (btn, i) =>\n                `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n            )\n            .join('')\n        : ''\n    }`;\n};\n\nconst addBtnHandlers = (\n  alert: HTMLNanoAlertElement,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  if (buttons.length) {\n    Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n  message: string,\n  position: AlertToastPosition = 'tr',\n  icon?: string | undefined,\n  alertOptions?: ImperativeAlertOptions,\n  buttons: ImperativeAlertButton[] = []\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: 3000,\n    closable: true,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    raf(async (_) => {\n      await alert.toast(position);\n      resolve(alert);\n    });\n  });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param icon - name for the `nano-icon`\n * @param label - descriptive label for assitive technology\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n  message: string,\n  buttons: ImperativeAlertButton[] = [],\n  label: string,\n  icon: string | undefined = 'light/info-circle',\n  alertOptions: ImperativeAlertOptions = {}\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: Infinity,\n    closable: false,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    setTimeout(async (_) => {\n      await alert.alert(label);\n      resolve(alert);\n    }, 100);\n  });\n}\n","interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => {} }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n"]}
+{"version":3,"sources":["src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts"],"names":["alertContent","message","buttons","length","map","btn","i","classes","content","join","addBtnHandlers","alert","Array","from","querySelectorAll","foundBtn","find","_fb","dataset","toString","handler","addEventListener","nanoShowToast","position","icon","alertOptions","opts","Object","assign","color","duration","closable","document","createElement","open","innerHTML","body","appendChild","Promise","resolve","raf","_","__awaiter","_this","toast","_a","sent","nanoShowAlert","label","Infinity","setTimeout","nanoCreateDialog","dialogOptions","noUserDismiss","dialog"],"mappings":"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","sourcesContent":["import { Color, AlertToastPosition } from '../../interface';\nimport { raf } from '../../utils';\n\ninterface ImperativeAlertOptions {\n  color?: Color;\n  duration?: number;\n  closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n  classes: string;\n  content: string;\n  handler?: (e: MouseEvent) => void;\n}\n\nconst alertContent = (\n  message: string,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  return `${message}\n    ${\n      buttons.length\n        ? buttons\n            .map(\n              (btn, i) =>\n                `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n            )\n            .join('')\n        : ''\n    }`;\n};\n\nconst addBtnHandlers = (\n  alert: HTMLNanoAlertElement,\n  buttons: ImperativeAlertButton[] = []\n) => {\n  if (buttons.length) {\n    Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n  message: string,\n  position: AlertToastPosition = 'tr',\n  icon?: string | undefined,\n  alertOptions?: ImperativeAlertOptions,\n  buttons: ImperativeAlertButton[] = []\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: 3000,\n    closable: true,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    raf(async (_) => {\n      await alert.toast(position);\n      resolve(alert);\n    });\n  });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param icon - name for the `nano-icon`\n * @param label - descriptive label for assitive technology\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n  message: string,\n  buttons: ImperativeAlertButton[] = [],\n  label: string,\n  icon: string | undefined = 'light/info-circle',\n  alertOptions: ImperativeAlertOptions = {}\n) {\n  const opts: ImperativeAlertOptions = {\n    color: 'primary',\n    duration: Infinity,\n    closable: false,\n    ...alertOptions,\n  };\n  icon = icon || 'light/info-circle';\n  const alert: HTMLNanoAlertElement = Object.assign(\n    document.createElement('nano-alert'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n        ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n        ${alertContent(message, buttons)}\n      `,\n    }\n  );\n  addBtnHandlers(alert, buttons);\n\n  document.body.appendChild(alert);\n  return new Promise<HTMLNanoAlertElement>((resolve) => {\n    setTimeout(async (_) => {\n      await alert.alert(label);\n      resolve(alert);\n    }, 100);\n  });\n}\n","interface ImperativeDialogOptions {\n  noUserDismiss: boolean;\n  noHeader?: boolean;\n  noFooter?: boolean;\n  label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n  body: string,\n  buttons: { classes: string; content: string; handler: () => {} }[] = [],\n  dialogOptions?: ImperativeDialogOptions\n) {\n  const opts: ImperativeDialogOptions = {\n    noUserDismiss: false,\n    label: 'Dialog',\n    ...dialogOptions,\n  };\n  const dialog: HTMLNanoDialogElement = Object.assign(\n    document.createElement('nano-dialog'),\n    {\n      ...opts,\n      open: false,\n      innerHTML: `\n      ${body}\n      ${\n        buttons.length\n          ? buttons\n              .map(\n                (btn, i) =>\n                  `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n              )\n              .join('')\n          : ''\n      }`,\n    }\n  );\n\n  if (buttons.length) {\n    Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n      (btn: HTMLElement) => {\n        const foundBtn = buttons.find(\n          (_fb, i) => btn.dataset.btn === i.toString()\n        );\n        if (foundBtn && foundBtn.handler) {\n          btn.addEventListener('click', foundBtn.handler);\n        }\n      }\n    );\n  }\n\n  document.body.appendChild(dialog);\n  return dialog;\n}\n"]}

package/dist/nano-components/p-18863670.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,r,i){function n(e){return e instanceof r?e:new r((function(t){t(e)}))}return new(r||(r=Promise))((function(r,a){function s(e){try{l(i.next(e))}catch(t){a(t)}}function o(e){try{l(i["throw"](e))}catch(t){a(t)}}function l(e){e.done?r(e.value):n(e.value).then(s,o)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var r={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},i,n,a,s;return s={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function o(e){return function(t){return l([e,t])}}function l(s){if(i)throw new TypeError("Generator is already executing.");while(r)try{if(i=1,n&&(a=s[0]&2?n["return"]:s[0]?n["throw"]||((a=n["return"])&&a.call(n),0):n.next)&&!(a=a.call(n,s[1])).done)return a;if(n=0,a)s=[s[0]&2,a.value];switch(s[0]){case 0:case 1:a=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;n=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(a=r.trys,a=a.length>0&&a[a.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!a||s[1]>a[0]&&s[1]<a[3])){r.label=s[1];break}if(s[0]===6&&r.label<a[1]){r.label=a[1];a=s;break}if(a&&r.label<a[2]){r.label=a[2];r.ops.push(s);break}if(a[2])r.ops.pop();r.trys.pop();continue}s=t.call(e,r)}catch(o){s=[6,o];n=0}finally{i=a=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var __spreadArray=this&&this.__spreadArray||function(e,t){for(var r=0,i=t.length,n=e.length;r<i;r++,n++)e[n]=t[r];return e};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-f48be9f5.system.js"],(function(e){"use strict";var t,r,i,n,a,s,o;return{setters:[function(e){t=e.k;r=e.j;i=e.r;n=e.c;a=e.h;s=e.e;o=e.g}],execute:function(){var l=function(e,t,r){var i=e.get(t);if(!i){e.set(t,[r])}else if(!i.includes(r)){i.push(r)}};var u=function(e,t){var r;return function(){var i=[];for(var n=0;n<arguments.length;n++){i[n]=arguments[n]}if(r){clearTimeout(r)}r=setTimeout((function(){r=0;e.apply(void 0,i)}),t)}};var c=function(e){return!("isConnected"in e)||e.isConnected};var f=u((function(e){for(var t=0,r=e.keys();t<r.length;t++){var i=r[t];e.set(i,e.get(i).filter(c))}}),2e3);var h=function(){if(typeof t!=="function"){return{}}var e=new Map;return{dispose:function(){return e.clear()},get:function(r){var i=t();if(i){l(e,r,i)}},set:function(t){var i=e.get(t);if(i){e.set(t,i.filter(r))}f(e)},reset:function(){e.forEach((function(e){return e.forEach(r)}));f(e)}}};var d=function(e,t){if(t===void 0){t=function(e,t){return e!==t}}var r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));var i={dispose:[],get:[],set:[],reset:[]};var n=function(){r=new Map(Object.entries(e!==null&&e!==void 0?e:{}));i.reset.forEach((function(e){return e()}))};var a=function(){i.dispose.forEach((function(e){return e()}));n()};var s=function(e){i.get.forEach((function(t){return t(e)}));return r.get(e)};var o=function(e,n){var a=r.get(e);if(t(n,a,e)){r.set(e,n);i.set.forEach((function(t){return t(e,n,a)}))}};var l=typeof Proxy==="undefined"?{}:new Proxy(e,{get:function(e,t){return s(t)},ownKeys:function(e){return Array.from(r.keys())},getOwnPropertyDescriptor:function(){return{enumerable:true,configurable:true}},has:function(e,t){return r.has(t)},set:function(e,t,r){o(t,r);return true}});var u=function(e,t){i[e].push(t);return function(){v(i[e],t)}};var c=function(t,r){var i=u("set",(function(e,i){if(e===t){r(i)}}));var n=u("reset",(function(){return r(e[t])}));return function(){i();n()}};var f=function(){var e=[];for(var t=0;t<arguments.length;t++){e[t]=arguments[t]}var r=e.reduce((function(e,t){if(t.set){e.push(u("set",t.set))}if(t.get){e.push(u("get",t.get))}if(t.reset){e.push(u("reset",t.reset))}if(t.dispose){e.push(u("dispose",t.dispose))}return e}),[]);return function(){return r.forEach((function(e){return e()}))}};var h=function(e){var t=r.get(e);i.set.forEach((function(r){return r(e,t,t)}))};return{state:l,get:s,set:o,on:u,onChange:c,use:f,dispose:a,reset:n,forceUpdate:h}};var v=function(e,t){var r=e.indexOf(t);if(r>=0){e[r]=e[e.length-1];e.length--}};var p=function(e,t){var r=d(e,t);r.use(h());return r};var g=e("nano_field_validator",function(){function e(e){var t=this;i(this,e);this.nanoPayloadChange=n(this,"nanoPayloadChange",7);this.nanoSubmit=n(this,"nanoSubmit",7);this.nanoInvalid=n(this,"nanoInvalid",7);this.submitted=false;this.allFields=[];this.nanoFieldSelector="\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  ";this.internalValidate=false;this.validateOn="submitThenDirty";this.scrollToInvalid=true;this._dirty=false;this.extraFieldSelector="input, select, textarea";this.handleStoreChange=function(e,r){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(i){switch(i.label){case 0:t=this.allFields.find((function(t){return t.name===e}));if(t&&t.tagName==="NANO-FILE-UPLOAD"&&!this.fileStateEqual(e,t)||t.tagName!=="NANO-FILE-UPLOAD"&&t.value!==r){this.storeToFields([t])}if(!(this.validateOn==="dirty"&&this.dirty))return[3,2];this.internalValidate=true;return[4,this.validateAllFields()];case 1:i.sent();this._valid=this.activeForm.checkValidity();this.internalValidate=false;i.label=2;case 2:this.nanoPayloadChange.emit(this._store.state);return[2]}}))}))};this.handleFieldChange=function(e){if(!t.nanoFields.includes(e.target))return;t._dirty=true;t.fieldsToStore([e.target])};this.handlePlainFieldChange=function(e){if(!t.plainFields.includes(e.target))return;t.fieldsToStore([e.target])};this.handleFormInvalid=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.plainFields.includes(e.target)){e.preventDefault()}this._valid=false;if(this.internalValidate)return[2];if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:t.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(this.validateOn==="submit"){if(this._valid){this.submitForm();return[2]}}this.scrollToFirstInvalid();this.nanoInvalid.emit();return[2]}}))}))};this.handleSubmit=function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:e.preventDefault();if(this.validateOn==="submitThenDirty")this.validateOn="dirty";this.submitted=true;return[4,this.validateAllFields()];case 1:t.sent();this.internalValidate=true;this._valid=this.activeForm.checkValidity();this.internalValidate=false;if(!this._valid){this.scrollToFirstInvalid();return[2]}this.submitForm();return[2]}}))}))}}e.prototype.userFormChange=function(){if(!!this.userForm)this.activeForm=this.userForm};Object.defineProperty(e.prototype,"activeForm",{get:function(){return this._activeForm},set:function(e){if(!e)return;if(this._activeForm){this._activeForm.removeEventListener("invalid",this.handleFormInvalid,true)}e.addEventListener("invalid",this.handleFormInvalid,true);this._activeForm=e},enumerable:false,configurable:true});e.prototype.validateOnChange=function(){var e=this;this.nanoFields.forEach((function(t){if(t.tagName==="NANO-CHECKBOX"){var r=t.closest("nano-checkbox-group");if(r)r.validateOn=e.validateOn}else{t.validateOn=e.validateOn}}))};Object.defineProperty(e.prototype,"dirty",{get:function(){return this._dirty},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"valid",{get:function(){return this._valid},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"store",{get:function(){return this._store},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"payload",{get:function(){return this._store.state},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"showValidation",{get:function(){return this.validateOn==="dirty"&&this.dirty||this.submitted},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"validationState",{get:function(){var e=this;var t=[];this.allFields.forEach((function(r){return __awaiter(e,void 0,void 0,(function(){var e,i,n,a,s;return __generator(this,(function(o){e=t.find((function(e){return e.name===r.name}));if(e){if(r.validationMessage){i=r;e.validityMessage=i.validationMessage.length?i.validationMessage:e.validityMessage;this.internalValidate=true;if(e.valid&&!i.checkValidity())e.valid=false;this.internalValidate=false}else if(r.validityMessage){n=r;e.validityMessage=n.validityMessage.length?n.validityMessage:n.validityMessage;if(e.valid&&n.invalid)e.valid=false}if(!e.fields.find((function(e){return e===r})))e.fields.push(r)}if(r.checkValidity){i=r;this.internalValidate=true;a=i.checkValidity();this.internalValidate=false;s=i.validationMessage}else{n=r;a=!n.invalid;s=n.validityMessage}t.push({fields:[r],name:r.name,value:this._store.state[r.name],dirty:false,valid:a,validityMessage:s});return[2]}))}))}));return t},enumerable:false,configurable:true});e.prototype.setStore=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(r){Object.entries(e).forEach((function(e){var r=e[0],i=e[1];return t.store.state[r]=i}));return[2]}))}))};e.prototype.setCustomValidity=function(e){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(r){switch(r.label){case 0:return[4,Promise.all(Object.entries(e).map((function(e){var r=e[0],i=e[1];return __awaiter(t,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:e=this.allFields.find((function(e){return e.name===r}));if(!!!e)return[3,2];return[4,this.setFieldError(e,i)];case 1:t.sent();t.label=2;case 2:return[2]}}))}))})))];case 1:return[2,r.sent()]}}))}))};e.prototype.resetValidity=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){switch(t.label){case 0:return[4,Promise.all(this.allFields.map((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,this.setFieldError(t,"")];case 1:return[2,e.sent()]}}))}))})))];case 1:return[2,t.sent()]}}))}))};e.prototype.attachSlotObserver=function(){var e=this;if(!!this.mo)return;var t=this.mo=new MutationObserver((function(t){var r=e.host.querySelector("form");if(r&&r!==e.activeForm)e.activeForm=r;e.setupFields()}));t.observe(this.host,{childList:true,attributes:true,attributeFilter:["name"],subtree:true})};e.prototype.setupFields=function(){var e=this;var t=Array.from(this.host.querySelectorAll(this.nanoFieldSelector));var r=Array.from(this.host.querySelectorAll(this.extraFieldSelector)).filter((function(t){return!t.closest(e.nanoFieldSelector)}));t=t.filter((function(e){return!!e.name&&!!e.name.length}));r=r.filter((function(e){return!!e.name&&!!e.name.length}));if(!__spreadArray(__spreadArray([],t),r).filter((function(t){return!e.allFields.includes(t)})).length)return;this.nanoFields=t;this.plainFields=r;this.allFields=__spreadArray(__spreadArray([],t),r);this.storeToFields(this.allFields);this.validateOnChange();this.fieldsToStore(this.allFields);this.nanoPayloadChange.emit(this._store.state)};e.prototype.storeToFields=function(e){var t=this;e.forEach((function(e){var r;var i=e.name;if(!i.length||typeof t._store.state[i]==="undefined")return;if(e.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(e.type)){var n=e;if(n.type==="radio"||n.type==="segment"||n.type==="segment-pill"){if(t._store.state[i]===n.value)n.checked=true;else n.checked=false}else if(Array.isArray(t._store.state[i])){if(t._store.state[i].includes(n.value))n.checked=true;else n.checked=false}else{if(t._store.state[i]===n.value)n.checked=true;else n.checked=false}return}if(e.tagName==="NANO-FILE-UPLOAD"){var a=e;if(!((r=a.files)===null||r===void 0?void 0:r.length))a.files=t._store.state[i];return}e.value=t._store.state[i]}))};e.prototype.fieldsToStore=function(e){var t=this;e.forEach((function(e){var r=e.name;if(!r.length)return;if(e.tagName==="NANO-CHECKBOX"||["radio","checkbox"].includes(e.type)){var i=e;if(i.type==="radio"||i.type==="segment"||i.type==="segment-pill"){if(i.checked)t._store.state[r]=i.value}else if(t.allFields.filter((function(e){return e.name===r&&(e.tagName==="NANO-CHECKBOX"||e.type==="checkbox")})).length>1){var n=Array.isArray(t._store.state[r])?t._store.state[r]:[];if(i.checked){if(!t._store.state[r].includes(i.value)){t._store.state[r]=__spreadArray(__spreadArray([],n),[i.value])}}else{t._store.state[r]=n.filter((function(e){return e!==i.value}))}}else{if(i.checked)t._store.state[r]=i.value;else t._store.state[r]=""}return}if(e.tagName==="NANO-FILE-UPLOAD"){var a=e;if(!t.fileStateEqual(r,a))t._store.state[r]=a.files;return}t._store.state[r]=e.value}))};e.prototype.fileStateEqual=function(e,t){return JSON.stringify(this._store.state[e])===JSON.stringify(t.files)||this._store.state[e]==t.files};e.prototype.validate=function(e,t){return __awaiter(this,void 0,void 0,(function(){var r;var i=this;return __generator(this,(function(n){switch(n.label){case 0:if(!this.validation)return[2];r=this.validation(e,t,this._store.state);if(!r)return[2];return[4,Promise.all(Object.entries(r).map((function(e){var t=e[0],r=e[1];return __awaiter(i,void 0,void 0,(function(){var e,i,n;return __generator(this,(function(a){switch(a.label){case 0:e=this.allFields.find((function(e){return e.name===t}));i=e;if(e.tagName==="NANO-CHECKBOX"){n=e.closest("nano-checkbox-group");i=n||e}if(!((i.validityMessage||i.validationMessage)===r.msg&&r.valid))return[3,2];return[4,this.setFieldError(i,"")];case 1:a.sent();return[3,4];case 2:if(!!r.valid)return[3,4];return[4,this.setFieldError(i,r.msg)];case 3:a.sent();a.label=4;case 4:return[2]}}))}))})))];case 1:n.sent();return[2]}}))}))};e.prototype.validateAllFields=function(){return __awaiter(this,void 0,void 0,(function(){var e=this;return __generator(this,(function(t){switch(t.label){case 0:return[4,Object.entries(this._store.state).reduce((function(t,r){var i=r[0],n=r[1];return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,t];case 1:e.sent();return[4,this.validate(i,n)];case 2:e.sent();return[2]}}))}))}),undefined)];case 1:t.sent();return[2]}}))}))};e.prototype.setFieldError=function(e,t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(r){switch(r.label){case 0:if(!e["showError"])return[3,2];return[4,e.showError(t)];case 1:r.sent();return[3,5];case 2:if(!e["setError"])return[3,4];return[4,e.setError(t)];case 3:r.sent();return[3,5];case 4:e.setCustomValidity(t);r.label=5;case 5:return[2]}}))}))};e.prototype.scrollToFirstInvalid=function(){var e=this;if(!this.scrollToInvalid)return;setTimeout((function(){var t=e.validationState.find((function(e){return!e.valid}));if(!t)return;t.fields[0].scrollIntoView({behavior:"smooth",block:"nearest"})}),200)};e.prototype.submitForm=function(){var e=this.nanoSubmit.emit();if(e.defaultPrevented)return;this.activeForm.submit()};e.prototype.connectedCallback=function(){this.userForm=this.host.querySelector("form");this._store=p({})};e.prototype.componentDidLoad=function(){var e=this;requestAnimationFrame((function(){e.setupFields();e.attachSlotObserver();e.host.addEventListener("nanoChange",e.handleFieldChange);e.host.addEventListener("input",e.handlePlainFieldChange);e.host.addEventListener("change",e.handlePlainFieldChange);e.host.addEventListener("submit",e.handleSubmit);e._store.on("set",e.handleStoreChange)}))};e.prototype.disconnectedCallback=function(){if(this.mo)this.mo.disconnect();this.host.removeEventListener("nanoChange",this.handleFieldChange);this.host.removeEventListener("input",this.handlePlainFieldChange);this.host.removeEventListener("change",this.handlePlainFieldChange);this.host.removeEventListener("submit",this.handleSubmit);this._store.reset();if(this.activeForm)this.activeForm.removeEventListener("invalid",this.handleFormInvalid,true)};e.prototype.render=function(){var e=this;return a(s,null,this.userForm&&a("slot",null),!this.userForm&&a("form",{ref:function(t){return e.activeForm=t}},a("slot",null)))};Object.defineProperty(e.prototype,"host",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{userForm:["userFormChange"],validateOn:["validateOnChange"],extraFieldSelector:["attachSlotObserver"]}},enumerable:false,configurable:true});return e}())}}}));
+//# sourceMappingURL=p-18863670.system.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["node_modules/@stencil/store/dist/index.mjs","src/components/field-validator/field-validator.tsx"],"names":["appendToMap","map","propName","value","items","get","set","includes","push","debounce","fn","ms","timeoutId","args","_i","arguments","length","clearTimeout","setTimeout","apply","isConnected","maybeElement","cleanupElements","_b","keys","key","filter","stencilSubscription","getRenderingRef","elmsToUpdate","Map","dispose","clear","elm","elements","forceUpdate","reset","forEach","elms","createObservableMap","defaultState","shouldUpdate","a","b","states","Object","entries","handlers","cb","oldValue","state","Proxy","_","ownKeys","Array","from","getOwnPropertyDescriptor","enumerable","configurable","has","on","eventName","callback","removeFromArray","onChange","unSet","newValue","unReset","use","subscriptions","unsubs","reduce","subscription","unsub","array","item","index","indexOf","createStore","FieldValidator","exports","class_1","hostRef","_this","this","submitted","allFields","nanoFieldSelector","internalValidate","validateOn","scrollToInvalid","_dirty","extraFieldSelector","handleStoreChange","newVal","__awaiter","found","find","field","name","tagName","fileStateEqual","storeToFields","dirty","validateAllFields","sent","_valid","activeForm","checkValidity","nanoPayloadChange","emit","_store","handleFieldChange","ev","nanoFields","target","fieldsToStore","handlePlainFieldChange","plainFields","handleFormInvalid","preventDefault","submitForm","scrollToFirstInvalid","nanoInvalid","handleSubmit","e","prototype","userFormChange","userForm","defineProperty","_activeForm","form","removeEventListener","addEventListener","validateOnChange","cbg","closest","validationState","v","validationMessage","pf","validityMessage","valid","nf","invalid","fields","f","setStore","val","store","setCustomValidity","validity","Promise","all","err","setFieldError","_c","resetValidity","__generator","attachSlotObserver","mo","MutationObserver","_entries","host","querySelector","setupFields","observe","childList","attributes","attributeFilter","subtree","querySelectorAll","__spreadArray","fieldName","type","checked","isArray","ff","_a","files","cb_1","currentArr","JSON","stringify","validate","validation","res","o","validityTarget","msg","memo","undefined","showError","setError","invalidField","scrollIntoView","behavior","block","nanoSubmit","defaultPrevented","submit","connectedCallback","componentDidLoad","requestAnimationFrame","disconnectedCallback","disconnect","render","h","Host","ref"],"mappings":"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","sourcesContent":["import { getRenderingRef, forceUpdate } from '@stencil/core';\n\nconst appendToMap = (map, propName, value) => {\n    const items = map.get(propName);\n    if (!items) {\n        map.set(propName, [value]);\n    }\n    else if (!items.includes(value)) {\n        items.push(value);\n    }\n};\nconst debounce = (fn, ms) => {\n    let timeoutId;\n    return (...args) => {\n        if (timeoutId) {\n            clearTimeout(timeoutId);\n        }\n        timeoutId = setTimeout(() => {\n            timeoutId = 0;\n            fn(...args);\n        }, ms);\n    };\n};\n\n/**\n * Check if a possible element isConnected.\n * The property might not be there, so we check for it.\n *\n * We want it to return true if isConnected is not a property,\n * otherwise we would remove these elements and would not update.\n *\n * Better leak in Edge than to be useless.\n */\nconst isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;\nconst cleanupElements = debounce((map) => {\n    for (let key of map.keys()) {\n        map.set(key, map.get(key).filter(isConnected));\n    }\n}, 2000);\nconst stencilSubscription = () => {\n    if (typeof getRenderingRef !== 'function') {\n        // If we are not in a stencil project, we do nothing.\n        // This function is not really exported by @stencil/core.\n        return {};\n    }\n    const elmsToUpdate = new Map();\n    return {\n        dispose: () => elmsToUpdate.clear(),\n        get: (propName) => {\n            const elm = getRenderingRef();\n            if (elm) {\n                appendToMap(elmsToUpdate, propName, elm);\n            }\n        },\n        set: (propName) => {\n            const elements = elmsToUpdate.get(propName);\n            if (elements) {\n                elmsToUpdate.set(propName, elements.filter(forceUpdate));\n            }\n            cleanupElements(elmsToUpdate);\n        },\n        reset: () => {\n            elmsToUpdate.forEach((elms) => elms.forEach(forceUpdate));\n            cleanupElements(elmsToUpdate);\n        },\n    };\n};\n\nconst createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {\n    let states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n    const handlers = {\n        dispose: [],\n        get: [],\n        set: [],\n        reset: [],\n    };\n    const reset = () => {\n        states = new Map(Object.entries(defaultState !== null && defaultState !== void 0 ? defaultState : {}));\n        handlers.reset.forEach((cb) => cb());\n    };\n    const dispose = () => {\n        // Call first dispose as resetting the state would\n        // cause less updates ;)\n        handlers.dispose.forEach((cb) => cb());\n        reset();\n    };\n    const get = (propName) => {\n        handlers.get.forEach((cb) => cb(propName));\n        return states.get(propName);\n    };\n    const set = (propName, value) => {\n        const oldValue = states.get(propName);\n        if (shouldUpdate(value, oldValue, propName)) {\n            states.set(propName, value);\n            handlers.set.forEach((cb) => cb(propName, value, oldValue));\n        }\n    };\n    const state = (typeof Proxy === 'undefined'\n        ? {}\n        : new Proxy(defaultState, {\n            get(_, propName) {\n                return get(propName);\n            },\n            ownKeys(_) {\n                return Array.from(states.keys());\n            },\n            getOwnPropertyDescriptor() {\n                return {\n                    enumerable: true,\n                    configurable: true,\n                };\n            },\n            has(_, propName) {\n                return states.has(propName);\n            },\n            set(_, propName, value) {\n                set(propName, value);\n                return true;\n            },\n        }));\n    const on = (eventName, callback) => {\n        handlers[eventName].push(callback);\n        return () => {\n            removeFromArray(handlers[eventName], callback);\n        };\n    };\n    const onChange = (propName, cb) => {\n        const unSet = on('set', (key, newValue) => {\n            if (key === propName) {\n                cb(newValue);\n            }\n        });\n        const unReset = on('reset', () => cb(defaultState[propName]));\n        return () => {\n            unSet();\n            unReset();\n        };\n    };\n    const use = (...subscriptions) => {\n        const unsubs = subscriptions.reduce((unsubs, subscription) => {\n            if (subscription.set) {\n                unsubs.push(on('set', subscription.set));\n            }\n            if (subscription.get) {\n                unsubs.push(on('get', subscription.get));\n            }\n            if (subscription.reset) {\n                unsubs.push(on('reset', subscription.reset));\n            }\n            if (subscription.dispose) {\n                unsubs.push(on('dispose', subscription.dispose));\n            }\n            return unsubs;\n        }, []);\n        return () => unsubs.forEach((unsub) => unsub());\n    };\n    const forceUpdate = (key) => {\n        const oldValue = states.get(key);\n        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));\n    };\n    return {\n        state,\n        get,\n        set,\n        on,\n        onChange,\n        use,\n        dispose,\n        reset,\n        forceUpdate,\n    };\n};\nconst removeFromArray = (array, item) => {\n    const index = array.indexOf(item);\n    if (index >= 0) {\n        array[index] = array[array.length - 1];\n        array.length--;\n    }\n};\n\nconst createStore = (defaultState, shouldUpdate) => {\n    const map = createObservableMap(defaultState, shouldUpdate);\n    map.use(stencilSubscription());\n    return map;\n};\n\nexport { createObservableMap, createStore };\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  Element,\n  ComponentInterface,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport { createStore, ObservableMap } from '@stencil/store';\nimport {\n  NanoFormEles,\n  PlainFormEles,\n  NanoFormEvent,\n  ValidationState,\n  ValidatorValueStore,\n  PlainFormEvent,\n} from '../../interface';\n\n/**\n * A toolbox for `nano-...` form fields and form validation.\n * - Easy to add validation accross field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n * - Easy access to whole form and individual field validity states\n * - Easy access to form data payload\n * = Access to 2-way, data bound reactive store\n * - Scroll to invalid field on submit\n */\n@Component({\n  tag: 'nano-field-validator',\n})\nexport class FieldValidator implements ComponentInterface {\n  // Internal State\n\n  @Element() host: HTMLNanoFieldValidatorElement;\n  @State() submitted = false;\n  @State() userForm: HTMLFormElement;\n  @Watch('userForm')\n  userFormChange() {\n    if (!!this.userForm) this.activeForm = this.userForm;\n  }\n\n  private get activeForm() {\n    return this._activeForm;\n  }\n  private set activeForm(form: HTMLFormElement) {\n    // manages event listners on whatever form is used (slotted on created here)\n    if (!form) return;\n\n    if (this._activeForm) {\n      this._activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n    }\n    form.addEventListener('invalid', this.handleFormInvalid, true);\n    this._activeForm = form;\n  }\n  private _activeForm: HTMLFormElement;\n  private mo: MutationObserver;\n  private allFields: Array<NanoFormEles | PlainFormEles> = [];\n  private nanoFields: NanoFormEles[];\n  private plainFields: PlainFormEles[];\n  private nanoFieldSelector = `\n    nano-input,\n    nano-select,\n    nano-file-upload,\n    nano-date-input,\n    nano-checkbox\n  `;\n\n  // annoyingly, whenever we attempt to `checkValidty()` it fires `invalid` events.\n  // this is used to prevent infinite loops / multiple calls\n  private internalValidate = false;\n\n  // Public API\n\n  /** When should the fields perform validation. Will override / sync all nested `nano-...` controls */\n  @Prop({ mutable: true }) validateOn?: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /** Sync up validateOn with all fields */\n  @Watch('validateOn')\n  validateOnChange() {\n    this.nanoFields.forEach((field) => {\n      if (field.tagName === 'NANO-CHECKBOX') {\n        const cbg = field.closest('nano-checkbox-group');\n        if (cbg) cbg.validateOn = this.validateOn;\n      } else {\n        (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).validateOn =\n          this.validateOn;\n      }\n    });\n  }\n\n  /** Tries to scroll to the first invalid field on submit */\n  @Prop() scrollToInvalid = true;\n\n  /** Returns true if any nested fields have been changed @readonly */\n  @Prop({ reflect: true })\n  get dirty() {\n    return this._dirty;\n  }\n  @State() _dirty = false;\n\n  /** Returns true if all the nested fields are currently valid @readonly */\n  @Prop({ reflect: true })\n  get valid() {\n    return this._valid;\n  }\n  @State() _valid: boolean;\n\n  /** The current form state as a stencil store. */\n  @Prop() get store() {\n    return this._store;\n  }\n  @State() _store: ObservableMap<ValidatorValueStore>;\n\n  /** The current form payload as a reactive proxy. @readonly */\n  @Prop()\n  get payload() {\n    return this._store.state;\n  }\n\n  /** Returns true if validation errors will be displayed to the user. @readonly */\n  @Prop()\n  get showValidation() {\n    return (this.validateOn === 'dirty' && this.dirty) || this.submitted;\n  }\n\n  /** Get the current validation state of all form fields. @readonly\n   * ```\n   {\n      fields: NanoFormEles[];\n      valid: boolean;\n      validityMessage: string;\n      dirty: boolean;\n      name: string | number;\n      value: any;\n    }[]\n  ```\n   */\n  @Prop()\n  get validationState(): ValidationState[] {\n    // TODO - migrate nano-fields away from using proprietary methods in a bid to be closer to the spec\n\n    // this is big and ugly.\n    // why? Cos' it must unify checking validity state for both\n    // `nano-...` and plain form fields.\n    const validationState: ValidationState[] = [];\n\n    this.allFields.forEach(async (field) => {\n      const found = validationState.find((v) => v.name === field.name);\n      let pf: PlainFormEles;\n      let nf: NanoFormEles;\n\n      if (found) {\n        if ((field as PlainFormEles).validationMessage) {\n          pf = field as PlainFormEles;\n          found.validityMessage = pf.validationMessage.length\n            ? pf.validationMessage\n            : found.validityMessage;\n          this.internalValidate = true;\n          if (found.valid && !pf.checkValidity()) found.valid = false;\n          this.internalValidate = false;\n        } else if ((field as NanoFormEles).validityMessage) {\n          nf = field as NanoFormEles;\n          found.validityMessage = nf.validityMessage.length\n            ? nf.validityMessage\n            : nf.validityMessage;\n          if (found.valid && nf.invalid) found.valid = false;\n        }\n        if (!found.fields.find((f) => f === field)) found.fields.push(field);\n      }\n\n      let valid: boolean;\n      let validityMessage: string;\n\n      if ((field as PlainFormEles).checkValidity) {\n        pf = field as PlainFormEles;\n        this.internalValidate = true;\n        valid = pf.checkValidity();\n        this.internalValidate = false;\n        validityMessage = pf.validationMessage;\n      } else {\n        nf = field as NanoFormEles;\n        valid = !nf.invalid;\n        validityMessage = nf.validityMessage;\n      }\n\n      validationState.push({\n        fields: [field],\n        name: field.name,\n        value: this._store.state[field.name],\n        dirty: false,\n        valid,\n        validityMessage,\n      });\n    });\n\n    return validationState;\n  }\n\n  /** By default, `nano-field-validator` will also track all native form field elements.\n   * You can add extra web-component form fields to listen to\n   * (as long as they match the standard form field spec) by using the `fieldSelector` prop.\n   */\n  @Prop() extraFieldSelector: string = 'input, select, textarea';\n\n  /** A validation callback method.\n   * @param field - The field name currently being evaluated\n   * @param value - The value of the field currently being evaluated\n   * @param fields - an array of all currently observered form fields and values\n   * @returns field names mapped to an object of status message and validity e.g.\n   * ```js\n   * {field1: {msg: `This is invalid!`}, field2: {msg: `This is valid!`, valid: true}}\n   * ```\n   */\n  @Prop() validation: (\n    field: string,\n    value: string,\n    fields: ValidatorValueStore\n  ) => { [key: string]: { msg: string; valid?: boolean } };\n\n  /**\n   * Sets the state of the form using an object of key / value pairs.\n   * @param state - the state to load in the store\n   */\n  @Method()\n  async setStore(state: ValidatorValueStore) {\n    Object.entries(state).forEach(\n      ([key, val]) => (this.store.state[key] = val)\n    );\n  }\n\n  /**\n   * Sets custom validity for all / some form fields.\n   * @param validity - a validity object of `{fieldName: errorString}` pairs. Set as an empty string to clear the error.\n   */\n  @Method()\n  async setCustomValidity(validity: { [key: string]: string }) {\n    return await Promise.all(\n      Object.entries(validity).map(async ([key, err]) => {\n        const field = this.allFields.find((f) => f.name === key);\n        if (!!field) await this.setFieldError(field, err);\n      })\n    );\n  }\n\n  /**\n   * Clear all custom validation.\n   * @param validity\n   */\n  @Method()\n  async resetValidity() {\n    return await Promise.all(\n      this.allFields.map(async (field) => await this.setFieldError(field, ''))\n    );\n  }\n\n  /** Fired whenever the payload changes */\n  @Event() nanoPayloadChange: EventEmitter<ValidatorValueStore>;\n\n  /**\n   * Fired on valid form submission.\n   * Note: if you wish to prevent a form from submitting, instead\n   * of using / preventing the native `submit` event, use this event\n   * ```js\n   * ele.addEventListener('nanoSubmit', (e) => {\n   *   e.preventDefault()\n   * })\n   * ```\n   */\n  @Event() nanoSubmit: EventEmitter;\n\n  /** Fire on invalid form submission attempt */\n  @Event() nanoInvalid: EventEmitter;\n\n  // private methods\n\n  @Watch('extraFieldSelector')\n  attachSlotObserver() {\n    if (!!this.mo) return;\n    const mo = (this.mo = new MutationObserver((_entries) => {\n      const form = this.host.querySelector('form');\n      if (form && form !== this.activeForm) this.activeForm = form;\n      this.setupFields();\n    }));\n    mo.observe(this.host, {\n      childList: true,\n      attributes: true,\n      attributeFilter: ['name'],\n      subtree: true,\n    });\n  }\n\n  /** Checks for new `nano-...` fields and adds them to our watch array and value store */\n  private setupFields() {\n    let nanoFields = Array.from(\n      this.host.querySelectorAll<NanoFormEles>(this.nanoFieldSelector)\n    );\n\n    let plainFields = Array.from(\n      this.host.querySelectorAll<PlainFormEles>(this.extraFieldSelector)\n    ).filter((e) => !e.closest(this.nanoFieldSelector));\n\n    nanoFields = nanoFields.filter((f) => !!f.name && !!f.name.length);\n    plainFields = plainFields.filter((f) => !!f.name && !!f.name.length);\n\n    // do we have any currently un-watched fields?\n    if (\n      ![...nanoFields, ...plainFields].filter(\n        (f) => !this.allFields.includes(f)\n      ).length\n    )\n      return;\n\n    // setup the initial store state / refresh on new fields\n    this.nanoFields = nanoFields;\n    this.plainFields = plainFields;\n    this.allFields = [...nanoFields, ...plainFields];\n\n    this.storeToFields(this.allFields);\n\n    this.validateOnChange();\n    this.fieldsToStore(this.allFields);\n    this.nanoPayloadChange.emit(this._store.state);\n  }\n\n  private storeToFields(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (\n        !fieldName.length ||\n        typeof this._store.state[fieldName] === 'undefined'\n      )\n        return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        let cb = field as HTMLNanoCheckboxElement;\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // single radio type control\n          if (this._store.state[fieldName] === cb.value) cb.checked = true;\n          else cb.checked = false;\n        } else if (Array.isArray(this._store.state[fieldName])) {\n          // multiple checkbox like controls\n          if (this._store.state[fieldName].includes(cb.value))\n            cb.checked = true;\n          else cb.checked = false;\n        } else {\n          // single checkbox like control\n          if (this._store.state[fieldName] === cb.value) cb.checked = true;\n          else cb.checked = false;\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        // this can only work if the field is empty rn... a one-time deal\n        if (!ff.files?.length) ff.files = this._store.state[fieldName];\n        return;\n      }\n\n      // default\n      field.value = this._store.state[fieldName];\n    });\n  }\n\n  /** Loops through all `nano-...` fields and extracts their values into our store */\n  private fieldsToStore(fields: Array<NanoFormEles | PlainFormEles>) {\n    fields.forEach((field) => {\n      const fieldName = field.name;\n      if (!fieldName.length) return;\n\n      if (\n        field.tagName === 'NANO-CHECKBOX' ||\n        ['radio', 'checkbox'].includes((field as HTMLInputElement).type)\n      ) {\n        let cb = field as HTMLNanoCheckboxElement;\n\n        if (\n          cb.type === 'radio' ||\n          cb.type === 'segment' ||\n          cb.type === 'segment-pill'\n        ) {\n          // radio type control - only one can be checked\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n        } else if (\n          this.allFields.filter(\n            (f) =>\n              f.name === fieldName &&\n              (f.tagName === 'NANO-CHECKBOX' ||\n                (f as HTMLInputElement).type === 'checkbox')\n          ).length > 1\n        ) {\n          // multiple checkbox type control\n          const currentArr = Array.isArray(this._store.state[fieldName])\n            ? this._store.state[fieldName]\n            : [];\n          if (cb.checked) {\n            // checked\n            if (!this._store.state[fieldName].includes(cb.value)) {\n              this._store.state[fieldName] = [...currentArr, cb.value];\n            }\n          } else {\n            // unchecked\n            this._store.state[fieldName] = currentArr.filter(\n              (v) => v !== cb.value\n            );\n          }\n        } else {\n          // single checkbox - on or off\n          if (cb.checked) this._store.state[fieldName] = cb.value;\n          else this._store.state[fieldName] = '';\n        }\n        return;\n      }\n\n      if (field.tagName === 'NANO-FILE-UPLOAD') {\n        const ff = field as HTMLNanoFileUploadElement;\n        if (!this.fileStateEqual(fieldName, ff))\n          this._store.state[fieldName] = ff.files;\n\n        return;\n      }\n\n      // default\n      this._store.state[fieldName] = field.value;\n    });\n  }\n\n  /**\n   * Tries to ascertain whether the current model\n   * value is the same as the `nano-file-upload` value\n   * @param fieldName - the key to access from the data store\n   * @param field - the nano-file-upload field to assess against\n   * @returns true for equal, false for not equal\n   */\n  private fileStateEqual(\n    fieldName: string | number,\n    field: HTMLNanoFileUploadElement\n  ) {\n    return (\n      JSON.stringify(this._store.state[fieldName]) ===\n        JSON.stringify(field.files) ||\n      this._store.state[fieldName] == field.files\n    );\n  }\n\n  /**\n   * Checks for user defined validations\n   * @param key - current key of the data model to validate\n   * @param newVal - the newly set, incoming value to validate\n   */\n  private async validate(key: string | number, newVal: any) {\n    if (!this.validation) return;\n\n    const res = this.validation(key as string, newVal, this._store.state);\n\n    // no nothing - return\n    if (!res) return;\n\n    // stencil public methods are async\n    // so we must coerce our validation\n    // collection loop into a promise\n    await Promise.all(\n      Object.entries(res).map(async ([key, o]) => {\n        // switch on/off validation messages\n        const field = this.allFields.find((f) => f.name === key);\n        let validityTarget:\n          | PlainFormEles\n          | NanoFormEles\n          | HTMLNanoCheckboxGroupElement = field;\n\n        if (field.tagName === 'NANO-CHECKBOX') {\n          // if we have a checkbox-group, set the validation message there\n          const cbg = field.closest('nano-checkbox-group');\n          validityTarget = cbg || field;\n        }\n\n        if (\n          ((validityTarget as NanoFormEles).validityMessage ||\n            (validityTarget as PlainFormEles).validationMessage) === o.msg &&\n          o.valid\n        ) {\n          // status is now valid - clear the error\n          await this.setFieldError(validityTarget, '');\n        } else if (!o.valid) {\n          // status is invalid. Set the error\n          await this.setFieldError(validityTarget, o.msg);\n        }\n      })\n    );\n  }\n\n  /** Loops through all store entries and checks custom validation */\n  private async validateAllFields() {\n    // This forces our loop to `await` and finish sequentially ... silly async stencil methods\n    await Object.entries(this._store.state).reduce(\n      async (memo, [key, value]) => {\n        await memo;\n        await this.validate(key, value);\n      },\n      undefined as any\n    );\n  }\n\n  /**\n   * Utility to smooth out setting error messages\n   * (it's a different method on `nano-checkbox` 'cos they don't show errors themselves)\n   * @param field\n   * @param msg\n   */\n  private async setFieldError(\n    field: NanoFormEles | HTMLNanoCheckboxGroupElement | PlainFormEles,\n    msg: string\n  ) {\n    if (field['showError'])\n      await (field as Exclude<NanoFormEles, HTMLNanoCheckboxElement>).showError(\n        msg\n      );\n    else if (field['setError'])\n      await (field as HTMLNanoCheckboxElement).setError(msg);\n    else (field as PlainFormEles).setCustomValidity(msg);\n  }\n\n  private scrollToFirstInvalid() {\n    if (!this.scrollToInvalid) return;\n\n    setTimeout(() => {\n      const invalidField = this.validationState.find((f) => !f.valid);\n      if (!invalidField) return;\n      invalidField.fields[0].scrollIntoView({\n        behavior: 'smooth',\n        block: 'nearest',\n      });\n    }, 200);\n  }\n\n  private submitForm() {\n    const nanoSubmit = this.nanoSubmit.emit();\n    if (nanoSubmit.defaultPrevented) return;\n    this.activeForm.submit();\n  }\n\n  // Event handlers\n\n  /**\n   * Fired whenever store values change and potentially checks validity\n   * @param key - the key of the store that's just changed\n   * @param newVal - the incoming, new value\n   */\n  private handleStoreChange = async (key: string | number, newVal: any) => {\n    const found = this.allFields.find((field) => field.name === key);\n\n    // field update has come programmatically (not from ui),\n    // so let's update the underlying ui field\n    if (\n      (found &&\n        found.tagName === 'NANO-FILE-UPLOAD' &&\n        !this.fileStateEqual(key, found as HTMLNanoFileUploadElement)) ||\n      (found.tagName !== 'NANO-FILE-UPLOAD' && found.value !== newVal)\n    ) {\n      this.storeToFields([found]);\n    }\n\n    if (this.validateOn === 'dirty' && this.dirty) {\n      this.internalValidate = true;\n      await this.validateAllFields();\n      this._valid = this.activeForm.checkValidity();\n      this.internalValidate = false;\n    }\n    this.nanoPayloadChange.emit(this._store.state);\n  };\n\n  /**\n   * Handles nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handleFieldChange = (ev: NanoFormEvent) => {\n    if (!this.nanoFields.includes(ev.target)) return;\n    this._dirty = true;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles non-nano field value changes and passes to store\n   * @param ev - the incoming change event\n   */\n  private handlePlainFieldChange = (ev: PlainFormEvent) => {\n    if (!this.plainFields.includes(ev.target)) return;\n    this.fieldsToStore([ev.target]);\n  };\n\n  /**\n   * Handles default field validation events\n   * @param ev - the invalid event\n   */\n  private handleFormInvalid = async (ev: Event & { target: PlainFormEles }) => {\n    // if it's a non-nano field, we'll let default html5 validation do it's thing\n    if (!this.plainFields.includes(ev.target)) {\n      ev.preventDefault();\n    }\n\n    this._valid = false;\n\n    // whenever `checkValidity` is called, this handler is in-turn called.\n    // this flag is used to stop infinite loops\n    if (this.internalValidate) return;\n\n    // a submit must have happened to if 'submitThenDirty' turn on 'dirty' checking now\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n\n    await this.validateAllFields();\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    // kinda insane...but if we're only validating on submit, then if the form is currently\n    // in an invalid state, when submitting, it will fire an invalid event and not\n    // submit the form. So let's test to make sure it is really invalid, and submit if not\n    if (this.validateOn === 'submit') {\n      if (this._valid) {\n        this.submitForm();\n        return;\n      }\n    }\n\n    this.scrollToFirstInvalid();\n    this.nanoInvalid.emit();\n  };\n\n  /**\n   * stops default form submission, checks if valid, then submits manually\n   * @param e - a submit event from the nested form element\n   */\n  private handleSubmit = async (e: Event) => {\n    e.preventDefault();\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n    this.submitted = true;\n    await this.validateAllFields();\n\n    this.internalValidate = true;\n    this._valid = this.activeForm.checkValidity();\n    this.internalValidate = false;\n\n    if (!this._valid) {\n      this.scrollToFirstInvalid();\n      return;\n    }\n    this.submitForm();\n  };\n\n  connectedCallback(): void {\n    this.userForm = this.host.querySelector('form');\n    this._store = createStore<ValidatorValueStore>({});\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.setupFields();\n      this.attachSlotObserver();\n\n      this.host.addEventListener('nanoChange', this.handleFieldChange);\n      this.host.addEventListener('input', this.handlePlainFieldChange);\n      this.host.addEventListener('change', this.handlePlainFieldChange);\n      this.host.addEventListener('submit', this.handleSubmit);\n      this._store.on('set', this.handleStoreChange);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n\n    this.host.removeEventListener('nanoChange', this.handleFieldChange);\n    this.host.removeEventListener('input', this.handlePlainFieldChange);\n    this.host.removeEventListener('change', this.handlePlainFieldChange);\n    this.host.removeEventListener('submit', this.handleSubmit);\n    this._store.reset();\n\n    if (this.activeForm)\n      this.activeForm.removeEventListener(\n        'invalid',\n        this.handleFormInvalid,\n        true\n      );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.userForm && <slot />}\n        {!this.userForm && (\n          <form ref={(f) => (this.activeForm = f)}>\n            <slot />\n          </form>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-32900c91.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,c as i,f as e,h as s,e as n,g as o}from"./p-b5c33aff.js";import{r as a}from"./p-289aa03f.js";import{d as r}from"./p-1da5f8df.js";import{g as l}from"./p-b619500f.js";import{g as h}from"./p-8971a867.js";import{g as d}from"./p-74a7fc4f.js";const c=":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{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{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}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";function p(t){let i;if(t.id){i=document.querySelector(`label[for='${t.id}']`)}if(!i){i=t.closest("label")}return i}let f=0;let u=class{constructor(e){t(this,e);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.isNanoInput=false;this.typeToSelect="";this.listId=`nano-datalist-${f++}`;this.isFiltered=false;this.shouldFocus=false;this._allOptEles=[];this.actvOptEles=[];this.canOpen=true;this.optionIds=[];this.selected=[];this._dropDownConfig={skidding:-1};this.options=[];this.type="input";this.open=false;this.disableFilter=false;this.disabled=false;this.optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);a((()=>this.inputChange()));if(this.type==="select")this.shouldOpen=false};this.handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};this.inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};this.inputKeydown=t=>{const i=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(i.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};this.optionKeyDown=t=>{const i=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(i.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const e=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||e.includes(t.key))){this.connectedInput.focus()}};this.inputChange=r(this.inputChange.bind(this),50)}get allOptEles(){return this._allOptEles}set allOptEles(t){var i;this._allOptEles=t;if((i=this.connectedInput)===null||i===void 0?void 0:i.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig=Object.assign(Object.assign({},this._dropDownConfig),t)}get activeOptions(){return this.allOptEles}openWatcher(){e((()=>{this.nanoDropdown.open=this.open;this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}async watchInputChange(){let t;if(t=this.host.closest("nano-input")){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(this.input instanceof HTMLElement){this.connectedInput=this.input}}manageSlotChangeListener(){var t;if(!this.host)return;if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if((t=this.options)===null||t===void 0?void 0:t.length){if(!!this.mo){this.mo.disconnect();this.mo=undefined}e((()=>{var t;this.allOptEles=this.options.flatMap(((t,i)=>{if(t.value||t.label){const e=Object.assign(document.createElement("nano-option"),{label:t.label,value:t.value,ariaPosinset:i,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+i,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(e);return e}}));if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=[...this.allOptEles]}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let i="both";let e=false;switch(this.type){case"selctMulti":break;case"select":i="list";e=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig=Object.assign(Object.assign({},this.dropDownConfig),t);this.connectedInput.setAttribute("aria-autocomplete",i);this.connectedInput.readOnly=e}manageInputEvents(t,i){var s;if(!!i){const t=i.closest("nano-input");if(t){t.removeEventListener("nanoChange",this.inputChange)}i.removeEventListener("change",this.inputChange);i.removeEventListener("click",this.inputClick);i.removeEventListener("keydown",this.inputKeydown);i.removeEventListener("input",this.inputChange);this.inputLabel=null;e((()=>{i.removeAttribute("role");i.removeAttribute("aria-expanded");i.removeAttribute("aria-controls");i.removeAttribute("aria-owns");i.removeAttribute("aria-haspopup");i.removeAttribute("aria-autocomplete");i.removeAttribute("autocomplete")}))}if(!!t){const i=t.closest("nano-input");if(i){i.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=((s=t===null||t===void 0?void 0:t.labels)===null||s===void 0?void 0:s.item(0))||p(t);e((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){var t;let i=0;const s=((t=this.connectedInput)===null||t===void 0?void 0:t.value)||"";const n=[];e((()=>{this.allOptEles.forEach(((t,e)=>{if(this.actvOptEles.includes(t)){i++;t.setAttribute("aria-posinset",i+"");t.setAttribute("aria-setsize",this.actvOptEles.length+"");t.hidden=false;this.isSelected(t,s)}else{t.removeAttribute("aria-posinset");t.removeAttribute("aria-setsize");t.hidden=true;t.selected=false}t.id=this.listId+"-option-"+e;n.push(t.id)}));this.optionIds=n}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}isSelected(t,i){if(i===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){var i;let e;if(this.selected.includes(t.value)){this.selected=this.selected.filter((i=>i!==t.value));e=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];e=this.nanoSelect.emit(t)}if(!e.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const e=new window.Event("change");(i=this.connectedInput)===null||i===void 0?void 0:i.dispatchEvent(e)}}setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const i=this.allOptEles.find((i=>i.value.trim().length>0&&!i.disabled&&(t(i.textContent)||t(i.value)||t(i.label)||t(i.filterMeta))));if(i)this.changeInputValue(i)}processSlottedContent(){a((()=>{var t;this.allOptEles=Array.from(this.host.querySelectorAll("nano-option"));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(((t=this.connectedInput)===null||t===void 0?void 0:t.value.length)&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const i=t.trim().toLowerCase();let e=false;const s=[];const n=t=>t.toLowerCase().indexOf(i)>-1;this.allOptEles.forEach((i=>{if((t===i.value||t===i.label)&&this.type!=="selctMulti"){i.selected=true;e=true}else this.isSelected(i,t)}));this.allOptEles.forEach((t=>{if(!i.length||e){s.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){s.push(t)}}));this.isFiltered=i.length&&!e;this.actvOptEles=s}connectedCallback(){this.watchInputChange()}componentDidLoad(){this.manageSlotChangeListener();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}render(){return s(n,{role:"listbox","aria-owns":this.optionIds.join(" "),"aria-label":"Select options from the list below"},s("nano-dropdown",Object.assign({},this.dropDownConfig,{ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:t=>this.open=false}),s("nano-menu",{hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t},s("slot",{name:"list-top"}),!this.options.length&&s("slot",null),!!this.options.length&&s("slot",{name:"internal-opts"}),s("slot",{name:"list-bottom"})),s("nano-menu",{type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},s("slot",{name:"no-result"})),!!this.actvOptEles&&s("div",{"aria-live":"polite",role:"status",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}get host(){return o(this)}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["manageSlotChangeListener"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};u.style=c;const g=":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{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);-ms-scroll-chaining:none;overscroll-behavior:none;min-width:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:block}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)){padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}";const b=!!document.head.attachShadow;let m=class{constructor(e){t(this,e);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7);this.ignoreMouseEvents=false;this.typeToSelect="";this._hasFocus=false;this.type="menu";this.handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};this.handleClick=t=>{const i=t.target;const e=i.closest("nano-nav-item");if(e&&!e.disabled){this.nanoSelect.emit(e)}};this.handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":const i=this.getItems;const e=this.activeItem;let s=i.indexOf(e);if(i.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"||t.key==="PageUp"){s=0}else if(t.key==="End"||t.key==="PageDown"){s=i.length-1}if(s<0)s=i.length-1;if(s>i.length-1)s=0;this.setActiveFocusItem(i[s]);if(i[s])i[s].scrollIntoView({block:"nearest"});return}break}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const i=this.getItems;for(const t of i){const i=t.shadowRoot.querySelector("slot:not([name])");const e=h(i).toLowerCase().trim();if(e.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};this.handleMouseOver=t=>{const i=t.target;const e=i.closest("nano-nav-item")||i.closest("nano-option");if(e&&!this.ignoreMouseEvents){this.setActiveFocusItem(e)}}}get hasFocus(){return this._hasFocus}async setFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.focus)this.menu.focus({preventScroll:true})}async removeFocus(){var t;if((t=this.menu)===null||t===void 0?void 0:t.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;let i=this.el.querySelectorAll("nano-nav-item.secondary-open");if(i.length){const e=i[i.length-1];t=Array.from(e.querySelectorAll("nano-nav-item, nano-option"))}else{t=l(this.el,"nano-nav-item, nano-option","slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=d();return this.getItems.find((i=>i.getAttribute("tabindex")==="0"||i===t||i.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,i=true){const e=this.getItems;let s=!t||t.disabled?e.find((t=>t.selected))||e[0]:t;e.filter((t=>t.tagName.toLowerCase()==="nano-option")).map((t=>t.setAttribute("tabindex",t===s?"0":"-1")));if(!i)return;if(s){s.setFocus?s.setFocus():s.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const i=t;let e;if(i.key){if(i.key!=="Tab")return;e=d()&&d().closest(this.el.tagName.toLowerCase())===this.el}else e=!!t.composedPath().find((t=>t===this.el));if(!e){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}render(){return s(n,{class:{legacy:!b}},s("div",{onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,role:this.type,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1},s("slot",null)))}get el(){return o(this)}};m.style=g;const v=":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;background:var(--bg);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__start ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-right:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__start ::slotted(:last-child){margin-right:unset;-webkit-margin-end:0.5em;margin-inline-end:0.5em}}.option__end{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.option__end ::slotted(nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-left:0.5em}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.option__end ::slotted(:first-child){margin-left:unset;-webkit-margin-start:0.5em;margin-inline-start:0.5em;}}.option__check{visibility:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0.6em;top:calc(50% - 0.6em);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";let w=0;let x=class{constructor(e){t(this,e);this.nanoSelect=i(this,"nanoSelect",7);this.optId=`nano-option-${w++}`;this.hasFocus=false;this.value="";this.label="";this.selected=false;this.disabled=false;this.filterMeta="";this.handleClick=r(this.handleClick.bind(this),5)}valueChanged(){if(!this.value||!this.value.length)this.value=this.labelContent}labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return l(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return s(n,{role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},s("div",{onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},s("div",{part:"check-icon",class:"option__check"},s("slot",{name:"check-icon"},s("nano-icon",{name:"light/check","aria-hidden":"true"}))),s("div",{part:"start",class:"option__start"},s("slot",{name:"start"})),s("div",{part:"label",class:"option__label"},s("slot",null,this.label||this.value)),s("div",{part:"end",class:"option__end"},s("slot",{name:"end"}))))}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};x.style=v;export{u as nano_datalist,m as nano_menu,x as nano_option};
+//# sourceMappingURL=p-32900c91.entry.js.map