@nanoporetech-digital/components 7.6.0 → 7.7.0

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

@@ -1 +1 @@
-{"version":3,"names":["overflowNavCss","NanoOverflowNavStyle0","OverflowNav","scrollControls","orientation","activeHandler","item","_index","classList","add","inActiveHandler","remove","isActiveHandler","contains","watchIsActiveHandler","this","instantReCalc","activeItem","allActiveItems","find","el","i","setTimeout","syncActiveItem","constructor","hostRef","recalculatePositions","debounce","bind","ro","nav","itemContainer","isRtl","endBtn","startBtn","activeIndicator","mutationObservers","WeakMap","scrollProp","clientDimProp","scrollOffset","hasScrollControls","watchScrollControls","handleScroll","hideControlStart","hideControlEnd","hideEndBtn","activateBtn","hideStartBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","includes","forEach","navDim","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","scrollToActiveItem","scrollIntoView","behavior","block","inline","syncActiveItemIndicator","width","clientWidth","height","clientHeight","offset","getOffset","offsetTop","top","offsetLeft","left","style","transition","transform","updateScrollControls","finishEnd","Math","abs","finishStart","handleBtnClick","goEnd","scrollAmt","scroll","_e","slotChangeHandler","length","get","mo","MutationObserver","observe","characterData","childList","subtree","set","handleClick","event","foundItem","composedPath","e","handleKeyDown","key","connectedCallback","closest","window","disconnect","undefined","ResizeObserver","componentDidLoad","disconnectedCallback","render","h","Host","dir","part","class","onav","onClick","onKeyDown","ref","label","iconName","onScroll","onSlotchange"],"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  h,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Method,\n} from '@stencil/core';\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}>\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["overflowNavCss","NanoOverflowNavStyle0","OverflowNav","scrollControls","orientation","activeHandler","item","_index","classList","add","inActiveHandler","remove","isActiveHandler","contains","watchIsActiveHandler","this","instantReCalc","activeItem","allActiveItems","find","el","i","setTimeout","syncActiveItem","constructor","hostRef","recalculatePositions","debounce","bind","ro","nav","itemContainer","isRtl","endBtn","startBtn","activeIndicator","mutationObservers","WeakMap","scrollProp","clientDimProp","scrollOffset","hasScrollControls","watchScrollControls","handleScroll","hideControlStart","hideControlEnd","hideEndBtn","activateBtn","hideStartBtn","btn","activate","tabIndex","disabled","allItems","filter","getDirectChildren","host","_activeItem","includes","forEach","navDim","computedStyle","getComputedStyle","clientDim","parseFloat","paddingLeft","paddingRight","paddingTop","paddingBottom","scrollToActiveItem","scrollIntoView","behavior","block","inline","syncActiveItemIndicator","width","clientWidth","height","clientHeight","offset","getOffset","offsetTop","top","offsetLeft","left","style","transition","transform","updateScrollControls","finishEnd","Math","abs","finishStart","handleBtnClick","goEnd","scrollAmt","scroll","_e","slotChangeHandler","length","get","mo","MutationObserver","observe","characterData","childList","subtree","set","handleClick","event","foundItem","composedPath","e","handleKeyDown","key","connectedCallback","closest","window","disconnect","undefined","ResizeObserver","componentDidLoad","disconnectedCallback","render","h","Host","dir","class","part","onav","onClick","onKeyDown","ref","label","iconName","onScroll","onSlotchange"],"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"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-progress-bar.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r,g as e,h as a}from"./index-3118109b.js";const o=":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";const s=o;const t=class{constructor(e){r(this,e)}get host(){return e(this)}value=0;indeterminate=false;showPercent=false;render(){return a("div",{key:"40563d8a84636d568b0675808bd96cc84c0c4b97",part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar",title:this.host.title||undefined,"aria-label":"Progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.value},a("div",{key:"32f65f980f9ef0a118ef005ff4ad68c8116b544b",part:"indicator",class:"progress-bar__indicator",style:{width:!this.indeterminate?`${this.value}%`:undefined}},a("span",{key:"30a5b0e7663a5772c23ff75fc0b4b6bcd59f72ef",part:"label",class:"progress-bar__label"},a("slot",{key:"1a80db1cb1f65e85f7ba78373e9f2aa7642a542e"},!this.indeterminate&&this.showPercent?`${this.value}%`:""))))}};t.style=s;export{t as nano_progress_bar};
+import{r,g as e,a}from"./index-6cc72cd9.js";import{h as o}from"./renderer-4bc3e2dc.js";const s=":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{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";const t=s;const i=class{constructor(e){r(this,e)}get host(){return e(this)}value=0;indeterminate=false;showPercent=false;render(){return o(a,{key:"36e2ed7f9fe6da4a7e85f26c87ab72dd0b300ebd",class:"nano-progress-bar"},o("div",{key:"3c02d554bcb4727c0a03769be1cd6c57693868f9",part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar",title:this.host.title||undefined,"aria-label":"Progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.value},o("div",{key:"31a54ba3593cda595dc3566d86e763d8bb2701cf",part:"indicator",class:"progress-bar__indicator",style:{width:!this.indeterminate?`${this.value}%`:undefined}},o("span",{key:"91539c8c325358a416ca7b15e341ee0d70d31845",part:"label",class:"progress-bar__label"},o("slot",{key:"6f24df7fdfbe3272581eac957cbe8b9ded8bc781"},!this.indeterminate&&this.showPercent?`${this.value}%`:"")))))}};i.style=t;export{i as nano_progress_bar};
 //# sourceMappingURL=nano-progress-bar.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["progressBarCss","NanoProgressBarStyle0","ProgressBar","value","indeterminate","showPercent","render","h","key","part","class","this","role","title","host","undefined","style","width"],"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, h, Element } from '@stencil/core';\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      <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 ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;iDAAA,MAAMA,EAAiB,iqCACvB,MAAAC,EAAeD,E,MCgBFE,EAAW,M,mDAIdC,MAAQ,EAGRC,cAAgB,MAGhBC,YAAc,MAEtB,MAAAC,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BC,KAAKP,eAEtCQ,KAAK,cACLC,MAAOF,KAAKG,KAAKD,OAASE,UAAS,aACxB,WAAU,gBACP,IAAG,gBACH,MAAK,gBACJJ,KAAKP,cAAgB,KAAOO,KAAKR,OAEhDI,EAAA,OAAAC,IAAA,2CACEC,KAAK,YACLC,MAAM,0BACNM,MAAO,CACLC,OAAQN,KAAKP,cAAgB,GAAGO,KAAKR,SAAWY,YAGlDR,EAAA,QAAAC,IAAA,2CAAMC,KAAK,QAAQC,MAAM,uBACvBH,EAAA,QAAAC,IAAA,6CACIG,KAAKP,eAAiBO,KAAKN,YAAc,GAAGM,KAAKR,SAAW,M","ignoreList":[]}
+{"version":3,"names":["progressBarCss","NanoProgressBarStyle0","ProgressBar","value","indeterminate","showPercent","render","h","Host","key","class","part","this","role","title","host","undefined","style","width"],"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"],"mappings":";;;uFAAA,MAAMA,EAAiB,iqCACvB,MAAAC,EAAeD,E,MCiBFE,EAAW,M,mDAIdC,MAAQ,EAGRC,cAAgB,MAGhBC,YAAc,MAEtB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,OAAAE,IAAA,2CACEE,KAAK,OACLD,MAAO,CACL,eAAgB,KAChB,8BAA+BE,KAAKR,eAEtCS,KAAK,cACLC,MAAOF,KAAKG,KAAKD,OAASE,UAAS,aACxB,WAAU,gBACP,IAAG,gBACH,MAAK,gBACJJ,KAAKR,cAAgB,KAAOQ,KAAKT,OAEhDI,EAAA,OAAAE,IAAA,2CACEE,KAAK,YACLD,MAAM,0BACNO,MAAO,CACLC,OAAQN,KAAKR,cAAgB,GAAGQ,KAAKT,SAAWa,YAGlDT,EAAA,QAAAE,IAAA,2CAAME,KAAK,QAAQD,MAAM,uBACvBH,EAAA,QAAAE,IAAA,6CACIG,KAAKR,eAAiBQ,KAAKP,YACzB,GAAGO,KAAKT,SACR,O","ignoreList":[]}

package/dist/nano-components/nano-range.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c as a,g as e,h as r,a as s}from"./index-3118109b.js";import{c as o}from"./math-d160f8a6.js";import{c as t}from"./theme-d553c17a.js";import{a as i}from"./throttle-df960210.js";const c=(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 g='.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{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;inline-size:100%;block-size: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;inline-size:100%;block-size: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;inline-size:auto;background:var(--bar-background-active)}.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;inline-size:var(--knob-size);block-size: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;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;inline-size:calc(var(--knob-handle-size));block-size: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);inline-size:var(--bar-height);block-size: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-inline-size:2.33em;block-size: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%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;inline-size:2.16em;block-size: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 l=g;const h=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)}noUpdate=false;rect;hasFocus=false;rangeSlider;gesture;get el(){return e(this)}ratioA=0;ratioB=0;pressedKnob;color;debounce=0;debounceChanged(){this.nanoChange=i(this.nanoChange,this.debounce)}name="";dualKnobs=false;min=0;minChanged(){if(!this.noUpdate){this.updateRatio()}}max=100;maxChanged(){if(!this.noUpdate){this.updateRatio()}}pin=false;snaps=false;step=1;ticks=false;disabled=false;disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}value=0;valueChanged(n){if(!this.noUpdate){this.updateRatio()}n=this.ensureValueInBounds(n);this.nanoChange.emit({value:n})}clampBounds=n=>o(this.min,n,this.max);ensureValueInBounds=n=>{if(this.dualKnobs){return{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}}else{return this.clampBounds(n)}};nanoChange;nanoStyle;nanoFocus;nanoBlur;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("./index-a2043fcd.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)}}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=o(0,this.ratioA+e,1)}else{this.ratioB=o(0,this.ratioB+e,1)}this.updateValue()};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=o(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=o(0,(n-a.left)/a.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=u(d(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 d(this.ratioA,this.min,this.max,this.step)}get valB(){return d(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=u(n.lower,a,e);this.ratioB=u(n.upper,a,e)}else{this.ratioA=u(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()}}}onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.nanoBlur.emit();this.emitStyle()}};onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.nanoFocus.emit();this.emitStyle()}};render(){const{min:n,max:a,step:e,el:o,handleKeyboard:i,pressedKnob:g,disabled:l,pin:h,ratioLower:d,ratioUpper:p}=this;const k=`${d*100}%`;const v=`${100-p*100}%`;const f=document;const m=f.dir==="rtl";const x=m?"right":"left";const z=m?"left":"right";const y=n=>({[x]:n[x]});const w={[x]:k,[z]:v};const A=[];if(this.snaps&&this.ticks){for(let r=n;r<=a;r+=e){const e=u(r,n,a);const s={ratio:e,active:e>=d&&e<=p};s[x]=`${e*100}%`;A.push(s)}}c(o,this.name,JSON.stringify(this.getValue()),l);return r(s,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:t(this.color,{"range-disabled":l,"range-pressed":g!==undefined,"range-has-pin":h,"range-snaps":this.snaps})},r("div",{class:"range-wrap"},r("slot",{name:"start"}),r("div",{class:"range-slider",ref:n=>this.rangeSlider=n},A.map((n=>r("span",{style:y(n),role:"presentation",class:{"range-tick":true,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),r("div",{class:"range-bar",role:"presentation",part:"bar"}),r("div",{class:"range-bar range-bar-active",role:"presentation",style:w,part:"bar-active"}),b(m,{knob:"A",pressed:g==="A",value:this.valA,ratio:this.ratioA,pin:h,disabled:l,handleKeyboard:i,min:n,max:a}),this.dualKnobs&&b(m,{knob:"B",pressed:g==="B",value:this.valB,ratio:this.ratioB,pin:h,disabled:l,handleKeyboard:i,min:n,max:a})),r("slot",{name:"end"})))}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const b=(n,{knob:a,value:e,ratio:s,min:o,max:t,disabled:i,pressed:c,pin:g,handleKeyboard:l})=>{const h=n?"right":"left";const b=()=>{const n={};n[h]=`${s*100}%`;return n};return r("div",{onKeyDown:n=>{const e=n.key;if(e==="ArrowLeft"||e==="ArrowDown"){l(a,false);n.preventDefault();n.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){l(a,true);n.preventDefault();n.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":a==="A","range-knob-b":a==="B","range-knob-pressed":c,"range-knob-min":e===o,"range-knob-max":e===t},style:b(),role:"slider",tabindex:i?-1:0,"aria-valuemin":o,"aria-valuemax":t,"aria-disabled":i?"true":null,"aria-valuenow":e},g&&r("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),r("div",{class:"range-knob",role:"presentation",part:"knob"}))};const d=(n,a,e,r)=>{let s=(e-a)*n;if(r>0){s=Math.round(s/r)*r+a}return o(a,s,e)};const u=(n,a,e)=>o(0,(n-a)/(e-a),1);h.style=l;export{h as nano_range};
+import{r as n,c as a,g as e,a as r}from"./index-6cc72cd9.js";import{h as s}from"./renderer-4bc3e2dc.js";import{c as o}from"./math-d160f8a6.js";import{c as t}from"./theme-d553c17a.js";import{a as i}from"./throttle-df960210.js";const c=(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 g='.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{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;inline-size:100%;block-size: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;inline-size:100%;block-size: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;inline-size:auto;background:var(--bar-background-active)}.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;inline-size:var(--knob-size);block-size: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;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;inline-size:calc(var(--knob-handle-size));block-size: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);inline-size:var(--bar-height);block-size: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-inline-size:2.33em;block-size: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%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;inline-size:2.16em;block-size: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 l=g;const h=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)}noUpdate=false;rect;hasFocus=false;rangeSlider;gesture;get el(){return e(this)}ratioA=0;ratioB=0;pressedKnob;color;debounce=0;debounceChanged(){this.nanoChange=i(this.nanoChange,this.debounce)}name="";dualKnobs=false;min=0;minChanged(){if(!this.noUpdate){this.updateRatio()}}max=100;maxChanged(){if(!this.noUpdate){this.updateRatio()}}pin=false;snaps=false;step=1;ticks=false;disabled=false;disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}value=0;valueChanged(n){if(!this.noUpdate){this.updateRatio()}n=this.ensureValueInBounds(n);this.nanoChange.emit({value:n})}clampBounds=n=>o(this.min,n,this.max);ensureValueInBounds=n=>{if(this.dualKnobs){return{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}}else{return this.clampBounds(n)}};nanoChange;nanoStyle;nanoFocus;nanoBlur;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("./index-a2043fcd.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)}}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=o(0,this.ratioA+e,1)}else{this.ratioB=o(0,this.ratioB+e,1)}this.updateValue()};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=o(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=o(0,(n-a.left)/a.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=u(d(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 d(this.ratioA,this.min,this.max,this.step)}get valB(){return d(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=u(n.lower,a,e);this.ratioB=u(n.upper,a,e)}else{this.ratioA=u(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()}}}onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.nanoBlur.emit();this.emitStyle()}};onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.nanoFocus.emit();this.emitStyle()}};render(){const{min:n,max:a,step:e,el:o,handleKeyboard:i,pressedKnob:g,disabled:l,pin:h,ratioLower:d,ratioUpper:p}=this;const k=`${d*100}%`;const v=`${100-p*100}%`;const f=document;const m=f.dir==="rtl";const x=m?"right":"left";const z=m?"left":"right";const y=n=>({[x]:n[x]});const w={[x]:k,[z]:v};const A=[];if(this.snaps&&this.ticks){for(let r=n;r<=a;r+=e){const e=u(r,n,a);const s={ratio:e,active:e>=d&&e<=p};s[x]=`${e*100}%`;A.push(s)}}c(o,this.name,JSON.stringify(this.getValue()),l);return s(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:t(this.color,{"range-disabled":l,"range-pressed":g!==undefined,"range-has-pin":h,"range-snaps":this.snaps,"nano-range":true})},s("div",{class:"range-wrap"},s("slot",{name:"start"}),s("div",{class:"range-slider",ref:n=>this.rangeSlider=n},A.map((n=>s("span",{style:y(n),role:"presentation",class:{"range-tick":true,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),s("div",{class:"range-bar",role:"presentation",part:"bar"}),s("div",{class:"range-bar range-bar-active",role:"presentation",style:w,part:"bar-active"}),b(m,{knob:"A",pressed:g==="A",value:this.valA,ratio:this.ratioA,pin:h,disabled:l,handleKeyboard:i,min:n,max:a}),this.dualKnobs&&b(m,{knob:"B",pressed:g==="B",value:this.valB,ratio:this.ratioB,pin:h,disabled:l,handleKeyboard:i,min:n,max:a})),s("slot",{name:"end"})))}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const b=(n,{knob:a,value:e,ratio:r,min:o,max:t,disabled:i,pressed:c,pin:g,handleKeyboard:l})=>{const h=n?"right":"left";const b=()=>{const n={};n[h]=`${r*100}%`;return n};return s("div",{onKeyDown:n=>{const e=n.key;if(e==="ArrowLeft"||e==="ArrowDown"){l(a,false);n.preventDefault();n.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){l(a,true);n.preventDefault();n.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":a==="A","range-knob-b":a==="B","range-knob-pressed":c,"range-knob-min":e===o,"range-knob-max":e===t},style:b(),role:"slider",tabindex:i?-1:0,"aria-valuemin":o,"aria-valuemax":t,"aria-disabled":i?"true":null,"aria-valuenow":e},g&&s("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(e)),s("div",{class:"range-knob",role:"presentation",part:"knob"}))};const d=(n,a,e,r)=>{let s=(e-a)*n;if(r>0){s=Math.round(s/r)*r+a}return o(a,s,e)};const u=(n,a,e)=>o(0,(n-a)/(e-a),1);h.style=l;export{h as nano_range};
 //# sourceMappingURL=nano-range.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["renderHiddenInput","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","rangeCss","NanoRangeStyle0","Range","noUpdate","rect","hasFocus","rangeSlider","gesture","ratioA","ratioB","pressedKnob","color","debounce","debounceChanged","this","nanoChange","debounceEvent","dualKnobs","min","minChanged","updateRatio","max","maxChanged","pin","snaps","step","ticks","disabledChanged","enable","emitStyle","valueChanged","ensureValueInBounds","emit","clampBounds","clamp","lower","upper","nanoStyle","nanoFocus","nanoBlur","connectedCallback","disconnectedCallback","destroy","undefined","componentDidLoad","import","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","handleKeyboard","knob","isIncrease","updateValue","getValue","interactive","detail","getBoundingClientRect","currentX","ratio","left","width","document","dir","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","shadowRoot","knobEl","focus","onBlur","onFocus","render","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","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: 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  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 {\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        })}\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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","ignoreList":[]}
+{"version":3,"names":["renderHiddenInput","container","name","value","disabled","input","querySelector","ownerDocument","createElement","type","classList","add","appendChild","rangeCss","NanoRangeStyle0","Range","noUpdate","rect","hasFocus","rangeSlider","gesture","ratioA","ratioB","pressedKnob","color","debounce","debounceChanged","this","nanoChange","debounceEvent","dualKnobs","min","minChanged","updateRatio","max","maxChanged","pin","snaps","step","ticks","disabledChanged","enable","emitStyle","valueChanged","ensureValueInBounds","emit","clampBounds","clamp","lower","upper","nanoStyle","nanoFocus","nanoBlur","connectedCallback","disconnectedCallback","destroy","undefined","componentDidLoad","import","createGesture","el","gestureName","gesturePriority","threshold","onStart","ev","onMove","onEnd","handleKeyboard","knob","isIncrease","updateValue","getValue","interactive","detail","getBoundingClientRect","currentX","ratio","left","width","document","dir","Math","abs","setFocus","update","valueToRatio","ratioToValue","valA","valB","ratioLower","ratioUpper","shadowRoot","knobEl","focus","onBlur","onFocus","render","barStart","barEnd","doc","isRTL","start","end","tickStyle","tick","barStyle","active","push","JSON","stringify","h","Host","onFocusin","onFocusout","class","createColorClasses","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: 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"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-rating.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as n,c as s,g as i,h as t}from"./index-3118109b.js";import{f as a}from"./focus-visible-e5f02c46.js";import{c as o}from"./math-d160f8a6.js";const r=".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";const e=r;const l=class{constructor(i){n(this,i);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7)}rating;isRtl;indicator;get host(){return i(this)}hoverValue=0;isHovering=false;value=0;max=5;precision=1;readonly=false;disabled=false;name="";symbolName="solid/star";symbol=n=>'<nano-icon name="'+this.symbolName+'"></nano-icon>';handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){if(!this.symbol)this.symbol=n=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}nanoChange;nanoBlur;nanoFocus;async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(n){const s=this.rating.getBoundingClientRect().left;const i=this.rating.getBoundingClientRect().width;let t;t=this.roundToPrecision((n.clientX-s)/i*this.max,this.precision);if(this.isRtl)t=this.max+this.precision-t;return o(t,0,this.max)}roundToPrecision(n,s=.5){const i=1/s;return Math.ceil(n*i)/i}handleClick=n=>{if(this.disabled||this.readonly){return}const s=this.getValueFromMousePosition(n);this.value=s===this.value?0:s;this.isHovering=false};handleKeyDown=n=>{if(this.disabled||this.readonly){return}if(n.key==="ArrowLeft"){const s=n.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.max(0,this.value-s));n.preventDefault()}if(n.key==="ArrowRight"){const s=n.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.min(this.max,this.value+s));n.preventDefault()}if(n.key==="Home"){this.value=0;n.preventDefault()}if(n.key==="End"){this.value=this.max;n.preventDefault()}};handleMouseEnter=()=>{this.isHovering=true};handleMouseLeave=()=>{this.isHovering=false};handleFocus=()=>{this.nanoFocus.emit()};handleBlur=()=>{this.nanoBlur.emit()};handleMouseMove=n=>{this.hoverValue=this.getValueFromMousePosition(n)};clip(n){if(!this.rating)return;const s=this.rating.getBoundingClientRect().width;if(this.isRtl)return`rect(0, ${s}px, 2em, ${s-s/100*(n/this.max*100)}px)`;return`rect(0, ${s/100*(n/this.max*100)}px, 2em, 0)`}componentDidLoad(){a.observe(this.rating);setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){a.unobserve(this.rating)}render(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";const n=Array.from(Array(this.max).keys());let s=0;if(this.disabled||this.readonly){s=this.value}else{s=this.isHovering?this.hoverValue:this.value}return t("div",{key:"71577f298741ece02dc6655e5275d00dedd37b86",class:"rating-wrap"},t("div",{key:"1970dd80f9783316eddb98501f1e5f1e8e0325c9",dir:this.isRtl?"rtl":null,ref:n=>this.rating=n,part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},t("span",{key:"4d341aa10271c68e94379babdd4f88d9c436dbcb",class:"rating__symbols rating__symbols--inactive"},n.map((n=>t("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===n+1},onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(n+1)})))),t("span",{key:"13a214cc0d52fedcf48953e17e0d2e2e14ded9f9",ref:n=>this.indicator=n,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(s)}},n.map((n=>t("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===n+1},innerHTML:this.symbol(n+1)})))),t("input",{key:"4dd7a72137134862bea4524ce4e54a828640ba3d",type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};l.style=e;export{l as nano_rating};
+import{r as n,c as s,g as i,a}from"./index-6cc72cd9.js";import{h as t}from"./renderer-4bc3e2dc.js";import{f as o}from"./focus-visible-e5f02c46.js";import{c as r}from"./math-d160f8a6.js";const e=".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";const c=e;const l=class{constructor(i){n(this,i);this.nanoChange=s(this,"nanoChange",7);this.nanoBlur=s(this,"nanoBlur",7);this.nanoFocus=s(this,"nanoFocus",7)}rating;isRtl;indicator;get host(){return i(this)}hoverValue=0;isHovering=false;value=0;max=5;precision=1;readonly=false;disabled=false;name="";symbolName="solid/star";symbol=n=>'<nano-icon name="'+this.symbolName+'"></nano-icon>';handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){if(!this.symbol)this.symbol=n=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}nanoChange;nanoBlur;nanoFocus;async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(n){const s=this.rating.getBoundingClientRect().left;const i=this.rating.getBoundingClientRect().width;let a;a=this.roundToPrecision((n.clientX-s)/i*this.max,this.precision);if(this.isRtl)a=this.max+this.precision-a;return r(a,0,this.max)}roundToPrecision(n,s=.5){const i=1/s;return Math.ceil(n*i)/i}handleClick=n=>{if(this.disabled||this.readonly){return}const s=this.getValueFromMousePosition(n);this.value=s===this.value?0:s;this.isHovering=false};handleKeyDown=n=>{if(this.disabled||this.readonly){return}if(n.key==="ArrowLeft"){const s=n.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.max(0,this.value-s));n.preventDefault()}if(n.key==="ArrowRight"){const s=n.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.min(this.max,this.value+s));n.preventDefault()}if(n.key==="Home"){this.value=0;n.preventDefault()}if(n.key==="End"){this.value=this.max;n.preventDefault()}};handleMouseEnter=()=>{this.isHovering=true};handleMouseLeave=()=>{this.isHovering=false};handleFocus=()=>{this.nanoFocus.emit()};handleBlur=()=>{this.nanoBlur.emit()};handleMouseMove=n=>{this.hoverValue=this.getValueFromMousePosition(n)};clip(n){if(!this.rating)return;const s=this.rating.getBoundingClientRect().width;if(this.isRtl)return`rect(0, ${s}px, 2em, ${s-s/100*(n/this.max*100)}px)`;return`rect(0, ${s/100*(n/this.max*100)}px, 2em, 0)`}componentDidLoad(){o.observe(this.rating);setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){o.unobserve(this.rating)}render(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";const n=Array.from(Array(this.max).keys());let s=0;if(this.disabled||this.readonly){s=this.value}else{s=this.isHovering?this.hoverValue:this.value}return t(a,{key:"e7aec714fffd7abf991de7f31712d6a85a67ee75",class:"nano-rating"},t("div",{key:"1865bfccf63d3b544e394abb8e4c9141636dd930",class:"rating-wrap"},t("div",{key:"5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da",dir:this.isRtl?"rtl":null,ref:n=>this.rating=n,part:"base",class:{rating:true,"rating--readonly":this.readonly,"rating--disabled":this.disabled},"aria-disabled":this.disabled?"true":"false","aria-readonly":this.readonly?"true":"false","aria-valuenow":this.value,"aria-valuemin":0,"aria-valuemax":this.max,tabIndex:this.disabled?-1:0,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onMouseMove:this.handleMouseMove,onFocus:this.handleFocus,onBlur:this.handleBlur},t("span",{key:"118a16e603a53cbfc515297eb347705277118ca1",class:"rating__symbols rating__symbols--inactive"},n.map((n=>t("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===n+1},onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(n+1)})))),t("span",{key:"b299dae6997acbcece7582efd9f99858cf30b22b",ref:n=>this.indicator=n,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(s)}},n.map((n=>t("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(s)===n+1},innerHTML:this.symbol(n+1)})))),t("input",{key:"7e134eb0de5e255b474e567406a0ae4f027aa83b",type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly}))))}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};l.style=c;export{l as nano_rating};
 //# sourceMappingURL=nano-rating.entry.js.map

package/dist/nano-components/nano-rating.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["ratingCss","NanoRatingStyle0","Rating","rating","isRtl","indicator","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_number","this","handleValueChange","nanoChange","emit","handleSymbolChange","_","nanoBlur","nanoFocus","setFocus","focus","removeFocus","blur","getValueFromMousePosition","event","containerLeft","getBoundingClientRect","left","containerWidth","width","num","roundToPrecision","clientX","clamp","numberToRound","multiplier","Math","ceil","handleClick","newValue","handleKeyDown","key","decrement","shiftKey","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","handleMouseMove","clip","displayValue","tw","componentDidLoad","focusVisible","observe","setTimeout","style","connectedCallback","host","dir","ownerDocument","disconnectedCallback","unobserve","render","counter","Array","from","keys","h","class","ref","el","part","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","innerHTML","span","type"],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.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 --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n  */\n\n  --symbol-color: #{map.get(tokens.$colors, palegrey)};\n  --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{tokens.$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0;\n  margin-inline: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    if (!this.symbol)\n      this.symbol = (_: number) =>\n        '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;oJAAA,MAAMA,EAAY,2kEAClB,MAAAC,EAAeD,E,MCsBFE,EAAM,M,wIACTC,OACAC,MACAC,U,0BAICC,WAAa,EACbC,WAAa,MAKkBC,MAAQ,EAKxCC,IAAM,EAKNC,UAAY,EAKZC,SAAW,MAKXC,SAAW,MAKXC,KAAO,GAKPC,WAAa,aASbC,OAAUC,GAChB,oBAAsBC,KAAKH,WAAa,iBAG1C,iBAAAI,GACED,KAAKE,WAAWC,M,CAIlB,kBAAAC,GACE,IAAKJ,KAAKF,OACRE,KAAKF,OAAUO,GACb,oBAAsBL,KAAKH,WAAa,gB,CAMrCK,WAKAI,SAKAC,UAMT,cAAMC,GACJR,KAAKd,OAAOuB,O,CAOd,iBAAMC,GACJV,KAAKd,OAAOyB,M,CAGN,yBAAAC,CAA0BC,GAChC,MAAMC,EAAgBd,KAAKd,OAAO6B,wBAAwBC,KAC1D,MAAMC,EAAiBjB,KAAKd,OAAO6B,wBAAwBG,MAE3D,IAAIC,EACJA,EAAMnB,KAAKoB,kBACPP,EAAMQ,QAAUP,GAAiBG,EAAkBjB,KAAKR,IAC1DQ,KAAKP,WAEP,GAAIO,KAAKb,MAAOgC,EAAMnB,KAAKR,IAAMQ,KAAKP,UAAY0B,EAElD,OAAOG,EAAMH,EAAK,EAAGnB,KAAKR,I,CAGpB,gBAAA4B,CAAiBG,EAAuB9B,EAAY,IAC1D,MAAM+B,EAAa,EAAI/B,EACvB,OAAOgC,KAAKC,KAAKH,EAAgBC,GAAcA,C,CAGzCG,YAAed,IACrB,GAAIb,KAAKL,UAAYK,KAAKN,SAAU,CAClC,M,CAGF,MAAMkC,EAAW5B,KAAKY,0BAA0BC,GAChDb,KAAKT,MAAQqC,IAAa5B,KAAKT,MAAQ,EAAIqC,EAC3C5B,KAAKV,WAAa,KAAK,EAGjBuC,cAAiBhB,IACvB,GAAIb,KAAKL,UAAYK,KAAKN,SAAU,CAClC,M,CAGF,GAAImB,EAAMiB,MAAQ,YAAa,CAC7B,MAAMC,EAAYlB,EAAMmB,SAAW,EAAIhC,KAAKP,UAC5CO,KAAKT,MAAQS,KAAKoB,iBAAiBK,KAAKjC,IAAI,EAAGQ,KAAKT,MAAQwC,IAC5DlB,EAAMoB,gB,CAGR,GAAIpB,EAAMiB,MAAQ,aAAc,CAC9B,MAAMI,EAAYrB,EAAMmB,SAAW,EAAIhC,KAAKP,UAC5CO,KAAKT,MAAQS,KAAKoB,iBAChBK,KAAKU,IAAInC,KAAKR,IAAKQ,KAAKT,MAAQ2C,IAElCrB,EAAMoB,gB,CAGR,GAAIpB,EAAMiB,MAAQ,OAAQ,CACxB9B,KAAKT,MAAQ,EACbsB,EAAMoB,gB,CAGR,GAAIpB,EAAMiB,MAAQ,MAAO,CACvB9B,KAAKT,MAAQS,KAAKR,IAClBqB,EAAMoB,gB,GAIFG,iBAAmB,KACzBpC,KAAKV,WAAa,IAAI,EAGhB+C,iBAAmB,KACzBrC,KAAKV,WAAa,KAAK,EAGjBgD,YAAc,KACpBtC,KAAKO,UAAUJ,MAAM,EAGfoC,WAAa,KACnBvC,KAAKM,SAASH,MAAM,EAGdqC,gBAAmB3B,IACzBb,KAAKX,WAAaW,KAAKY,0BAA0BC,EAAM,EAGjD,IAAA4B,CAAKC,GACX,IAAK1C,KAAKd,OAAQ,OAClB,MAAMyD,EAAK3C,KAAKd,OAAO6B,wBAAwBG,MAC/C,GAAIlB,KAAKb,MACP,MAAO,WAAWwD,aAChBA,EAAMA,EAAK,KAASD,EAAe1C,KAAKR,IAAO,UAEnD,MAAO,WACJmD,EAAK,KAASD,EAAe1C,KAAKR,IAAO,iB,CAI9C,gBAAAoD,GACEC,EAAaC,QAAQ9C,KAAKd,QAC1B6D,YAAW,IAAO/C,KAAKZ,UAAU4D,MAAMP,KAAOzC,KAAKyC,KAAKzC,KAAKT,QAAS,G,CAGxE,iBAAA0D,GACEjD,KAAKb,MACHa,KAAKkD,KAAKC,MAAQ,OAASnD,KAAKkD,KAAKE,cAAcD,MAAQ,K,CAG/D,oBAAAE,GACER,EAAaS,UAAUtD,KAAKd,O,CAG9B,MAAAqE,GACEvD,KAAKb,MACHa,KAAKkD,KAAKC,MAAQ,OAASnD,KAAKkD,KAAKE,cAAcD,MAAQ,MAE7D,MAAMK,EAAUC,MAAMC,KAAKD,MAAMzD,KAAKR,KAAKmE,QAE3C,IAAIjB,EAAe,EACnB,GAAI1C,KAAKL,UAAYK,KAAKN,SAAU,CAClCgD,EAAe1C,KAAKT,K,KACf,CACLmD,EAAe1C,KAAKV,WAAaU,KAAKX,WAAaW,KAAKT,K,CAG1D,OACEqE,EAAA,OAAA9B,IAAA,2CAAK+B,MAAM,eACTD,EAAA,OAAA9B,IAAA,2CACEqB,IAAKnD,KAAKb,MAAQ,MAAQ,KAC1B2E,IAAMC,GAAQ/D,KAAKd,OAAS6E,EAC5BC,KAAK,OACLH,MAAO,CACL3E,OAAQ,KACR,mBAAoBc,KAAKN,SACzB,mBAAoBM,KAAKL,UAC1B,gBACcK,KAAKL,SAAW,OAAS,QAAO,gBAChCK,KAAKN,SAAW,OAAS,QAAO,gBAChCM,KAAKT,MAAK,gBACV,EAAC,gBACDS,KAAKR,IACpByE,SAAUjE,KAAKL,UAAY,EAAI,EAC/BuE,QAASlE,KAAK2B,YACdwC,UAAWnE,KAAK6B,cAChBuC,aAAcpE,KAAKoC,iBACnBiC,aAAcrE,KAAKqC,iBACnBiC,YAAatE,KAAKwC,gBAClB+B,QAASvE,KAAKsC,YACdkC,OAAQxE,KAAKuC,YAEbqB,EAAA,QAAA9B,IAAA,2CAAM+B,MAAM,6CACTL,EAAQiB,KAAKC,GACZd,EAAA,QACEC,MAAO,CACLc,eAAgB,KAChB,wBACE3E,KAAKV,YAAcmC,KAAKC,KAAKgB,KAAkBgC,EAAQ,GAK3DN,aAAcpE,KAAKoC,iBACnBwC,UAAW5E,KAAKF,OAAO4E,EAAQ,QAKrCd,EAAA,QAAA9B,IAAA,2CACEgC,IAAMe,GAAU7E,KAAKZ,UAAYyF,EACjChB,MAAM,6CACNb,MAAO,CACLP,KAAMzC,KAAKyC,KAAKC,KAGjBc,EAAQiB,KAAKC,GACZd,EAAA,QACEC,MAAO,CACLc,eAAgB,KAChB,wBACE3E,KAAKV,YAAcmC,KAAKC,KAAKgB,KAAkBgC,EAAQ,GAE3DE,UAAW5E,KAAKF,OAAO4E,EAAQ,QAIrCd,EAAA,SAAA9B,IAAA,2CACEgD,KAAK,SACLlF,KAAMI,KAAKJ,KACXL,MAAOS,KAAKT,MACZI,SAAUK,KAAKL,UAAYK,KAAKN,Y","ignoreList":[]}
+{"version":3,"names":["ratingCss","NanoRatingStyle0","Rating","rating","isRtl","indicator","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_number","this","handleValueChange","nanoChange","emit","handleSymbolChange","_","nanoBlur","nanoFocus","setFocus","focus","removeFocus","blur","getValueFromMousePosition","event","containerLeft","getBoundingClientRect","left","containerWidth","width","num","roundToPrecision","clientX","clamp","numberToRound","multiplier","Math","ceil","handleClick","newValue","handleKeyDown","key","decrement","shiftKey","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","handleBlur","handleMouseMove","clip","displayValue","tw","componentDidLoad","focusVisible","observe","setTimeout","style","connectedCallback","host","dir","ownerDocument","disconnectedCallback","unobserve","render","counter","Array","from","keys","h","Host","class","ref","el","part","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","innerHTML","span","type"],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.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 --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n  */\n\n  --symbol-color: #{map.get(tokens.$colors, palegrey)};\n  --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{tokens.$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0;\n  margin-inline: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(.nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  ComponentInterface,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    if (!this.symbol)\n      this.symbol = (_: number) =>\n        '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <Host class=\"nano-rating\">\n        <div class=\"rating-wrap\">\n          <div\n            dir={this.isRtl ? 'rtl' : null}\n            ref={(el) => (this.rating = el)}\n            part=\"base\"\n            class={{\n              rating: true,\n              'rating--readonly': this.readonly,\n              'rating--disabled': this.disabled,\n            }}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            aria-readonly={this.readonly ? 'true' : 'false'}\n            aria-valuenow={this.value}\n            aria-valuemin={0}\n            aria-valuemax={this.max}\n            tabIndex={this.disabled ? -1 : 0}\n            onClick={this.handleClick}\n            onKeyDown={this.handleKeyDown}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span class=\"rating__symbols rating__symbols--inactive\">\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                  // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                  // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                  onMouseEnter={this.handleMouseEnter}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n\n            <span\n              ref={(span) => (this.indicator = span)}\n              class=\"rating__symbols rating__symbols--indicator\"\n              style={{\n                clip: this.clip(displayValue),\n              }}\n            >\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled || this.readonly}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/nano-components/nano-resize-observe_2.entry.js

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as e,g as i,d as s,h as n,a}from"./index-3118109b.js";const r=class{constructor(i){t(this,i);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=e(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=e(this,"nanoResizeContentFitChange",7);this.nanoResize=e(this,"nanoResize",7)}ro;appliedStates;isReady=false;get host(){return i(this)}currentWidth;currentHeight;classNames=[];contentFitX=null;contentFitY=null;classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}notifyContentFit;states;newStatesProp(){this.statesChanged()}nanoResizeStateChange;nanoResizeObserverReady;nanoResizeContentFitChange;nanoResize;dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[i,...s]=e.split(" ");const{bp:n,dir:a}=t(i);this.appliedStates[a].set(n,{states:s,applied:false})}else{const{bp:i,dir:s}=t(e);this.appliedStates[s].set(i,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const e=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;e(t)}));return e(t)};let e=false;const i=t(this.host.firstElementChild);if(i){if(this.notifyContentFit&&this.notifyContentFit.includes("x")){if(this.currentWidth<i.scrollWidth&&this.contentFitX!==false){e=true;this.contentFitX=false}else if(this.currentWidth>=i.scrollWidth&&this.contentFitX!==true){e=true;this.contentFitX=true}}if(this.notifyContentFit&&this.notifyContentFit.includes("y")){if(this.currentHeight<i.scrollHeight&&this.contentFitY!==false){e=true;this.contentFitY=false}else if(this.currentHeight>=i.scrollHeight&&this.contentFitY!==true){e=true;this.contentFitY=true}}if(e){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;s((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((i=>{let s;if(i==="h")s=this.currentHeight;else s=this.currentWidth;this.appliedStates[i].forEach(((n,a)=>{if(s>=a&&n.applied===false){n.applied=true;t[i].set(a,n);e=true}else if(s<a&&n.applied===true){n.applied=false;t[i].set(a,n);e=true}}))}));if(e)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=[...this.classNames,"is-ready"]};applyChanges(t){if(!this.states)return;let e=[...this.classNames];Object.keys(t).forEach((i=>{t[i].forEach((t=>{if(!t.states)return;t.states.map((i=>{if(t.applied){e.push(i);e=e.filter((t=>t!=="not-"+i))}else{e.push("not-"+i);e=e.filter((t=>t!==i))}}))}))}));this.classNames=["is-ready",...e];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((i=>{t[i].forEach(((t,s)=>{e[s+i]=t.applied}))}));return e}attachRO(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((t=>{const{width:e,height:i}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(e);this.currentHeight=Math.ceil(i);this.nanoResize.emit(t)}));this.ro.observe(this.host)}componentWillLoad(){this.classNames=Array.from(this.host.classList);this.statesChanged();this.applyChanges(this.appliedStates);if(!this.currentWidth&&!this.currentHeight){s((()=>{const{width:t,height:e}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(e)}))}else{this.assessChanges()}}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return n(a,{key:"09a3b9f8a724f07ba84eec73378725dec973773a"},n("slot",{key:"2f990e9c1ee91e1392a370d07ff988cb3abc3e42"}),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[this.contentFitX?n("slot",{name:"content-fit-x"}):n("slot",{name:"content-nofit-x"}),this.contentFitY?n("slot",{name:"content-fit-y"}):n("slot",{name:"content-nofit-y"})])}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};r.style=":host { display: block }";const o=":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{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";const h=o;const l=class{constructor(e){t(this,e)}animated=true;render(){return n("div",{key:"39135db0beb9ba3fdda2e0fe9d82e08f3bc8c118",class:{skeleton:true,animate:this.animated}},n("div",{key:"55bc13ba8fd8ae10afa64e670d56494438809a4a",class:"skeleton__indicator"}," "))}};l.style=h;export{r as nano_resize_observe,l as nano_skeleton};
+import{r as t,c as e,g as s,e as i,a as n}from"./index-6cc72cd9.js";import{h as a}from"./renderer-4bc3e2dc.js";const r=class{constructor(s){t(this,s);this.nanoResizeStateChange=e(this,"nanoResizeStateChange",7);this.nanoResizeObserverReady=e(this,"nanoResizeObserverReady",7);this.nanoResizeContentFitChange=e(this,"nanoResizeContentFitChange",7);this.nanoResize=e(this,"nanoResize",7)}ro;appliedStates;isReady=false;get host(){return s(this)}currentWidth;currentHeight;classNames=[];contentFitX=null;contentFitY=null;classNameChange(){this.host.className=this.classNames.join(" ");if(!this.isReady&&this.classNames.includes("is-ready")){this.isReady=true;this.nanoResizeObserverReady.emit()}}notifyContentFit;states;newStatesProp(){this.statesChanged()}nanoResizeStateChange;nanoResizeObserverReady;nanoResizeContentFitChange;nanoResize;dimensionChanged(){this.assessChanges()}statesChanged(){if(!this.states)return;const t=t=>{const e=t.split(/(\d+)/).filter((t=>t.length));return{bp:parseInt(e[0]),dir:e[1]}};this.appliedStates={h:new Map,w:new Map};this.states.split(",").map((e=>{e=e.trim();if(e.includes(" ")){const[s,...i]=e.split(" ");const{bp:n,dir:a}=t(s);this.appliedStates[a].set(n,{states:i,applied:false})}else{const{bp:s,dir:i}=t(e);this.appliedStates[i].set(s,{applied:false})}}))}assesContentFit(){if(!this.notifyContentFit)return;const t=t=>{if(window.getComputedStyle(t).display!=="contents")return t;const e=t=>Array.from(t.children).find((t=>{if(window.getComputedStyle(t).display!=="contents")return t;e(t)}));return e(t)};let e=false;const s=t(this.host.firstElementChild);if(s){if(this.notifyContentFit&&this.notifyContentFit.includes("x")){if(this.currentWidth<s.scrollWidth&&this.contentFitX!==false){e=true;this.contentFitX=false}else if(this.currentWidth>=s.scrollWidth&&this.contentFitX!==true){e=true;this.contentFitX=true}}if(this.notifyContentFit&&this.notifyContentFit.includes("y")){if(this.currentHeight<s.scrollHeight&&this.contentFitY!==false){e=true;this.contentFitY=false}else if(this.currentHeight>=s.scrollHeight&&this.contentFitY!==true){e=true;this.contentFitY=true}}if(e){this.nanoResizeContentFitChange.emit({x:this.contentFitX,y:this.contentFitY})}}}assessChanges=()=>{if(!this.currentWidth&&!this.currentHeight)return;i((()=>this.assesContentFit()));if(!this.states||!this.appliedStates)return;const t={h:new Map,w:new Map};let e=false;Object.keys(this.appliedStates).forEach((s=>{let i;if(s==="h")i=this.currentHeight;else i=this.currentWidth;this.appliedStates[s].forEach(((n,a)=>{if(i>=a&&n.applied===false){n.applied=true;t[s].set(a,n);e=true}else if(i<a&&n.applied===true){n.applied=false;t[s].set(a,n);e=true}}))}));if(e)this.applyChanges(t);else if(!this.classNames.includes("is-ready"))this.classNames=[...this.classNames,"is-ready"]};applyChanges(t){if(!this.states)return;let e=[...this.classNames];Object.keys(t).forEach((s=>{t[s].forEach((t=>{if(!t.states)return;t.states.map((s=>{if(t.applied){e.push(s);e=e.filter((t=>t!=="not-"+s))}else{e.push("not-"+s);e=e.filter((t=>t!==s))}}))}))}));this.classNames=["is-ready",...e];this.nanoResizeStateChange.emit(this.toSimpleObj(t))}toSimpleObj(t){const e={};Object.keys(t).forEach((s=>{t[s].forEach(((t,i)=>{e[i+s]=t.applied}))}));return e}attachRO(){if(!window["ResizeObserver"])return;this.ro=new ResizeObserver((t=>{const{width:e,height:s}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(e);this.currentHeight=Math.ceil(s);this.nanoResize.emit(t)}));this.ro.observe(this.host)}componentWillLoad(){this.classNames=Array.from(this.host.classList);this.statesChanged();this.applyChanges(this.appliedStates);if(!this.currentWidth&&!this.currentHeight){i((()=>{const{width:t,height:e}=this.host.getBoundingClientRect();this.currentWidth=Math.ceil(t);this.currentHeight=Math.ceil(e)}))}else{this.assessChanges()}}connectedCallback(){if(!this.ro)this.attachRO()}disconnectedCallback(){if(this.ro)this.ro.disconnect()}render(){return a(n,{key:"b34bd4742548d018aeae0f3ab98e85611287ec07",class:"nano-resize-observe"},a("slot",{key:"f9220f1781302bed070ba24f297dfa168fdf0549"}),!!this.notifyContentFit&&(this.contentFitX!==null||this.contentFitY!==null)&&[this.contentFitX?a("slot",{name:"content-fit-x"}):a("slot",{name:"content-nofit-x"}),this.contentFitY?a("slot",{name:"content-fit-y"}):a("slot",{name:"content-nofit-y"})])}static get watchers(){return{classNames:["classNameChange"],states:["newStatesProp","statesChanged"],currentHeight:["dimensionChanged"],currentWidth:["dimensionChanged"]}}};r.style=":host { display: block }";const o=":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{--base-color-rgb:var(--nano-skeleton-rgb, 228 230 232);--color:var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));--tint:var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));display:block;position:relative;border-radius:0.25rem;min-block-size:1em;line-height:inherit}.skeleton{display:flex;min-inline-size:100%;min-block-size:100%;border-radius:inherit;line-height:inherit}.skeleton__indicator{flex:1 1 auto;background:var(--color);border-radius:inherit;line-height:inherit}.skeleton.animate .skeleton__indicator{background:linear-gradient(270deg, var(--tint), var(--color), var(--color), var(--tint));background-size:400% 100%;animation:loader 6s ease-in-out infinite}@keyframes loader{0%{background-position:200% 0}100%{background-position:-200% 0}}";const h=o;const c=class{constructor(e){t(this,e)}animated=true;render(){return a(n,{key:"97ea058a91c14ec6cb5707d5f7c36ce71836db88",class:"nano-skeleton"},a("div",{key:"97aaf3eb540c1e8671c661e0f1e7cebb260f057b",class:{skeleton:true,animate:this.animated}},a("div",{key:"378a1c6168fa2462e81da0205f55c58260c52cac",class:"skeleton__indicator"}," ")))}};c.style=h;export{r as nano_resize_observe,c as nano_skeleton};
 //# sourceMappingURL=nano-resize-observe_2.entry.js.map