@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/esm/nano-intersection-observe.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-intersection-observe.entry.js","mappings":"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","names":[],"sources":["src/components/intersection-observe/intersection-observe.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  State,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { findScrollParent } from '../../utils/scroll-parent';\n\n/**\n * A thin, declarative interface to the IntersectionObserver API.\n * @slot - Main slot for any content.\n */\n@Component({\n  tag: 'nano-intersection-observe',\n  styles: `nano-intersection-observe { display: contents }`,\n  shadow: true,\n})\nexport class IntersectionObserve implements ComponentInterface {\n  private io: IntersectionObserver;\n  private _root: Element | Document;\n  private _threshold: number | number[];\n\n  @State() defaultSlot: HTMLSlotElement;\n\n  get observerOptions() {\n    const opts: IntersectionObserverInit = {};\n\n    if (this._root) opts.root = this._root;\n    if (this.rootMargin) opts.rootMargin = this.rootMargin;\n    if (this.threshold) opts.threshold = this._threshold;\n\n    return opts;\n  }\n\n  get elements(): Element[] | undefined {\n    const slotted = this.defaultSlot?.assignedElements() || [];\n\n    return slotted.flatMap((el) => {\n      const style = getComputedStyle(el);\n      if (style.display.includes('contents')) return Array.from(el.children);\n      else return el;\n    });\n  }\n\n  @Element() host: HTMLNanoIntersectionObserveElement;\n\n  /** The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.\n   * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */\n  @Prop() root: globalThis.Element | 'root' | 'auto' = 'auto';\n\n  @Watch('root')\n  handleRootChange() {\n    if (!this.root) {\n      this._root = undefined;\n      this.removeIO();\n      return;\n    }\n\n    let newRoot;\n\n    if (this.root === 'auto') {\n      // try to find nearest scrolling parent\n      newRoot = findScrollParent(this.host);\n    } else if (this.root === 'root') {\n      newRoot = undefined;\n    } else {\n      // root is set explicitly\n      newRoot = this.root;\n    }\n\n    // if it's the document - unset as that's IO's default\n    if (newRoot === document.documentElement) newRoot = undefined;\n    // if new root is what we already have - ignore\n    if (newRoot === this._root) return;\n\n    // cache and setup io\n    this._root = newRoot;\n    this.addIO();\n  }\n\n  /**\n   * Margin around the root. Can be similar to CSS margins property, e.g. \"10px 20px 30px 40px\" (top, right, bottom, left).\n   * The values can be percentages. This set of values serves to grow or shrink each side of the root element's\n   * bounding box before computing intersections. Defaults to zeros. */\n  @Prop() rootMargin?: string;\n\n  /**\n   * Indicate at what percentage of the target's visibility the observer's callback should be executed.\n   * If you only want to detect when visibility passes the 50% mark, you can use a value of '0.5'.\n   * If you want the callback to run every time visibility passes another '25%',\n   * you would specify a string of values (separated by ',') array '0, 0.25, 0.5, 0.75, 1'.\n   * A value of '1.0' means that the threshold isn't considered passed until every pixel is visible.\n   */\n  @Prop() threshold?: string;\n\n  @Watch('threshold')\n  handleThresholdChange() {\n    if (!this.threshold) {\n      this._threshold = undefined;\n      return;\n    }\n\n    if (this.threshold.includes(',')) {\n      this._threshold = this.threshold\n        .split(',')\n        .map((numStr) => Number(numStr));\n      return;\n    }\n\n    this._threshold = Number(this.threshold);\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersectionChange!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  /** A resize break point is switched on or off */\n  @Event() nanoNotIntersecting!: EventEmitter<IntersectionObserverEntry>;\n\n  private ioCallback: IntersectionObserverCallback = (entries) => {\n    entries.forEach((entry) => {\n      this.nanoIntersectionChange.emit(entry);\n      if (entry.isIntersecting) this.nanoIntersecting.emit(entry);\n      if (!entry.isIntersecting) this.nanoNotIntersecting.emit(entry);\n    });\n  };\n\n  private handleSlotChange = () => {\n    this.addIO();\n  };\n\n  @Watch('defaultSlot')\n  addIO() {\n    if (!window['IntersectionObserver'] || !this.elements?.length) return;\n    if (this.io) this.removeIO();\n\n    const io = (this.io = new IntersectionObserver(\n      this.ioCallback,\n      this.observerOptions\n    ));\n    this.elements?.forEach((el) => {\n      io.observe(el);\n    });\n  }\n\n  private removeIO() {\n    if (!this.io) return;\n\n    this.io.disconnect();\n    this.io = undefined;\n  }\n\n  connectedCallback(): void {\n    this.handleThresholdChange();\n    this.handleRootChange();\n  }\n\n  disconnectedCallback(): void {\n    this.removeIO();\n    this.root = this._root = undefined;\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-intersection-observe\">\n        <slot\n          ref={(slot) => (this.defaultSlot = slot as HTMLSlotElement)}\n          onSlotchange={this.handleSlotChange}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-menu-drawer.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-menu-drawer.entry.js","mappings":"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","names":[],"sources":["src/components/menu-drawer/menu-drawer.scss?tag=nano-menu-drawer&encapsulation=shadow","src/components/menu-drawer/menu-drawer.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  --padding-top: 13px;\n  --padding-end: 12px;\n  --padding-bottom: 13px;\n  --padding-start: 12px;\n  --icon-size: 19px;\n  --font-size: 11px;\n  --global-nav-height: 79px;\n  --bg-color: #001a21;\n  --bg-color-hover: rgb(28 62 72 / 80%);\n  --bg-color-selected: #274048;\n  --bg-color-focus: rgb(28 62 72 / 80%);\n  --focus-outline: none;\n  --content-color: #{map.get(tokens.$colors, white)};\n  --secondary-bg-color: rgb(28 62 72);\n\n  @include mx.text-inherit();\n\n  display: block;\n  z-index: 1;\n  background: var(--bg-color);\n\n  ::slotted(.nano-nav-item) {\n    --secondary-padding-top: var(--global-nav-height);\n    --nano-icon-size: var(--icon-size);\n\n    color: var(--content-color);\n    font-size: var(--font-size);\n    // font-weight: bold;\n    text-decoration: none;\n    box-sizing: border-box;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n}\n\n:host(.hide) {\n  display: none;\n}\n\n:host(.has-global-nav) {\n  .content-wrap {\n    padding-block-start: var(--global-nav-height);\n    margin-block-start: calc(var(--global-nav-height) * -1);\n  }\n}\n\n.container {\n  inset-inline-end: auto;\n  flex: 0 0 calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  background: var(--bg-color);\n  color: var(--content-color);\n  z-index: 1;\n  inline-size: calc((var(--padding-end, 1em) * 2) + var(--icon-size));\n  block-size: 100%;\n}\n\n:host(.open) {\n  .container {\n    inline-size: auto;\n  }\n}\n\n:host(:not(.loading)) {\n  .container {\n    transition: inline-size 0.3s ease;\n  }\n}\n\n.content-wrap {\n  inset-inline-start: 0;\n  inset-block-start: 0;\n  inline-size: inherit;\n  max-inline-size: inherit;\n  background: var(--bg-color);\n  color: map.get(tokens.$colors, white);\n  position: sticky;\n  font-size: var(--icon-size);\n  line-height: 1;\n  display: flex;\n  min-block-size: calc(100vh - 79px);\n  min-block-size: calc((var(--vh, 1vh) * 100) - 79px);\n  z-index: 1;\n}\n\n.content {\n  inline-size: auto;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  background: var(--bg-color);\n  flex: 1;\n\n  &::after {\n    content: '';\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline: 0;\n    background: var(--bg-color);\n    z-index: -1;\n    block-size: 100vh;\n  }\n}\n\n.collapse-btn {\n  background: var(--bg-color-selected);\n  border: none;\n  color: inherit;\n  font-size: var(--icon-size);\n  margin-block: var(--padding-top) var(--padding-bottom);\n  margin-inline: calc(var(--padding-start) / 2) 0;\n  border-radius: 4px;\n  padding-block: 6px;\n  padding-inline: 5px;\n  display: flex;\n  align-content: center;\n  inline-size: 30px;\n  flex: 0 0 auto;\n\n  .nano-icon {\n    font-size: var(--icon-size);\n    transition: 0.2s transform ease-in-out;\n    transform: translateZ(0) rotate(0deg);\n\n    :host(.open) & {\n      transform: translateZ(0) rotate(180deg);\n    }\n  }\n}\n\n.foot {\n  margin-block-start: auto;\n}\n\n.measure-ele {\n  block-size: 1px;\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  writeTask,\n  State,\n  Element,\n  Watch,\n  Listen,\n  Build,\n} from '@stencil/core';\nimport { closestElement } from '../../utils/dom';\nimport { NavItemEventDetail } from '../nav-item/nav-item-interface';\nimport { transformTag, h } from '../../utils/renderer';\n\n/**\n * Menu drawer - digital specific navigation strip designed to be open (default) or closed.\n * Shows menu item logos only on minimised, expands to show entire menu item.\n * Used in conjunction with the [Globla-Nav](/story/compounds-global-nav) element -> it should be a direct descendent.\n * Only one nano-menu-drawer element should be present on any page. It is fixed to a side on larger screens and items are added to the global nav 'burger' on smaller screens.\n * @slot foot - nav items to be placed at the bottom of the drawer\n * @slot - default slot for nav items\n */\n@Component({\n  tag: 'nano-menu-drawer',\n  styleUrl: 'menu-drawer.scss',\n  shadow: true,\n})\nexport class MenuDrawer {\n  private containerDiv: HTMLDivElement;\n  private contentDiv: HTMLElement;\n  private measureEle: HTMLElement;\n  private globalNav: HTMLNanoGlobalNavElement;\n  private children: Array<{ slot: string; element: HTMLNanoNavItemElement }> =\n    [];\n  private io: IntersectionObserver;\n  private currHeight: number = window.innerHeight;\n\n  @Element() private el: HTMLNanoMenuDrawerElement;\n\n  @State() reset: boolean = false;\n  @State() widthOk: boolean = true;\n  @State() heightOk: boolean = true;\n  @State() isLoading: boolean = true;\n  @State() hide: boolean = false;\n\n  /**\n   * Set the initial menu drawer open or closed\n   */\n  @Prop({ mutable: true }) open: boolean = true;\n\n  /**\n   * Save open state to localStorage\n   */\n  @Prop() saveState: boolean = true;\n\n  /**\n   * Screen width to hide the menu drawer and move the items into the nano-global-nav\n   */\n  @Prop() hideWidth: number = 576;\n\n  /**\n   * Should element hide and move items into the nano-global-nav when items are cut off\n   * (this will only work when nano-menu-drawer is displayed at full screen)\n   */\n  @Prop() hideHeight: boolean = true;\n\n  @Listen('nanoOpen')\n  @Listen('nanoClose')\n  cancelNavItemEvents(ev: CustomEvent) {\n    if (!(ev.detail as NavItemEventDetail).secondaryMenu) return;\n    ev.stopPropagation();\n  }\n\n  @Watch('open')\n  openChange() {\n    if (this.saveState)\n      localStorage.setItem('nanoMenuDrawerOpen', this.open.toString());\n    if (this.containerDiv) {\n      if (this.open)\n        writeTask(\n          () =>\n            (this.containerDiv.style.width = this.contentDiv.scrollWidth + 'px')\n        );\n      else writeTask(() => (this.containerDiv.style.width = null));\n    }\n  }\n\n  @Watch('widthOk')\n  widthChange() {\n    if (this.widthOk) this.moveItemsToDrawer();\n    else this.moveItemsToGlobalNav();\n  }\n\n  @Watch('hideHeight')\n  hideHeightChange() {\n    if (this.hideHeight && !this.io) this.attachIO();\n    else if (!this.hideHeight && this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n  }\n\n  private moveItemsToGlobalNav() {\n    const currNavItems = this.el.querySelectorAll<HTMLNanoNavItemElement>(\n      transformTag('nano-nav-item')\n    );\n    // dimensions not cool - move items out of element and into global nav\n    currNavItems.forEach((element) => {\n      this.children.push({\n        slot: element.getAttribute('slot'),\n        element: element,\n      });\n      element.setAttribute('slot', 'overflow');\n      element.classList.add('nano-global-nav-menu');\n      this.globalNav.appendChild(element);\n    });\n    this.hide = true;\n  }\n\n  private moveItemsToDrawer() {\n    if (!this.children || !this.children.length) return;\n\n    this.children.forEach((child) => {\n      child.element.removeAttribute('slot');\n      child.element.classList.remove('nano-global-nav-menu');\n      if (child.slot && child.slot.length)\n        child.element.setAttribute('slot', child.slot);\n      this.el.appendChild(child.element);\n    });\n    this.children = [];\n    this.hide = false;\n    if (!this.io) this.attachIO();\n  }\n\n  private onWindowResize = () => {\n    if (window.innerWidth > this.hideWidth) this.widthOk = true;\n    else this.widthOk = false;\n\n    const vh = window.innerHeight * 0.01;\n    this.el.style.setProperty('--vh', `${vh}px`);\n\n    if (\n      window.innerHeight > this.currHeight &&\n      this.widthOk &&\n      !this.heightOk\n    ) {\n      this.moveItemsToDrawer();\n    }\n    this.currHeight = window.innerHeight;\n  };\n\n  private toggle = (e: MouseEvent) => {\n    e.preventDefault();\n    this.open = !this.open;\n  };\n\n  private onToggleKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private attachIO() {\n    if (!this.hideHeight) return;\n    const io: IntersectionObserver = (this.io = new (\n      window as any\n    ).IntersectionObserver(\n      (data: IntersectionObserverEntry[]) => {\n        this.heightOk = data[0].intersectionRatio !== 0;\n        if (!this.heightOk) {\n          this.moveItemsToGlobalNav();\n          this.io.disconnect();\n          this.io = undefined;\n        }\n      },\n      { threshold: 1 }\n    ));\n    io.observe(this.measureEle);\n  }\n\n  @Listen('nanoIsReady', { target: 'body' })\n  handleGlobalNavReady(e: CustomEvent & { target: HTMLNanoGlobalNavElement }) {\n    if (e.target.tagName.toLowerCase() !== transformTag('nano-global-nav'))\n      return;\n\n    setTimeout(() => {\n      this.attachIO();\n      this.openChange();\n      this.onWindowResize();\n      this.isLoading = false;\n    }, 500);\n  }\n\n  componentWillLoad() {\n    this.globalNav = closestElement(\n      transformTag('nano-global-nav'),\n      this.el\n    ) as HTMLNanoGlobalNavElement;\n\n    this.widthOk = window.innerWidth > this.hideWidth;\n    this.currHeight = window.innerHeight;\n\n    if (this.saveState) {\n      const localState = localStorage.getItem('nanoMenuDrawerOpen');\n      this.open = localState ? localState === 'true' : this.open;\n    }\n  }\n\n  componentDidLoad() {\n    if (Build.isBrowser) {\n      window.addEventListener('resize', this.onWindowResize);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.onWindowResize);\n    if (this.io) {\n      this.io.disconnect();\n      this.io = null;\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          open: this.open,\n          hide: this.hide,\n          loading: this.isLoading,\n          'has-global-nav': !!this.globalNav,\n          'nano-menu-drawer': true,\n        }}\n        dir={this.el.ownerDocument.dir === 'rtl' ? 'rtl' : null}\n      >\n        <div ref={(div) => (this.containerDiv = div)} class=\"container\">\n          <div class=\"content-wrap\">\n            <nav ref={(div) => (this.contentDiv = div)} class=\"content\">\n              <button\n                onMouseDown={this.toggle}\n                onKeyDown={this.onToggleKeyDown}\n                class=\"collapse-btn\"\n              >\n                <nano-icon\n                  name=\"light/right-to-line\"\n                  aria-label=\"collapse / expand\"\n                ></nano-icon>\n              </button>\n              <slot />\n              <div class=\"foot\">\n                <div\n                  class=\"measure-ele\"\n                  ref={(div) => (this.measureEle = div)}\n                ></div>\n                <slot name=\"foot\" />\n              </div>\n            </nav>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-more-less.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-more-less.entry.js","mappings":";;;;;;MA6Ba,MAAM;;;;;;IAIuB,IAAI,GAAG,KAAK,CAAC;;IAG7C,gBAAgB,CAAS;;;IAIzB,SAAS,GAAG,CAAC,CAAC;;IAGd,SAAS,GAAG,KAAK,CAAC;IAE1B,IAAI,QAAQ;QACV,IAAI,QAAyD,CAAC;QAE9D,IAAI,IAAI,CAAC,gBAAgB,EAAE;YACzB,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SAC9D;aAAM;YACL,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,CAClB,CAAC;KACpB;IAKD,sBAAsB;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,MAAM,EAAE;oBAChC,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;iBAAM;gBACL,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,EAAE;oBACvB,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;iBAC5B;qBAAM;oBACL,GAAG,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;iBACxB;aACF;SACF,CAAC,CAAC;KACJ;IAEO,WAAW,CAAC,EAAc;QAChC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;KACxB;IAED,iBAAiB;QACf,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,gBAAgB,IAC1B,6DAAM,YAAY,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,GAAI,EAC1D,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC,SAAS,IAAI;YACzC,4DACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,UAAU,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,6DAAM,IAAI,EAAC,MAAM,IACf,+DAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH;YACN,CAAC,IAAI,CAAC,SAAS,IACb,WACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,MAAM,EAAE,EACnD,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,qCAAqC,EAC1C,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEnC,YAAM,IAAI,EAAC,MAAM,IACf,cAAQ,IAAI,EAAC,qBAAqB,oBACnB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,MAC3C,CACJ,CACH,KAEN,EAAE,CACH;SACF,CACI,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/more-less/more-less.tsx"],"sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  ComponentInterface,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * A simple component to show more or less elements.\n *\n * @slot less - a button displayed when all fewer are shown. When clicked will show elements\n * @slot more - a button displayed when all items are shown. When clicked will hide elements\n * @slot - default slot displaying children elements to show or hide\n *\n * @part button-wrapper - wraps the 'more' / 'less' buttons\n * @part button-wrapper--more - wraps the 'more' button\n * @part button-wrapper--less - wraps the 'less' button\n * @part button - default 'more' / 'less' buttons\n * @part button--more - the default 'more' button\n * @part button--less - the default 'less' button\n */\n@Component({\n  tag: 'nano-more-less',\n  shadow: true,\n  styles: /* css */ `:host { display: contents; }`,\n})\nexport class Rating implements ComponentInterface {\n  @Element() host: HTMLNanoMoreLessElement;\n\n  /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */\n  @Prop({ reflect: true, mutable: true }) show = false;\n\n  /** Optional JS selector to target which elements to hide or show */\n  @Prop() childrenSelector: string;\n\n  /** The maximum number of items to show when `show` is true.\n   * Excess items will be hidden. */\n  @Prop() maxToShow = 3;\n\n  /** Only show the 'show more' button */\n  @Prop() noHideBtn = false;\n\n  get children() {\n    let children: NodeListOf<Element> | HTMLCollectionOf<Element>;\n\n    if (this.childrenSelector) {\n      children = this.host.querySelectorAll(this.childrenSelector);\n    } else {\n      children = this.host.children;\n    }\n    return Array.from(children).filter(\n      (ele) => !ele.hasAttribute('slot')\n    ) as HTMLElement[];\n  }\n\n  @Watch('maxToShow')\n  @Watch('show')\n  @Watch('childrenSelector')\n  handleShowHideElements() {\n    this.children.forEach((ele, i) => {\n      if (this.show) {\n        if (ele.style.display === 'none') {\n          ele.style.display = '';\n        }\n      } else {\n        if (i >= this.maxToShow) {\n          ele.style.display = 'none';\n        } else {\n          ele.style.display = '';\n        }\n      }\n    });\n  }\n\n  private handleClick(_e: MouseEvent) {\n    this.show = !this.show;\n  }\n\n  connectedCallback() {\n    this.handleShowHideElements();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-more-less\">\n        <slot onSlotchange={() => this.handleShowHideElements()} />\n        {this.children?.length > this.maxToShow && [\n          <div\n            style={{ display: this.show ? 'none' : 'contents' }}\n            class=\"button-wrapper\"\n            part=\"button-wrapper button-wrapper--less\"\n            onClick={(e) => this.handleClick(e)}\n          >\n            <slot name=\"less\">\n              <button part=\"button button--less\">\n                Show more (+{this.children.length - this.maxToShow})\n              </button>\n            </slot>\n          </div>,\n          !this.noHideBtn ? (\n            <div\n              style={{ display: this.show ? 'contents' : 'none' }}\n              class=\"button-wrapper\"\n              part=\"button-wrapper button-wrapper--more\"\n              onClick={(e) => this.handleClick(e)}\n            >\n              <slot name=\"more\">\n                <button part=\"button button--more\">\n                  Show less (-{this.children.length - this.maxToShow})\n                </button>\n              </slot>\n            </div>\n          ) : (\n            ''\n          ),\n        ]}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-overflow-nav.entry.js

@@ -1,338 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import { r as registerInstance, g as getElement, a as Host } from './index-6cc72cd9.js';
-import { h } from './renderer-4bc3e2dc.js';
-import { g as getDirectChildren, a as getOffset } from './dom-fafdec9a.js';
-import { d as debounce } from './throttle-df960210.js';
-
-const overflowNavCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:\"currentColor\";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=\");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:\" \";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:\"\";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav .nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav .nano-icon-button.onav__scroll-button:focus{outline:none}.onav .nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav .nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:\"\";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), rgb(0, 0, 0) calc(var(--fade-size) * 2), rgb(0, 0, 0) calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:fit-content}.onav--vertical .onav__items::before{content:\"\";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}";
-const NanoOverflowNavStyle0 = overflowNavCss;
-
-const OverflowNav = class {
-    // public surface
-    /** Disables the scroll arrow buttons that appear when content overflows */
-    scrollControls = true;
-    /** The flex direction of the element */
-    orientation = 'horizontal';
-    /**
-     * A function called when an item becomes 'active' (via click or keyboard)
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    activeHandler = (item, _index) => item.classList.add('active');
-    /**
-     * A function called when an item becomes 'inactive'
-     * (because another item was made active)
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    inActiveHandler = (item, _index) => item.classList.remove('active');
-    /**
-     * A function called to assess an initial, active item
-     * @param item - html element currently being assessed
-     * @param _index - the index of the html element currently being assessed
-     * @returns void */
-    isActiveHandler = (item, _index) => item.classList.contains('active');
-    watchIsActiveHandler() {
-        this.instantReCalc = true;
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        setTimeout(() => (this.instantReCalc = false), 300);
-    }
-    /**
-     * Sync up the view to the active item.
-     * Use this when the active item changes outside of this component.
-     */
-    async syncActiveItem() {
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-    }
-    // private state
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.recalculatePositions = debounce(this.recalculatePositions.bind(this), 80);
-    }
-    ro;
-    nav;
-    itemContainer;
-    isRtl;
-    endBtn;
-    startBtn;
-    activeIndicator;
-    mutationObservers = new WeakMap();
-    get scrollProp() {
-        return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';
-    }
-    get clientDimProp() {
-        return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';
-    }
-    get scrollOffset() {
-        return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';
-    }
-    get host() { return getElement(this); }
-    instantReCalc = false;
-    hasScrollControls = false;
-    watchScrollControls() {
-        if (this.hasScrollControls)
-            this.handleScroll();
-        else
-            this.hideControlStart = this.hideControlEnd = true;
-    }
-    hideControlEnd = true;
-    hideEndBtn() {
-        if (!this.endBtn)
-            return;
-        this.activateBtn(this.endBtn, !this.hideControlEnd);
-    }
-    hideControlStart = true;
-    hideStartBtn() {
-        if (!this.startBtn)
-            return;
-        this.activateBtn(this.startBtn, !this.hideControlStart);
-    }
-    // private logic
-    activateBtn(btn, activate = true) {
-        if (!activate) {
-            btn.tabIndex = -1;
-            btn.disabled = true;
-            btn.classList.remove('is-shown');
-            return;
-        }
-        btn.tabIndex = 0;
-        btn.disabled = false;
-        btn.classList.add('is-shown');
-    }
-    get allActiveItems() {
-        return this.allItems.filter((el) => !el.disabled || el.classList.contains('disabled'));
-    }
-    get allItems() {
-        return getDirectChildren(this.host, '*', true);
-    }
-    get activeItem() {
-        return this._activeItem;
-    }
-    set activeItem(item) {
-        if (!item ||
-            item === this.activeItem ||
-            item.disabled ||
-            !this.allActiveItems.includes(item)) {
-            return;
-        }
-        this._activeItem = item;
-        this.allActiveItems.forEach((el, i) => {
-            if (el === this._activeItem)
-                this.activeHandler(el, i);
-            else
-                this.inActiveHandler(el, i);
-        });
-        this.recalculatePositions();
-    }
-    _activeItem;
-    get navDim() {
-        if (!this.nav)
-            return 0;
-        const computedStyle = getComputedStyle(this.nav);
-        let clientDim = this.nav[this.clientDimProp];
-        if (this.orientation === 'horizontal') {
-            return (clientDim -=
-                parseFloat(computedStyle.paddingLeft) +
-                    parseFloat(computedStyle.paddingRight));
-        }
-        else {
-            return (clientDim -=
-                parseFloat(computedStyle.paddingTop) +
-                    parseFloat(computedStyle.paddingBottom));
-        }
-    }
-    scrollToActiveItem() {
-        if (!this.nav || !this.activeItem)
-            return;
-        setTimeout(() => {
-            this.activeItem.scrollIntoView({
-                behavior: this.instantReCalc ? 'auto' : 'smooth',
-                block: 'center',
-                inline: 'center',
-            });
-        }, 100);
-    }
-    syncActiveItemIndicator() {
-        if (!this.activeItem)
-            return;
-        const item = this.activeItem;
-        const width = item.clientWidth || 0;
-        const height = item.clientHeight + 2 || 0;
-        const offset = getOffset(item, this.itemContainer);
-        if (!this.activeIndicator)
-            return;
-        const offsetTop = offset.top;
-        const offsetLeft = offset.left;
-        if (this.instantReCalc)
-            this.activeIndicator.style.transition = 'none';
-        switch (this.orientation) {
-            case 'horizontal':
-                this.activeIndicator.style.width = `${width}px`;
-                this.activeIndicator.style.height = null;
-                this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;
-                break;
-            case 'vertical':
-                this.activeIndicator.style.width = null;
-                this.activeIndicator.style.height = `${height}px`;
-                this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;
-                break;
-        }
-        setTimeout(() => (this.activeIndicator.style.transition = null), 400);
-    }
-    updateScrollControls = () => {
-        if (!this.nav)
-            return;
-        this.hasScrollControls =
-            this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&
-                this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];
-        this.handleScroll();
-    };
-    handleScroll = () => {
-        if (!this.hasScrollControls) {
-            this.hideControlStart = this.hideControlEnd = true;
-            return;
-        }
-        const finishEnd = this.isRtl
-            ? this.nav[this.scrollOffset] === 0
-            : Math.abs(this.nav[this.clientDimProp] -
-                (this.nav[this.scrollProp] - this.nav[this.scrollOffset])) < 2;
-        const finishStart = this.isRtl
-            ? Math.abs(this.nav[this.scrollProp] +
-                this.nav[this.scrollOffset] -
-                this.nav[this.clientDimProp]) < 2
-            : this.nav[this.scrollOffset] === 0;
-        if (finishStart) {
-            this.hideControlStart = true;
-            this.hideControlEnd = false;
-        }
-        else if (finishEnd) {
-            this.hideControlStart = false;
-            this.hideControlEnd = true;
-        }
-        else {
-            this.hideControlEnd = false;
-            this.hideControlStart = false;
-        }
-    };
-    handleBtnClick = (goEnd = false) => {
-        const navDim = this.navDim;
-        let scrollAmt;
-        if (goEnd)
-            scrollAmt = this.nav[this.scrollOffset] + navDim - 20;
-        else
-            scrollAmt = this.nav[this.scrollOffset] - navDim + 20;
-        try {
-            this.nav.scroll({
-                left: this.orientation === 'horizontal' ? scrollAmt : 0,
-                top: this.orientation === 'vertical' ? scrollAmt : 0,
-                behavior: 'smooth',
-            });
-        }
-        catch (_e) {
-            this.nav[this.scrollOffset] = scrollAmt;
-        }
-    };
-    slotChangeHandler = () => {
-        if (this.allActiveItems.length < 2)
-            return;
-        const item = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        if (item)
-            this.activeItem = item;
-        this.recalculatePositions();
-        /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */
-        this.allActiveItems.forEach((item) => {
-            if (this.mutationObservers.get(item))
-                return;
-            const mo = new MutationObserver(() => this.syncActiveItemIndicator());
-            mo.observe(item, {
-                characterData: true,
-                childList: true,
-                subtree: true,
-            });
-            this.mutationObservers.set(item, mo);
-        });
-    };
-    handleClick = (event) => {
-        if (this.allActiveItems.length < 2)
-            return;
-        const foundItem = event
-            .composedPath()
-            .find((e) => this.allActiveItems.includes(e));
-        if (foundItem)
-            this.activeItem = foundItem;
-    };
-    handleKeyDown = (event) => {
-        // Activate a tab
-        if (['Enter', ' '].includes(event.key)) {
-            const foundItem = event
-                .composedPath()
-                .find((e) => this.allActiveItems.includes(e));
-            if (foundItem)
-                this.activeItem = foundItem;
-        }
-    };
-    recalculatePositions = () => {
-        this.updateScrollControls();
-        this.syncActiveItemIndicator();
-        this.scrollToActiveItem();
-    };
-    // lifecycle
-    connectedCallback() {
-        this.instantReCalc = true;
-        this.isRtl =
-            this.orientation === 'horizontal' && !!this.host.closest('[dir="rtl"]');
-        if (window['MutationObserver'])
-            this.slotChangeHandler();
-        if (!window['ResizeObserver'])
-            return;
-        if (this.ro) {
-            this.ro.disconnect();
-            this.ro = undefined;
-        }
-        const mo = (this.ro = new ResizeObserver(this.recalculatePositions));
-        mo.observe(this.host);
-    }
-    componentDidLoad() {
-        this.activeItem = this.allActiveItems.find((el, i) => this.isActiveHandler(el, i));
-        this.instantReCalc = false;
-    }
-    disconnectedCallback() {
-        if (this.ro) {
-            this.ro.disconnect();
-            this.ro = undefined;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'b27e8a6ed628edcec4ca84db6898344848b7d203', dir: this.isRtl ? 'rtl' : null, class: "nano-overflow-nav" }, h("div", { key: '79200b5a21b1fdcc179fc3017b051af1bf82d17f', part: "base", class: {
-                onav: true,
-                [`onav--${this.orientation}`]: true,
-                'onav--has-scroll-controls': this.hasScrollControls,
-                'onav--has-scroll-controls-start': !this.hideControlStart,
-                'onav--has-scroll-controls-end': !this.hideControlEnd,
-                'onav--no-transitions': this.instantReCalc,
-            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '088d3d5bc04b251977ec0c389a4eef7657d11446', class: "onav__nav" }, this.scrollControls && (h("nano-icon-button", { key: 'c55c810110f8b357b330634b024c3f5dc44ebb3b', part: "scroll-button scroll-button-prev", class: {
-                'onav__scroll-button': true,
-                'onav__scroll-button--start': true,
-            }, ref: (btn) => (this.startBtn = btn), onClick: () => this.handleBtnClick(false), label: "Click to scroll", iconName: this.orientation === 'horizontal'
-                ? 'light/chevron-left'
-                : 'light/chevron-up' })), h("div", { key: '9b65b0ccdb84eaf1afb28835e818039a961ef8c2', part: "scroller", ref: (el) => (this.nav = el), class: "onav__scroller", onScroll: this.handleScroll }, h("div", { key: '320928d965a0dd203a7b1614b4ae4ec344719810', part: "items", ref: (el) => (this.itemContainer = el), class: "onav__items" }, h("div", { key: '0227ff56d2949ef3ebfc5ec740a38dcdb7adb1d4', part: "indicator", ref: (el) => (this.activeIndicator = el), class: "onav__active-indicator" }), h("slot", { key: '28573efda6c8eb5995114f6063f57ad22e0646ed', onSlotchange: this.slotChangeHandler }))), this.scrollControls && (h("nano-icon-button", { key: 'bba306fe285adc3d6af71bf07e1744c9790f9c51', part: "scroll-button scroll-button-next", class: {
-                'onav__scroll-button': true,
-                'onav__scroll-button--end': true,
-            }, ref: (btn) => (this.endBtn = btn), onClick: () => this.handleBtnClick(true), label: "Click to scroll", iconName: this.orientation === 'horizontal'
-                ? 'light/chevron-right'
-                : 'light/chevron-down' }))))));
-    }
-    static get watchers() { return {
-        "isActiveHandler": ["watchIsActiveHandler"],
-        "hasScrollControls": ["watchScrollControls"],
-        "hideControlEnd": ["hideEndBtn"],
-        "hideControlStart": ["hideStartBtn"]
-    }; }
-};
-OverflowNav.style = NanoOverflowNavStyle0;
-
-export { OverflowNav as nano_overflow_nav };
-
-//# sourceMappingURL=nano-overflow-nav.entry.js.map

package/dist/esm/nano-overflow-nav.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-overflow-nav.entry.js","mappings":"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","names":[],"sources":["src/components/overflow-nav/overflow-nav.scss?tag=nano-overflow-nav&encapsulation=shadow","src/components/overflow-nav/overflow-nav.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --indicator-transition: Defaults to #{tokens.$transition-fast}\n  * @prop --indicator-color: Defaults to #{map.get(tokens.$colors, lightblue)};\n  * @prop --indicator-size: Defaults to 0;\n  * @prop --indicator-track-color: Defaults to #{map.get(tokens.$colors, lightgrey)};\n  * @prop --indicator-track-size: Defaults to var(--indicator-size);\n\n  * @prop --scroll-btn-color: Defaults to 'currentColor';\n  * @prop --fade-size: The size of the fade areas (when items do not fit). Defaults to 1.75rem;\n  * @prop --fade-transparency: Defaults to 0;\n  *\n  * @prop --padding: Padding that matches the fade size will stop items shifting if fade areas are added (i.e when items do not fit). Defaults to var(--fade-size);\n  */\n\n  --indicator-transition: #{tokens.$transition-fast};\n  --indicator-color: #{map.get(tokens.$colors, lightblue)};\n  --indicator-size: 0;\n  --indicator-track-color: #{map.get(tokens.$colors, lightgrey)};\n  --indicator-track-size: var(--indicator-size);\n  --scroll-btn-color: 'currentColor';\n  --fade-size: 1.75rem;\n  --fade-transparency: 0;\n  --padding: var(--fade-size);\n\n  position: relative;\n  z-index: #{tokens.$layer-index-raised};\n}\n\n:host([orientation=\"horizontal\"]) {\n  display: block;\n}\n\n:host([orientation=\"vertical\"]) {\n  display: flex;\n}\n\n.onav {\n  $root: &;\n\n  &--no-transitions * {\n    transition-duration: 0s !important;\n  }\n\n  &__scroller {\n    @include mx.hide-scrollbar();\n\n    display: flex;\n    transition: #{tokens.$transition-medium} ease;\n    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');\n    mask-size: calc(100% + calc(var(--fade-size) * 4));\n    mask-position: calc(var(--fade-size) * -2);\n\n    &::after {\n      content: ' ';\n      line-height: 1;\n      flex: 0 0 auto;\n      display: block;\n    }\n\n    #{$root}--has-scroll-controls-start & {\n      mask-position: 0;\n      mask-size: calc(100% + (var(--fade-size) * 2));\n    }\n\n    #{$root}--has-scroll-controls-end & {\n      mask-position: calc(var(--fade-size) * -1);\n      mask-size: calc(100% + var(--fade-size));\n    }\n\n    #{$root}--has-scroll-controls-start#{$root}--has-scroll-controls-end & {\n      mask-size: 100%;\n      mask-position: 0;\n    }\n  }\n\n  &__items {\n    flex: 1 1 auto;\n    position: relative;\n    inline-size: auto;\n    flex-wrap: nowrap;\n    display: flex;\n\n    &::before {\n      content: '';\n      background: var(--indicator-track-color);\n      display: block;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  &__active-indicator {\n    position: absolute;\n    z-index: 10;\n    transition:\n      var(--indicator-transition) transform ease,\n      var(--indicator-transition) width ease,\n      var(--indicator-transition) height ease;\n  }\n\n  .nano-icon-button.onav__scroll-button {\n    --nano-color-base: var(--scroll-btn-color);\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: absolute;\n    border: unset;\n    z-index: 2;\n    transition: #{tokens.$transition-fast} ease opacity;\n    opacity: 0;\n    color: var(--scroll-btn-color);\n    pointer-events: none;\n\n    &:focus {\n      outline: none;\n    }\n\n    &.is-shown {\n      opacity: 1;\n      pointer-events: all;\n    }\n\n    &:focus-visible {\n      box-shadow: #{tokens.$control-focus-style} inset;\n    }\n  }\n\n  ///////////// HORIZONTAL ///////////////\n\n  &--horizontal {\n\n    #{$root}__scroller {\n      overflow: auto hidden;\n      mask-repeat: no-repeat;\n      padding-inline: var(--padding);\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(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n\n      &::after {\n        padding-inline: 0 var(--fade-size);\n        padding-block: 0;\n      }\n    }\n\n    &#{$root}--has-scroll-controls #{$root}__scroller {\n      padding-inline: var(--fade-size) 0;\n      padding-block: 0;\n    }\n\n    #{$root}__items {\n      flex-direction: row;\n\n      &::before {\n        content: '';\n        inline-size: 100%;\n        block-size: var(--indicator-track-size);\n        inset-block-end: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-block-end: 0;\n      border-block-end: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-block: 0;\n\n      &--start {\n        inset-inline-start: 0;\n      }\n\n      &--end {\n        inset-inline-end: 0;\n      }\n    }\n  }\n\n  ///////////// VERTICAL ///////////////\n\n  &--vertical {\n    inline-size: 100%;\n\n    #{$root}__nav {\n      max-block-size: 100%;\n      display: flex;\n    }\n\n    #{$root}__scroller {\n      inline-size: 100%;\n      overflow: hidden auto;\n      flex-direction: column;\n      mask-repeat: no-repeat;\n      mask-image:\n        linear-gradient(\n          to top,\n          rgb(0 0 0 / var(--fade-transparency)) 0,\n          rgb(0 0 0 / var(--fade-transparency)) var(--fade-size),\n          rgb(0 0 0 / 100%) calc(var(--fade-size) * 2),\n          rgb(0 0 0 / 100%) calc(100% - (var(--fade-size) * 2)),\n          rgb(0 0 0 / var(--fade-transparency))\n          calc(100% - var(--fade-size)),\n          rgb(0 0 0 / var(--fade-transparency))\n        );\n      padding-inline: 0;\n      padding-block: calc(var(--fade-size) + 12px) var(--fade-size);\n\n      &::after {\n        padding-inline: 0;\n        padding-block: 0 var(--fade-size);\n      }\n    }\n\n    #{$root}__items {\n      flex-direction: column;\n      inline-size: fit-content;\n\n      &::before {\n        content: '';\n        block-size: 100%;\n        inline-size: var(--indicator-track-size);\n        inset-inline-start: 0;\n      }\n    }\n\n    #{$root}__active-indicator {\n      inset-inline-start: 0;\n      border-inline-start: solid var(--indicator-size) var(--indicator-color);\n    }\n\n    #{$root}__scroll-button {\n      inset-inline: 0;\n\n      &--start {\n        inset-block-start: 0;\n      }\n\n      &--end {\n        inset-block-end: 0;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { debounce } from '../../utils/throttle';\n\n/**\n * Primarily used to display navigational items that may not fit on smaller screens.\n *\n * - Accepts any collection of elements\n * - Gives visual cues of 'more' with auto display fade effect and scroll buttons\n * - Auto scrolls to the active item onload\n *\n * @slot - Default slot to place items.\n *\n * @part base - root, wrapper element\n * @part scroller - the scrolling element\n * @part items - the item wrapper element\n * @part indicator - the animated, indicator element\n * @part scroll-button - The buttons shown at either side of the scrolling area\n * @part scroll-button-prev - The button shown at the start of the scrolling area\n * @part scroll-button-next - The button shown at the end of the scrolling area\n */\n\n@Component({\n  tag: 'nano-overflow-nav',\n  styleUrl: 'overflow-nav.scss',\n  shadow: true,\n})\nexport class OverflowNav implements ComponentInterface {\n  // public surface\n\n  /** Disables the scroll arrow buttons that appear when content overflows */\n  @Prop() scrollControls = true;\n\n  /** The flex direction of the element */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' =\n    'horizontal';\n\n  /**\n   * A function called when an item becomes 'active' (via click or keyboard)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() activeHandler = (item: HTMLElement, _index: number) =>\n    item.classList.add('active');\n\n  /**\n   * A function called when an item becomes 'inactive'\n   * (because another item was made active)\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() inActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.remove('active');\n\n  /**\n   * A function called to assess an initial, active item\n   * @param item - html element currently being assessed\n   * @param _index - the index of the html element currently being assessed\n   * @returns void */\n  @Prop() isActiveHandler = (item: HTMLElement, _index: number) =>\n    item.classList.contains('active');\n\n  @Watch('isActiveHandler')\n  watchIsActiveHandler() {\n    this.instantReCalc = true;\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    setTimeout(() => (this.instantReCalc = false), 300);\n  }\n\n  /**\n   * Sync up the view to the active item.\n   * Use this when the active item changes outside of this component.\n   */\n  @Method()\n  async syncActiveItem() {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n  }\n\n  // private state\n\n  constructor() {\n    this.recalculatePositions = debounce(\n      this.recalculatePositions.bind(this),\n      80\n    );\n  }\n\n  private ro?: ResizeObserver;\n  private nav?: HTMLElement;\n  private itemContainer?: HTMLElement;\n  private isRtl?: boolean;\n  private endBtn: HTMLNanoIconButtonElement;\n  private startBtn: HTMLNanoIconButtonElement;\n  private activeIndicator: HTMLElement;\n  private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n  get scrollProp() {\n    return this.orientation === 'horizontal' ? 'scrollWidth' : 'scrollHeight';\n  }\n\n  get clientDimProp() {\n    return this.orientation === 'horizontal' ? 'clientWidth' : 'clientHeight';\n  }\n\n  get scrollOffset() {\n    return this.orientation === 'horizontal' ? 'scrollLeft' : 'scrollTop';\n  }\n\n  @Element() host: HTMLNanoOverflowNavElement;\n\n  @State() instantReCalc = false;\n  @State() hasScrollControls = false;\n\n  @Watch('hasScrollControls')\n  watchScrollControls() {\n    if (this.hasScrollControls) this.handleScroll();\n    else this.hideControlStart = this.hideControlEnd = true;\n  }\n\n  @State() hideControlEnd = true;\n\n  @Watch('hideControlEnd')\n  hideEndBtn() {\n    if (!this.endBtn) return;\n    this.activateBtn(this.endBtn, !this.hideControlEnd);\n  }\n\n  @State() hideControlStart = true;\n\n  @Watch('hideControlStart')\n  hideStartBtn() {\n    if (!this.startBtn) return;\n    this.activateBtn(this.startBtn, !this.hideControlStart);\n  }\n\n  // private logic\n\n  private activateBtn(btn: HTMLNanoIconButtonElement, activate = true) {\n    if (!activate) {\n      btn.tabIndex = -1;\n      btn.disabled = true;\n      btn.classList.remove('is-shown');\n      return;\n    }\n    btn.tabIndex = 0;\n    btn.disabled = false;\n    btn.classList.add('is-shown');\n  }\n\n  get allActiveItems() {\n    return this.allItems.filter(\n      (el: any) => !el.disabled || el.classList.contains('disabled')\n    );\n  }\n\n  get allItems() {\n    return getDirectChildren<HTMLElement>(this.host, '*', true);\n  }\n\n  get activeItem() {\n    return this._activeItem;\n  }\n\n  set activeItem(item: HTMLElement) {\n    if (\n      !item ||\n      item === this.activeItem ||\n      (item as any).disabled ||\n      !this.allActiveItems.includes(item)\n    ) {\n      return;\n    }\n\n    this._activeItem = item;\n    this.allActiveItems.forEach((el, i) => {\n      if (el === this._activeItem) this.activeHandler(el, i);\n      else this.inActiveHandler(el, i);\n    });\n\n    this.recalculatePositions();\n  }\n  private _activeItem: HTMLElement;\n\n  get navDim() {\n    if (!this.nav) return 0;\n\n    const computedStyle = getComputedStyle(this.nav);\n    let clientDim = this.nav[this.clientDimProp];\n\n    if (this.orientation === 'horizontal') {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingLeft) +\n        parseFloat(computedStyle.paddingRight));\n    } else {\n      return (clientDim -=\n        parseFloat(computedStyle.paddingTop) +\n        parseFloat(computedStyle.paddingBottom));\n    }\n  }\n\n  private scrollToActiveItem() {\n    if (!this.nav || !this.activeItem) return;\n    setTimeout(() => {\n      this.activeItem.scrollIntoView({\n        behavior: this.instantReCalc ? 'auto' : 'smooth',\n        block: 'center',\n        inline: 'center',\n      });\n    }, 100);\n  }\n\n  private syncActiveItemIndicator() {\n    if (!this.activeItem) return;\n\n    const item = this.activeItem;\n    const width = item.clientWidth || 0;\n    const height = item.clientHeight + 2 || 0;\n    const offset = getOffset(item, this.itemContainer);\n\n    if (!this.activeIndicator) return;\n\n    const offsetTop = offset.top;\n    const offsetLeft = offset.left;\n\n    if (this.instantReCalc) this.activeIndicator.style.transition = 'none';\n\n    switch (this.orientation) {\n      case 'horizontal':\n        this.activeIndicator.style.width = `${width}px`;\n        this.activeIndicator.style.height = null;\n        this.activeIndicator.style.transform = `translateX(${offsetLeft}px)`;\n        break;\n\n      case 'vertical':\n        this.activeIndicator.style.width = null;\n        this.activeIndicator.style.height = `${height}px`;\n        this.activeIndicator.style.transform = `translateY(${offsetTop}px)`;\n        break;\n    }\n    setTimeout(() => (this.activeIndicator.style.transition = null), 400);\n  }\n\n  private updateScrollControls = () => {\n    if (!this.nav) return;\n\n    this.hasScrollControls =\n      this.nav[this.scrollProp] > this.nav[this.clientDimProp] &&\n      this.nav[this.scrollProp] > this.itemContainer[this.clientDimProp];\n    this.handleScroll();\n  };\n\n  private handleScroll = () => {\n    if (!this.hasScrollControls) {\n      this.hideControlStart = this.hideControlEnd = true;\n      return;\n    }\n    const finishEnd = this.isRtl\n      ? this.nav[this.scrollOffset] === 0\n      : Math.abs(\n          this.nav[this.clientDimProp] -\n            (this.nav[this.scrollProp] - this.nav[this.scrollOffset])\n        ) < 2;\n\n    const finishStart = this.isRtl\n      ? Math.abs(\n          this.nav[this.scrollProp] +\n            this.nav[this.scrollOffset] -\n            this.nav[this.clientDimProp]\n        ) < 2\n      : this.nav[this.scrollOffset] === 0;\n\n    if (finishStart) {\n      this.hideControlStart = true;\n      this.hideControlEnd = false;\n    } else if (finishEnd) {\n      this.hideControlStart = false;\n      this.hideControlEnd = true;\n    } else {\n      this.hideControlEnd = false;\n      this.hideControlStart = false;\n    }\n  };\n\n  private handleBtnClick = (goEnd: boolean = false) => {\n    const navDim = this.navDim;\n    let scrollAmt;\n    if (goEnd) scrollAmt = this.nav[this.scrollOffset] + navDim - 20;\n    else scrollAmt = this.nav[this.scrollOffset] - navDim + 20;\n\n    try {\n      this.nav.scroll({\n        left: this.orientation === 'horizontal' ? scrollAmt : 0,\n        top: this.orientation === 'vertical' ? scrollAmt : 0,\n        behavior: 'smooth',\n      });\n    } catch (_e) {\n      this.nav[this.scrollOffset] = scrollAmt;\n    }\n  };\n\n  private slotChangeHandler = () => {\n    if (this.allActiveItems.length < 2) return;\n    const item = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    if (item) this.activeItem = item;\n    this.recalculatePositions();\n\n    /** maintain a weakmap of mutation observers to maintain item / indicator position on all changes. */\n    this.allActiveItems.forEach((item) => {\n      if (this.mutationObservers.get(item)) return;\n\n      const mo = new MutationObserver(() => this.syncActiveItemIndicator());\n      mo.observe(item, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n\n      this.mutationObservers.set(item, mo);\n    });\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.allActiveItems.length < 2) return;\n    const foundItem = event\n      .composedPath()\n      .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n    if (foundItem) this.activeItem = foundItem;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Activate a tab\n    if (['Enter', ' '].includes(event.key)) {\n      const foundItem = event\n        .composedPath()\n        .find((e) => this.allActiveItems.includes(e as any)) as HTMLElement;\n      if (foundItem) this.activeItem = foundItem;\n    }\n  };\n\n  private recalculatePositions = () => {\n    this.updateScrollControls();\n    this.syncActiveItemIndicator();\n    this.scrollToActiveItem();\n  };\n\n  // lifecycle\n\n  connectedCallback(): void {\n    this.instantReCalc = true;\n    this.isRtl =\n      this.orientation === 'horizontal' && !!this.host.closest('[dir=\"rtl\"]');\n\n    if (window['MutationObserver']) this.slotChangeHandler();\n\n    if (!window['ResizeObserver']) return;\n\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n    const mo = (this.ro = new ResizeObserver(this.recalculatePositions));\n    mo.observe(this.host);\n  }\n\n  componentDidLoad(): void {\n    this.activeItem = this.allActiveItems.find((el, i) =>\n      this.isActiveHandler(el, i)\n    );\n    this.instantReCalc = false;\n  }\n\n  disconnectedCallback(): void {\n    if (this.ro) {\n      this.ro.disconnect();\n      this.ro = undefined;\n    }\n  }\n\n  render() {\n    return (\n      <Host dir={this.isRtl ? 'rtl' : null} class=\"nano-overflow-nav\">\n        <div\n          part=\"base\"\n          class={{\n            onav: true,\n            [`onav--${this.orientation}`]: true,\n            'onav--has-scroll-controls': this.hasScrollControls,\n            'onav--has-scroll-controls-start': !this.hideControlStart,\n            'onav--has-scroll-controls-end': !this.hideControlEnd,\n            'onav--no-transitions': this.instantReCalc,\n          }}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n        >\n          <div class=\"onav__nav\">\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-prev\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--start': true,\n                }}\n                ref={(btn) => (this.startBtn = btn)}\n                onClick={() => this.handleBtnClick(false)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-left'\n                    : 'light/chevron-up'\n                }\n              />\n            )}\n\n            <div\n              part=\"scroller\"\n              ref={(el) => (this.nav = el)}\n              class=\"onav__scroller\"\n              onScroll={this.handleScroll}\n            >\n              <div\n                part=\"items\"\n                ref={(el) => (this.itemContainer = el)}\n                class=\"onav__items\"\n              >\n                <div\n                  part=\"indicator\"\n                  ref={(el) => (this.activeIndicator = el)}\n                  class=\"onav__active-indicator\"\n                />\n                <slot onSlotchange={this.slotChangeHandler} />\n              </div>\n            </div>\n\n            {this.scrollControls && (\n              <nano-icon-button\n                part=\"scroll-button scroll-button-next\"\n                class={{\n                  'onav__scroll-button': true,\n                  'onav__scroll-button--end': true,\n                }}\n                ref={(btn) => (this.endBtn = btn)}\n                onClick={() => this.handleBtnClick(true)}\n                label=\"Click to scroll\"\n                iconName={\n                  this.orientation === 'horizontal'\n                    ? 'light/chevron-right'\n                    : 'light/chevron-down'\n                }\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-progress-bar.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-progress-bar.entry.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,gqCAAgqC,CAAC;AACxrC,8BAAe,cAAc;;MCiBhB,WAAW;;;;;;IAId,KAAK,GAAG,CAAC,CAAC;;IAGV,aAAa,GAAG,KAAK,CAAC;;IAGtB,WAAW,GAAG,KAAK,CAAC;IAE5B,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,IAC7B,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;aAClD,EACD,IAAI,EAAC,aAAa,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,gBACxB,UAAU,mBACP,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,IAErD,4DACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,KAAK,GAAG,GAAG,SAAS;aAC1D,IAED,6DAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB,IAC5C,+DACG,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,WAAW;cACpC,GAAG,IAAI,CAAC,KAAK,GAAG;cAChB,EAAE,CACD,CACF,CACH,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{tokens.$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{tokens.$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{tokens.$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  block-size: var(--height);\n  border-radius: tokens.$layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  block-size: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, Element, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class=\"nano-progress-bar\">\n        <div\n          part=\"base\"\n          class={{\n            'progress-bar': true,\n            'progress-bar--indeterminate': this.indeterminate,\n          }}\n          role=\"progressbar\"\n          title={this.host.title || undefined}\n          aria-label=\"Progress\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          aria-valuenow={this.indeterminate ? null : this.value}\n        >\n          <div\n            part=\"indicator\"\n            class=\"progress-bar__indicator\"\n            style={{\n              width: !this.indeterminate ? `${this.value}%` : undefined,\n            }}\n          >\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot>\n                {!this.indeterminate && this.showPercent\n                  ? `${this.value}%`\n                  : ''}\n              </slot>\n            </span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nano-range.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-range.entry.js","mappings":"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","names":[],"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: HTMLInputElement = container.querySelector('input.aux-input');\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","@use '../../global/style/utilities/colours' as color;\n@use '../../global/style/nano-theme/tokens';\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.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 #{tokens.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 #{tokens.nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{tokens.nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{tokens.$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color.color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{tokens.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: #{tokens.nano-color(primary, base)};\n  --pin-color: #{tokens.nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{tokens.$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  inline-size: 100%;\n  block-size: 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  inline-size: 100%;\n  block-size: 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  inline-size: auto;\n  background: var(--bar-background-active);\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  inline-size: var(--knob-size);\n  block-size: 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  inline-size: calc(var(--knob-handle-size));\n  block-size: 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  inline-size: var(--bar-height);\n  block-size: 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-inline-size: 2.33em;\n  block-size: 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    inline-size: 2.16em;\n    block-size: 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: color.current-color(base);\n    color: color.current-color(contrast);\n  }\n\n  .range-bar {\n    background: color.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 color.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} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport {\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n} from './range-interface';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  StyleEventDetail,\n} from '../../types/shared';\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: HTMLElement = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      );\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          'nano-range': true,\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"],"version":3}