@nanoporetech-digital/components 2.1.4 → 2.2.0

package/dist/nano-components/p-1238f0fc.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/tabs/tab.scss?tag=nano-tab&encapsulation=shadow","src/components/tabs/tab.tsx"],"names":["tabCss","id","Tab","exports","class_1","hostRef","_this","this","tabId","panel","active","disabled","closable","handleCloseClick","nanoTabClose","emit","prototype","setFocus","tab","focus","preventScroll","removeFocus","blur","render","h","Host","host","part","ref","el","class","nanotab","nanotab--active","nanotab--disabled","nanotab--closable","role","aria-disabled","aria-selected","tabindex","label","iconName","onClick","tabIndex"],"mappings":";;;qKAAA,IAAMA,EAAS,gvGCYf,IAAIC,EAAK,MAWIC,EAAGC,EAAA,WAAA,WALhB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,0DAMUA,KAAAC,MAAQ,eAAcP,EAMLM,KAAAE,MAAQ,GAGRF,KAAAG,OAAS,MAGTH,KAAAI,SAAW,MAG5BJ,KAAAK,SAAW,MAiBXL,KAAAM,iBAAmB,WACzBP,EAAKQ,aAAaC,QAXdX,EAAAY,UAAAC,SAAN,gGACEV,KAAKW,IAAIC,MAAM,CAAEC,cAAe,wBAK5BhB,EAAAY,UAAAK,YAAN,gGACEd,KAAKW,IAAII,wBAOXlB,EAAAY,UAAAO,OAAA,WAAA,IAAAjB,EAAAC,KACE,OACEiB,EAACC,EAAI,CAACxB,GAAIM,KAAKmB,KAAKzB,IAAMM,KAAKC,OAC7BgB,EAAA,MAAA,CACEG,KAAK,OACLC,IAAK,SAACC,GAAE,OAAMvB,EAAKY,IAAMW,GACzBC,MAAO,CACLC,QAAS,KACTC,kBAAmBzB,KAAKG,OACxBuB,oBAAqB1B,KAAKI,SAC1BuB,oBAAqB3B,KAAKK,UAE5BuB,KAAK,MAAKC,gBACK7B,KAAKI,SAAW,OAAS,QAAO0B,gBAChC9B,KAAKG,OAAS,OAAS,QACtC4B,SAAU/B,KAAKI,WAAaJ,KAAKG,OAAS,KAAO,KAEjDc,EAAA,OAAA,MACCjB,KAAKK,UACJY,EAAA,mBAAA,CACEe,MAAM,iBACNC,SAAS,cACTV,MAAM,wBACNW,QAASlC,KAAKM,iBACd6B,UAAW,8HA7DT","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n/**\n  * @prop --focus-shadow: Defaults to #{$control-focus-style};\n\n  * @prop --padding: Defaults to .75rem 1rem on placement 'top' and 1rem on placement 'start';\n\n  * @prop --bg-rgb: Defaults to #{$layer-bg-color-rgb};\n  * @prop --active-bg: Defaults to rgba(var(--bg-rgb), 1);\n  * @prop --disabled-bg-rgb: Defaults to var(--bg-rgb);\n  * @prop --inactive-bg: Defaults to rgba(var(--bg-rgb), 0.7);\n\n  * @prop --text-color: Defaults to #{map.get($colors, blue)};\n  * @prop --disabled-text-color: Defaults to #{map.get($colors, darkgrey)};\n  * @prop --active-text-color: Defaults to #{map.get($colors, darkblue)};\n\n  * @prop --h-font-size: Defaults to .93em;\n  * @prop --v-font-size: Defaults to .875em;\n  * @prop --tab-spacing: Gap between tabs. Defaults to 1rem;\n  * @prop --tab-divider-size: Defaults to 0;\n  * @prop --tab-divider-color: Defaults to #{map.get($colors, lightblue)};\n  */\n\n:host {\n  --focus-shadow: #{$control-focus-style};\n  --padding: 0.75rem 1rem;\n  --bg-rgb: #{$layer-bg-color-rgb};\n  --active-bg: rgba(var(--bg-rgb), 1);\n  --inactive-bg: rgba(var(--bg-rgb), 0.7);\n  --disabled-bg-rgb: var(--bg-rgb);\n  --text-color: #{map.get($colors, blue)};\n  --disabled-text-color: #{map.get($colors, darkgrey)};\n  --active-text-color: #{map.get($colors, darkblue)};\n  --h-font-size: 0.93em;\n  --v-font-size: 0.875em;\n  --tab-spacing: 0.5rem;\n  --tab-divider-size: 0;\n  --tab-divider-color: #{map.get($colors, lightblue)};\n  --tab-indicator-size: 5px;\n\n  display: inline-block;\n}\n\n:host([direction='vertical']) {\n  --padding: 1rem;\n\n  .nanotab {\n    font-size: var(--v-font-size);\n\n    &.nanotab--active {\n      font-weight: 600;\n      color: var(--active-text-color);\n    }\n  }\n}\n\n:host([direction='horizontal']) {\n  .nanotab {\n    font-size: var(--h-font-size);\n    margin-top: var(--tab-indicator-size);\n    border-right: solid var(--tab-divider-size) var(--tab-divider-color);\n\n    &.nanotab--active {\n      margin-top: 0;\n      border-top: solid var(--tab-indicator-size) var(--tab-indicator-color);\n      background: var(--active-bg);\n      color: var(--active-text-color);\n    }\n  }\n}\n\n.nanotab {\n  @include text-inherit();\n  @include margin(null, var(--tab-spacing), null, null);\n\n  padding: var(--padding);\n  display: flex;\n  height: 100%;\n  width: auto;\n  background: var(--inactive-bg);\n  border-radius: var(--border-radius) var(--border-radius) 0 0;\n  user-select: none;\n  cursor: pointer;\n  overflow: visible;\n  white-space: nowrap;\n  align-items: center;\n\n  & ::slotted(*) {\n    display: flex;\n    align-items: center;\n  }\n\n  :host(:last-of-type) & {\n    @include margin(null, 0, null, null);\n  }\n\n  &:hover:not(.tab--disabled) {\n    text-shadow: 0 0 0.01px var(--text-color);\n  }\n\n  &:focus {\n    outline: none;\n    outline-style: none;\n    box-shadow: none;\n    border-color: transparent;\n  }\n\n  &:focus:not(.nanotab--disabled) {\n    box-shadow: var(--focus-shadow) inset;\n  }\n\n  &--disabled {\n    background: rgba(var(--disabled-bg-rgb), 1);\n    opacity: 0.5;\n    cursor: not-allowed;\n    color: var(--disabled-text-color);\n  }\n\n  &__close-button {\n    @include margin(null, null, null, #{$spacing-small});\n\n    --padding: #{$spacing-xsmall} !important;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  ComponentInterface,\n  Method,\n  Prop,\n  h,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nlet id = 0;\n\n/**\n * @slot - The tab's label.\n */\n\n@Component({\n  tag: 'nano-tab',\n  styleUrl: 'tab.scss',\n  shadow: true,\n})\nexport class Tab implements ComponentInterface {\n  private tabId = `nano-tab-${++id}`;\n  private tab: HTMLElement;\n\n  @Element() host: HTMLNanoTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** The active, selected tab. If none active, the first will automatically be selected. */\n  @Prop({ reflect: true }) active = false;\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event() nanoTabClose: EventEmitter;\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus() {\n    this.tab.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  private handleCloseClick = () => {\n    this.nanoTabClose.emit();\n  };\n\n  render() {\n    return (\n      <Host id={this.host.id || this.tabId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            nanotab: true,\n            'nanotab--active': this.active,\n            'nanotab--disabled': this.disabled,\n            'nanotab--closable': this.closable,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <nano-icon-button\n              label=\"Close this tab\"\n              iconName=\"light/times\"\n              class=\"nanotab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-1e974cad.entry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","[object Object]","hostRef","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","nanoChange","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","host","shadowRoot","ctxClasses","className","split","filter","classStr","match","eles","_getRoot","querySelectorAll","Array","from","map","ele","classList","add","focusVisible","observe","setTimeout","indicator","style","clip","dir","ownerDocument","unobserve","_fixClassNames","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{$color-palegrey}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{$color-palegrey};\n  --symbol-color-active: #{$color-yellow};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 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      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 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';\n\nconst CANSHADOW = !!document.head.attachShadow;\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   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"sources":["src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","src/components/rating/rating.tsx"],"names":["ratingCss","CANSHADOW","document","head","attachShadow","Rating","[object Object]","hostRef","this","hoverValue","isHovering","value","max","precision","readonly","disabled","name","symbolName","symbol","_","handleClick","event","newValue","getValueFromMousePosition","handleKeyDown","key","decrement","shiftKey","roundToPrecision","Math","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","nanoChange","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","displayValue","tw","host","shadowRoot","ctxClasses","className","split","filter","classStr","match","eles","_getRoot","querySelectorAll","Array","from","map","ele","classList","add","focusVisible","observe","setTimeout","indicator","style","clip","dir","ownerDocument","unobserve","_fixClassNames","counter","keys","h","class","ref","el","part","rating--readonly","rating--disabled","aria-disabled","aria-readonly","aria-valuenow","aria-valuemin","aria-valuemax","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","index","rating__symbol","rating__symbol--hover","role","innerHTML","span","type"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin: 0 calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  width: 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      top: 0;\n      left: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      width: 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';\n\nconst CANSHADOW = !!document.head.attachShadow;\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   */\n  @Prop() symbol = (_: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  private _getRoot() {\n    return this.host.shadowRoot ? this.host.shadowRoot : this.host;\n  }\n\n  private _fixClassNames() {\n    let ctxClasses = this.rating.className\n      .split(' ')\n      .filter((classStr) => classStr.match(/^sc-nano/));\n    let eles = this._getRoot().querySelectorAll('*');\n    if (!eles) return;\n    Array.from(eles).map((ele: HTMLElement) => {\n      ctxClasses.map((classStr) => ele.classList.add(classStr));\n    });\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  componentDidRender() {\n    if (!this.host.shadowRoot || !CANSHADOW) this._fixClassNames();\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    let counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"]}