@nanoporetech-digital/components 5.10.0 → 5.11.1

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

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","inputIds","Input","nativeInputWrap","this","_nativeInputWrap","ele","setDataListOpts","constructor","hostRef","inputId","didBlurAfterEdit","rtl","charCount","hasRendered","validate","ev","validateOn","nativeInput","validity","valid","showInlineError","preventDefault","errorMessage","validationMessage","_invalid","nanoValidate","emit","isValid","originalEvent","onInput","input","target","value","nanoInput","onBlur","hasFocus","focusChanged","nanoBlur","onFocus","nanoFocus","onKeydown","shouldClearOnEdit","hasValue","clearTextInput","clearInput","readonly","disabled","stopPropagation","event","window","Event","dispatchEvent","debounce","handleBlur","bind","datalist","currDWConfig","dropDownConfig","Object","assign","skidding","tetherTo","invalid","validityMessage","shouldValidate","requestAnimationFrame","valueChanged","nanoChange","length","type","resize","style","height","scrollHeight","debounceChanged","debounceEvent","async","validateFirst","Promise","resolve","setTimeout","focus","click","select","getInputElement","message","setCustomValidity","onReset","e","form","document","querySelector","el","closest","kev","KeyboardEvent","key","activeElement","FocusEvent","closestElement","tagName","toLowerCase","clearOnEdit","undefined","getValue","slotChangeObserver","mo","disconnect","MutationObserver","processSlottedContent","observe","childList","subtree","hasLabelSlot","querySelectorAll","hasHelperSlot","hasHelperEndSlot","console","warn","connectedCallback","CustomEvent","detail","disconnectedCallback","componentDidLoad","autofocus","_","setFocus","componentWillLoad","render","labelId","moreId","helperEndId","ownerDocument","dir","compWrapOptions","floatLabel","label","hideLabel","placeholder","maxlength","showCharCount","wrapOptions","controlId","controlOptions","clearControl","h","Host","class","createColorClasses","color","width","FormControlWrap","FormControl","onClearText","control","ref","id","accept","autoCapitalize","autocapitalise","autoComplete","autocomplete","autoCorrect","autocorrect","autoFocus","inputMode","inputmode","min","max","minLength","minlength","maxLength","multiple","name","pattern","readOnly","required","spellcheck","step","size","onChange","onKeyDown","onInvalid","rows","input__resizable"],"sources":["./src/components/input/input.scss?tag=nano-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../form-control/form-control';\n@import '../form-control/form-control-vars';\n\n:host {\n  @include formControlVars;\n\n  position: relative;\n  inline-size: 100%;\n  padding: 0 !important;\n  color: currentcolor;\n  display: block;\n}\n\n:host(.nano-color) {\n  color: current-color(base);\n\n  --input-border-style--focus:\n    #{$input-border-style} var(\n      --nano-color-tint,\n      #{nano-color(\n        primary,\n        tint\n      )}\n    );\n}\n\n.input__native-ctrl {\n  @include text-inherit();\n\n  padding-block: 0;\n  padding-inline: var(--padding-start) var(--padding-end);\n  border-radius: var(--input-border-radius);\n  text-overflow: ellipsis;\n  color: var(--input-text-color);\n  display: inline-block;\n  flex: 1;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  max-block-size: 100%;\n  border: 0;\n  outline: none;\n  background: transparent;\n  appearance: none;\n  margin: 0;\n  box-sizing: border-box;\n  resize: none;\n  overflow: hidden;\n  line-height: 2.5em;\n  // min-height: 2.5em;\n\n  .has-float-label & {\n    line-height: 2.1em;\n    min-block-size: 2.1em;\n    padding-block-start: 1.4em;\n  }\n\n  &::placeholder {\n    color: var(--placeholder-color);\n    font-family: inherit;\n    font-style: var(--placeholder-font-style);\n    font-weight: var(--placeholder-font-weight);\n    opacity: var(--placeholder-opacity);\n    line-height: inherit;\n    min-block-size: initial;\n  }\n\n  /* stylelint-disable-next-line selector-no-vendor-prefix */\n  &::-moz-placeholder {\n    line-height: 2.8em;\n    text-overflow: ellipsis;\n  }\n\n  &:-webkit-autofill {\n    background-color: transparent;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:invalid {\n    box-shadow: none;\n  }\n\n  &::-ms-clear,\n  &::-ms-reveal {\n    display: none;\n  }\n\n  &.input__resizable {\n    resize: vertical;\n    overflow: auto;\n  }\n\n  .form-ctrl__textarea & {\n    line-height: 1.5em;\n    padding-block: var(--padding-top) 0.25em;\n    white-space: pre-wrap;\n\n    &::placeholder {\n      line-height: 1.5em;\n    }\n\n    .has-float-label & {\n      padding-block-start: 1.75em;\n    }\n  }\n\n  :host([readonly]:not([readonly='false'])) & {\n    user-select: none;\n  }\n}\n","import {\n  Build,\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  Listen,\n} from '@stencil/core';\n\nimport { closestElement } from '../../utils/dom';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent, debounce } from '../../utils/throttle';\nimport { FormControl, FormControlWrap } from '../form-control/form-control';\nimport type {\n  Color,\n  ControlValidity,\n  ControlValidityEventDetail,\n  InputChangeEventDetail,\n  TextFieldTypes,\n} from '../../interface';\n\nlet inputIds = 0;\n\n/**\n * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).\n *\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)\n * @slot start - suitable for inline action buttons or icons that may add extra contextual information\n * @slot end - suitable for inline action buttons or icons that may add extra contextual information\n * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist\n * @slot label - if you do not set a label attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n * @slot helper-end - helper text to accompany the form field on the side.\n * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information\n */\n@Component({\n  tag: 'nano-input',\n  styleUrl: 'input.scss',\n  scoped: true,\n})\nexport class Input implements ComponentInterface {\n  private nativeInput?: HTMLInputElement | HTMLTextAreaElement;\n  private inputId = `nano-input-${inputIds++}`;\n  private didBlurAfterEdit = false;\n  private rtl: boolean = false;\n  private mo?: MutationObserver;\n  private charCount = 0;\n  private hasRendered = false;\n\n  // we don't want these rendered eles decorated with @State\n  // because that will cause re-renders. User get/set to set datalist options\n  private _nativeInputWrap: HTMLElement;\n  private get nativeInputWrap() {\n    return this._nativeInputWrap;\n  }\n  private set nativeInputWrap(ele: HTMLElement) {\n    if (this._nativeInputWrap === ele) return;\n    this._nativeInputWrap = ele;\n    this.setDataListOpts();\n  }\n\n  constructor() {\n    this.validate = debounce(this.validate, 50);\n    this.handleBlur = this.handleBlur.bind(this);\n  }\n\n  @State() hasFocus = false;\n  @State() hasLabelSlot = false;\n  @State() hasHelperSlot = false;\n  @State() hasHelperEndSlot = false;\n  @State() errorMessage: string = '';\n  @State() datalist: HTMLNanoDatalistElement = null;\n\n  @Watch('datalist')\n  setDataListOpts() {\n    if (!this.datalist) return;\n    const currDWConfig = this.datalist.dropDownConfig || {};\n    this.datalist.dropDownConfig = {\n      ...currDWConfig,\n      skidding: -1,\n      tetherTo: this.nativeInputWrap,\n    };\n  }\n\n  @Element() el!: HTMLNanoInputElement;\n\n  /**\n   * This will be true when the control is in an invalid state.\n   * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n   */\n  @Prop({ reflect: true })\n  get invalid() {\n    return this._invalid;\n  }\n  @State() _invalid = false;\n\n  /**\n   * Current validation message - if any. @readonly\n   */\n  @Prop()\n  get validityMessage() {\n    if (!this.nativeInput) return '';\n    return this.nativeInput.validationMessage;\n  }\n\n  /**\n   * The color to use from the application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * If the value of the type attribute is `\"file\"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.\n   */\n  @Prop() accept?: string;\n\n  /**\n   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\n   */\n  @Prop() autocapitalise: 'none' | 'sentences' | 'words' | 'characters' =\n    'none';\n\n  /**\n   * Indicates whether the value of the control can be automatically completed by the browser.\n   */\n  @Prop() autocomplete: 'on' | 'off' = 'off';\n\n  /**\n   * Whether auto correction should be enabled when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: 'on' | 'off' = 'off';\n\n  /**\n   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.\n   */\n  @Prop() clearInput = false;\n\n  /**\n   * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.\n   */\n  @Prop() clearOnEdit?: boolean;\n\n  /**\n   * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.\n   */\n  @Prop() debounce = 0;\n\n  /**\n   * If `true`, the user cannot interact with the input.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search';\n\n  /**\n   * When should the field perform validation\n   */\n  @Prop({ mutable: true }) validateOn: 'dirty' | 'submit' | 'submitThenDirty' =\n    'submitThenDirty';\n\n  /**\n   * Whether to show validation errors underneath input\n   */\n  @Prop({ reflect: true }) showInlineError = true;\n\n  /**\n   * String to place within a label element. Alternatively you may use a label slot.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Visually hide the label - but make it accessible.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Enable floating label behaviour. Will disable placeholder if set.\n   */\n  @Prop() floatLabel: boolean = false;\n\n  /**\n   * The maximum value, which must not be less than its minimum (min attribute) value.\n   */\n  @Prop() max?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * The minimum value, which must not be greater than its maximum (max attribute) value.\n   */\n  @Prop() min?: string;\n\n  /**\n   * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `\"email\"` or `\"file\"`, otherwise it is ignored.\n   */\n  @Prop() multiple?: boolean;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Instructional text that shows before the input has a value.\n   */\n  @Prop() placeholder?: string | null;\n\n  /**\n   * If `true`, the user cannot modify the value.\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * If `true`, the user must fill in a value before submitting a form.\n   */\n  @Prop() required = false;\n\n  /**\n   * If `true`, the element will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck = false;\n\n  /**\n   * Works with the min and max attributes to limit the increments at which a value can be set.\n   * Possible values are: `\"any\"` or a positive floating point number.\n   */\n  @Prop() step?: string;\n\n  /**\n   * The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.\n   */\n  @Prop() size?: number;\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop({ reflect: true }) type: TextFieldTypes = 'text';\n\n  /**\n   * The form element to associate the input with (its form owner). Must be the id of a form.\n   */\n  @Prop() form?: string | null;\n\n  /**\n   * The value of the input.\n   */\n  @Prop({ mutable: true }) value?: string | null = '';\n\n  /**\n   * relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.\n   */\n  @Prop() resize: 'true' | 'false' | 'auto' = 'auto';\n\n  /**\n   * relevant to type=\"textarea\". Default number of rows to show\n   */\n  @Prop() rows = 2;\n\n  /**\n   * relevant to type=\"textarea\".\n   */\n  @Prop() showCharCount = false;\n\n  @Watch('minlength')\n  @Watch('maxlength')\n  @Watch('min')\n  @Watch('max')\n  @Watch('required')\n  @Watch('disabled')\n  @Watch('readonly')\n  @Watch('pattern')\n  @Watch('inputmode')\n  protected shouldValidate() {\n    if (!this.hasRendered) return;\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    });\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    this.nanoChange.emit({ value: this.value });\n    this.charCount = this.value.length;\n\n    if (this.type === 'textarea' && this.resize === 'auto') {\n      this.nativeInput.style.height = 'auto';\n      if (this.value.length)\n        this.nativeInput.style.height = this.nativeInput.scrollHeight + 'px';\n    }\n\n    requestAnimationFrame(() => {\n      if (this.validateOn === 'dirty') this.validate();\n    });\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n  }\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() nanoInput!: EventEmitter<InputEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() nanoChange!: EventEmitter<InputChangeEventDetail>;\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   * Emitted when the input has been created.\n   * @internal\n   */\n  @Event() nanoDidLoad!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has been removed.\n   * @internal\n   */\n  @Event() nanoDidUnload!: EventEmitter<void>;\n\n  /**\n   * Called when validation is performed (which depends on `validateOn`).\n   * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n   */\n  @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `{ isValid: boolean, errorMessage: string }`\n   */\n  @Method()\n  async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n    return new Promise((resolve) => {\n      if (validateFirst) this.validate();\n      setTimeout(() => {\n        resolve({\n          isValid: !this._invalid,\n          errorMessage: this.nativeInput.validationMessage,\n        });\n      }, 50);\n    });\n  }\n\n  /**\n   * Sets focus on the specified `nano-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n      this.nativeInput.click();\n    }\n  }\n\n  /**\n   * Sets focus and select the text on the specified `nano-input`. Use this method instead of the global\n   * `input.select()`.\n   */\n  @Method()\n  async select() {\n    if (this.nativeInput) {\n      this.nativeInput.select();\n    }\n  }\n\n  /**\n   * @returns the native `<input>` element used under the hood.\n   */\n  @Method()\n  getInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement> {\n    return Promise.resolve(this.nativeInput);\n  }\n\n  /**\n   * Invalidate the field and show a custom error message. To clear the error you will need to re-call this method with an empty string.\n   */\n  @Method()\n  async showError(message: string) {\n    if (this.nativeInput) {\n      this.nativeInput.setCustomValidity(message);\n      this.validate();\n    }\n  }\n\n  @Listen('reset', { target: 'body' })\n  onReset(e) {\n    const form = this.form\n      ? document.querySelector('#' + this.form)\n      : this.el.closest('form');\n    if (!form || e.target !== this.el.closest('form')) return;\n\n    this.value = '';\n  }\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent | FocusEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let target: Element;\n\n    requestAnimationFrame(() => {\n      if (e instanceof KeyboardEvent && kev.key) {\n        if (kev.key !== 'Tab') return;\n        target = document.activeElement;\n      } else if (e instanceof FocusEvent) {\n        target = document.activeElement;\n      } else target = e.target as Element;\n\n      if (closestElement(this.el.tagName.toLowerCase(), target) !== this.el) {\n        this.onBlur();\n      }\n    });\n  }\n\n  private shouldClearOnEdit() {\n    const { type, clearOnEdit } = this;\n    return clearOnEdit === undefined ? type === 'password' : clearOnEdit;\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private validate = (ev?: Event) => {\n    if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n\n    if (!this.nativeInput.validity.valid) {\n      if (this.showInlineError) {\n        if (ev) ev.preventDefault();\n        this.errorMessage = this.nativeInput.validationMessage;\n      }\n      this._invalid = true;\n    } else this._invalid = false;\n\n    this.nanoValidate.emit({\n      isValid: !this._invalid,\n      errorMessage: this.nativeInput.validationMessage,\n      originalEvent: ev,\n    });\n  };\n\n  private onInput = (ev: InputEvent) => {\n    const input = ev.target as HTMLInputElement | null;\n    this.value = input?.value || '';\n    this.nanoInput.emit(ev);\n  };\n\n  private onBlur = () => {\n    this.hasFocus = false;\n    this.focusChanged();\n    if (this.validateOn === 'dirty') this.validate();\n    this.nanoBlur.emit();\n  };\n\n  private onFocus = () => {\n    this.hasFocus = true;\n    this.focusChanged();\n    this.nanoFocus.emit();\n  };\n\n  private onKeydown = () => {\n    if (this.shouldClearOnEdit()) {\n      // Did the input value change after it was blurred and edited?\n      if (this.didBlurAfterEdit && this.hasValue()) {\n        // Clear the input\n        this.clearTextInput();\n      }\n\n      // Reset the flag\n      this.didBlurAfterEdit = false;\n    }\n  };\n\n  private clearTextInput = (ev?: Event) => {\n    if (this.clearInput && !this.readonly && !this.disabled && ev) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    }\n\n    this.value = '';\n    this.nativeInput.value = '';\n    const event = new window.Event('change');\n    this.nativeInput.dispatchEvent(event);\n  };\n\n  private focusChanged() {\n    // If clearOnEdit is enabled and the input blurred but has a value, set a flag\n    if (!this.hasFocus && this.shouldClearOnEdit() && this.hasValue()) {\n      this.didBlurAfterEdit = true;\n    }\n  }\n\n  private hasValue(): boolean {\n    return this.getValue().length > 0;\n  }\n\n  private slotChangeObserver() {\n    if (!Build.isBrowser) return;\n\n    if (this.mo) this.mo.disconnect();\n    const mo = (this.mo = new MutationObserver(() =>\n      this.processSlottedContent()\n    ));\n    mo.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private processSlottedContent() {\n    // see if we have label / button content\n    this.hasLabelSlot = !!this.el.querySelectorAll('[slot=\"label\"]');\n    this.hasHelperSlot = !!this.el.querySelector('[slot=\"helper\"]');\n    this.hasHelperEndSlot = !!this.el.querySelector('[slot=\"helper-end\"]');\n    this.datalist = this.el.querySelector('nano-datalist:not([slot])');\n\n    // breaking change introduced in v2. Rm in v3\n    if (!!this.el.querySelector('[slot=\"inline-button\"]')) {\n      console.warn(\n        'The `inline-button` slot was renamed to `end` in v2 - please update your code',\n        this.el\n      );\n    }\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    if (Build.isBrowser) {\n      this.el.dispatchEvent(\n        new CustomEvent('nanoDidLoad', {\n          detail: this.el,\n        })\n      );\n    }\n  }\n\n  disconnectedCallback() {\n    if (Build.isBrowser) {\n      document.dispatchEvent(\n        new CustomEvent('nanoDidUnload', {\n          detail: this.el,\n        })\n      );\n    }\n    if (this.mo) this.mo.disconnect();\n  }\n\n  componentDidLoad() {\n    this.slotChangeObserver();\n    this.hasRendered = true;\n    if (this.autofocus) setTimeout((_) => this.setFocus(), 300);\n  }\n\n  componentWillLoad() {\n    this.processSlottedContent();\n  }\n\n  render() {\n    const value = this.getValue();\n    const labelId = this.inputId + '-lbl';\n    const moreId =\n      this.showInlineError || this.hasHelperSlot ? this.inputId + '-more' : '';\n    const helperEndId = this.hasHelperEndSlot ? this.inputId + '-helper' : '';\n    this.rtl = (this.el.ownerDocument as Document).dir === 'rtl';\n\n    const compWrapOptions = (({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n      hasHelperEndSlot,\n    }) => ({\n      el,\n      floatLabel,\n      label,\n      errorMessage,\n      type,\n      showInlineError,\n      hasHelperSlot,\n      hasLabelSlot,\n      hideLabel,\n      placeholder,\n      maxlength,\n      charCount,\n      showCharCount,\n      rtl,\n      hasHelperEndSlot,\n    }))(this);\n    const wrapOptions = {\n      ...compWrapOptions,\n      labelId,\n      moreId,\n      helperEndId,\n      hasValue: this.hasValue(),\n      controlId: this.inputId,\n    };\n\n    const controlOptions = (({ clearInput, readonly, disabled }) => ({\n      clearInput,\n      readonly,\n      disabled,\n      clearControl: this.clearInput,\n    }))(this);\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        dir={this.rtl ? 'rtl' : null}\n        class={{\n          ...createColorClasses(this.color),\n          'has-value': this.hasValue(),\n          'has-focus': this.hasFocus,\n          'is-invalid': this._invalid,\n        }}\n      >\n        <div style={{ width: '100%' }}>\n          <FormControlWrap {...wrapOptions}>\n            <FormControl\n              {...controlOptions}\n              onClearText={this.clearTextInput}\n              control={this.el}\n              ref={(el) => (this.nativeInputWrap = el)}\n            >\n              {this.type !== 'textarea' && (\n                <input\n                  id={this.inputId}\n                  class=\"input__native-ctrl\"\n                  ref={(input) => (this.nativeInput = input)}\n                  aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                  disabled={this.disabled}\n                  accept={this.accept}\n                  autoCapitalize={this.autocapitalise}\n                  autoComplete={this.autocomplete}\n                  autoCorrect={this.autocorrect}\n                  autoFocus={this.autofocus}\n                  inputMode={this.inputmode}\n                  form={this.form}\n                  min={this.min}\n                  max={this.max}\n                  minLength={this.minlength}\n                  maxLength={this.maxlength}\n                  multiple={this.multiple}\n                  name={this.name}\n                  pattern={this.pattern}\n                  placeholder={this.placeholder}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  spellcheck={this.spellcheck}\n                  step={this.step}\n                  size={this.size}\n                  type={this.type}\n                  value={value}\n                  onInput={this.onInput}\n                  onChange={this.onInput}\n                  onFocus={this.onFocus}\n                  onBlur={this.handleBlur}\n                  onKeyDown={this.onKeydown}\n                  onInvalid={this.validate}\n                />\n              )}\n              {this.type === 'textarea' && (\n                <textarea\n                  rows={this.floatLabel ? 1 : this.rows}\n                  id={this.inputId}\n                  class={{\n                    'input__native-ctrl': true,\n                    input__resizable: this.resize === 'true',\n                  }}\n                  ref={(input) => (this.nativeInput = input)}\n                  aria-labelledby={labelId + ' ' + moreId + ' ' + helperEndId}\n                  disabled={this.disabled}\n                  autoCapitalize={this.autocapitalise}\n                  autoCorrect={this.autocorrect}\n                  autoFocus={this.autofocus}\n                  inputMode={this.inputmode}\n                  form={this.form}\n                  minLength={this.minlength}\n                  maxLength={this.maxlength}\n                  name={this.name}\n                  placeholder={this.placeholder}\n                  readOnly={this.readonly}\n                  required={this.required}\n                  spellcheck={this.spellcheck}\n                  value={value}\n                  onInput={this.onInput}\n                  onChange={this.onInput}\n                  onFocus={this.onFocus}\n                  onKeyDown={this.onKeydown}\n                  onInvalid={this.validate}\n                  onBlur={this.handleBlur}\n                ></textarea>\n              )}\n            </FormControl>\n          </FormControlWrap>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/nano-components/nano-menu-drawer.entry.js

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,w as i,h as n,a as e,g as o}from"./index-9695db0a.js";import{c as s}from"./dom-8599fac1.js";const a=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:13px;--padding-end:12px;--padding-bottom:13px;--padding-start:12px;--icon-size:19px;--font-size:11px;--global-nav-height:79px;--bg-color:#001a21;--bg-color-hover:rgb(28 62 72 / 80%);--bg-color-selected:#274048;--bg-color-focus:rgb(28 62 72 / 80%);--focus-outline:none;--content-color:#fff;--secondary-bg-color:rgb(28 62 72);font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;z-index:1;background:var(--bg-color)}:host ::slotted(nano-nav-item){--secondary-padding-top:var(--global-nav-height);--nano-icon-size:var(--icon-size);color:var(--content-color);font-size:var(--font-size);text-decoration:none;box-sizing:border-box}:host *,:host *::before,:host *::after{box-sizing:border-box}:host(.hide){display:none}:host(.has-global-nav) .content-wrap{padding-block-start:var(--global-nav-height);margin-block-start:calc(var(--global-nav-height) * -1)}.container{inset-inline-end:auto;flex:0 0 calc(var(--padding-end, 1em) * 2 + var(--icon-size));background:var(--bg-color);color:var(--content-color);z-index:1;inline-size:calc(var(--padding-end, 1em) * 2 + var(--icon-size));block-size:100%}:host(.open) .container{inline-size:auto}:host(:not(.loading)) .container{transition:inline-size 0.3s ease}.content-wrap{inset-inline-start:0;inset-block-start:0;inline-size:inherit;max-inline-size:inherit;background:var(--bg-color);color:#fff;position:sticky;font-size:var(--icon-size);line-height:1;display:flex;min-block-size:calc(100vh - 79px);min-block-size:calc(var(--vh, 1vh) * 100 - 79px);z-index:1}.content{inline-size:auto;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-color);flex:1}.content::after{content:"";position:absolute;inset-block-start:0;inset-inline:0;background:var(--bg-color);z-index:-1;block-size:100vh}.collapse-btn{background:var(--bg-color-selected);border:none;color:inherit;font-size:var(--icon-size);margin-block:var(--padding-top) var(--padding-bottom);margin-inline:calc(var(--padding-start) / 2) 0;border-radius:4px;padding-block:6px;padding-inline:5px;display:flex;align-content:center;inline-size:30px;flex:0 0 auto}.collapse-btn nano-icon{font-size:var(--icon-size);transition:0.2s transform ease-in-out;transform:translateZ(0) rotate(0deg)}:host(.open) .collapse-btn nano-icon{transform:translateZ(0) rotate(180deg)}.foot{margin-block-start:auto}.measure-ele{block-size:1px}';const r=class{constructor(i){t(this,i);this.children=[];this.currHeight=window.innerHeight;this.onWindowResize=()=>{if(window.innerWidth>this.hideWidth)this.widthOk=true;else this.widthOk=false;const t=window.innerHeight*.01;this.el.style.setProperty("--vh",`${t}px`);if(window.innerHeight>this.currHeight&&this.widthOk&&!this.heightOk){this.moveItemsToDrawer()}this.currHeight=window.innerHeight};this.toggle=t=>{t.preventDefault();this.open=!this.open};this.onToggleKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}};this.reset=false;this.widthOk=true;this.heightOk=true;this.isLoading=true;this.hide=false;this.open=true;this.saveState=true;this.hideWidth=576;this.hideHeight=true}cancelNavItemEvents(t){if(!t.detail.secondaryMenu)return;t.stopPropagation()}openChange(){if(this.saveState)localStorage.setItem("nanoMenuDrawerOpen",this.open.toString());if(this.containerDiv){if(this.open)i((()=>this.containerDiv.style.width=this.contentDiv.scrollWidth+"px"));else i((()=>this.containerDiv.style.width=null))}}widthChange(){if(this.widthOk)this.moveItemsToDrawer();else this.moveItemsToGlobalNav()}hideHeightChange(){if(this.hideHeight&&!this.io)this.attachIO();else if(!this.hideHeight&&this.io){this.io.disconnect();this.io=undefined}}moveItemsToGlobalNav(){const t=this.el.querySelectorAll("nano-nav-item");t.forEach((t=>{this.children.push({slot:t.getAttribute("slot"),element:t});t.setAttribute("slot","overflow");t.classList.add("nano-global-nav-menu");this.globalNav.appendChild(t)}));this.hide=true}moveItemsToDrawer(){if(!this.children||!this.children.length)return;this.children.forEach((t=>{t.element.removeAttribute("slot");t.element.classList.remove("nano-global-nav-menu");if(t.slot&&t.slot.length)t.element.setAttribute("slot",t.slot);this.el.appendChild(t.element)}));this.children=[];this.hide=false;if(!this.io)this.attachIO()}attachIO(){if(!this.hideHeight)return;const t=this.io=new window.IntersectionObserver((t=>{this.heightOk=t[0].intersectionRatio!==0;if(!this.heightOk){this.moveItemsToGlobalNav();this.io.disconnect();this.io=undefined}}),{threshold:1});t.observe(this.measureEle)}handleGlobalNavReady(t){if(t.target.tagName!=="NANO-GLOBAL-NAV")return;setTimeout((()=>{this.attachIO();this.openChange();this.onWindowResize();this.isLoading=false}),500)}componentWillLoad(){this.globalNav=s("nano-global-nav",this.el);this.widthOk=window.innerWidth>this.hideWidth;this.currHeight=window.innerHeight;if(this.saveState){const t=localStorage.getItem("nanoMenuDrawerOpen");this.open=t?t==="true":this.open}}componentDidLoad(){{window.addEventListener("resize",this.onWindowResize)}}disconnectedCallback(){window.removeEventListener("resize",this.debounceResize);if(this.io){this.io.disconnect();this.io=null}}render(){return n(e,{class:{open:this.open,hide:this.hide,loading:this.isLoading,"has-global-nav":!!this.globalNav},dir:this.el.ownerDocument.dir==="rtl"?"rtl":null},n("div",{ref:t=>this.containerDiv=t,class:"container"},n("div",{class:"content-wrap"},n("nav",{ref:t=>this.contentDiv=t,class:"content"},n("button",{onMouseDown:this.toggle,onKeyDown:this.onToggleKeyDown,class:"collapse-btn"},n("nano-icon",{name:"light/arrow-alt-to-right","aria-label":"collapse / expand"})),n("slot",null),n("div",{class:"foot"},n("div",{class:"measure-ele",ref:t=>this.measureEle=t}),n("slot",{name:"foot"}))))))}get el(){return o(this)}static get watchers(){return{open:["openChange"],widthOk:["widthChange"],hideHeight:["hideHeightChange"]}}};r.style=a;export{r as nano_menu_drawer};
+//# sourceMappingURL=nano-menu-drawer.entry.js.map

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

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

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as t,h as i,a,g as s}from"./index-9695db0a.js";import{g as e,a as n}from"./dom-8599fac1.js";import{d as o}from"./throttle-ac4fcefa.js";const r=':host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--indicator-transition:var(--nano-transition-fast, 0.3s);--indicator-color:#90c6e7;--indicator-size:0;--indicator-track-color:#e4e6e8;--indicator-track-size:var(--indicator-size);--scroll-btn-color:"currentColor";--fade-size:1.75rem;--fade-transparency:0;--padding:var(--fade-size);position:relative;z-index:var(--nano-layer-index-raised, 5)}:host([orientation=horizontal]){display:block}:host([orientation=vertical]){display:flex}.onav--no-transitions *{transition-duration:0s !important}.onav__scroller{scrollbar-width:none;-ms-overflow-style:none;display:flex;transition:var(--nano-transition-medium, 0.5s) ease;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=");-webkit-mask-size:calc(100% + var(--fade-size) * 4);mask-size:calc(100% + var(--fade-size) * 4);-webkit-mask-position:calc(var(--fade-size) * -2);mask-position:calc(var(--fade-size) * -2)}.onav__scroller::-webkit-scrollbar{inline-size:0;block-size:0}.onav__scroller::after{content:" ";line-height:1;flex:0 0 auto;display:block}.onav--has-scroll-controls-start .onav__scroller{-webkit-mask-position:0;mask-position:0;-webkit-mask-size:calc(100% + var(--fade-size) * 2);mask-size:calc(100% + var(--fade-size) * 2)}.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-position:calc(var(--fade-size) * -1);mask-position:calc(var(--fade-size) * -1);-webkit-mask-size:calc(100% + var(--fade-size));mask-size:calc(100% + var(--fade-size))}.onav--has-scroll-controls-start.onav--has-scroll-controls-end .onav__scroller{-webkit-mask-size:100%;mask-size:100%;-webkit-mask-position:0;mask-position:0}.onav__items{flex:1 1 auto;position:relative;inline-size:auto;flex-wrap:nowrap;display:flex}.onav__items::before{content:"";background:var(--indicator-track-color);display:block;position:absolute;z-index:1}.onav__active-indicator{position:absolute;z-index:10;transition:var(--indicator-transition) transform ease, var(--indicator-transition) width ease, var(--indicator-transition) height ease}.onav nano-icon-button.onav__scroll-button{--nano-color-base:var(--scroll-btn-color);display:flex;align-items:center;justify-content:center;position:absolute;border:unset;z-index:2;transition:var(--nano-transition-fast, 0.3s) ease opacity;opacity:0;color:var(--scroll-btn-color);pointer-events:none}.onav nano-icon-button.onav__scroll-button:focus{outline:none}.onav nano-icon-button.onav__scroll-button.is-shown{opacity:1;pointer-events:all}.onav nano-icon-button.onav__scroll-button:focus-visible{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))) inset}.onav--horizontal .onav__scroller{overflow:auto hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;padding-inline:var(--padding);-webkit-mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to left, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)))}.onav--horizontal .onav__scroller::after{padding-inline:0 var(--fade-size);padding-block:0 0}.onav--horizontal.onav--has-scroll-controls .onav__scroller{padding-inline:var(--fade-size) 0;padding-block:0 0}.onav--horizontal .onav__items{flex-direction:row}.onav--horizontal .onav__items::before{content:"";inline-size:100%;block-size:var(--indicator-track-size);inset-block-end:0}.onav--horizontal .onav__active-indicator{inset-block-end:0;border-block-end:solid var(--indicator-size) var(--indicator-color)}.onav--horizontal .onav__scroll-button{inset-block:0}.onav--horizontal .onav__scroll-button--start{inset-inline-start:0}.onav--horizontal .onav__scroll-button--end{inset-inline-end:0}.onav--vertical{inline-size:100%}.onav--vertical .onav__nav{max-block-size:100%;display:flex}.onav--vertical .onav__scroller{inline-size:100%;overflow:hidden auto;flex-direction:column;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));mask-image:linear-gradient(to top, rgb(0 0 0/var(--fade-transparency)) 0, rgb(0 0 0/var(--fade-transparency)) var(--fade-size), black calc(var(--fade-size) * 2), black calc(100% - var(--fade-size) * 2), rgb(0 0 0/var(--fade-transparency)) calc(100% - var(--fade-size)), rgb(0 0 0/var(--fade-transparency)));padding-inline:0 0;padding-block:calc(var(--fade-size) + 12px) var(--fade-size)}.onav--vertical .onav__scroller::after{padding-inline:0 0;padding-block:0 var(--fade-size)}.onav--vertical .onav__items{flex-direction:column;inline-size:-moz-fit-content;inline-size:fit-content}.onav--vertical .onav__items::before{content:"";block-size:100%;inline-size:var(--indicator-track-size);inset-inline-start:0}.onav--vertical .onav__active-indicator{inset-inline-start:0;border-inline-start:solid var(--indicator-size) var(--indicator-color)}.onav--vertical .onav__scroll-button{inset-inline:0}.onav--vertical .onav__scroll-button--start{inset-block-start:0}.onav--vertical .onav__scroll-button--end{inset-block-end:0}';const l=class{watchIsActiveHandler(){this.instantReCalc=true;this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));setTimeout((()=>this.instantReCalc=false),300)}async syncActiveItem(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)))}constructor(i){t(this,i);this.mutationObservers=new WeakMap;this.updateScrollControls=()=>{if(!this.nav)return;this.hasScrollControls=this.nav[this.scrollProp]>this.nav[this.clientDimProp]&&this.nav[this.scrollProp]>this.itemContainer[this.clientDimProp];this.handleScroll()};this.handleScroll=()=>{if(!this.hasScrollControls){this.hideControlStart=this.hideControlEnd=true;return}const t=this.isRtl?this.nav[this.scrollOffset]===0:Math.abs(this.nav[this.clientDimProp]-(this.nav[this.scrollProp]-this.nav[this.scrollOffset]))<2;const i=this.isRtl?Math.abs(this.nav[this.scrollProp]+this.nav[this.scrollOffset]-this.nav[this.clientDimProp])<2:this.nav[this.scrollOffset]===0;if(i){this.hideControlStart=true;this.hideControlEnd=false}else if(t){this.hideControlStart=false;this.hideControlEnd=true}else{this.hideControlEnd=false;this.hideControlStart=false}};this.handleBtnClick=(t=false)=>{const i=this.navDim;let a;if(t)a=this.nav[this.scrollOffset]+i-20;else a=this.nav[this.scrollOffset]-i+20;try{this.nav.scroll({left:this.orientation==="horizontal"?a:0,top:this.orientation==="vertical"?a:0,behavior:"smooth"})}catch(t){this.nav[this.scrollOffset]=a}};this.slotChangeHandler=()=>{if(this.allActiveItems.length<2)return;const t=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));if(t)this.activeItem=t;this.recalculatePositions();this.allActiveItems.forEach((t=>{if(this.mutationObservers.get(t))return;const i=new MutationObserver((()=>this.syncActiveItemIndicator()));i.observe(t,{characterData:true,childList:true,subtree:true});this.mutationObservers.set(t,i)}))};this.handleClick=t=>{if(this.allActiveItems.length<2)return;const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i};this.handleKeyDown=t=>{if(["Enter"," "].includes(t.key)){const i=t.composedPath().find((t=>this.allActiveItems.includes(t)));if(i)this.activeItem=i}};this.recalculatePositions=()=>{this.updateScrollControls();this.syncActiveItemIndicator();this.scrollToActiveItem()};this.scrollControls=true;this.orientation="horizontal";this.activeHandler=(t,i)=>t.classList.add("active");this.inActiveHandler=(t,i)=>t.classList.remove("active");this.isActiveHandler=(t,i)=>t.classList.contains("active");this.instantReCalc=false;this.hasScrollControls=false;this.hideControlEnd=true;this.hideControlStart=true;this.recalculatePositions=o(this.recalculatePositions.bind(this),80)}get scrollProp(){return this.orientation==="horizontal"?"scrollWidth":"scrollHeight"}get clientDimProp(){return this.orientation==="horizontal"?"clientWidth":"clientHeight"}get scrollOffset(){return this.orientation==="horizontal"?"scrollLeft":"scrollTop"}watchScrollControls(){if(this.hasScrollControls)this.handleScroll();else this.hideControlStart=this.hideControlEnd=true}hideEndBtn(){if(!this.endBtn)return;this.activateBtn(this.endBtn,!this.hideControlEnd)}hideStartBtn(){if(!this.startBtn)return;this.activateBtn(this.startBtn,!this.hideControlStart)}activateBtn(t,i=true){if(!i){t.tabIndex=-1;t.disabled=true;t.classList.remove("is-shown");return}t.tabIndex=0;t.disabled=false;t.classList.add("is-shown")}get allActiveItems(){return this.allItems.filter((t=>!t.disabled||t.classList.contains("disabled")))}get allItems(){return e(this.host,"*",true)}get activeItem(){return this._activeItem}set activeItem(t){if(!t||t===this.activeItem||t.disabled||!this.allActiveItems.includes(t)){return}this._activeItem=t;this.allActiveItems.forEach(((t,i)=>{if(t===this._activeItem)this.activeHandler(t,i);else this.inActiveHandler(t,i)}));this.recalculatePositions()}get navDim(){if(!this.nav)return 0;const t=getComputedStyle(this.nav);let i=this.nav[this.clientDimProp];if(this.orientation==="horizontal"){return i-=parseFloat(t.paddingLeft)+parseFloat(t.paddingRight)}else{return i-=parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}}scrollToActiveItem(){if(!this.nav||!this.activeItem)return;setTimeout((()=>{this.activeItem.scrollIntoView({behavior:this.instantReCalc?"auto":"smooth",block:"center",inline:"center"})}),100)}syncActiveItemIndicator(){if(!this.activeItem)return;const t=this.activeItem;const i=t.clientWidth||0;const a=t.clientHeight+2||0;const s=n(t,this.itemContainer);if(!this.activeIndicator)return;const e=s.top;const o=s.left;if(this.instantReCalc)this.activeIndicator.style.transition="none";switch(this.orientation){case"horizontal":this.activeIndicator.style.width=`${i}px`;this.activeIndicator.style.height=null;this.activeIndicator.style.transform=`translateX(${o}px)`;break;case"vertical":this.activeIndicator.style.width=null;this.activeIndicator.style.height=`${a}px`;this.activeIndicator.style.transform=`translateY(${e}px)`;break}setTimeout((()=>this.activeIndicator.style.transition=null),400)}connectedCallback(){this.instantReCalc=true;this.isRtl=this.orientation==="horizontal"&&!!this.host.closest('[dir="rtl"]');if(window["MutationObserver"])this.slotChangeHandler();if(!window["ResizeObserver"])return;if(this.ro){this.ro.disconnect();this.ro=undefined}const t=this.ro=new ResizeObserver(this.recalculatePositions);t.observe(this.host)}componentDidLoad(){this.activeItem=this.allActiveItems.find(((t,i)=>this.isActiveHandler(t,i)));this.instantReCalc=false}disconnectedCallback(){if(this.ro){this.ro.disconnect();this.ro=undefined}}render(){return i(a,{dir:this.isRtl?"rtl":null},i("div",{part:"base",class:{onav:true,[`onav--${this.orientation}`]:true,"onav--has-scroll-controls":this.hasScrollControls,"onav--has-scroll-controls-start":!this.hideControlStart,"onav--has-scroll-controls-end":!this.hideControlEnd,"onav--no-transitions":this.instantReCalc},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"onav__nav"},this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-prev",class:{"onav__scroll-button":true,"onav__scroll-button--start":true},ref:t=>this.startBtn=t,onClick:()=>this.handleBtnClick(false),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-left":"light/chevron-up"}),i("div",{part:"scroller",ref:t=>this.nav=t,class:"onav__scroller",onScroll:this.handleScroll},i("div",{part:"items",ref:t=>this.itemContainer=t,class:"onav__items"},i("div",{part:"indicator",ref:t=>this.activeIndicator=t,class:"onav__active-indicator"}),i("slot",{onSlotchange:this.slotChangeHandler}))),this.scrollControls&&i("nano-icon-button",{part:"scroll-button scroll-button-next",class:{"onav__scroll-button":true,"onav__scroll-button--end":true},ref:t=>this.endBtn=t,onClick:()=>this.handleBtnClick(true),label:"Click to scroll",iconName:this.orientation==="horizontal"?"light/chevron-right":"light/chevron-down"}))))}get host(){return s(this)}static get watchers(){return{isActiveHandler:["watchIsActiveHandler"],hasScrollControls:["watchScrollControls"],hideControlEnd:["hideEndBtn"],hideControlStart:["hideStartBtn"]}}};l.style=r;export{l as nano_overflow_nav};
+//# sourceMappingURL=nano-overflow-nav.entry.js.map

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

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

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r,h as a,g as e}from"./index-9695db0a.js";const o=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--height:1em;--track-color:rgb(var(--nano-track-rgb, 228 230 232) / 100%);--indicator-color:rgb(var(--nano-indicator-rgb, 84 140 175) / 100%);--label-color:var(--nano-color-white, white);display:block}.progress-bar{position:relative;background-color:var(--track-color);block-size:var(--height);border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));overflow:hidden}.progress-bar__indicator{block-size:100%;font-size:0.75em;background-color:var(--indicator-color);color:var(--label-color);text-align:center;white-space:nowrap;overflow:hidden;transition:0.4s width, 0.4s background-color;transform:translateZ(0);-webkit-user-select:none;user-select:none;transform-origin:left}.progress-bar--indeterminate .progress-bar__indicator{animation:indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1)}@keyframes indeterminate{0%{scale:1 1;transform:translateX(-100%) translateZ(0)}75%,100%{scale:1 1;transform:translateX(100%) translateZ(0)}}";const s=class{constructor(a){r(this,a);this.value=0;this.indeterminate=false;this.showPercent=false}render(){return a("div",{part:"base",class:{"progress-bar":true,"progress-bar--indeterminate":this.indeterminate},role:"progressbar",title:this.host.title||undefined,"aria-label":"Progress","aria-valuemin":"0","aria-valuemax":"100","aria-valuenow":this.indeterminate?null:this.value},a("div",{part:"indicator",class:"progress-bar__indicator",style:{width:!this.indeterminate?`${this.value}%`:undefined}},a("span",{part:"label",class:"progress-bar__label"},a("slot",null,!this.indeterminate&&this.showPercent?`${this.value}%`:""))))}get host(){return e(this)}};s.style=o;export{s as nano_progress_bar};
+//# sourceMappingURL=nano-progress-bar.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["progressBarCss","ProgressBar","render","h","part","class","this","indeterminate","role","title","host","undefined","value","style","width","showPercent"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=nano-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/layers';\n\n/**\n * @prop --height: The progress bar's height. Default 1em\n * @prop --track-color: The track color. Default rgb(#{$progress-track-color-rgb} / 100%);\n * @prop --indicator-color: The indicator color. Default rgb(#{$progress-indicator-color-rgb} / 100%);\n * @prop --label-color: The label color. Default var(--nano-color-white, white);\n */\n:host {\n  --height: 1em;\n  --track-color: rgb(#{$progress-track-color-rgb} / 100%);\n  --indicator-color: rgb(#{$progress-indicator-color-rgb} / 100%);\n  --label-color: var(--nano-color-white, white);\n\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  block-size: var(--height);\n  border-radius: $layer-border-radius;\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  block-size: 100%;\n  font-size: 0.75em;\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 0.4s width, 0.4s background-color;\n  transform: translateZ(0);\n  user-select: none;\n  transform-origin: left;\n}\n\n// Indeterminate\n.progress-bar--indeterminate .progress-bar__indicator {\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    scale: 1 1;\n    transform: translateX(-100%) translateZ(0);\n  }\n\n  75%,\n  100% {\n    scale: 1 1;\n    transform: translateX(100%) translateZ(0);\n  }\n}\n","import { Component, Prop, h, Element } from '@stencil/core';\n\n/**\n * Used to show the status of an ongoing operation.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'nano-progress-bar',\n  styleUrl: 'progress-bar.scss',\n  shadow: true,\n})\nexport class ProgressBar {\n  @Element() host: HTMLNanoProgressBarElement;\n\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() value = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  /** Whether to show the progress bar's current percent as text. Will be overwritten if you use the default slot.  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        title={this.host.title || undefined}\n        aria-label=\"Progress\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.value}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: !this.indeterminate ? `${this.value}%` : undefined,\n          }}\n        >\n          <span part=\"label\" class=\"progress-bar__label\">\n            <slot>\n              {!this.indeterminate && this.showPercent ? `${this.value}%` : ''}\n            </slot>\n          </span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":";;;iDAAA,MAAMA,EAAiB,yjC,MCiBVC,EAAW,M,oCAIN,E,mBAGQ,M,iBAGF,K,CAEtBC,SACE,OACEC,EAAA,OACEC,KAAK,OACLC,MAAO,CACL,eAAgB,KAChB,8BAA+BC,KAAKC,eAEtCC,KAAK,cACLC,MAAOH,KAAKI,KAAKD,OAASE,UAAS,aACxB,WAAU,gBACP,IAAG,gBACH,MAAK,gBACJL,KAAKC,cAAgB,KAAOD,KAAKM,OAEhDT,EAAA,OACEC,KAAK,YACLC,MAAM,0BACNQ,MAAO,CACLC,OAAQR,KAAKC,cAAgB,GAAGD,KAAKM,SAAWD,YAGlDR,EAAA,QAAMC,KAAK,QAAQC,MAAM,uBACvBF,EAAA,aACIG,KAAKC,eAAiBD,KAAKS,YAAc,GAAGT,KAAKM,SAAW,M"}

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as n,c as a,h as e,a as r,g as s}from"./index-9695db0a.js";import{c as t}from"./math-c02ddfda.js";import{c as i}from"./theme-82feb8cf.js";import{a as o}from"./throttle-ac4fcefa.js";const c=(n,a,e,r)=>{let s=n.querySelector("input.aux-input");if(!s){s=n.ownerDocument.createElement("input");s.type="hidden";s.classList.add("aux-input");n.appendChild(s)}s.disabled=r;s.name=a;s.value=e||""};const h='.sc-nano-range-h{box-sizing:border-box}*.sc-nano-range,*.sc-nano-range::before,*.sc-nano-range::after{box-sizing:border-box}[hidden].sc-nano-range{display:none !important}.sc-nano-range-h{--knob-handle-size:(var(--knob-size) * 2);--rgb-inactive:165 165 165;--knob-border-radius:50%;--knob-background:var(--nano-color-primary, #007495);--knob-box-shadow:0 2px 4px 0 rgb(0 0 0 / 30%);--knob-size:30px;--bar-height:8px;--bar-background:#e2e1e0;--bar-background-active:#a5a5a5;--bar-border-radius:4px;--height:42px;--pin-background:var(--nano-color-primary, #007495);--pin-color:var(--nano-color-primary-contrast, #fff);--focus-style:0 0 0 5px var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}.range-wrap.sc-nano-range{display:flex;position:relative;flex:3;align-items:center;-webkit-user-select:none;user-select:none}.range-wrap.sc-nano-range-s>ion-icon[slot],.range-wrap .sc-nano-range-s>ion-icon[slot]{font-size:1.5em}.range-wrap.sc-nano-range-s>[slot=start],.range-wrap .sc-nano-range-s>[slot=start]{margin-inline:0 14px;margin-block:0;font-size:0.9em}.range-wrap.sc-nano-range-s>[slot=end],.range-wrap .sc-nano-range-s>[slot=end]{margin-inline:14px 0;margin-block:0;font-size:0.9em}.range-slider.sc-nano-range{position:relative;flex:1;inline-size:100%;block-size:var(--height);contain:size layout style;cursor:grab;touch-action:pan-y}.range-pressed.sc-nano-range-h .range-slider.sc-nano-range{cursor:grabbing}.range-bar.sc-nano-range{border-radius:var(--bar-border-radius);inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inset-inline-start:0;position:absolute;inline-size:100%;block-size:var(--bar-height);background:var(--bar-background);pointer-events:none}.range-snaps.sc-nano-range-h .range-bar.sc-nano-range{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-bar-active.sc-nano-range{inset-block-end:0;inline-size:auto;background:var(--bar-background-active)}.range-knob.sc-nano-range{border-radius:var(--knob-border-radius);inset-block-start:calc(50% - var(--knob-size) / 2);inset-inline-start:calc(50% - var(--knob-size) / 2);position:absolute;inline-size:var(--knob-size);block-size:var(--knob-size);background:var(--knob-background);box-shadow:var(--knob-box-shadow);z-index:2;pointer-events:none;transform:scale(0.67);transition-duration:120ms;transition-property:transform, background-color, border;transition-timing-function:ease}.sc-nano-range-h:not(.range-has-pin) .range-knob-pressed.sc-nano-range .range-knob.sc-nano-range{transform:scale(1)}.range-knob-handle.sc-nano-range{inset-block-start:calc((var(--height) - var(--knob-handle-size)) / 2);inset-inline-start:0;margin-inline-start:calc(0px - var(--knob-handle-size) / 2);position:absolute;inline-size:calc(var(--knob-handle-size));block-size:calc(var(--knob-handle-size));text-align:center}.range-knob-handle.sc-nano-range:active,.range-knob-handle.sc-nano-range:focus{outline:none}.range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), var(--focus-style)}.range-tick.sc-nano-range{position:absolute;inset-block-start:calc((var(--height) - var(--bar-height)) / 2);inline-size:var(--bar-height);block-size:var(--bar-height);background:var(--bar-background-active);z-index:1;pointer-events:none}.range-tick.sc-nano-range:first-of-type{border-radius:var(--bar-border-radius) 0 0 var(--bar-border-radius)}.range-tick.sc-nano-range:last-of-type{border-radius:0 var(--bar-border-radius) var(--bar-border-radius) 0}.range-tick-active.sc-nano-range{background:transparent}.range-pin.sc-nano-range{transform:translate3d(0, 0, 0) scale(0.01);transform-origin:center top;padding:0.66em 0;border-radius:50%;text-align:center;box-sizing:border-box;display:inline-block;position:relative;min-inline-size:2.33em;block-size:2.33em;transition:transform 120ms ease, background 120ms ease;background:var(--pin-background);color:var(--pin-color);font-size:0.75em}.range-pin.sc-nano-range::before{inset-block-start:0.25em;inset-inline-start:50%;margin-inline-start:-1.08em;border-radius:50% 50% 50% 0;position:absolute;inline-size:2.16em;block-size:2.16em;transform:rotate(-45deg);transition:background 120ms ease;background:var(--pin-background);content:"";z-index:-1}.range-knob-pressed.sc-nano-range .range-pin.sc-nano-range{transform:translate3d(0, -50%, 0) scale(1);transform:translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1)}.range-disabled.sc-nano-range-h{pointer-events:none}.range-disabled.sc-nano-range-h .range-bar-active.sc-nano-range,.range-disabled.sc-nano-range-h .range-bar.sc-nano-range,.range-disabled.sc-nano-range-h .range-tick.sc-nano-range{background-color:rgb(var(--rgb-inactive)/50%)}.range-disabled.sc-nano-range-h .range-knob.sc-nano-range{transform:scale(0.55);outline:5px solid #fff;background-color:rgb(var(--rgb-inactive)/50%)}.nano-color.sc-nano-range-h .range-bar-active.sc-nano-range,.nano-color.sc-nano-range-h .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range,.nano-color.sc-nano-range-h .range-pin.sc-nano-range::before,.nano-color.sc-nano-range-h .range-tick.sc-nano-range{background:var(--nano-color-base);color:var(--nano-color-contrast)}.nano-color.sc-nano-range-h .range-bar.sc-nano-range{background:rgb(var(--nano-color-base-rgb)/0.26)}.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:active .range-knob.sc-nano-range,.nano-color.sc-nano-range-h .range-knob-handle.sc-nano-range:focus .range-knob.sc-nano-range{box-shadow:var(--knob-box-shadow), 0 0 0 5px rgb(var(--nano-color-tint-rgb)/0.56)}';const g=class{constructor(e){n(this,e);this.nanoChange=a(this,"nanoChange",7);this.nanoStyle=a(this,"nanoStyle",7);this.nanoFocus=a(this,"nanoFocus",7);this.nanoBlur=a(this,"nanoBlur",7);this.noUpdate=false;this.hasFocus=false;this.clampBounds=n=>t(this.min,n,this.max);this.ensureValueInBounds=n=>{if(this.dualKnobs){return{lower:this.clampBounds(n.lower),upper:this.clampBounds(n.upper)}}else{return this.clampBounds(n)}};this.handleKeyboard=(n,a)=>{let e=this.step;e=e>0?e:1;e=e/(this.max-this.min);if(!a){e*=-1}if(n==="A"){this.ratioA=t(0,this.ratioA+e,1)}else{this.ratioB=t(0,this.ratioB+e,1)}this.updateValue()};this.onBlur=()=>{if(this.hasFocus){this.hasFocus=false;this.nanoBlur.emit();this.emitStyle()}};this.onFocus=()=>{if(!this.hasFocus){this.hasFocus=true;this.nanoFocus.emit();this.emitStyle()}};this.ratioA=0;this.ratioB=0;this.pressedKnob=undefined;this.color=undefined;this.debounce=0;this.name="";this.dualKnobs=false;this.min=0;this.max=100;this.pin=false;this.snaps=false;this.step=1;this.ticks=false;this.disabled=false;this.value=0}debounceChanged(){this.nanoChange=o(this.nanoChange,this.debounce)}minChanged(){if(!this.noUpdate){this.updateRatio()}}maxChanged(){if(!this.noUpdate){this.updateRatio()}}disabledChanged(){if(this.gesture){this.gesture.enable(!this.disabled)}this.emitStyle()}valueChanged(n){if(!this.noUpdate){this.updateRatio()}n=this.ensureValueInBounds(n);this.nanoChange.emit({value:n})}connectedCallback(){this.updateRatio();this.debounceChanged();this.disabledChanged()}disconnectedCallback(){if(this.gesture){this.gesture.destroy();this.gesture=undefined}}async componentDidLoad(){const n=this.rangeSlider;if(n){this.gesture=(await import("./index-f626f476.js")).createGesture({el:n,gestureName:"range",gesturePriority:100,threshold:0,onStart:n=>this.onStart(n),onMove:n=>this.onMove(n),onEnd:n=>this.onEnd(n)});this.gesture.enable(!this.disabled)}}getValue(){const n=this.value||0;if(this.dualKnobs){if(typeof n==="object"){return n}return{lower:0,upper:n}}else{if(typeof n==="object"){return n.upper}return n}}emitStyle(){this.nanoStyle.emit({interactive:true,"interactive-disabled":this.disabled})}onStart(n){const a=this.rect=this.rangeSlider.getBoundingClientRect();const e=n.currentX;let r=t(0,(e-a.left)/a.width,1);if(document.dir==="rtl"){r=1-r}this.pressedKnob=!this.dualKnobs||Math.abs(this.ratioA-r)<Math.abs(this.ratioB-r)?"A":"B";this.setFocus(this.pressedKnob);this.update(e)}onMove(n){this.update(n.currentX)}onEnd(n){this.update(n.currentX);this.pressedKnob=undefined}update(n){const a=this.rect;let e=t(0,(n-a.left)/a.width,1);if(document.dir==="rtl"){e=1-e}if(this.snaps){e=d(b(e,this.min,this.max,this.step),this.min,this.max)}if(this.pressedKnob==="A"){this.ratioA=e}else{this.ratioB=e}this.updateValue()}get valA(){return b(this.ratioA,this.min,this.max,this.step)}get valB(){return b(this.ratioB,this.min,this.max,this.step)}get ratioLower(){if(this.dualKnobs){return Math.min(this.ratioA,this.ratioB)}return 0}get ratioUpper(){if(this.dualKnobs){return Math.max(this.ratioA,this.ratioB)}return this.ratioA}updateRatio(){const n=this.getValue();const{min:a,max:e}=this;if(this.dualKnobs){this.ratioA=d(n.lower,a,e);this.ratioB=d(n.upper,a,e)}else{this.ratioA=d(n,a,e)}}updateValue(){this.noUpdate=true;const{valA:n,valB:a}=this;this.value=!this.dualKnobs?n:{lower:Math.min(n,a),upper:Math.max(n,a)};this.noUpdate=false}setFocus(n){if(this.el.shadowRoot){const a=this.el.shadowRoot.querySelector(n==="A"?".range-knob-a":".range-knob-b");if(a){a.focus()}}}render(){const{min:n,max:a,step:s,el:t,handleKeyboard:o,pressedKnob:h,disabled:g,pin:b,ratioLower:u,ratioUpper:p}=this;const k=`${u*100}%`;const f=`${100-p*100}%`;const v=document;const m=v.dir==="rtl";const x=m?"right":"left";const z=m?"left":"right";const w=n=>({[x]:n[x]});const y={[x]:k,[z]:f};const A=[];if(this.snaps&&this.ticks){for(let e=n;e<=a;e+=s){const r=d(e,n,a);const s={ratio:r,active:r>=u&&r<=p};s[x]=`${r*100}%`;A.push(s)}}c(t,this.name,JSON.stringify(this.getValue()),g);return e(r,{onFocusin:this.onFocus,onFocusout:this.onBlur,class:i(this.color,{"range-disabled":g,"range-pressed":h!==undefined,"range-has-pin":b,"range-snaps":this.snaps})},e("div",{class:"range-wrap"},e("slot",{name:"start"}),e("div",{class:"range-slider",ref:n=>this.rangeSlider=n},A.map((n=>e("span",{style:w(n),role:"presentation",class:{"range-tick":true,"range-tick-active":n.active},part:n.active?"tick-active":"tick"}))),e("div",{class:"range-bar",role:"presentation",part:"bar"}),e("div",{class:"range-bar range-bar-active",role:"presentation",style:y,part:"bar-active"}),l(m,{knob:"A",pressed:h==="A",value:this.valA,ratio:this.ratioA,pin:b,disabled:g,handleKeyboard:o,min:n,max:a}),this.dualKnobs&&l(m,{knob:"B",pressed:h==="B",value:this.valB,ratio:this.ratioB,pin:b,disabled:g,handleKeyboard:o,min:n,max:a})),e("slot",{name:"end"})))}get el(){return s(this)}static get watchers(){return{debounce:["debounceChanged"],min:["minChanged"],max:["maxChanged"],disabled:["disabledChanged"],value:["valueChanged"]}}};const l=(n,{knob:a,value:r,ratio:s,min:t,max:i,disabled:o,pressed:c,pin:h,handleKeyboard:g})=>{const l=n?"right":"left";const b=()=>{const n={};n[l]=`${s*100}%`;return n};return e("div",{onKeyDown:n=>{const e=n.key;if(e==="ArrowLeft"||e==="ArrowDown"){g(a,false);n.preventDefault();n.stopPropagation()}else if(e==="ArrowRight"||e==="ArrowUp"){g(a,true);n.preventDefault();n.stopPropagation()}},class:{"range-knob-handle":true,"range-knob-a":a==="A","range-knob-b":a==="B","range-knob-pressed":c,"range-knob-min":r===t,"range-knob-max":r===i},style:b(),role:"slider",tabindex:o?-1:0,"aria-valuemin":t,"aria-valuemax":i,"aria-disabled":o?"true":null,"aria-valuenow":r},h&&e("div",{class:"range-pin",role:"presentation",part:"pin"},Math.round(r)),e("div",{class:"range-knob",role:"presentation",part:"knob"}))};const b=(n,a,e,r)=>{let s=(e-a)*n;if(r>0){s=Math.round(s/r)*r+a}return t(a,s,e)};const d=(n,a,e)=>t(0,(n-a)/(e-a),1);g.style=h;export{g as nano_range};
+//# sourceMappingURL=nano-range.entry.js.map

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

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

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

@@ -0,0 +1,5 @@
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */
+import{r as s,c as t,h as i,g as n}from"./index-9695db0a.js";import{f as a}from"./focus-visible-8b2c14da.js";import{c as o}from"./math-c02ddfda.js";const r=".sc-nano-rating-h{box-sizing:border-box}*.sc-nano-rating,*.sc-nano-rating::before,*.sc-nano-rating::after{box-sizing:border-box}[hidden].sc-nano-rating{display:none !important}.sc-nano-rating-h{--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 0;margin-inline:calc(var(--symbol-spacing) * -1) calc(var(--symbol-spacing) * -1)}.rating.sc-nano-rating{position:relative;border-radius:5px;vertical-align:middle;inline-size:100%;transition:box-shadow 0.15s ease}.rating.sc-nano-rating:focus{outline:none}.rating.focus-visible.sc-nano-rating:focus{box-shadow:var(--focus-shadow)}.rating__symbols.sc-nano-rating{display:flex;align-items:center;position:relative;font-size:var(--symbol-size);color:var(--symbol-color);white-space:nowrap;cursor:pointer;line-height:0;justify-content:space-between}.rating__symbols--inactive.sc-nano-rating .rating__symbol.sc-nano-rating>.sc-nano-rating:not(nano-icon){background-color:currentcolor !important}.rating__symbols.sc-nano-rating>*.sc-nano-rating{margin:var(--symbol-spacing)}.rating__symbols--indicator.sc-nano-rating{position:absolute;inset-block-start:0;inset-inline-start:0;color:var(--symbol-color-active);pointer-events:none;inline-size:100%}.rating__symbol.sc-nano-rating{transition:0.2s transform;text-align:center}.rating__symbol--hover.sc-nano-rating{transform:scale(1.2)}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:default}.rating--disabled.sc-nano-rating .rating__symbol.sc-nano-rating,.rating--readonly.sc-nano-rating .rating__symbol.sc-nano-rating{transform:none !important}.rating--disabled.sc-nano-rating{opacity:0.5}.rating--disabled.sc-nano-rating .rating__symbols.sc-nano-rating{cursor:not-allowed}";const e=class{constructor(i){s(this,i);this.nanoChange=t(this,"nanoChange",7);this.nanoBlur=t(this,"nanoBlur",7);this.nanoFocus=t(this,"nanoFocus",7);this.handleClick=s=>{if(this.disabled||this.readonly){return}const t=this.getValueFromMousePosition(s);this.value=t===this.value?0:t;this.isHovering=false};this.handleKeyDown=s=>{if(this.disabled||this.readonly){return}if(s.key==="ArrowLeft"){const t=s.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.max(0,this.value-t));s.preventDefault()}if(s.key==="ArrowRight"){const t=s.shiftKey?1:this.precision;this.value=this.roundToPrecision(Math.min(this.max,this.value+t));s.preventDefault()}if(s.key==="Home"){this.value=0;s.preventDefault()}if(s.key==="End"){this.value=this.max;s.preventDefault()}};this.handleMouseEnter=()=>{this.isHovering=true};this.handleMouseLeave=()=>{this.isHovering=false};this.handleFocus=()=>{this.nanoFocus.emit()};this.handleBlur=()=>{this.nanoBlur.emit()};this.handleMouseMove=s=>{this.hoverValue=this.getValueFromMousePosition(s)};this.hoverValue=0;this.isHovering=false;this.value=0;this.max=5;this.precision=1;this.readonly=false;this.disabled=false;this.name="";this.symbolName="solid/star";this.symbol=s=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}handleValueChange(){this.nanoChange.emit()}handleSymbolChange(){this.symbol=s=>'<nano-icon name="'+this.symbolName+'"></nano-icon>'}async setFocus(){this.rating.focus()}async removeFocus(){this.rating.blur()}getValueFromMousePosition(s){const t=this.rating.getBoundingClientRect().left;const i=this.rating.getBoundingClientRect().width;let n;n=this.roundToPrecision((s.clientX-t)/i*this.max,this.precision);if(this.isRtl)n=this.max+this.precision-n;return o(n,0,this.max)}roundToPrecision(s,t=.5){const i=1/t;return Math.ceil(s*i)/i}clip(s){if(!this.rating)return;const t=this.rating.getBoundingClientRect().width;if(this.isRtl)return`rect(0, ${t}px, 2em, ${t-t/100*(s/this.max*100)}px)`;return`rect(0, ${t/100*(s/this.max*100)}px, 2em, 0)`}componentDidLoad(){a.observe(this.rating);setTimeout((()=>this.indicator.style.clip=this.clip(this.value)),20)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl"}disconnectedCallback(){a.unobserve(this.rating)}render(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";const s=Array.from(Array(this.max).keys());let t=0;if(this.disabled||this.readonly){t=this.value}else{t=this.isHovering?this.hoverValue:this.value}return i("div",{class:"rating-wrap"},i("div",{dir:this.isRtl?"rtl":null,ref:s=>this.rating=s,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},i("span",{class:"rating__symbols rating__symbols--inactive"},s.map((s=>i("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(t)===s+1},role:"presentation",onMouseEnter:this.handleMouseEnter,innerHTML:this.symbol(s+1)})))),i("span",{ref:s=>this.indicator=s,class:"rating__symbols rating__symbols--indicator",style:{clip:this.clip(t)}},s.map((s=>i("span",{class:{rating__symbol:true,"rating__symbol--hover":this.isHovering&&Math.ceil(t)===s+1},role:"presentation",innerHTML:this.symbol(s+1)})))),i("input",{type:"hidden",name:this.name,value:this.value,disabled:this.disabled||this.readonly})))}get host(){return n(this)}static get watchers(){return{value:["handleValueChange"],symbolName:["handleSymbolChange"]}}};e.style=r;export{e as nano_rating};
+//# sourceMappingURL=nano-rating.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ratingCss","Rating","this","handleClick","event","disabled","readonly","newValue","getValueFromMousePosition","value","isHovering","handleKeyDown","key","decrement","shiftKey","precision","roundToPrecision","Math","max","preventDefault","increment","min","handleMouseEnter","handleMouseLeave","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","handleMouseMove","hoverValue","_number","symbolName","handleValueChange","nanoChange","handleSymbolChange","symbol","_","async","rating","focus","blur","containerLeft","getBoundingClientRect","left","containerWidth","width","num","clientX","isRtl","clamp","numberToRound","multiplier","ceil","clip","displayValue","tw","componentDidLoad","focusVisible","observe","setTimeout","indicator","style","connectedCallback","host","dir","ownerDocument","disconnectedCallback","unobserve","render","counter","Array","from","keys","h","class","ref","el","part","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","onMouseMove","onFocus","onBlur","map","index","rating__symbol","role","innerHTML","span","type","name"],"sources":["./src/components/rating/rating.scss?tag=nano-rating&encapsulation=scoped","./src/components/rating/rating.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --symbol-color: The inactive color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-color-active: The active color for symbols. Defaults to #{map.get($colors, palegrey)}\n  * @prop --symbol-size: The size of symbols. Defaults to contextual font size\n  * @prop --symbol-spacing: The spacing to use around symbols. Defaults to .25rem\n  * @prop --focus-shadow: Box shadow style when focused. Defaults to #{$control-focus-style}\n  */\n\n  --symbol-color: #{map.get($colors, palegrey)};\n  --symbol-color-active: #{map.get($colors, yellow)};\n  --symbol-spacing: 0.25rem;\n  --focus-shadow: #{$control-focus-style};\n\n  display: inline-block;\n}\n\n.rating-wrap {\n  position: relative;\n  margin-block: 0 0;\n  margin-inline: calc(var(--symbol-spacing) * -1) calc(var(--symbol-spacing) * -1);\n}\n\n.rating {\n  position: relative;\n  border-radius: 5px;\n  vertical-align: middle;\n  inline-size: 100%;\n  transition: box-shadow 0.15s ease;\n\n  &:focus {\n    outline: none;\n  }\n\n  &.focus-visible:focus {\n    box-shadow: var(--focus-shadow);\n  }\n\n  &__symbols {\n    display: flex;\n    align-items: center;\n    position: relative;\n    font-size: var(--symbol-size);\n    color: var(--symbol-color);\n    white-space: nowrap;\n    cursor: pointer;\n    line-height: 0;\n    justify-content: space-between;\n\n    &--inactive {\n      .rating__symbol > :not(nano-icon) {\n        background-color: currentcolor !important;\n      }\n    }\n\n    > * {\n      margin: var(--symbol-spacing);\n    }\n\n    &--indicator {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      color: var(--symbol-color-active);\n      pointer-events: none;\n      inline-size: 100%;\n    }\n  }\n\n  &__symbol {\n    transition: 0.2s transform;\n    text-align: center;\n\n    &--hover {\n      transform: scale(1.2);\n    }\n  }\n\n  &--disabled,\n  &--readonly {\n    .rating__symbols {\n      cursor: default;\n    }\n\n    .rating__symbol {\n      transform: none !important;\n    }\n  }\n\n  &--disabled {\n    opacity: 0.5;\n\n    .rating__symbols {\n      cursor: not-allowed;\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n  ComponentInterface,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { clamp } from '../../utils/math';\n\n/**\n * Rating - a form element to allow the viewing and input of user feedback.\n */\n@Component({\n  tag: 'nano-rating',\n  styleUrl: 'rating.scss',\n  scoped: true,\n})\nexport class Rating implements ComponentInterface {\n  private rating: HTMLElement;\n  private isRtl: boolean;\n  private indicator: HTMLElement;\n\n  @Element() host: HTMLNanoRatingElement;\n\n  @State() hoverValue = 0;\n  @State() isHovering = false;\n\n  /**\n   * The current rating.\n   */\n  @Prop({ mutable: true, reflect: true }) value = 0;\n\n  /**\n   * The highest rating to show.\n   */\n  @Prop() max = 5;\n\n  /**\n   * The minimum increment value allowed by the control.\n   */\n  @Prop() precision = 1;\n\n  /**\n   * Makes the rating readonly.\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Disables the rating.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name = '';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() symbolName = 'solid/star';\n\n  /**\n   * A function that returns the symbols to display.\n   * Allows for more granular control than `symbol-name`.\n   * Accepts an option `value` parameter you can use to map a specific symbol to a value.\n   * @param _number\n   * @returns an html string used to render your rating symbol\n   */\n  @Prop() symbol = (_number: number) =>\n    '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n\n  @Watch('value')\n  handleValueChange() {\n    this.nanoChange.emit();\n  }\n\n  @Watch('symbolName')\n  handleSymbolChange() {\n    this.symbol = (_: number) =>\n      '<nano-icon name=\"' + this.symbolName + '\"></nano-icon>';\n  }\n\n  /**\n   * Emitted when the rating's value changes.\n   */\n  @Event() nanoChange!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() nanoBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() nanoFocus!: EventEmitter<void>;\n\n  /**\n   * Sets focus on the rating.\n   */\n  @Method()\n  async setFocus() {\n    this.rating.focus();\n  }\n\n  /**\n   * Removes focus from the rating.\n   */\n  @Method()\n  async removeFocus() {\n    this.rating.blur();\n  }\n\n  private getValueFromMousePosition(event: MouseEvent) {\n    const containerLeft = this.rating.getBoundingClientRect().left;\n    const containerWidth = this.rating.getBoundingClientRect().width;\n\n    let num: number;\n    num = this.roundToPrecision(\n      ((event.clientX - containerLeft) / containerWidth) * this.max,\n      this.precision\n    );\n    if (this.isRtl) num = this.max + this.precision - num;\n\n    return clamp(num, 0, this.max);\n  }\n\n  private roundToPrecision(numberToRound: number, precision = 0.5) {\n    const multiplier = 1 / precision;\n    return Math.ceil(numberToRound * multiplier) / multiplier;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const newValue = this.getValueFromMousePosition(event);\n    this.value = newValue === this.value ? 0 : newValue;\n    this.isHovering = false;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === 'ArrowLeft') {\n      const decrement = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(Math.max(0, this.value - decrement));\n      event.preventDefault();\n    }\n\n    if (event.key === 'ArrowRight') {\n      const increment = event.shiftKey ? 1 : this.precision;\n      this.value = this.roundToPrecision(\n        Math.min(this.max, this.value + increment)\n      );\n      event.preventDefault();\n    }\n\n    if (event.key === 'Home') {\n      this.value = 0;\n      event.preventDefault();\n    }\n\n    if (event.key === 'End') {\n      this.value = this.max;\n      event.preventDefault();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    this.isHovering = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovering = false;\n  };\n\n  private handleFocus = () => {\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.nanoBlur.emit();\n  };\n\n  private handleMouseMove = (event: MouseEvent) => {\n    this.hoverValue = this.getValueFromMousePosition(event);\n  };\n\n  private clip(displayValue: number) {\n    if (!this.rating) return;\n    const tw = this.rating.getBoundingClientRect().width;\n    if (this.isRtl)\n      return `rect(0, ${tw}px, 2em, ${\n        tw - (tw / 100) * ((displayValue / this.max) * 100)\n      }px)`;\n    return `rect(0, ${\n      (tw / 100) * ((displayValue / this.max) * 100)\n    }px, 2em, 0)`;\n  }\n\n  componentDidLoad() {\n    focusVisible.observe(this.rating);\n    setTimeout(() => (this.indicator.style.clip = this.clip(this.value)), 20);\n  }\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.rating);\n  }\n\n  render() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    const counter = Array.from(Array(this.max).keys());\n\n    let displayValue = 0;\n    if (this.disabled || this.readonly) {\n      displayValue = this.value;\n    } else {\n      displayValue = this.isHovering ? this.hoverValue : this.value;\n    }\n\n    return (\n      <div class=\"rating-wrap\">\n        <div\n          dir={this.isRtl ? 'rtl' : null}\n          ref={(el) => (this.rating = el)}\n          part=\"base\"\n          class={{\n            rating: true,\n            'rating--readonly': this.readonly,\n            'rating--disabled': this.disabled,\n          }}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-readonly={this.readonly ? 'true' : 'false'}\n          aria-valuenow={this.value}\n          aria-valuemin={0}\n          aria-valuemax={this.max}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onMouseMove={this.handleMouseMove}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          <span class=\"rating__symbols rating__symbols--inactive\">\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                // Users can click the current value to clear the rating. When this happens, we set this.isHovering to\n                // false to prevent the hover state from confusing them as they move the mouse out of the control. This\n                // extra mouseenter will reinstate it if they happen to mouse over an adjacent symbol.\n                onMouseEnter={this.handleMouseEnter}\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n\n          <span\n            ref={(span) => (this.indicator = span)}\n            class=\"rating__symbols rating__symbols--indicator\"\n            style={{\n              clip: this.clip(displayValue),\n            }}\n          >\n            {counter.map((index) => (\n              <span\n                class={{\n                  rating__symbol: true,\n                  'rating__symbol--hover':\n                    this.isHovering && Math.ceil(displayValue) === index + 1,\n                }}\n                role=\"presentation\"\n                innerHTML={this.symbol(index + 1)}\n              />\n            ))}\n          </span>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            disabled={this.disabled || this.readonly}\n          />\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

package/dist/nano-components/{p-e6a0675e.entry.js.map → nano-resize-observe_2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","classNameChange","host","className","join","nanoResizeObserverReady","emit","newStatesProp","statesChanged","dimensionChanged","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","attachRO","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","nanoResize","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"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 type { ResizeStateChangeEventDetail } from '../../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: `nano-resize-observe { display: contents }`,\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","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$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: #{$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"],"mappings":"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"}
+{"version":3,"names":["ResizeObserve","this","isReady","assessChanges","currentWidth","currentHeight","readTask","assesContentFit","states","appliedStates","changedStates","h","Map","w","hasChanged","Object","keys","forEach","dimType","dim","state","bp","applied","set","applyChanges","classNames","includes","classNameChange","host","className","join","nanoResizeObserverReady","emit","newStatesProp","statesChanged","dimensionChanged","toBpDir","bpDir","bpDirSpl","split","filter","bs","length","parseInt","dir","map","st","trim","key","classes","notifyContentFit","findNonContentsEle","ele","window","getComputedStyle","display","recurse","e","Array","from","children","find","cEle","didChange","measureEle","firstElementChild","scrollWidth","contentFitX","scrollHeight","contentFitY","nanoResizeContentFitChange","x","y","changes","push","cl","nanoResizeStateChange","toSimpleObj","stateMaps","retObj","attachRO","ro","ResizeObserver","width","height","getBoundingClientRect","Math","ceil","nanoResize","observe","componentWillLoad","classList","connectedCallback","disconnectedCallback","disconnect","render","Host","name","skeletonCss","Skeleton","class","skeleton","animate","animated"],"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 type { ResizeStateChangeEventDetail } from '../../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: `nano-resize-observe { display: contents }`,\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","@import '../../global/style/nano-theme/components';\n\n:host {\n  /**\n   * @prop --base-color-rgb: default #{$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: #{$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"],"mappings":"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"}