@nanoporetech-digital/components 3.7.1 → 3.8.1

package/dist/cjs/nano-progress-bar_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nano-progress-bar.nano-tooltip.entry.cjs.js","mappings":"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","names":["h","Popover","Host"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgba(#{$progress-track-color-rgb}, 1);\n  --indicator-color: rgba(#{$progress-indicator-color-rgb}, 1);\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  height: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 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","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n              <div id={this.componentId}>{this.content}</div>\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-progress-bar.nano-tooltip.entry.cjs.js","mappings":"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","names":["h","Popover","Host"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx","./src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgba(#{$progress-track-color-rgb}, 1);\n * @prop --indicator-color: The indicator color. Default rgba(#{$progress-indicator-color-rgb}, 1);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{$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  height: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 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","@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{$tooltip-border-radius};\n  background-color: black;\n  font-size: #{$tooltip-fontsize};\n  line-height: 1.5;\n  color: white;\n  opacity: 0;\n  padding: #{$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: black;\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{$layer-index-tooltip};\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-end: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{$tooltip-arrow-size});\n      border-block-start: #{$tooltip-arrow-size} solid;\n      border-inline-start: #{$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{$tooltip-arrow-size} solid;\n      border-block-start: #{$tooltip-arrow-size} solid transparent;\n      border-block-end: #{$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n  h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private componentId = `tooltip-${++id}`;\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: any;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-describedby');\n    }\n    newTarget.setAttribute('aria-describedby', this.componentId);\n    this._target = newTarget;\n  }\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop() hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    this.popover.show();\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      this.open ? this.hide() : this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  private handleTTSlotChange = () => {\n    const contentDiv =\n      this.host.querySelector(`[id=\"${this.componentId}\"]`) ||\n      this.host.shadowRoot.getElementById(this.componentId);\n\n    Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n      .filter((elm) => elm !== contentDiv)\n      .forEach((elm) => {\n        contentDiv.appendChild(elm);\n      });\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n\n    const ele = this.host.shadowRoot.getElementById(this.componentId);\n    ele.slot = 'content';\n    this.host.appendChild(ele);\n    this.handleTTSlotChange();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n              <div id={this.componentId}>{this.content}</div>\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-41582c2a.js');
+const index = require('./index-e1b5c3ea.js');
 const math = require('./math-a8123703.js');
-const theme = require('./theme-50275e1a.js');
+const theme = require('./theme-9cbe28c5.js');
 const throttle = require('./throttle-f55496c8.js');
 
 const renderHiddenInput = (container, name, value, disabled) => {
@@ -23,7 +23,7 @@ const renderHiddenInput = (container, name, value, disabled) => {
   input.value = value || '';
 };
 
-const rangeCss = ".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 rgba(0, 0, 0, 0.3);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgba(var(--rgb-inactive), 0.5)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgba(var(--rgb-inactive), 0.5)}.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:rgba(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 rgba(var(--nano-color-tint-rgb), 0.56)}";
+const rangeCss = ".sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;width:100%;height:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;width:100%;height:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;width:auto;background:var(--bar-background-active)}.range-bar-active .range-pressed.sc-nano-range-h{will-change:left, right}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;width:var(--knob-size);height:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;-webkit-margin-start:calc(0px - var(--knob-handle-size) / 2);margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;width:calc(var(--knob-handle-size));height:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);width:var(--bar-height);height:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-width:2.33em;height:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;-webkit-margin-start:-1.08em;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;width:2.16em;height:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:\"\";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}";
 
 const Range = class {
   constructor(hostRef) {
@@ -133,7 +133,7 @@ const Range = class {
   async componentDidLoad() {
     const rangeSlider = this.rangeSlider;
     if (rangeSlider) {
-      this.gesture = (await Promise.resolve().then(function () { return require('./index-ece1cb9e.js'); })).createGesture({
+      this.gesture = (await Promise.resolve().then(function () { return require('./index-72ee0363.js'); })).createGesture({
         el: rangeSlider,
         gestureName: 'range',
         gesturePriority: 100,

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

@@ -1 +1 @@
-{"file":"nano-range.entry.cjs.js","mappings":";;;;;;;;;;;;AAAO,MAAM,iBAAiB,GAAG,CAC/B,SAAsB,EACtB,IAAY,EACZ,KAAgC,EAChC,QAAiB;EAEjB,IAAI,KAAK,GAAG,SAAS,CAAC,aAAa,CACjC,iBAAiB,CACS,CAAC;EAC7B,IAAI,CAAC,KAAK,EAAE;IACV,KAAK,GAAG,SAAS,CAAC,aAAc,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACxD,KAAK,CAAC,IAAI,GAAG,QAAQ,CAAC;IACtB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACjC,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;GAC9B;EACD,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;EAC1B,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;EAClB,KAAK,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAC;AAC5B,CAAC;;AClBD,MAAM,QAAQ,GAAG,g/KAAg/K;;MCyCp/K,KAAK;;;;;;;IACR,aAAQ,GAAG,KAAK,CAAC;IAEjB,aAAQ,GAAG,KAAK,CAAC;IA6GjB,gBAAW,GAAG,CAAC,KAAU;MAC/B,OAAOA,UAAK,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACzC,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAU;MACvC,IAAI,IAAI,CAAC,SAAS,EAAE;QAClB,OAAO;UACL,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;UACpC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC;SACrC,CAAC;OACH;WAAM;QACL,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;OAChC;KACF,CAAC;IAoDM,mBAAc,GAAG,CAAC,IAAc,EAAE,UAAmB;MAC3D,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;MACrB,IAAI,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC;MAC3B,IAAI,GAAG,IAAI,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;MACpC,IAAI,CAAC,UAAU,EAAE;QACf,IAAI,IAAI,CAAC,CAAC,CAAC;OACZ;MACD,IAAI,IAAI,KAAK,GAAG,EAAE;QAChB,IAAI,CAAC,MAAM,GAAGA,UAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;WAAM;QACL,IAAI,CAAC,MAAM,GAAGA,UAAK,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE,CAAC,CAAC,CAAC;OAC/C;MACD,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB,CAAC;IAiJM,WAAM,GAAG;MACf,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;IAEM,YAAO,GAAG;MAChB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,EAAE,CAAC;OAClB;KACF,CAAC;kBApVwB,CAAC;kBACD,CAAC;;;oBAaR,CAAC;gBAUL,EAAE;qBAKG,KAAK;eAKX,CAAC;eAWD,GAAG;eAYH,KAAK;iBAMH,KAAK;gBAKN,CAAC;iBAMA,KAAK;oBAKF,KAAK;iBAYqB,CAAC;;EA1EpC,eAAe;IACvB,IAAI,CAAC,UAAU,GAAGC,sBAAa,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjE;EAiBS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EAOS,UAAU;IAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;GACF;EA8BS,eAAe;IACvB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IACD,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAOS,YAAY,CAAC,KAAiB;IACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,KAAK,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAExC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;GACjC;EAsCD,iBAAiB;IACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACnB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;MACvB,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;KAC1B;GACF;EAED,MAAM,gBAAgB;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,IAAI,WAAW,EAAE;MACf,IAAI,CAAC,OAAO,GAAG,CAAC,MAAM,oDAAO,qBAA2B,KAAC,EAAE,aAAa,CAAC;QACvE,EAAE,EAAE,WAAW;QACf,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,GAAG;QACpB,SAAS,EAAE,CAAC;QACZ,OAAO,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;QAC/B,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;OAC9B,CAAC,CAAC;MACH,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;GACF;EAiBO,QAAQ;IACd,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;IAC9B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC;OACd;MACD,OAAO;QACL,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,KAAK;OACb,CAAC;KACH;SAAM;MACL,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;QAC7B,OAAO,KAAK,CAAC,KAAK,CAAC;OACpB;MACD,OAAO,KAAK,CAAC;KACd;GACF;EAEO,SAAS;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,WAAW,EAAE,IAAI;MACjB,sBAAsB,EAAE,IAAI,CAAC,QAAQ;KACtC,CAAC,CAAC;GACJ;EAEO,OAAO,CAAC,MAAqB;IACnC,MAAM,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAY,CAAC,qBAAqB,EAAS,CAAC,CAAC;IAC5E,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;;IAGjC,IAAI,KAAK,GAAGD,UAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,CAAC,WAAW;MACd,CAAC,IAAI,CAAC,SAAS;QACf,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;UACzD,GAAG;UACH,GAAG,CAAC;IAEV,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;IAGhC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GACvB;EAEO,MAAM,CAAC,MAAqB;IAClC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;GAC9B;EAEO,KAAK,CAAC,MAAqB;IACjC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC7B,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;GAC9B;EAEO,MAAM,CAAC,QAAgB;;;IAG7B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;IACvB,IAAI,KAAK,GAAGA,UAAK,CAAC,CAAC,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC7D,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,EAAE;MAC1B,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE;;MAEd,KAAK,GAAG,YAAY,CAClB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,EAClD,IAAI,CAAC,GAAG,EACR,IAAI,CAAC,GAAG,CACT,CAAC;KACH;;IAGD,IAAI,IAAI,CAAC,WAAW,KAAK,GAAG,EAAE;MAC5B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACrB;;IAGD,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,IAAI;IACd,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACjE;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,CAAC,CAAC;GACV;EAED,IAAY,UAAU;IACpB,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3C;IACD,OAAO,IAAI,CAAC,MAAM,CAAC;GACpB;EAEO,WAAW;IACjB,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAS,CAAC;IACrC,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAC1B,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;MAClD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KACnD;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;KAC7C;GACF;EAEO,WAAW;IACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,SAAS;QACxB,IAAI;QACJ;QACE,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;QAC3B,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC;OAC5B,CAAC;IAEN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAEO,QAAQ,CAAC,IAAc;IAC7B,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE;MACtB,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAC7C,IAAI,KAAK,GAAG,GAAG,eAAe,GAAG,eAAe,CACtB,CAAC;MAC7B,IAAI,MAAM,EAAE;QACV,MAAM,CAAC,KAAK,EAAE,CAAC;OAChB;KACF;GACF;EAkBD,MAAM;IACJ,MAAM,EACJ,GAAG,EACH,GAAG,EACH,IAAI,EACJ,EAAE,EACF,cAAc,EACd,WAAW,EACX,QAAQ,EACR,GAAG,EACH,UAAU,EACV,UAAU,GACX,GAAG,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC;IAE5C,MAAM,GAAG,GAAG,QAAQ,CAAC;IACrB,MAAM,KAAK,GAAG,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC;IAChC,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,MAAM,GAAG,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAErC,MAAM,SAAS,GAAG,CAAC,IAAS;MAC1B,OAAO;QACL,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;OACrB,CAAC;KACH,CAAC;IAEF,MAAM,QAAQ,GAAG;MACf,CAAC,KAAK,GAAG,QAAQ;MACjB,CAAC,GAAG,GAAG,MAAM;KACd,CAAC;IAEF,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;MAC5B,KAAK,IAAI,KAAK,GAAG,GAAG,EAAE,KAAK,IAAI,GAAG,EAAE,KAAK,IAAI,IAAI,EAAE;QACjD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAE5C,MAAM,IAAI,GAAQ;UAChB,KAAK;UACL,MAAM,EAAE,KAAK,IAAI,UAAU,IAAI,KAAK,IAAI,UAAU;SACnD,CAAC;QAEF,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;QAEhC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;OAClB;KACF;IAED,iBAAiB,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;IAE5E,QACEE,QAACC,UAAI,IACH,SAAS,EAAE,IAAI,CAAC,OAAO,EACvB,UAAU,EAAE,IAAI,CAAC,MAAM,EACvB,KAAK,EAAEC,wBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE;QACpC,gBAAgB,EAAE,QAAQ;QAC1B,eAAe,EAAE,WAAW,KAAK,SAAS;QAC1C,eAAe,EAAE,GAAG;QACpB,aAAa,EAAE,IAAI,CAAC,KAAK;OAC1B,CAAC,IAEFF,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,iBACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAE7C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdA,kBACE,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,EACtB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;OACjC,EACD,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,aAAa,GAAG,MAAM,GAC1C,CACH,CAAC,EAEFA,iBAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,GAAG,EACxDA,iBACE,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,cAAc,EACnB,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,YAAY,GACjB,EAED,UAAU,CAAC,KAAK,EAAE;MACjB,IAAI,EAAE,GAAG;MACT,OAAO,EAAE,WAAW,KAAK,GAAG;MAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;MAChB,KAAK,EAAE,IAAI,CAAC,MAAM;MAClB,GAAG;MACH,QAAQ;MACR,cAAc;MACd,GAAG;MACH,GAAG;KACJ,CAAC,EAED,IAAI,CAAC,SAAS;MACb,UAAU,CAAC,KAAK,EAAE;QAChB,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,WAAW,KAAK,GAAG;QAC5B,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,GAAG;QACH,QAAQ;QACR,cAAc;QACd,GAAG;QACH,GAAG;OACJ,CAAC,CACA,EACNA,kBAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACD,EACP;GACH;;;;;;;;;;AAgBH,MAAM,UAAU,GAAG,CACjB,KAAc,EACd,EACE,IAAI,EACJ,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,OAAO,EACP,GAAG,EACH,cAAc,GACJ;EAEZ,MAAM,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;EAEvC,MAAM,SAAS,GAAG;IAChB,MAAM,KAAK,GAAQ,EAAE,CAAC;IACtB,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC;IACjC,OAAO,KAAK,CAAC;GACd,CAAC;EAEF,QACEA,iBACE,SAAS,EAAE,CAAC,EAAiB;MAC3B,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;MACnB,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,WAAW,EAAE;QAC9C,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC5B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;WAAM,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,SAAS,EAAE;QACpD,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,EAAE,CAAC,eAAe,EAAE,CAAC;OACtB;KACF,EACD,KAAK,EAAE;MACL,mBAAmB,EAAE,IAAI;MACzB,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,cAAc,EAAE,IAAI,KAAK,GAAG;MAC5B,oBAAoB,EAAE,OAAO;MAC7B,gBAAgB,EAAE,KAAK,KAAK,GAAG;MAC/B,gBAAgB,EAAE,KAAK,KAAK,GAAG;KAChC,EACD,KAAK,EAAE,SAAS,EAAE,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,mBACZ,GAAG,mBACH,GAAG,mBACH,QAAQ,GAAG,MAAM,GAAG,IAAI,mBACxB,KAAK,IAEnB,GAAG,KACFA,iBAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,KAAK,IAClD,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACd,CACP,EACDA,iBAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAG,CACtD,EACN;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,KAAa,EACb,GAAW,EACX,GAAW,EACX,IAAY;EAEZ,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,IAAI,KAAK,CAAC;EAChC,IAAI,IAAI,GAAG,CAAC,EAAE;IACZ,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,GAAG,CAAC;GAC/C;EACD,OAAOF,UAAK,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;EAC3D,OAAOA,UAAK,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;AAClD,CAAC,CAAC;;;;;","names":["clamp","debounceEvent","h","Host","createColorClasses"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  let input = container.querySelector(\n    'input.aux-input'\n  ) as HTMLInputElement | null;\n  if (!input) {\n    input = container.ownerDocument!.createElement('input');\n    input.type = 'hidden';\n    input.classList.add('aux-input');\n    container.appendChild(input);\n  }\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  ::slotted([slot='start']) {\n    margin-inline: 0 14px;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n\n  ::slotted([slot='end']) {\n    margin-inline: 14px 0;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  border-radius: var(--bar-border-radius);\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inset-inline-start: 0;\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n\n  :host(.range-snaps) & {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n}\n\n.range-bar-active {\n  inset-block-end: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  border-radius: var(--knob-border-radius);\n  inset-block-start: calc(50% - var(--knob-size) / 2);\n  inset-inline-start: calc(50% - var(--knob-size) / 2);\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n  inset-inline-start: 0;\n  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    inset-block-start: 0.25em;\n    inset-inline-start: 50%;\n    margin-inline-start: -1.08em;\n    border-radius: 50% 50% 50% 0;\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgba(var(--rgb-inactive), 0.5);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}
+{"file":"nano-range.entry.cjs.js","mappings":"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","names":["clamp","debounceEvent","h","Host","createColorClasses"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n  container: HTMLElement,\n  name: string,\n  value: string | undefined | null,\n  disabled: boolean\n) => {\n  let input = container.querySelector(\n    'input.aux-input'\n  ) as HTMLInputElement | null;\n  if (!input) {\n    input = container.ownerDocument!.createElement('input');\n    input.type = 'hidden';\n    input.classList.add('aux-input');\n    container.appendChild(input);\n  }\n  input.disabled = disabled;\n  input.name = name;\n  input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n  /**\n   * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n   * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n   * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n   * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n   * @prop --bar-height: Height of the range bar; Defaults to 8px;\n   * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n   * @prop --height: Height of the range. Defaults to 42px;\n   * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n   * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n   * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgba(0, 0, 0, 0.3);\n   * @prop --knob-size: Size of the range knob; Defaults to 30px;\n   * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n   * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n   * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n   */\n  --knob-handle-size: (var(--knob-size) * 2);\n  --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n  --knob-border-radius: 50%;\n  --knob-background: #{nano-color(primary, base)};\n  --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n  --knob-size: 30px;\n  --bar-height: 8px;\n  --bar-background: #e2e1e0;\n  --bar-background-active: #a5a5a5;\n  --bar-border-radius: 4px;\n  --height: 42px;\n  --pin-background: #{nano-color(primary, base)};\n  --pin-color: #{nano-color(primary, contrast)};\n  --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n  display: flex;\n  position: relative;\n  flex: 3;\n  align-items: center;\n  user-select: none;\n\n  ::slotted(ion-icon[slot]) {\n    font-size: 1.5em;\n  }\n\n  ::slotted([slot='start']) {\n    margin-inline: 0 14px;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n\n  ::slotted([slot='end']) {\n    margin-inline: 14px 0;\n    margin-block: 0;\n    font-size: 0.9em;\n  }\n}\n\n.range-slider {\n  position: relative;\n  flex: 1;\n  width: 100%;\n  height: var(--height);\n  contain: size layout style;\n  cursor: grab;\n  touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n  cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n  border-radius: var(--bar-border-radius);\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  inset-inline-start: 0;\n  position: absolute;\n  width: 100%;\n  height: var(--bar-height);\n  background: var(--bar-background);\n  pointer-events: none;\n\n  :host(.range-snaps) & {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n}\n\n.range-bar-active {\n  inset-block-end: 0;\n  width: auto;\n  background: var(--bar-background-active);\n\n  :host(.range-pressed) {\n    will-change: left, right;\n  }\n}\n\n// knob\n\n.range-knob {\n  border-radius: var(--knob-border-radius);\n  inset-block-start: calc(50% - var(--knob-size) / 2);\n  inset-inline-start: calc(50% - var(--knob-size) / 2);\n  position: absolute;\n  width: var(--knob-size);\n  height: var(--knob-size);\n  background: var(--knob-background);\n  box-shadow: var(--knob-box-shadow);\n  z-index: 2;\n  pointer-events: none;\n  transform: scale(0.67);\n  transition-duration: 120ms;\n  transition-property: transform, background-color, border;\n  transition-timing-function: ease;\n\n  :host(:not(.range-has-pin)) .range-knob-pressed & {\n    transform: scale(1);\n  }\n}\n\n.range-knob-handle {\n  inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n  inset-inline-start: 0;\n  margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n  position: absolute;\n  width: calc(var(--knob-handle-size));\n  height: calc(var(--knob-handle-size));\n  text-align: center;\n\n  &:active,\n  &:focus {\n    outline: none;\n\n    .range-knob {\n      box-shadow: var(--knob-box-shadow), var(--focus-style);\n    }\n  }\n}\n\n// ticks\n\n.range-tick {\n  position: absolute;\n  inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n  width: var(--bar-height);\n  height: var(--bar-height);\n  background: var(--bar-background-active);\n  z-index: 1;\n  pointer-events: none;\n\n  &:first-of-type {\n    border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n  }\n\n  &-active {\n    background: transparent;\n  }\n}\n\n// pin\n\n.range-pin {\n  transform: translate3d(0, 0, 0) scale(0.01);\n  transform-origin: center top;\n  padding: 0.66em 0;\n  border-radius: 50%;\n  text-align: center;\n  box-sizing: border-box;\n  display: inline-block;\n  position: relative;\n  min-width: 2.33em;\n  height: 2.33em;\n  transition: transform 120ms ease, background 120ms ease;\n  background: var(--pin-background);\n  color: var(--pin-color);\n  font-size: 0.75em;\n\n  &::before {\n    inset-block-start: 0.25em;\n    inset-inline-start: 50%;\n    margin-inline-start: -1.08em;\n    border-radius: 50% 50% 50% 0;\n    position: absolute;\n    width: 2.16em;\n    height: 2.16em;\n    transform: rotate(-45deg);\n    transition: background 120ms ease;\n    background: var(--pin-background);\n    content: '';\n    z-index: -1;\n  }\n\n  .range-knob-pressed & {\n    transform: translate3d(0, -50%, 0) scale(1);\n    transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n  }\n}\n\n// disabled\n\n:host(.range-disabled) {\n  pointer-events: none;\n\n  .range-bar-active,\n  .range-bar,\n  .range-tick {\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n\n  .range-knob {\n    transform: scale(0.55);\n    outline: 5px solid #fff;\n    background-color: rgb(var(--rgb-inactive) / 50%);\n  }\n}\n\n// theme\n\n:host(.nano-color) {\n  .range-bar-active,\n  .range-knob,\n  .range-pin,\n  .range-pin::before,\n  .range-tick {\n    background: current-color(base);\n    color: current-color(contrast);\n  }\n\n  .range-bar {\n    background: current-color(base, 0.26);\n  }\n\n  .range-knob-handle {\n    &:active,\n    &:focus {\n      .range-knob {\n        box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n      }\n    }\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n  Color,\n  Gesture,\n  GestureDetail,\n  KnobName,\n  RangeChangeEventDetail,\n  RangeValue,\n  StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n  tag: 'nano-range',\n  styleUrl: 'range.scss',\n  scoped: true,\n})\nexport class Range implements ComponentInterface {\n  private noUpdate = false;\n  private rect!: ClientRect;\n  private hasFocus = false;\n  private rangeSlider?: HTMLElement;\n  private gesture?: Gesture;\n\n  @Element() el!: HTMLNanoRangeElement;\n\n  @State() private ratioA = 0;\n  @State() private ratioB = 0;\n  @State() private pressedKnob: KnobName;\n\n  /**\n   * The color to use from your application's color palette.\n   * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n   */\n  @Prop() color?: Color;\n\n  /**\n   * How long, in milliseconds, to wait to trigger the\n   * `nanoChange` event after each change in the range value.\n   */\n  @Prop() debounce = 0;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * Show two knobs.\n   */\n  @Prop() dualKnobs = false;\n\n  /**\n   * Minimum integer value of the range.\n   */\n  @Prop() min = 0;\n  @Watch('min')\n  protected minChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * Maximum integer value of the range.\n   */\n  @Prop() max = 100;\n  @Watch('max')\n  protected maxChanged() {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n  }\n\n  /**\n   * If `true`, a pin with integer value is shown when the knob\n   * is pressed.\n   */\n  @Prop() pin = false;\n\n  /**\n   * If `true`, the knob snaps to tick marks evenly spaced based\n   * on the step property value.\n   */\n  @Prop() snaps = false;\n\n  /**\n   * Specifies the value granularity.\n   */\n  @Prop() step = 1;\n\n  /**\n   * If `true`, tick marks are displayed based on the step value.\n   * Only applies when `snaps` is `true`.\n   */\n  @Prop() ticks = false;\n\n  /**\n   * If `true`, the user cannot interact with the range.\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  protected disabledChanged() {\n    if (this.gesture) {\n      this.gesture.enable(!this.disabled);\n    }\n    this.emitStyle();\n  }\n\n  /**\n   * the value of the range.\n   */\n  @Prop({ mutable: true }) value: RangeValue = 0;\n  @Watch('value')\n  protected valueChanged(value: RangeValue) {\n    if (!this.noUpdate) {\n      this.updateRatio();\n    }\n\n    value = this.ensureValueInBounds(value);\n\n    this.nanoChange.emit({ value });\n  }\n\n  private clampBounds = (value: any): number => {\n    return clamp(this.min, value, this.max);\n  };\n\n  private ensureValueInBounds = (value: any) => {\n    if (this.dualKnobs) {\n      return {\n        lower: this.clampBounds(value.lower),\n        upper: this.clampBounds(value.upper),\n      };\n    } else {\n      return this.clampBounds(value);\n    }\n  };\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n  /**\n   * Emitted when the styles change.\n   * @internal\n   */\n  @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n  /**\n   * Emitted when the range has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the range loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  connectedCallback() {\n    this.updateRatio();\n    this.debounceChanged();\n    this.disabledChanged();\n  }\n\n  disconnectedCallback() {\n    if (this.gesture) {\n      this.gesture.destroy();\n      this.gesture = undefined;\n    }\n  }\n\n  async componentDidLoad() {\n    const rangeSlider = this.rangeSlider;\n    if (rangeSlider) {\n      this.gesture = (await import('../../utils/gesture/index')).createGesture({\n        el: rangeSlider,\n        gestureName: 'range',\n        gesturePriority: 100,\n        threshold: 0,\n        onStart: (ev) => this.onStart(ev),\n        onMove: (ev) => this.onMove(ev),\n        onEnd: (ev) => this.onEnd(ev),\n      });\n      this.gesture.enable(!this.disabled);\n    }\n  }\n\n  private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n    let step = this.step;\n    step = step > 0 ? step : 1;\n    step = step / (this.max - this.min);\n    if (!isIncrease) {\n      step *= -1;\n    }\n    if (knob === 'A') {\n      this.ratioA = clamp(0, this.ratioA + step, 1);\n    } else {\n      this.ratioB = clamp(0, this.ratioB + step, 1);\n    }\n    this.updateValue();\n  };\n\n  private getValue(): RangeValue {\n    const value = this.value || 0;\n    if (this.dualKnobs) {\n      if (typeof value === 'object') {\n        return value;\n      }\n      return {\n        lower: 0,\n        upper: value,\n      };\n    } else {\n      if (typeof value === 'object') {\n        return value.upper;\n      }\n      return value;\n    }\n  }\n\n  private emitStyle() {\n    this.nanoStyle.emit({\n      interactive: true,\n      'interactive-disabled': this.disabled,\n    });\n  }\n\n  private onStart(detail: GestureDetail) {\n    const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n    const currentX = detail.currentX;\n\n    // figure out which knob they started closer to\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    this.pressedKnob =\n      !this.dualKnobs ||\n      Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n        ? 'A'\n        : 'B';\n\n    this.setFocus(this.pressedKnob);\n\n    // update the active knob's position\n    this.update(currentX);\n  }\n\n  private onMove(detail: GestureDetail) {\n    this.update(detail.currentX);\n  }\n\n  private onEnd(detail: GestureDetail) {\n    this.update(detail.currentX);\n    this.pressedKnob = undefined;\n  }\n\n  private update(currentX: number) {\n    // figure out where the pointer is currently at\n    // update the knob being interacted with\n    const rect = this.rect;\n    let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n    if (document.dir === 'rtl') {\n      ratio = 1 - ratio;\n    }\n\n    if (this.snaps) {\n      // snaps the ratio to the current value\n      ratio = valueToRatio(\n        ratioToValue(ratio, this.min, this.max, this.step),\n        this.min,\n        this.max\n      );\n    }\n\n    // update which knob is pressed\n    if (this.pressedKnob === 'A') {\n      this.ratioA = ratio;\n    } else {\n      this.ratioB = ratio;\n    }\n\n    // Update input value\n    this.updateValue();\n  }\n\n  private get valA() {\n    return ratioToValue(this.ratioA, this.min, this.max, this.step);\n  }\n\n  private get valB() {\n    return ratioToValue(this.ratioB, this.min, this.max, this.step);\n  }\n\n  private get ratioLower() {\n    if (this.dualKnobs) {\n      return Math.min(this.ratioA, this.ratioB);\n    }\n    return 0;\n  }\n\n  private get ratioUpper() {\n    if (this.dualKnobs) {\n      return Math.max(this.ratioA, this.ratioB);\n    }\n    return this.ratioA;\n  }\n\n  private updateRatio() {\n    const value = this.getValue() as any;\n    const { min, max } = this;\n    if (this.dualKnobs) {\n      this.ratioA = valueToRatio(value.lower, min, max);\n      this.ratioB = valueToRatio(value.upper, min, max);\n    } else {\n      this.ratioA = valueToRatio(value, min, max);\n    }\n  }\n\n  private updateValue() {\n    this.noUpdate = true;\n\n    const { valA, valB } = this;\n    this.value = !this.dualKnobs\n      ? valA\n      : {\n          lower: Math.min(valA, valB),\n          upper: Math.max(valA, valB),\n        };\n\n    this.noUpdate = false;\n  }\n\n  private setFocus(knob: KnobName) {\n    if (this.el.shadowRoot) {\n      const knobEl = this.el.shadowRoot.querySelector(\n        knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n      ) as HTMLElement | undefined;\n      if (knobEl) {\n        knobEl.focus();\n      }\n    }\n  }\n\n  private onBlur = () => {\n    if (this.hasFocus) {\n      this.hasFocus = false;\n      this.nanoBlur.emit();\n      this.emitStyle();\n    }\n  };\n\n  private onFocus = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true;\n      this.nanoFocus.emit();\n      this.emitStyle();\n    }\n  };\n\n  render() {\n    const {\n      min,\n      max,\n      step,\n      el,\n      handleKeyboard,\n      pressedKnob,\n      disabled,\n      pin,\n      ratioLower,\n      ratioUpper,\n    } = this;\n\n    const barStart = `${ratioLower * 100}%`;\n    const barEnd = `${100 - ratioUpper * 100}%`;\n\n    const doc = document;\n    const isRTL = doc.dir === 'rtl';\n    const start = isRTL ? 'right' : 'left';\n    const end = isRTL ? 'left' : 'right';\n\n    const tickStyle = (tick: any) => {\n      return {\n        [start]: tick[start],\n      };\n    };\n\n    const barStyle = {\n      [start]: barStart,\n      [end]: barEnd,\n    };\n\n    const ticks = [];\n    if (this.snaps && this.ticks) {\n      for (let value = min; value <= max; value += step) {\n        const ratio = valueToRatio(value, min, max);\n\n        const tick: any = {\n          ratio,\n          active: ratio >= ratioLower && ratio <= ratioUpper,\n        };\n\n        tick[start] = `${ratio * 100}%`;\n\n        ticks.push(tick);\n      }\n    }\n\n    renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n    return (\n      <Host\n        onFocusin={this.onFocus}\n        onFocusout={this.onBlur}\n        class={createColorClasses(this.color, {\n          'range-disabled': disabled,\n          'range-pressed': pressedKnob !== undefined,\n          'range-has-pin': pin,\n          'range-snaps': this.snaps,\n        })}\n      >\n        <div class=\"range-wrap\">\n          <slot name=\"start\"></slot>\n          <div\n            class=\"range-slider\"\n            ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n          >\n            {ticks.map((tick) => (\n              <span\n                style={tickStyle(tick)}\n                role=\"presentation\"\n                class={{\n                  'range-tick': true,\n                  'range-tick-active': tick.active,\n                }}\n                part={tick.active ? 'tick-active' : 'tick'}\n              />\n            ))}\n\n            <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n            <div\n              class=\"range-bar range-bar-active\"\n              role=\"presentation\"\n              style={barStyle}\n              part=\"bar-active\"\n            />\n\n            {renderKnob(isRTL, {\n              knob: 'A',\n              pressed: pressedKnob === 'A',\n              value: this.valA,\n              ratio: this.ratioA,\n              pin,\n              disabled,\n              handleKeyboard,\n              min,\n              max,\n            })}\n\n            {this.dualKnobs &&\n              renderKnob(isRTL, {\n                knob: 'B',\n                pressed: pressedKnob === 'B',\n                value: this.valB,\n                ratio: this.ratioB,\n                pin,\n                disabled,\n                handleKeyboard,\n                min,\n                max,\n              })}\n          </div>\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n\ninterface RangeKnob {\n  knob: KnobName;\n  value: number;\n  ratio: number;\n  min: number;\n  max: number;\n  disabled: boolean;\n  pressed: boolean;\n  pin: boolean;\n\n  handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n  isRTL: boolean,\n  {\n    knob,\n    value,\n    ratio,\n    min,\n    max,\n    disabled,\n    pressed,\n    pin,\n    handleKeyboard,\n  }: RangeKnob\n) => {\n  const start = isRTL ? 'right' : 'left';\n\n  const knobStyle = () => {\n    const style: any = {};\n    style[start] = `${ratio * 100}%`;\n    return style;\n  };\n\n  return (\n    <div\n      onKeyDown={(ev: KeyboardEvent) => {\n        const key = ev.key;\n        if (key === 'ArrowLeft' || key === 'ArrowDown') {\n          handleKeyboard(knob, false);\n          ev.preventDefault();\n          ev.stopPropagation();\n        } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n          handleKeyboard(knob, true);\n          ev.preventDefault();\n          ev.stopPropagation();\n        }\n      }}\n      class={{\n        'range-knob-handle': true,\n        'range-knob-a': knob === 'A',\n        'range-knob-b': knob === 'B',\n        'range-knob-pressed': pressed,\n        'range-knob-min': value === min,\n        'range-knob-max': value === max,\n      }}\n      style={knobStyle()}\n      role=\"slider\"\n      tabindex={disabled ? -1 : 0}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-disabled={disabled ? 'true' : null}\n      aria-valuenow={value}\n    >\n      {pin && (\n        <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n          {Math.round(value)}\n        </div>\n      )}\n      <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n    </div>\n  );\n};\n\nconst ratioToValue = (\n  ratio: number,\n  min: number,\n  max: number,\n  step: number\n): number => {\n  let value = (max - min) * ratio;\n  if (step > 0) {\n    value = Math.round(value / step) * step + min;\n  }\n  return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n  return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}

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

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-41582c2a.js');
+const index = require('./index-e1b5c3ea.js');
 const focusVisible = require('./focus-visible-569511f0.js');
 const math = require('./math-a8123703.js');
 
-const ratingCss = ".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-start:0;margin-block-end:0;margin-inline-start:calc(var(--symbol-spacing) * -1);margin-inline-end: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 ratingCss = ".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;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-after:0;margin-block-end:0;-webkit-margin-start:calc(var(--symbol-spacing) * -1);margin-inline-start:calc(var(--symbol-spacing) * -1);-webkit-margin-end:calc(var(--symbol-spacing) * -1);margin-inline-end: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 Rating = class {
   constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"nano-rating.entry.cjs.js","mappings":"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","names":["clamp","focusVisible","h","index"],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($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 #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: calc(var(--symbol-spacing) * -1);\n  margin-inline-end: 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    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' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).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                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-rating.entry.cjs.js","mappings":"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","names":["clamp","focusVisible","h","index"],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($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 #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: calc(var(--symbol-spacing) * -1);\n  margin-inline-end: 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    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' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).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                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-41582c2a.js');
+const index = require('./index-e1b5c3ea.js');
 
 const ResizeObserve = class {
   constructor(hostRef) {
@@ -61,6 +61,9 @@ const ResizeObserve = class {
       this.nanoResizeObserverReady.emit();
     }
   }
+  newStatesProp() {
+    this.statesChanged();
+  }
   dimensionChanged() {
     this.assessChanges();
   }
@@ -107,7 +110,7 @@ const ResizeObserve = class {
     let didChange = false;
     const measureEle = findNonContentsEle(this.host.firstElementChild);
     if (measureEle) {
-      if (this.notifyContentFit?.includes('x')) {
+      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {
         if (this.currentWidth < measureEle.scrollWidth &&
           this.contentFitX !== false) {
           didChange = true;
@@ -119,7 +122,7 @@ const ResizeObserve = class {
           this.contentFitX = true;
         }
       }
-      if (this.notifyContentFit?.includes('y')) {
+      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {
         if (this.currentHeight < measureEle.scrollHeight &&
           this.contentFitY !== false) {
           didChange = true;
@@ -172,6 +175,8 @@ const ResizeObserve = class {
     return retObj;
   }
   attachRO() {
+    if (!window['ResizeObserver'])
+      return;
     this.ro = new ResizeObserver(() => {
       const { width, height } = this.host.getBoundingClientRect();
       this.currentWidth = Math.ceil(width);
@@ -180,17 +185,20 @@ const ResizeObserve = class {
     this.ro.observe(this.host);
   }
   componentWillLoad() {
+    this.statesChanged();
+    // set all class as 'not-' by deafult
+    this.applyChanges(this.appliedStates);
     this.classNames = Array.from(this.host.classList);
-    if (!this.currentWidth || !this.currentHeight) {
+    if (!this.currentWidth && !this.currentHeight) {
       index.readTask(() => {
         const { width, height } = this.host.getBoundingClientRect();
         this.currentWidth = Math.ceil(width);
         this.currentHeight = Math.ceil(height);
       });
     }
-    this.statesChanged();
-    // set all class as 'not-' by deafult
-    this.applyChanges(this.appliedStates);
+    else {
+      this.assessChanges();
+    }
   }
   connectedCallback() {
     if (!this.ro)
@@ -210,14 +218,14 @@ const ResizeObserve = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "classNames": ["classNameChange"],
+    "states": ["newStatesProp", "statesChanged"],
     "currentHeight": ["dimensionChanged"],
-    "currentWidth": ["dimensionChanged"],
-    "states": ["statesChanged"]
+    "currentWidth": ["dimensionChanged"]
   }; }
 };
 ResizeObserve.style = "nano-resize-observe { display: block }";
 
-const skeletonCss = ":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, rgba(var(--base-color-rgb), 1));--tint:var(--nano-skeleton-tint, rgba(var(--base-color-rgb), 0.5));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}to{background-position:-200% 0}}";
+const skeletonCss = ":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 Skeleton = class {
   constructor(hostRef) {