@nanoporetech-digital/components 7.5.5 → 7.7.0

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

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

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

@@ -5,11 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 const focusVisible = require('./focus-visible-39b54d1f.js');
 const math = require('./math-ea9cdc71.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{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";
+const 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{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--symbol-color:#b5aea7;--symbol-color-active:#f5cc49;--symbol-spacing:0.25rem;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:inline-block}.rating-wrap.sc-nano-rating{position:relative;margin-block:0;margin-inline:calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(.nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";
 const NanoRatingStyle0 = ratingCss;
 
 const Rating = class {
@@ -181,23 +182,23 @@ const Rating = class {
         else {
             displayValue = this.isHovering ? this.hoverValue : this.value;
         }
-        return (index.h("div", { key: '71577f298741ece02dc6655e5275d00dedd37b86', class: "rating-wrap" }, index.h("div", { key: '1970dd80f9783316eddb98501f1e5f1e8e0325c9', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
+        return (renderer.h(index.Host, { key: 'e7aec714fffd7abf991de7f31712d6a85a67ee75', class: "nano-rating" }, renderer.h("div", { key: '1865bfccf63d3b544e394abb8e4c9141636dd930', class: "rating-wrap" }, renderer.h("div", { key: '5cb091e86a3b68cdc44ed0f181ba9e99cecfd8da', dir: this.isRtl ? 'rtl' : null, ref: (el) => (this.rating = el), part: "base", class: {
                 rating: true,
                 'rating--readonly': this.readonly,
                 'rating--disabled': this.disabled,
-            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, index.h("span", { key: '4d341aa10271c68e94379babdd4f88d9c436dbcb', class: "rating__symbols rating__symbols--inactive" }, counter.map((index$1) => (index.h("span", { class: {
+            }, "aria-disabled": this.disabled ? 'true' : 'false', "aria-readonly": this.readonly ? 'true' : 'false', "aria-valuenow": this.value, "aria-valuemin": 0, "aria-valuemax": this.max, tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onMouseMove: this.handleMouseMove, onFocus: this.handleFocus, onBlur: this.handleBlur }, renderer.h("span", { key: '118a16e603a53cbfc515297eb347705277118ca1', class: "rating__symbols rating__symbols--inactive" }, counter.map((index) => (renderer.h("span", { class: {
                 rating__symbol: true,
-                'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index$1 + 1,
+                'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
             },
             // Users can click the current value to clear the rating. When this happens, we set this.isHovering to
             // false to prevent the hover state from confusing them as they move the mouse out of the control. This
             // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.
-            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index$1 + 1) })))), index.h("span", { key: '13a214cc0d52fedcf48953e17e0d2e2e14ded9f9', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
+            onMouseEnter: this.handleMouseEnter, innerHTML: this.symbol(index + 1) })))), renderer.h("span", { key: 'b299dae6997acbcece7582efd9f99858cf30b22b', ref: (span) => (this.indicator = span), class: "rating__symbols rating__symbols--indicator", style: {
                 clip: this.clip(displayValue),
-            } }, counter.map((index$1) => (index.h("span", { class: {
+            } }, counter.map((index) => (renderer.h("span", { class: {
                 rating__symbol: true,
-                'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index$1 + 1,
-            }, innerHTML: this.symbol(index$1 + 1) })))), index.h("input", { key: '4dd7a72137134862bea4524ce4e54a828640ba3d', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly }))));
+                'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
+            }, innerHTML: this.symbol(index + 1) })))), renderer.h("input", { key: '7e134eb0de5e255b474e567406a0ae4f027aa83b', type: "hidden", name: this.name, value: this.value, disabled: this.disabled || this.readonly })))));
     }
     static get watchers() { return {
         "value": ["handleValueChange"],

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

@@ -1 +1 @@
-{"file":"nano-rating.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0kEAA0kE,CAAC;AAC7lE,yBAAe,SAAS;;MCsBX,MAAM;;;;;;;IACT,MAAM,CAAc;IACpB,KAAK,CAAU;IACf,SAAS,CAAc;;IAItB,UAAU,GAAG,CAAC,CAAC;IACf,UAAU,GAAG,KAAK,CAAC;;;;IAKY,KAAK,GAAG,CAAC,CAAC;;;;IAK1C,GAAG,GAAG,CAAC,CAAC;;;;IAKR,SAAS,GAAG,CAAC,CAAC;;;;IAKd,QAAQ,GAAG,KAAK,CAAC;;;;IAKjB,QAAQ,GAAG,KAAK,CAAC;;;;IAKjB,IAAI,GAAG,EAAE,CAAC;;;;IAKV,UAAU,GAAG,YAAY,CAAC;;;;;;;;IAS1B,MAAM,GAAG,CAAC,OAAe,KAC/B,mBAAmB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC;IAG3D,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAGD,kBAAkB;QAChB,IAAI,CAAC,IAAI,CAAC,MAAM;YACd,IAAI,CAAC,MAAM,GAAG,CAAC,CAAS,KACtB,mBAAmB,GAAG,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC;KAC9D;;;;IAKQ,UAAU,CAAsB;;;;IAKhC,QAAQ,CAAsB;;;;IAK9B,SAAS,CAAsB;;;;IAMxC,MAAM,QAAQ;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;;;;IAMD,MAAM,WAAW;QACf,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;KACpB;IAEO,yBAAyB,CAAC,KAAiB;QACjD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;QAC/D,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QAEjE,IAAI,GAAW,CAAC;QAChB,GAAG,GAAG,IAAI,CAAC,gBAAgB,CACzB,CAAC,CAAC,KAAK,CAAC,OAAO,GAAG,aAAa,IAAI,cAAc,IAAI,IAAI,CAAC,GAAG,EAC7D,IAAI,CAAC,SAAS,CACf,CAAC;QACF,IAAI,IAAI,CAAC,KAAK;YAAE,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;QAEtD,OAAOA,UAAK,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KAChC;IAEO,gBAAgB,CAAC,aAAqB,EAAE,SAAS,GAAG,GAAG;QAC7D,MAAM,UAAU,GAAG,CAAC,GAAG,SAAS,CAAC;QACjC,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC;KAC3D;IAEO,WAAW,GAAG,CAAC,KAAiB;QACtC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO;SACR;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,CAAC,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,QAAQ,CAAC;QACpD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB;QAC3C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,OAAO;SACR;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YAC7B,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC;YACxE,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;YACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAChC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAC3C,CAAC;YACF,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;YACxB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;YACf,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QAED,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;YACtB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;KACF,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;IAEM,eAAe,GAAG,CAAC,KAAiB;QAC1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC;KACzD,CAAC;IAEM,IAAI,CAAC,YAAoB;QAC/B,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QACzB,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;QACrD,IAAI,IAAI,CAAC,KAAK;YACZ,OAAO,WAAW,EAAE,YAClB,EAAE,GAAG,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CACpD,KAAK,CAAC;QACR,OAAO,WACL,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAC/C,aAAa,CAAC;KACf;IAED,gBAAgB;QACdC,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAClC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;KAC3E;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,KAAK,KAAK,CAAC;KACpE;IAED,oBAAoB;QAClBA,yBAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;IAED,MAAM;QACJ,IAAI,CAAC,KAAK;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,KAAK,KAAK,CAAC;QAEnE,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QAEnD,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;SAC3B;aAAM;YACL,YAAY,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;SAC/D;QAED,QACEC,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEACE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAG,KAAK,GAAG,IAAI,EAC9B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;aAClC,mBACc,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,KAAK,mBACV,CAAC,mBACD,IAAI,CAAC,GAAG,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,IAEvBA,mEAAM,KAAK,EAAC,2CAA2C,IACpD,OAAO,CAAC,GAAG,CAAC,CAACC,OAAK,MACjBD,kBACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,uBAAuB,EACrB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAKC,OAAK,GAAG,CAAC;aAC3D;;;;YAID,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,SAAS,EAAE,IAAI,CAAC,MAAM,CAACA,OAAK,GAAG,CAAC,CAAC,GACjC,CACH,CAAC,CACG,EAEPD,mEACE,GAAG,EAAE,CAAC,IAAI,MAAM,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,KAAK,EAAC,4CAA4C,EAClD,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC;aAC9B,IAEA,OAAO,CAAC,GAAG,CAAC,CAACC,OAAK,MACjBD,kBACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,uBAAuB,EACrB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAKC,OAAK,GAAG,CAAC;aAC3D,EACD,SAAS,EAAE,IAAI,CAAC,MAAM,CAACA,OAAK,GAAG,CAAC,CAAC,GACjC,CACH,CAAC,CACG,EACPD,oEACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GACxC,CACE,CACF,EACN;KACH;;;;;;;;;;","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 '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n  */\n\n  --symbol-color: #{map.get(tokens.$colors, palegrey)};\n  --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{tokens.$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0;\n  margin-inline: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    if (!this.symbol)\n      this.symbol = (_: number) =>\n        '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-rating.entry.cjs.js","mappings":"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","names":["clamp","focusVisible","h","Host"],"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get(tokens.$colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{tokens.$control-focus-style}\n  */\n\n  --symbol-color: #{map.get(tokens.$colors, palegrey)};\n  --symbol-color-active: #{map.get(tokens.$colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{tokens.$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0;\n  margin-inline: calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(.nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  ComponentInterface,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    if (!this.symbol)\n      this.symbol = (_: number) =>\n        '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <Host class=\"nano-rating\">\n        <div class=\"rating-wrap\">\n          <div\n            dir={this.isRtl ? 'rtl' : null}\n            ref={(el) => (this.rating = el)}\n            part=\"base\"\n            class={{\n              rating: true,\n              'rating--readonly': this.readonly,\n              'rating--disabled': this.disabled,\n            }}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            aria-readonly={this.readonly ? 'true' : 'false'}\n            aria-valuenow={this.value}\n            aria-valuemin={0}\n            aria-valuemax={this.max}\n            tabIndex={this.disabled ? -1 : 0}\n            onClick={this.handleClick}\n            onKeyDown={this.handleKeyDown}\n            onMouseEnter={this.handleMouseEnter}\n            onMouseLeave={this.handleMouseLeave}\n            onMouseMove={this.handleMouseMove}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          >\n            <span class=\"rating__symbols rating__symbols--inactive\">\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                  // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                  // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                  onMouseEnter={this.handleMouseEnter}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n\n            <span\n              ref={(span) => (this.indicator = span)}\n              class=\"rating__symbols rating__symbols--indicator\"\n              style={{\n                clip: this.clip(displayValue),\n              }}\n            >\n              {counter.map((index) => (\n                <span\n                  class={{\n                    rating__symbol: true,\n                    'rating__symbol--hover':\n                      this.isHovering && Math.ceil(displayValue) === index + 1,\n                  }}\n                  innerHTML={this.symbol(index + 1)}\n                />\n              ))}\n            </span>\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled || this.readonly}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -5,7 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 
 const ResizeObserve = class {
     constructor(hostRef) {
@@ -229,10 +230,10 @@ const ResizeObserve = class {
             this.ro.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: '09a3b9f8a724f07ba84eec73378725dec973773a' }, index.h("slot", { key: '2f990e9c1ee91e1392a370d07ff988cb3abc3e42' }), !!this.notifyContentFit &&
+        return (renderer.h(index.Host, { key: 'b34bd4742548d018aeae0f3ab98e85611287ec07', class: "nano-resize-observe" }, renderer.h("slot", { key: 'f9220f1781302bed070ba24f297dfa168fdf0549' }), !!this.notifyContentFit &&
             (this.contentFitX !== null || this.contentFitY !== null) && [
-            this.contentFitX ? (index.h("slot", { name: "content-fit-x" })) : (index.h("slot", { name: "content-nofit-x" })),
-            this.contentFitY ? (index.h("slot", { name: "content-fit-y" })) : (index.h("slot", { name: "content-nofit-y" })),
+            this.contentFitX ? (renderer.h("slot", { name: "content-fit-x" })) : (renderer.h("slot", { name: "content-nofit-x" })),
+            this.contentFitY ? (renderer.h("slot", { name: "content-fit-y" })) : (renderer.h("slot", { name: "content-nofit-y" })),
         ]));
     }
     static get watchers() { return {
@@ -254,10 +255,10 @@ const Skeleton = class {
     /** When `true`, the skeleton will animate. */
     animated = true;
     render() {
-        return (index.h("div", { key: '39135db0beb9ba3fdda2e0fe9d82e08f3bc8c118', class: {
+        return (renderer.h(index.Host, { key: '97ea058a91c14ec6cb5707d5f7c36ce71836db88', class: "nano-skeleton" }, renderer.h("div", { key: '97aaf3eb540c1e8671c661e0f1e7cebb260f057b', class: {
                 skeleton: true,
                 animate: this.animated,
-            } }, index.h("div", { key: '55bc13ba8fd8ae10afa64e670d56494438809a4a', class: "skeleton__indicator" }, "\u00A0")));
+            } }, renderer.h("div", { key: '378a1c6168fa2462e81da0205f55c58260c52cac', class: "skeleton__indicator" }, "\u00A0"))));
     }
 };
 Skeleton.style = NanoSkeletonStyle0;

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

@@ -1 +1 @@
-{"file":"nano-resize-observe.nano-skeleton.entry.cjs.js","mappings":"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","names":["readTask","h","Host"],"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport { ResizeStateChangeEventDetail } from './resize-observe-interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `:host { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens/components' as cmps;\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{cmps.$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{cmps.$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <div\n        class={{\n          skeleton: true,\n          animate: this.animated,\n        }}\n      >\n        <div class=\"skeleton__indicator\">&nbsp;</div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-resize-observe.nano-skeleton.entry.cjs.js","mappings":"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","names":["readTask","h","Host"],"sources":["src/components/resize-observe/resize-observe.tsx","src/components/skeleton/skeleton.scss?tag=nano-skeleton&encapsulation=shadow","src/components/skeleton/skeleton.tsx"],"sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Host,\n  State,\n  Watch,\n  ComponentInterface,\n  Event,\n  EventEmitter,\n  readTask,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { ResizeStateChangeEventDetail } from './resize-observe-interface';\n\ntype ResizeObserverState = { states?: string[]; applied?: boolean };\ninterface StateMaps {\n  h: Map<number, ResizeObserverState>;\n  w: Map<number, ResizeObserverState>;\n}\n\n/**\n * A Resize-Observer utility component.\n * Takes a string list of sizes and optional class-names.\n * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\n * Additionally, can fire events when content no-longer fits within the element.\n * @slot - Main slot for any content.\n * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n * @slot content-fit-y - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off\n * @slot content-nofit-y - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off\n */\n@Component({\n  tag: 'nano-resize-observe',\n  styles: `:host { display: block }`,\n  shadow: true,\n})\nexport class ResizeObserve implements ComponentInterface {\n  private ro: ResizeObserver;\n  private appliedStates: StateMaps;\n  private isReady = false;\n\n  @Element() host: HTMLNanoResizeObserveElement;\n  @State() currentWidth: number;\n  @State() currentHeight: number;\n  @State() classNames: string[] = [];\n  @State() contentFitX = null;\n  @State() contentFitY = null;\n\n  @Watch('classNames')\n  classNameChange() {\n    this.host.className = this.classNames.join(' ');\n    if (!this.isReady && this.classNames.includes('is-ready')) {\n      this.isReady = true;\n      this.nanoResizeObserverReady.emit();\n    }\n  }\n\n  /** Fire `nanoResizeContentFitChange` events notifying\n   * whether content currently fits or does not on the x, y or both axis'.\n   * Also makes the `content-fit-...` slots available */\n  @Prop() notifyContentFit: 'x' | 'y' | 'xy';\n\n  /** string list of sizes and optional class-names.\n   * Adds class-names and fires nanoResizeStateChange events. Upon hitting breakpoints.\n   * Format: `states=\"800w, 300h class1 class2\"` */\n  @Prop() states: string;\n\n  @Watch('states')\n  newStatesProp() {\n    this.statesChanged();\n  }\n\n  /** A resize break point is switched on or off */\n  @Event() nanoResizeStateChange!: EventEmitter<ResizeStateChangeEventDetail>;\n\n  /** Fires after the initial loading and assessment */\n  @Event() nanoResizeObserverReady!: EventEmitter<void>;\n\n  /** Fires when the content either begins or stops fitting.\n   * Will only work when `notifyContentFit` is set. */\n  @Event() nanoResizeContentFitChange!: EventEmitter<{\n    x: boolean;\n    y: boolean;\n  }>;\n\n  /** Fires after any resizing */\n  @Event() nanoResize!: EventEmitter<ResizeObserverEntry[]>;\n\n  @Watch('currentHeight')\n  @Watch('currentWidth')\n  dimensionChanged() {\n    this.assessChanges();\n  }\n\n  @Watch('states')\n  statesChanged() {\n    if (!this.states) return;\n\n    const toBpDir = (bpDir: string) => {\n      const bpDirSpl = bpDir.split(/(\\d+)/).filter((bs) => bs.length);\n      return { bp: parseInt(bpDirSpl[0]), dir: bpDirSpl[1] };\n    };\n    this.appliedStates = { h: new Map(), w: new Map() };\n\n    // parse state string\n    this.states.split(',').map((st) => {\n      st = st.trim();\n      if (st.includes(' ')) {\n        const [key, ...classes] = st.split(' ');\n        const { bp, dir } = toBpDir(key);\n        this.appliedStates[dir as keyof StateMaps].set(bp, {\n          states: classes,\n          applied: false,\n        });\n      } else {\n        const { bp, dir } = toBpDir(st);\n        this.appliedStates[dir as keyof StateMaps].set(bp, { applied: false });\n      }\n    });\n  }\n\n  private assesContentFit() {\n    if (!this.notifyContentFit) return;\n\n    const findNonContentsEle = (ele: Element) => {\n      if (window.getComputedStyle(ele).display !== 'contents') return ele;\n\n      const recurse = (e: Element): Element | null => {\n        return Array.from(e.children).find((cEle: HTMLElement) => {\n          if (window.getComputedStyle(cEle).display !== 'contents') return cEle;\n          recurse(cEle);\n        });\n      };\n      return recurse(ele);\n    };\n\n    let didChange = false;\n    const measureEle = findNonContentsEle(this.host.firstElementChild);\n\n    if (measureEle) {\n      if (this.notifyContentFit && this.notifyContentFit.includes('x')) {\n        if (\n          this.currentWidth < measureEle.scrollWidth &&\n          this.contentFitX !== false\n        ) {\n          didChange = true;\n          this.contentFitX = false;\n        } else if (\n          this.currentWidth >= measureEle.scrollWidth &&\n          this.contentFitX !== true\n        ) {\n          didChange = true;\n          this.contentFitX = true;\n        }\n      }\n\n      if (this.notifyContentFit && this.notifyContentFit.includes('y')) {\n        if (\n          this.currentHeight < measureEle.scrollHeight &&\n          this.contentFitY !== false\n        ) {\n          didChange = true;\n          this.contentFitY = false;\n        } else if (\n          this.currentHeight >= measureEle.scrollHeight &&\n          this.contentFitY !== true\n        ) {\n          didChange = true;\n          this.contentFitY = true;\n        }\n      }\n\n      if (didChange) {\n        this.nanoResizeContentFitChange.emit({\n          x: this.contentFitX,\n          y: this.contentFitY,\n        });\n      }\n    }\n  }\n\n  private assessChanges = () => {\n    if (!this.currentWidth && !this.currentHeight) return;\n    readTask(() => this.assesContentFit());\n\n    if (!this.states || !this.appliedStates) return;\n\n    const changedStates: StateMaps = { h: new Map(), w: new Map() };\n    let hasChanged = false;\n\n    Object.keys(this.appliedStates).forEach((dimType) => {\n      let dim: number;\n      if (dimType === 'h') dim = this.currentHeight;\n      else dim = this.currentWidth;\n\n      this.appliedStates[dimType].forEach(\n        (state: ResizeObserverState, bp: number) => {\n          if (dim >= bp && state.applied === false) {\n            state.applied = true;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          } else if (dim < bp && state.applied === true) {\n            state.applied = false;\n            changedStates[dimType].set(bp, state);\n            hasChanged = true;\n          }\n        }\n      );\n    });\n    if (hasChanged) this.applyChanges(changedStates);\n    else if (!this.classNames.includes('is-ready'))\n      this.classNames = [...this.classNames, 'is-ready'];\n  };\n\n  private applyChanges(changes: StateMaps) {\n    if (!this.states) return;\n\n    let classNames = [...this.classNames];\n    Object.keys(changes).forEach((dimType: keyof StateMaps) => {\n      changes[dimType].forEach((state) => {\n        if (!state.states) return;\n        state.states.map((st) => {\n          if (state.applied) {\n            classNames.push(st);\n            classNames = classNames.filter((cl) => cl !== 'not-' + st);\n          } else {\n            classNames.push('not-' + st);\n            classNames = classNames.filter((cl) => cl !== st);\n          }\n        });\n      });\n    });\n    this.classNames = ['is-ready', ...classNames];\n    this.nanoResizeStateChange.emit(this.toSimpleObj(changes));\n  }\n\n  private toSimpleObj(stateMaps: StateMaps) {\n    const retObj = {};\n    Object.keys(stateMaps).forEach((dimType: keyof StateMaps) => {\n      stateMaps[dimType].forEach((state: ResizeObserverState, bp: number) => {\n        retObj[bp + dimType] = state.applied;\n      });\n    });\n    return retObj;\n  }\n\n  private attachRO() {\n    if (!window['ResizeObserver']) return;\n\n    this.ro = new ResizeObserver((ro) => {\n      const { width, height } = this.host.getBoundingClientRect();\n      this.currentWidth = Math.ceil(width);\n      this.currentHeight = Math.ceil(height);\n      this.nanoResize.emit(ro);\n    });\n    this.ro.observe(this.host);\n  }\n\n  componentWillLoad() {\n    this.classNames = Array.from(this.host.classList);\n\n    this.statesChanged();\n    // set all class as 'not-' by deafult\n    this.applyChanges(this.appliedStates);\n\n    if (!this.currentWidth && !this.currentHeight) {\n      readTask(() => {\n        const { width, height } = this.host.getBoundingClientRect();\n        this.currentWidth = Math.ceil(width);\n        this.currentHeight = Math.ceil(height);\n      });\n    } else {\n      this.assessChanges();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.ro) this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-resize-observe\">\n        <slot />\n        {!!this.notifyContentFit &&\n          (this.contentFitX !== null || this.contentFitY !== null) && [\n            this.contentFitX ? (\n              <slot name=\"content-fit-x\" />\n            ) : (\n              <slot name=\"content-nofit-x\" />\n            ),\n            this.contentFitY ? (\n              <slot name=\"content-fit-y\" />\n            ) : (\n              <slot name=\"content-nofit-y\" />\n            ),\n          ]}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens/components' as cmps;\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{cmps.$skeleton-color-rgb};\n   * @prop --color: default var(--nano-skeleton-color, rgba(var(--base-color-rgb), 1));\n   * @prop --tint: default var(--nano-skeleton-tint, rgba(var(--base-color-rgb), .3));\n   */\n\n  --base-color-rgb: #{cmps.$skeleton-color-rgb};\n  --color: var(--nano-skeleton-color, rgb(var(--base-color-rgb) / 100%));\n  --tint: var(--nano-skeleton-tint, rgb(var(--base-color-rgb) / 50%));\n\n  display: block;\n  position: relative;\n  border-radius: 0.25rem;\n  min-block-size: 1em;\n  line-height: inherit;\n}\n\n.skeleton {\n  display: flex;\n  min-inline-size: 100%;\n  min-block-size: 100%;\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: inherit;\n  line-height: inherit;\n}\n\n.skeleton.animate .skeleton__indicator {\n  background:\n    linear-gradient(\n      270deg,\n      var(--tint),\n      var(--color),\n      var(--color),\n      var(--tint)\n    );\n  background-size: 400% 100%;\n  animation: loader 6s ease-in-out infinite;\n}\n\n@keyframes loader {\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n}\n","import { Component, Prop, ComponentInterface, Host } from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n/**\n * Skeletons are used to show where content will eventually be drawn.\n * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.\n * Prevents large areas of empty space during asynchronous operations.\n */\n@Component({\n  tag: 'nano-skeleton',\n  styleUrl: 'skeleton.scss',\n  shadow: true,\n})\nexport class Skeleton implements ComponentInterface {\n  /** When `true`, the skeleton will animate. */\n  @Prop() animated = true;\n\n  render() {\n    return (\n      <Host class=\"nano-skeleton\">\n        <div\n          class={{\n            skeleton: true,\n            animate: this.animated,\n          }}\n        >\n          <div class=\"skeleton__indicator\">&nbsp;</div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -5,7 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 
 const slideCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{display:flex;align-items:center;justify-content:center;inline-size:100%;min-block-size:100%;font-size:18px;text-align:center;box-sizing:border-box;overflow:hidden;transition:opacity 0.2s;opacity:0;flex-direction:column}:host([ready]){opacity:1}:host(:not([ready])){flex:1 0 auto}";
 const NanoSlideStyle0 = slideCss;
@@ -41,7 +42,7 @@ const Slide = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '7f911e5951cdf2231e006a0570f8bba180d5b8b5' }, index.h("slot", { key: '4bf3089b26f9ba5f4da7c9eb6ffb2a380dcbaabd' })));
+        return (renderer.h(index.Host, { key: 'e43f75894bf356f5f7bc6628e66eb348b3c5fa43', class: "nano-slide" }, renderer.h("slot", { key: 'c043cf5ce0137f9dae9d68801f69d14e204f915b' })));
     }
     static get watchers() { return {
         "ready": ["readyChange"]

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

@@ -1 +1 @@
-{"file":"nano-slide.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,+eAA+e,CAAC;AACjgB,wBAAe,QAAQ;;MCeV,KAAK;;;;;;;;IAIP,cAAc,CAAsB;;;;;IAML,KAAK,GAAmB,IAAI,CAAC;IAGrE,WAAW,CAAC,QAAwB,EAAE,QAAyB;QAC7D,IACE,OAAO,QAAQ,KAAK,WAAW;YAC/B,QAAQ,KAAK,KAAK;YAClB,QAAQ,KAAK,IAAI,EACjB;YACA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B;KACF;IAED,gBAAgB;;QAEd,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO;QAC5C,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAQ,CACH,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  min-block-size: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n  flex-direction: column;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n\n:host(:not([ready])) {\n  flex: 1 0 auto;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  h,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nano-slide.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,+eAA+e,CAAC;AACjgB,wBAAe,QAAQ;;MCeV,KAAK;;;;;;;;IAIP,cAAc,CAAsB;;;;;IAML,KAAK,GAAmB,IAAI,CAAC;IAGrE,WAAW,CAAC,QAAwB,EAAE,QAAyB;QAC7D,IACE,OAAO,QAAQ,KAAK,WAAW;YAC/B,QAAQ,KAAK,KAAK;YAClB,QAAQ,KAAK,IAAI,EACjB;YACA,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;SAC5B;KACF;IAED,gBAAgB;;QAEd,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAAE,OAAO;QAC5C,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACnB,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,QACEA,WAACC,UAAI,qDAAC,KAAK,EAAC,YAAY,IACtBD,uEAAQ,CACH,EACP;KACH;;;;;;;;;","names":["h","Host"],"sources":["src/components/slides/slide.scss?tag=nano-slide&encapsulation=shadow","src/components/slides/slide.tsx"],"sourcesContent":["// Slide\n// --------------------------------------------------\n\n:host {\n  // Center slide text vertically\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 100%;\n  min-block-size: 100%;\n  font-size: 18px;\n  text-align: center;\n  box-sizing: border-box;\n  overflow: hidden;\n  transition: opacity 0.2s;\n  opacity: 0;\n  flex-direction: column;\n}\n\n:host([ready]) {\n  opacity: 1;\n}\n\n:host(:not([ready])) {\n  flex: 1 0 auto;\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Event,\n  EventEmitter,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\n\n@Component({\n  tag: 'nano-slide',\n  styleUrl: 'slide.scss',\n  shadow: true,\n})\nexport class Slide implements ComponentInterface {\n  /**\n   * Fired when the slide has loaded.\n   */\n  @Event() nanoSlideReady!: EventEmitter<void>;\n\n  /**\n   * Used to to inform the parent slides components of readiness.\n   * This will automatically be set to true when the slide has loaded but can be set and updated manually.\n   */\n  @Prop({ mutable: true, reflect: true }) ready: boolean | null = null;\n\n  @Watch('ready')\n  readyChange(newReady: boolean | null, oldReady?: boolean | null) {\n    if (\n      typeof oldReady !== 'undefined' &&\n      oldReady === false &&\n      newReady === true\n    ) {\n      this.nanoSlideReady.emit();\n    }\n  }\n\n  componentDidLoad() {\n    // ready state is being loaded manually\n    if (typeof this.ready === 'boolean') return;\n    setTimeout(() => {\n      this.nanoSlideReady.emit();\n      this.ready = true;\n    });\n  }\n\n  render() {\n    return (\n      <Host class=\"nano-slide\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/{nano-slides-612634dc.js → nano-slides-0a60315d.js}

@@ -3,7 +3,8 @@
  */
 'use strict';
 
-const index = require('./index-b6fa04fa.js');
+const index = require('./index-615cdb64.js');
+const renderer = require('./renderer-cd8b6098.js');
 
 function EvEmitter() { }
 const proto$4 = EvEmitter.prototype;
@@ -2680,7 +2681,7 @@ const Slides = class {
             this.getflickity(),
             waitForSlides(this.host),
         ]);
-        this.childrenEles = this.host.querySelectorAll('nano-slide > *');
+        this.childrenEles = this.host.querySelectorAll(`${renderer.transformTag('nano-slide')} > *`);
         flickity.reloadCells();
         flickity.resize();
         flickity.reposition();
@@ -2844,19 +2845,19 @@ const Slides = class {
     }
     async loadFlickityModules(opts) {
         if (!this.hasFullScreenModule && opts.fullscreen) {
-            await Promise.resolve().then(function () { return require('./fullscreen-5d0422de.js'); });
+            await Promise.resolve().then(function () { return require('./fullscreen-f5db9bbe.js'); });
             this.hasFullScreenModule = true;
         }
         if (!this.hasLazyLoadModule && opts.lazyLoad) {
-            await Promise.resolve().then(function () { return require('./lazyload-f181cb37.js'); });
+            await Promise.resolve().then(function () { return require('./lazyload-13d72e60.js'); });
             this.hasLazyLoadModule = true;
         }
         if (!this.hasDotsModule && opts.pageDots) {
-            await Promise.resolve().then(function () { return require('./page-dots-99dd88f6.js'); });
+            await Promise.resolve().then(function () { return require('./page-dots-ecdd64d1.js'); });
             this.hasDotsModule = true;
         }
         if (!this.hasFadeModule && opts.fade) {
-            await Promise.resolve().then(function () { return require('./fade-2dd9dd8b.js'); });
+            await Promise.resolve().then(function () { return require('./fade-6a5004f4.js'); });
             this.hasFadeModule = true;
         }
     }
@@ -2910,7 +2911,7 @@ const Slides = class {
     normalizeOptions() {
         // Base options, can be changed
         const flickityOptions = {
-            cellSelector: 'nano-slide',
+            cellSelector: renderer.transformTag('nano-slide'),
             contain: true,
             prevNextButtons: true,
             fullscreen: this.fullscreen,
@@ -2960,7 +2961,8 @@ const Slides = class {
             window.MutationObserver) {
             const mut = (this.mutationO = new MutationObserver((e) => {
                 if (e[0].addedNodes[0] &&
-                    e[0].addedNodes[0].nodeName.toLowerCase() === 'nano-slide' &&
+                    e[0].addedNodes[0].nodeName.toLowerCase() ===
+                        renderer.transformTag('nano-slide') &&
                     this.flickityReady) {
                     this.update();
                 }
@@ -2990,15 +2992,15 @@ const Slides = class {
         this.destroyflickity();
     }
     render() {
-        return (index.h(index.Host, { key: '9e97a224eef505b29bf19db52c901ba85c058f54' }, index.h("div", { key: 'e3b0778a1b68bf78fe52abc32c74f30e278a00e4', class: {
+        return (renderer.h(index.Host, { key: 'fec3c2951cb3865b5a90817750783f60791c8152', class: "nano-slides" }, renderer.h("div", { key: '6e7da38e24396ff8f274ecf1f12523561f68d7b9', class: {
                 slideshow: true,
                 ready: this.ready,
                 'not-ready': !this.ready,
-            }, part: "base" }, index.h("div", { key: 'da56ec590908be9a10be1fc41bbf83fa3216e674', ref: (div) => (this.flickityEl = div), class: {
+            }, part: "base" }, renderer.h("div", { key: '4a80ee977b2c6adab8667be4d5737ee2b3991c12', ref: (div) => (this.flickityEl = div), class: {
                 'flickity-container': true,
                 'slides-ready': this.slidesReady,
                 'slides-not-ready': !this.slidesReady,
-            }, part: "slide-container" }, index.h("slot", { key: '12d359c67d1f30245e7aef788018697b0c0b94ee' })), index.h("div", { key: '8a0a0190ea93acb5ba932b353baa6cbbae33547b', class: "ui-extras" }, index.h("slot", { key: 'fddc2df69c989ac09e5908a8953783b9ae32d3ba', name: "ui" })))));
+            }, part: "slide-container" }, renderer.h("slot", { key: '34ff051519aeba458f99ea0d164a0acd1bd547cc' })), renderer.h("div", { key: '91192bf437b0c614a7f349f4ae7c0740f6768ea7', class: "ui-extras" }, renderer.h("slot", { key: 'e278a3193b7b9c4b88f6245cc63def6f2f4dd941', name: "ui" })))));
     }
     static get watchers() { return {
         "options": ["optionsChanged"],
@@ -3013,7 +3015,7 @@ const Slides = class {
     }; }
 };
 const waitForSlides = (host) => {
-    const allSlides = Array.from(host.querySelectorAll('nano-slide'));
+    const allSlides = Array.from(host.querySelectorAll(renderer.transformTag('nano-slide')));
     let toLoadSlides = allSlides.filter((ele) => !ele.ready);
     if (!toLoadSlides.length)
         return Promise.resolve(allSlides);
@@ -3038,4 +3040,4 @@ exports.Slides = Slides;
 exports.Unipointer = Unipointer;
 exports.utils = utils;
 
-//# sourceMappingURL=nano-slides-612634dc.js.map
+//# sourceMappingURL=nano-slides-0a60315d.js.map