@nanoporetech-digital/components 4.9.4 → 5.0.0

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabCss","id","Tab","this","tabId","handleCloseClick","nanoTabClose","emit","handleCloseKeydown","e","key","async","tab","focus","preventScroll","blur","render","h","Host","host","part","ref","el","class","nanotab","active","disabled","closable","role","tabindex","label","iconName","onClick","onKeyDown","tabIndex"],"sources":["./src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","./src/components/tabs/tab.tsx"],"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 --focus-shadow: Defaults to #{$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgb(var(--bg-rgb) / 10%);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgb(var(--bg-rgb) / 70%);\n\n  * @prop --text-color: Defaults to #{map.get($colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n  */\n\n:host {\n  --focus-shadow: #{$control-focus-style};\n  --padding: 0.75rem 1rem;\n  --bg-rgb: #{$layer-bg-color-rgb};\n  --active-bg: rgb(var(--bg-rgb) / 100%);\n  --inactive-bg: rgb(var(--bg-rgb) / 70%);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get($colors, blue)};\n  --disabled-text-color: #{map.get($colors, darkgrey)};\n  --active-text-color: #{map.get($colors, darkblue)};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{map.get($colors, lightblue)};\n  --tab-indicator-size: 5px;\n\n  display: inline-block;\n}\n\n:host([direction='vertical']) {\n  --padding: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-block-start: var(--tab-indicator-size);\n    border-inline-end: solid var(--tab-divider-size) var(--tab-divider-color);\n\n    &.nanotab--active {\n      margin-block-start: 0;\n      border-block-start:\n        solid var(--tab-indicator-size)\n        var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include text-inherit();\n\n  margin-inline-end: var(--tab-spacing);\n  padding: var(--padding);\n  display: flex;\n  block-size: 100%;\n  inline-size: auto;\n  background: var(--inactive-bg);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  user-select: none;\n  cursor: pointer;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  :host(:last-of-type) & {\n    margin-inline-end: 0;\n  }\n\n  &:hover:not(.tab--disabled) {\n    text-shadow: 0 0 0.01px var(--text-color);\n  }\n\n  &:focus {\n    outline: none;\n    outline-style: none;\n    box-shadow: none;\n    border-color: transparent;\n  }\n\n  &:focus:not(.nanotab--disabled) {\n    box-shadow: var(--focus-shadow) inset;\n  }\n\n  &--disabled {\n    background: rgb(var(--disabled-bg-rgb) / 100%);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &__close-button {\n    margin-inline-start: #{$spacing-small};\n    appearance: none !important;\n\n    --padding: #{$spacing-xsmall} 0 #{$spacing-xsmall} #{$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  private handleCloseKeydown = (e: KeyboardEvent) => {\n    if (e.key === ' ') this.handleCloseClick();\n  };\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/times\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              onKeyDown={this.handleCloseKeydown}\n              tabIndex={-1}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":";;;gEAAA,MAAMA,EAAS,s0FCYf,IAAIC,EAAK,E,MAWIC,EAAG,M,oEACNC,KAAAC,MAAQ,cAAcH,IAgCtBE,KAAAE,iBAAmB,KACzBF,KAAKG,aAAaC,MAAM,EAGlBJ,KAAAK,mBAAsBC,IAC5B,GAAIA,EAAEC,MAAQ,IAAKP,KAAKE,kBAAkB,E,WA/BX,G,YAGC,M,cAGE,M,cAGjB,K,CAOnBM,iBACER,KAAKS,IAAIC,MAAM,CAAEC,cAAe,M,CAKlCH,oBACER,KAAKS,IAAIG,M,CAWXC,SACE,OACEC,EAACC,EAAI,CAACjB,GAAIE,KAAKgB,KAAKlB,IAAME,KAAKC,OAC7Ba,EAAA,OACEG,KAAK,OACLC,IAAMC,GAAQnB,KAAKS,IAAMU,EACzBC,MAAO,CACLC,QAAS,KACT,kBAAmBrB,KAAKsB,OACxB,oBAAqBtB,KAAKuB,SAC1B,oBAAqBvB,KAAKwB,UAE5BC,KAAK,MAAK,gBACKzB,KAAKuB,SAAW,OAAS,QAAO,gBAChCvB,KAAKsB,OAAS,OAAS,QACtCI,SAAU1B,KAAKuB,WAAavB,KAAKsB,OAAS,KAAO,KAEjDR,EAAA,aACCd,KAAKwB,UACJV,EAAA,oBACEa,MAAM,iBACNC,SAAS,cACTR,MAAM,wBACNS,QAAS7B,KAAKE,iBACd4B,UAAW9B,KAAKK,mBAChB0B,UAAW,K"}

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

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as n,c as a,h as e,a as r,g as s}from"./p-f6a8467a.js";import{c as t}from"./p-ee045579.js";import{c as i}from"./p-411bb8f1.js";import{a as o}from"./p-9746b0a5.js";const h=(n,a,e,r)=>{let s=n.querySelector("input.aux-input");if(!s){s=n.ownerDocument.createElement("input");s.type="hidden";s.classList.add("aux-input");n.appendChild(s)}s.disabled=r;s.name=a;s.value=e||""};const c='.sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;-webkit-margin-start:-1.08em;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}';const g=class{constructor(e){n(this,e);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.clampBounds=n=>t(this.min,n,this.max);this.ensureValueInBounds=n=>{if(this.dualKnobs){return{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}}else{return this.clampBounds(n)}};this.handleKeyboard=(n,a)=>{let e=this.step;e=e>0?e:1;e=e/(this.max-this.min);if(!a){e*=-1}if(n==="A"){this.ratioA=t(0,this.ratioA+e,1)}else{this.ratioB=t(0,this.ratioB+e,1)}this.updateValue()};this.onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.nanoBlur.emit();this.emitStyle()}};this.onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.nanoFocus.emit();this.emitStyle()}};this.ratioA=0;this.ratioB=0;this.pressedKnob=undefined;this.color=undefined;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0}debounceChanged(){this.nanoChange=o(this.nanoChange,this.debounce)}minChanged(){if(!this.noUpdate){this.updateRatio()}}maxChanged(){if(!this.noUpdate){this.updateRatio()}}disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}valueChanged(n){if(!this.noUpdate){this.updateRatio()}n=this.ensureValueInBounds(n);this.nanoChange.emit({value:n})}connectedCallback(){this.updateRatio();this.debounceChanged();this.disabledChanged()}disconnectedCallback(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}}async componentDidLoad(){const n=this.rangeSlider;if(n){this.gesture=(await import("./p-bb07c3d0.js")).createGesture({el:n,gestureName:"range",gesturePriority:100,threshold:0,onStart:n=>this.onStart(n),onMove:n=>this.onMove(n),onEnd:n=>this.onEnd(n)});this.gesture.enable(!this.disabled)}}getValue(){const n=this.value||0;if(this.dualKnobs){if(typeof n==="object"){return n}return{lower:0,upper:n}}else{if(typeof n==="object"){return n.upper}return n}}emitStyle(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})}onStart(n){const a=this.rect=this.rangeSlider.getBoundingClientRect();const e=n.currentX;let r=t(0,(e-a.left)/a.width,1);if(document.dir==="rtl"){r=1-r}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-r)<Math.abs(this.ratioB-r)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)}onMove(n){this.update(n.currentX)}onEnd(n){this.update(n.currentX);this.pressedKnob=undefined}update(n){const a=this.rect;let e=t(0,(n-a.left)/a.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=d(b(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()}get valA(){return b(this.ratioA,this.min,this.max,this.step)}get valB(){return b(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0}get ratioUpper(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA}updateRatio(){const n=this.getValue();const{min:a,max:e}=this;if(this.dualKnobs){this.ratioA=d(n.lower,a,e);this.ratioB=d(n.upper,a,e)}else{this.ratioA=d(n,a,e)}}updateValue(){this.noUpdate=true;const{valA:n,valB:a}=this;this.value=!this.dualKnobs?n:{lower:Math.min(n,a),upper:Math.max(n,a)};this.noUpdate=false}setFocus(n){if(this.el.shadowRoot){const a=this.el.shadowRoot.querySelector(n==="A"?".range-knob-a":".range-knob-b");if(a){a.focus()}}}render(){const{min:n,max:a,step:s,el:t,handleKeyboard:o,pressedKnob:c,disabled:g,pin:b,ratioLower:u,ratioUpper:p}=this;const v=`${u*100}%`;const k=`${100-p*100}%`;const f=document;const m=f.dir==="rtl";const x=m?"right":"left";const w=m?"left":"right";const y=n=>({[x]:n[x]});const z={[x]:v,[w]:k};const A=[];if(this.snaps&&this.ticks){for(let e=n;e<=a;e+=s){const r=d(e,n,a);const s={ratio:r,active:r>=u&&r<=p};s[x]=`${r*100}%`;A.push(s)}}h(t,this.name,JSON.stringify(this.getValue()),g);return e(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:i(this.color,{"range-disabled":g,"range-pressed":c!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},e("div",{class:"range-wrap"},e("slot",{name:"start"}),e("div",{class:"range-slider",ref:n=>this.rangeSlider=n},A.map((n=>e("span",{style:y(n),role:"presentation",class:{"range-tick":true,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),e("div",{class:"range-bar",role:"presentation",part:"bar"}),e("div",{class:"range-bar range-bar-active",role:"presentation",style:z,part:"bar-active"}),l(m,{knob:"A",pressed:c==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:g,handleKeyboard:o,min:n,max:a}),this.dualKnobs&&l(m,{knob:"B",pressed:c==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:g,handleKeyboard:o,min:n,max:a})),e("slot",{name:"end"})))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const l=(n,{knob:a,value:r,ratio:s,min:t,max:i,disabled:o,pressed:h,pin:c,handleKeyboard:g})=>{const l=n?"right":"left";const b=()=>{const n={};n[l]=`${s*100}%`;return n};return e("div",{onKeyDown:n=>{const e=n.key;if(e==="ArrowLeft"||e==="ArrowDown"){g(a,false);n.preventDefault();n.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){g(a,true);n.preventDefault();n.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":a==="A","range-knob-b":a==="B","range-knob-pressed":h,"range-knob-min":r===t,"range-knob-max":r===i},style:b(),role:"slider",tabindex:o?-1:0,"aria-valuemin":t,"aria-valuemax":i,"aria-disabled":o?"true":null,"aria-valuenow":r},c&&e("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(r)),e("div",{class:"range-knob",role:"presentation",part:"knob"}))};const b=(n,a,e,r)=>{let s=(e-a)*n;if(r>0){s=Math.round(s/r)*r+a}return t(a,s,e)};const d=(n,a,e)=>t(0,(n-a)/(e-a),1);g.style=c;export{g as nano_range};
-//# sourceMappingURL=p-d792f692.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["renderHiddenInput","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","rangeCss","Range","this","noUpdate","hasFocus","clampBounds","clamp","min","max","ensureValueInBounds","dualKnobs","lower","upper","handleKeyboard","knob","isIncrease","step","ratioA","ratioB","updateValue","onBlur","nanoBlur","emit","emitStyle","onFocus","nanoFocus","debounceChanged","nanoChange","debounceEvent","debounce","minChanged","updateRatio","maxChanged","disabledChanged","gesture","enable","valueChanged","connectedCallback","disconnectedCallback","destroy","undefined","async","rangeSlider","import","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","getValue","nanoStyle","interactive","detail","rect","getBoundingClientRect","currentX","ratio","left","width","document","dir","pressedKnob","Math","abs","setFocus","update","snaps","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","shadowRoot","knobEl","focus","render","pin","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","ticks","active","push","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","color","ref","rangeEl","map","style","role","part","renderKnob","pressed","knobStyle","onKeyDown","key","preventDefault","stopPropagation","tabindex","round"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  let input = container.querySelector(\n    'input.aux-input'\n  ) as HTMLInputElement | null;\n  if (!input) {\n    input = container.ownerDocument!.createElement('input');\n    input.type = 'hidden';\n    input.classList.add('aux-input');\n    container.appendChild(input);\n  }\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  ::slotted([slot='start']) {\n    margin-inline: 0 14px;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n\n  ::slotted([slot='end']) {\n    margin-inline: 14px 0;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  border-radius: var(--bar-border-radius);\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inset-inline-start: 0;\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n\n  :host(.range-snaps) & {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n}\n\n.range-bar-active {\n  inset-block-end: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  border-radius: var(--knob-border-radius);\n  inset-block-start: calc(50% - var(--knob-size) / 2);\n  inset-inline-start: calc(50% - var(--knob-size) / 2);\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n  inset-inline-start: 0;\n  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    inset-block-start: 0.25em;\n    inset-inline-start: 50%;\n    margin-inline-start: -1.08em;\n    border-radius: 50% 50% 50% 0;\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"],"mappings":"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"}