@nanoporetech-digital/components 2.9.0 → 2.11.0

package/dist/nano-components/p-39a5280e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/datalist/datalist.scss?tag=nano-datalist&encapsulation=shadow","src/components/datalist/datalist.tsx","src/components/menu/menu.scss?tag=nano-menu&encapsulation=shadow","src/components/menu/menu.tsx","src/components/option/option.scss?tag=nano-option&encapsulation=shadow","src/components/option/option.tsx"],"names":["datalistCss","findLabel","formCtrl","foundLabel","id","document","querySelector","closest","listIds","DataList","exports","class_1","hostRef","_this","this","isNanoInput","typeToSelect","listId","isFiltered","shouldFocus","_allOptEles","actvOptEles","canOpen","optionIds","selected","_dropDownConfig","skidding","options","type","open","disableFilter","disabled","optSelected","e","stopPropagation","changeInputValue","detail","raf","inputChange","shouldOpen","handleShow","__awaiter","listBox","setFocus","showActiveElement","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","Object","defineProperty","prototype","opts","_a","value","forEach","opt","ddc","assign","allOptEles","openWatcher","writeTask","nanoDropdown","setAttribute","toString","watchInputChange","nanoInput","host","_b","getInputElement","_c","sent","input","HTMLElement","manageSlotChangeListener","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","__spreadArray","watchTypeChange","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","dropDownConfig","readOnly","manageInputEvents","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","watchActvOptChange","c","val","optIds","hidden","isSelected","push","manageCanOpen","hasNoResult","fireActiveOptsEvent","nanoOptionsUpdated","emit","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","connectedCallback","componentDidLoad","componentDidRender","console","warn","render","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","dropwdownOpen","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","class_2","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","_i","items_1","shadowRoot","getTextContent","handleMouseOver","menu","preventScroll","removeFocus","blur","resetActiveItem","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","handleBlur","hasFocus","kev","found","composedPath","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","optionCss","Option","class_3","optId","valueChanged","labelContent","labelChanged","componentWillLoad","aria-selected","aria-disabled","onMouseDown","option--selected","option--disabled","option--novalue","aria-hidden"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --padding-top: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-bottom: for all nested `nano-option` elements. Defaults to #{$spacing-small};\n  * @prop --padding-start: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --padding-end: for all nested `nano-option` elements. Defaults to #{$spacing-xlarge};\n  * @prop --font-size: for all nested `nano-option` elements. Defaults to .8em;\n  * @prop --color: default text color of content other than `nano-option`. Defaults to #{map.get($colors, palegrey)};\n  */\n\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --padding-start: #{$spacing-xlarge};\n  --padding-end: #{$spacing-xlarge};\n  --font-size: 0.8em;\n  --color: #{map.get($colors, palegrey)};\n\n  color: var(--color);\n}\n\n.dlist {\n  &--isfiltered {\n    ::slotted(*:not(nano-option):not([slot='no-result']):not([slot='list-top']):not([slot='list-bottom'])) {\n      display: none !important;\n    }\n  }\n\n  &__dropdown {\n    --min-width: 100%;\n    --overflow: auto;\n  }\n\n  &__status {\n    @include visually-hide();\n  }\n\n  &__menu {\n    --padding-top: inherit;\n    --padding-bottom: inherit;\n    --padding-start: inherit;\n    --padding-end: inherit;\n    --font-size: inherit;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Element,\n  State,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  writeTask,\n  Build,\n} from '@stencil/core';\nimport { debounce, raf } from '../../utils';\nimport type { Dropdown } from '../dropdown/dropdown';\nimport type { OptionInterface } from '../../interface';\n\nfunction findLabel(formCtrl: Element) {\n  let foundLabel: HTMLLabelElement;\n\n  if (formCtrl.id) {\n    foundLabel = document.querySelector(`label[for='${formCtrl.id}']`);\n  }\n  if (!foundLabel) {\n    foundLabel = formCtrl.closest('label');\n  }\n  return foundLabel;\n}\n\nlet listIds = 0;\n\n/**\n * `nano-datalist` a visually consistent and more flexible replacement for a native\n * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\n * or linked to any input control via the `input` prop. Is used internally within `nano-select`.\n * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop\n *\n * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop\n * @slot list-top - shows at the top of the list when there are options present\n * @slot list-bottom - shows at the bottom of the list when there are options present\n * @slot no-result - shown when there are no results otherwise nothing will be shown\n */\n@Component({\n  tag: 'nano-datalist',\n  styleUrl: 'datalist.scss',\n  shadow: true,\n})\nexport class DataList implements ComponentInterface {\n  // Private State\n\n  private isNanoInput = false;\n  private typeToSelect = '';\n  private typeToSelectTimeout: number;\n  private nanoDropdown: HTMLNanoDropdownElement;\n  private listBox: HTMLNanoMenuElement;\n  private mo?: MutationObserver;\n  private listId = `nano-datalist-${listIds++}`;\n  private isFiltered = false;\n  private shouldFocus = false;\n  // all potential option eles. Set via slot or `options` prop.\n  // Some may get hidden due to filtering\n  private get allOptEles() {\n    return this._allOptEles;\n  }\n  private set allOptEles(opts) {\n    // when allOptEles are initially set (on slot change / options) -\n    // add options to 'selected' and fire selected event *if*\n    // value isn't set on the input\n    this._allOptEles = opts;\n    if (this.connectedInput?.value) return;\n\n    opts.forEach((opt) => {\n      if (opt.selected && !this.selected.includes(opt.value)) {\n        this.changeInputValue(opt);\n      }\n    });\n  }\n  private _allOptEles: HTMLNanoOptionElement[] = [];\n\n  @Element() host: HTMLNanoDatalistElement;\n\n  // active option eles that are not hidden.\n  @State() actvOptEles: HTMLNanoOptionElement[] = [];\n  @State() connectedInput: HTMLInputElement | HTMLTextAreaElement;\n  @State() inputLabel: HTMLLabelElement;\n  @State() hasNoResult: boolean;\n  @State() shouldOpen: boolean;\n  @State() canOpen: boolean = true;\n  @State() optionIds: string[] = [];\n\n  constructor() {\n    this.inputChange = debounce(this.inputChange.bind(this), 50);\n  }\n\n  // Public API\n\n  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.\n   * However you can add other selected options via the the selected prop. */\n  @Prop({ mutable: true }) selected: string[] = [];\n\n  /** nano-dropdown config options you can pass to the nested dropdown component */\n  @Prop()\n  get dropDownConfig() {\n    return this._dropDownConfig;\n  }\n  set dropDownConfig(ddc: Partial<Dropdown>) {\n    this._dropDownConfig = { ...this._dropDownConfig, ...ddc };\n  }\n  private _dropDownConfig: Partial<Dropdown> = {\n    skidding: -1,\n  };\n\n  /** Provide an option list.\n   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */\n  @Prop() options?: OptionInterface[] = [];\n\n  /** A selector to a HTMLInputElement */\n  @Prop() input?: string | HTMLInputElement;\n\n  /** Tweaks the datalist behaviour and linked control semantics and behaviour.\n   * e.g. 'select' will make the linked input control `readonly`.\n   */\n  @Prop() type: 'select' | 'selctMulti' | 'input' = 'input';\n\n  /** return all the active options currently within the datalist. Can be useful for validation */\n  @Prop()\n  get activeOptions() {\n    return this.allOptEles;\n  }\n\n  /** Force datalist open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  @Watch('open')\n  openWatcher() {\n    writeTask(() => {\n      this.nanoDropdown.open = this.open;\n      this.connectedInput.setAttribute('aria-expanded', this.open.toString());\n    });\n  }\n\n  /** Use this option to disable to default filtering. This is useful if filtering happens\n   * externally via another method (e.g. via ajax)\n   */\n  @Prop() disableFilter = false;\n\n  /** Activate / deactivate the datalist control */\n  @Prop() disabled = false;\n\n  // State change watchers\n\n  @Watch('input')\n  async watchInputChange() {\n    let nanoInput;\n    if ((nanoInput = this.host.closest('nano-input'))) {\n      this.isNanoInput = true;\n      this.connectedInput = await nanoInput.getInputElement();\n    } else if (\n      this.input &&\n      typeof this.input === 'string' &&\n      (nanoInput = document.querySelector(this.input))\n    ) {\n      this.isNanoInput = false;\n      this.connectedInput = nanoInput;\n    } else if (this.input instanceof HTMLElement) {\n      this.connectedInput = this.input;\n    }\n  }\n\n  @Watch('options')\n  manageSlotChangeListener() {\n    if (!this.host) return;\n\n    // we're not using `options` - setup new MO\n    if ((!this.options || !this.options.length) && !this.mo) {\n      if (Build.isBrowser) {\n        const mo = (this.mo = new MutationObserver(() =>\n          this.processSlottedContent()\n        ));\n        mo.observe(this.host, { childList: true, subtree: true });\n      }\n      this.processSlottedContent();\n      return;\n    }\n\n    // we're using `options` - trash current MO\n    if (this.options?.length) {\n      if (!!this.mo) {\n        this.mo.disconnect();\n        this.mo = undefined;\n      }\n\n      // add imperative `options`\n      writeTask(() => {\n        this.allOptEles = this.options.flatMap((option, i) => {\n          if (option.value || option.label) {\n            const opt = Object.assign(document.createElement('nano-option'), {\n              label: option.label,\n              value: option.value,\n              ariaPosinset: i,\n              ariaSetsize: this.options.length,\n              selected: option.selected,\n              id: this.listId + '-option-' + i,\n              textContent: option.label ? option.label : option.value,\n              slot: 'internal-opts',\n            });\n            this.host.append(opt);\n            return opt;\n          }\n        });\n\n        if (this.connectedInput?.value.length && this.type !== 'select') {\n          this.inputChange();\n        } else this.actvOptEles = [...this.allOptEles];\n      });\n    }\n    // forceUpdate(this.host);\n  }\n\n  @Watch('type')\n  @Watch('connectedInput')\n  watchTypeChange() {\n    if (!this.connectedInput) return;\n\n    let dwConfig: Partial<Dropdown> = { closeOnSelect: false };\n    let autocompleteType: 'list' | 'both' = 'both';\n    let readonly = false;\n\n    switch (this.type) {\n      case 'selctMulti':\n        // dwConfig.closeOnSelect = false;\n        break;\n      case 'select':\n        autocompleteType = 'list';\n        readonly = true;\n        dwConfig = { closeOnSelect: true, placement: 'center' };\n        break;\n    }\n\n    if (!this.isNanoInput) {\n      dwConfig.tetherTo = this.connectedInput;\n    }\n\n    this.dropDownConfig = { ...this.dropDownConfig, ...dwConfig };\n    this.connectedInput.setAttribute('aria-autocomplete', autocompleteType);\n    this.connectedInput.readOnly = readonly;\n  }\n\n  @Watch('connectedInput')\n  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement) {\n    if (!!oldInput) {\n      const nanoInput = oldInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.removeEventListener('nanoChange', this.inputChange);\n      }\n      oldInput.removeEventListener('change', this.inputChange);\n      oldInput.removeEventListener('click', this.inputClick);\n      oldInput.removeEventListener('keydown', this.inputKeydown);\n      oldInput.removeEventListener('input', this.inputChange);\n\n      this.inputLabel = null;\n\n      writeTask(() => {\n        oldInput.removeAttribute('role');\n        oldInput.removeAttribute('aria-expanded');\n        oldInput.removeAttribute('aria-controls');\n        oldInput.removeAttribute('aria-owns');\n        oldInput.removeAttribute('aria-haspopup');\n        oldInput.removeAttribute('aria-autocomplete');\n        oldInput.removeAttribute('autocomplete');\n      });\n    }\n    if (!!newInput) {\n      const nanoInput = newInput.closest('nano-input');\n      if (nanoInput) {\n        nanoInput.addEventListener('nanoChange', this.inputChange);\n      }\n      newInput.addEventListener('change', this.inputChange);\n      newInput.addEventListener('click', this.inputClick);\n      newInput.addEventListener('keydown', this.inputKeydown);\n      newInput.addEventListener('input', this.inputChange);\n      this.listId = this.host.id || this.listId;\n\n      this.inputLabel = newInput?.labels?.item(0) || findLabel(newInput);\n\n      writeTask(() => {\n        this.host.id = this.listId;\n        newInput.setAttribute('role', 'combobox');\n        newInput.setAttribute('aria-expanded', 'false');\n        newInput.setAttribute('aria-controls', this.listId);\n        newInput.setAttribute('aria-owns', this.listId);\n        newInput.setAttribute('aria-haspopup', 'listbox');\n        newInput.setAttribute('autocomplete', 'off');\n      });\n    }\n  }\n\n  @Watch('selected')\n  @Watch('actvOptEles')\n  watchActvOptChange() {\n    let c = 0;\n    const val = this.connectedInput?.value || '';\n    const optIds = [];\n\n    writeTask(() => {\n      this.allOptEles.forEach((opt, i) => {\n        if (this.actvOptEles.includes(opt)) {\n          c++;\n          opt.setAttribute('aria-posinset', c + '');\n          opt.setAttribute('aria-setsize', this.actvOptEles.length + '');\n          opt.hidden = false;\n          this.isSelected(opt, val);\n        } else {\n          opt.removeAttribute('aria-posinset');\n          opt.removeAttribute('aria-setsize');\n          opt.hidden = true;\n          opt.selected = false;\n        }\n        opt.id = this.listId + '-option-' + i;\n        optIds.push(opt.id);\n      });\n      this.optionIds = optIds;\n    });\n  }\n\n  @Watch('actvOptEles')\n  @Watch('hasNoResult')\n  manageCanOpen() {\n    if (this.actvOptEles.length || this.hasNoResult) this.canOpen = true;\n    else this.canOpen = false;\n  }\n\n  /**\n   * Opens the dropdown if it can, it should and there are items to display.\n   */\n  @Watch('shouldOpen')\n  @Watch('canOpen')\n  manageDropdownDisplay() {\n    if (this.shouldOpen && this.canOpen && !this.disabled) this.open = true;\n    if (!this.shouldOpen || !this.canOpen) this.open = false;\n  }\n\n  @Watch('actvOptEles')\n  fireActiveOptsEvent() {\n    this.nanoOptionsUpdated.emit(this.actvOptEles);\n  }\n\n  // Events\n\n  /** Fired when an item is selected. */\n  @Event() nanoSelect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when a currently selected item is reselected. */\n  @Event() nanoDeselect: EventEmitter<HTMLNanoOptionElement>;\n\n  /** Fired when active options change */\n  @Event() nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;\n\n  // Private logic\n\n  private isSelected(opt: HTMLNanoOptionElement, val: string) {\n    if (val === opt.value || this.selected.includes(opt.value)) {\n      opt.selected = true;\n    } else opt.selected = false;\n  }\n\n  private get dropwdownOpen() {\n    if (!this.nanoDropdown || !this.open) return false;\n    return true;\n  }\n\n  private get exactMatch() {\n    return this.allOptEles.find(\n      (opt) => this.connectedInput.value === opt.value\n    );\n  }\n\n  /** reflect value back to the connected input unless the event is cancelled */\n  private changeInputValue(opt: HTMLNanoOptionElement) {\n    let nanoSelected;\n\n    if (this.selected.includes(opt.value)) {\n      // deselect option\n      this.selected = this.selected.filter((val) => val !== opt.value);\n      nanoSelected = this.nanoDeselect.emit(opt);\n    } else {\n      // select new option\n      this.selected = [...this.selected];\n      nanoSelected = this.nanoSelect.emit(opt);\n    }\n\n    if (!nanoSelected.defaultPrevented) {\n      if (this.connectedInput) this.connectedInput.value = opt.value;\n\n      const event = new window.Event('change');\n      this.connectedInput?.dispatchEvent(event);\n    }\n  }\n\n  // a new option has been picked\n  private optSelected = (e: CustomEvent<HTMLNanoOptionElement>) => {\n    e.stopPropagation();\n    this.changeInputValue(e.detail);\n    raf(() => this.inputChange());\n\n    if (this.type === 'select') this.shouldOpen = false;\n  };\n\n  // this is for type=\"select\" only.\n  // Filter options that start with text - aggregates letters (as opposed to getting the value from input)\n  private setOptStartsWith() {\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().substring(0, this.typeToSelect.length) ===\n      this.typeToSelect;\n\n    const foundEle = this.allOptEles.find(\n      (opt) =>\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n    );\n    if (foundEle) this.changeInputValue(foundEle);\n  }\n\n  // Event handlers\n\n  private processSlottedContent() {\n    raf(() => {\n      this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));\n      this.hasNoResult = !!this.host.querySelector('[slot=\"no-result\"]');\n\n      if (this.connectedInput?.value.length && this.type !== 'select') {\n        this.inputChange();\n      } else this.actvOptEles = this.allOptEles;\n    });\n  }\n\n  // sets focus immediately on open when 'select' - mirroring native behaviour\n  private handleShow = async () => {\n    if (this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    } else if (this.type === 'select') this.listBox.showActiveElement();\n  };\n\n  // any changes to the connected input value will filter the list of active options\n  private inputChange() {\n    if (this.disableFilter) {\n      this.actvOptEles = this.allOptEles;\n      return;\n    }\n\n    const val = this.connectedInput.value;\n    const valStr = val.trim().toLowerCase();\n\n    let exactMatch = false;\n    const activeEles = [];\n    const attrFind = (toFind: string) =>\n      toFind.toLowerCase().indexOf(valStr) > -1;\n\n    this.allOptEles.forEach((opt) => {\n      if (\n        (val === opt.value || val === opt.label) &&\n        this.type !== 'selctMulti'\n      ) {\n        opt.selected = true;\n        exactMatch = true;\n      } else this.isSelected(opt, val);\n    });\n\n    this.allOptEles.forEach((opt) => {\n      if (!valStr.length || exactMatch) {\n        activeEles.push(opt);\n      } else if (\n        opt.value.trim().length > 0 &&\n        !opt.disabled &&\n        (attrFind(opt.textContent) ||\n          attrFind(opt.value) ||\n          attrFind(opt.label) ||\n          attrFind(opt.filterMeta))\n      ) {\n        activeEles.push(opt);\n      }\n    });\n\n    this.isFiltered = valStr.length && !exactMatch;\n    this.actvOptEles = activeEles;\n  }\n\n  private inputClick = () => {\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n  };\n\n  private inputKeydown = (e: KeyboardEvent) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowRight',\n      'ArrowLeft',\n      'Escape',\n      'Enter',\n      'Tab',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Tab') this.shouldOpen = false;\n      return;\n    }\n\n    // When select, mirror native select behaviour. Search on closed list\n    if (\n      this.type === 'select' &&\n      !['ArrowDown', 'ArrowUp'].includes(e.key) &&\n      (e.key !== ' ' || this.typeToSelectTimeout)\n    ) {\n      if (e.key === ' ' || /^[a-z0-9]+$/i.test(e.key)) {\n        clearTimeout(this.typeToSelectTimeout);\n        this.typeToSelectTimeout = window.setTimeout(() => {\n          this.typeToSelect = '';\n          this.typeToSelectTimeout = 0;\n        }, 750);\n        this.typeToSelect += e.key;\n        this.setOptStartsWith();\n      }\n      return;\n    }\n\n    this.shouldOpen = true;\n    // open dropdown if possible\n    this.manageDropdownDisplay();\n    if (['ArrowDown', 'ArrowUp'].includes(e.key)) this.shouldFocus = true;\n  };\n\n  // handles key down on options. Either 'picks'\n  // an option or passes event back to input for search / filter\n  private optionKeyDown = (\n    e: KeyboardEvent & { target: HTMLNanoOptionElement }\n  ) => {\n    const ignoreKeys = [\n      'Shift',\n      'ArrowUp',\n      'ArrowDown',\n      'Escape',\n      'Enter',\n      'Tab',\n      'Space',\n      'PageUp',\n      'PageDown',\n      'Home',\n      'End',\n      ' ',\n    ];\n    if (ignoreKeys.includes(e.key)) {\n      if (e.key === 'Escape') this.connectedInput.focus();\n      return;\n    }\n\n    const deleteKeys = ['Delete', 'Backspace'];\n    // this passes whatever's typed back to our input control\n    if (\n      this.type !== 'select' &&\n      (!this.exactMatch || deleteKeys.includes(e.key))\n    ) {\n      this.connectedInput.focus();\n    }\n  };\n\n  // Component lifecycle\n\n  connectedCallback() {\n    this.watchInputChange();\n  }\n\n  componentDidLoad() {\n    this.manageSlotChangeListener();\n    this.openWatcher();\n  }\n\n  componentDidRender(): void {\n    setTimeout(() => {\n      if (!this.connectedInput)\n        console.warn(\n          'no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop',\n          this.host\n        );\n    }, 500);\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-owns={this.optionIds.join(' ')}\n        aria-label=\"Select options from the list below\"\n      >\n        <nano-dropdown\n          {...this.dropDownConfig}\n          ref={(el) => (this.nanoDropdown = el)}\n          dialogTitle=\"Select options from the list below\"\n          class={{\n            dlist__dropdown: true,\n            'dlist--isfiltered': this.isFiltered,\n          }}\n          onNanoAfterShow={this.handleShow}\n          onNanoAfterHide={(_) => (this.open = false)}\n        >\n          <nano-menu\n            hidden={!this.actvOptEles.length}\n            type=\"listbox\"\n            label={this.inputLabel ? this.inputLabel.textContent : undefined}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n            tabIndex={-1}\n            onNanoSelect={this.optSelected}\n            onKeyDown={this.optionKeyDown}\n            ref={(el) => (this.listBox = el)}\n          >\n            <slot name=\"list-top\" />\n            {!this.options.length && <slot />}\n            {!!this.options.length && <slot name=\"internal-opts\" />}\n            <slot name=\"list-bottom\" />\n          </nano-menu>\n          <nano-menu\n            type=\"listbox\"\n            label=\"No results found\"\n            hidden={!!this.actvOptEles.length}\n            class={{\n              dlist__menu: true,\n              'dlist__menu--open': this.dropwdownOpen,\n            }}\n          >\n            <slot name=\"no-result\" />\n          </nano-menu>\n          {!!this.actvOptEles && (\n            <div aria-live=\"polite\" role=\"status\" class=\"dlist__status\">\n              {this.actvOptEles.length} result\n              {this.actvOptEles.length > 1 ? 's' : ''} available.\n            </div>\n          )}\n        </nano-dropdown>\n      </Host>\n    );\n  }\n}\n","@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/layers';\n\n:host {\n  /**\n   * @prop --padding-start: padding at the start of nav-items (left r2l / right l2r). Defaults to '10px'\n   * @prop --padding-end: padding at the end of nav-items (right r2l / left l2r). Defaults to '10px'\n   * @prop --padding-top: padding at the top of nav-items. Defaults to '10px'\n   * @prop --padding-bottom: padding at the bottom of nav-items. Defaults to '10px'\n\n   * @prop --secondary-padding-top: padding at the top of nested nav-items. Defaults to 0\n   * @prop --secondary-padding-bottom: padding at the bottom of nested nav-items. Defaults to 0\n\n   * @prop --bg-color-hover: bg hover color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-focus: bg focus color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n   * @prop --bg-color-selected: bg selected color of nav-items. Defaults to #{map.get($colors, blue--faded)};\n\n   * @prop --color-hover: text hover color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-selected: text selected color of nav-items. Defaults to #{map.get($colors, blue)}\n   * @prop --color-focus: text focus color of nav-items. Defaults to #{map.get($colors, blue)}\n\n   * @prop --focus-outline: the focus style of nav-items. Defaults to 'none'\n   * @prop --font-size: default font-size for all items. Defaults .9em;\n  */\n\n  --padding-start: #{$spacing-medium};\n  --padding-end: #{$spacing-medium};\n  --padding-top: #{$spacing-small};\n  --padding-bottom: #{$spacing-small};\n  --secondary-padding-top: 0;\n  --secondary-padding-bottom: 0;\n  --bg-color-hover: #{map.get($colors, blue--faded)};\n  --bg-color-focus: #{map.get($colors, blue--faded)};\n  --bg-color-selected: #{map.get($colors, blue--faded)};\n  --color-hover: #{map.get($colors, blue)};\n  --color-selected: #{map.get($colors, blue)};\n  --color-focus: #{map.get($colors, blue)};\n  --focus-outline: none;\n  --font-size: 0.9em;\n\n  display: block;\n}\n\n.menu {\n  font-size: var(--font-size, 0.9em);\n  overscroll-behavior: none;\n  min-width: var(--width);\n  position: relative;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n::slotted(*:not(nano-nav-item):not(nano-option):not(hr):not(slot)) {\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  display: block;\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Method,\n  h,\n  Host,\n  Element,\n  Prop,\n  Listen,\n} from '@stencil/core';\nimport {\n  getTextContent,\n  getDirectChildren,\n  getActiveElement,\n} from '../../utils';\n\nconst CANSHADOW = !!document.head.attachShadow;\n\ntype ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;\ntype NNI = HTMLNanoNavItemElement;\n\n/**\n * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\n * Manages focus state / active.\n * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.\n */\n@Component({\n  tag: 'nano-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  private ignoreMouseEvents = false;\n  private ignoreMouseTimeout: any;\n  private menu: HTMLElement;\n  private typeToSelect = '';\n  private typeToSelectTimeout: any;\n\n  @Element() private el: HTMLNanoMenuElement;\n\n  // Public API\n\n  /** get the focus state of the menu @readonly */\n  @Prop()\n  get hasFocus() {\n    return this._hasFocus;\n  }\n  private _hasFocus = false;\n\n  /** changes the role of the underlying control - sometimes required for semantics */\n  @Prop() type: 'menu' | 'listbox' = 'menu';\n\n  /** an accessible label */\n  @Prop() label: string;\n\n  // Events\n\n  /** Emitted when the menu gains focus. */\n  @Event() nanoFocus: EventEmitter;\n\n  /** Emitted when the menu loses focus. */\n  @Event() nanoBlur: EventEmitter;\n\n  /** Emitted when a menu item is selected. */\n  @Event() nanoSelect: EventEmitter<\n    HTMLNanoOptionElement | HTMLNanoNavItemElement\n  >;\n\n  // Public Methods\n\n  /** Sets focus on the menu. */\n  @Method()\n  async setFocus() {\n    if (this.menu?.focus) this.menu.focus({ preventScroll: true });\n  }\n\n  /** Removes focus from the menu. */\n  @Method()\n  async removeFocus() {\n    if (this.menu?.blur) this.menu.blur();\n  }\n\n  /** Sets the current active item */\n  @Method()\n  async showActiveElement() {\n    if (this.selectedItem)\n      this.selectedItem.scrollIntoView({ block: 'nearest' });\n  }\n\n  /** Removes any active item's state */\n  @Method()\n  async resetActiveItem() {\n    this.getItems\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i) => i.setAttribute('tabindex', '-1'));\n  }\n\n  // Private methods\n\n  get getItems() {\n    let items: ValidElement[];\n    let opened = this.el.querySelectorAll('nano-nav-item.secondary-open');\n    if (opened.length) {\n      const ctx = opened[opened.length - 1] as HTMLNanoNavItemElement;\n      items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));\n    } else {\n      items = getDirectChildren(\n        this.el,\n        'nano-nav-item, nano-option',\n        'slot'\n      ) as ValidElement[];\n    }\n    return items.filter((el) => !el.disabled && !el.hidden);\n  }\n\n  get activeItem() {\n    const activeElement = getActiveElement();\n    return this.getItems.find(\n      (i) =>\n        i.getAttribute('tabindex') === '0' ||\n        i === activeElement ||\n        i.classList.contains('has-focus')\n    );\n  }\n\n  get selectedItem() {\n    return this.getItems.find((i) => i.selected);\n  }\n\n  private async setActiveFocusItem(item?: ValidElement, focus = true) {\n    const items = this.getItems;\n    let activeItem =\n      !item || item.disabled ? items.find((i) => i.selected) || items[0] : item;\n\n    items\n      .filter((i) => i.tagName.toLowerCase() === 'nano-option')\n      .map((i: HTMLNanoOptionElement) =>\n        i.setAttribute('tabindex', i === activeItem ? '0' : '-1')\n      );\n\n    if (!focus) return;\n\n    if (activeItem) {\n      (activeItem as NNI).setFocus\n        ? (activeItem as NNI).setFocus()\n        : activeItem.focus();\n    } else this.menu.focus();\n  }\n\n  // Event Handlers\n\n  @Listen('mousedown', { target: 'body' })\n  @Listen('keydown')\n  handleBlur(e: KeyboardEvent | MouseEvent) {\n    if (!this.hasFocus) return;\n\n    const kev = e as KeyboardEvent;\n    let found: boolean;\n\n    if (kev.key) {\n      if (kev.key !== 'Tab') return;\n      found =\n        getActiveElement() &&\n        getActiveElement().closest(this.el.tagName.toLowerCase()) === this.el;\n    } else found = !!e.composedPath().find((el) => el === this.el);\n\n    if (!found) {\n      this.resetActiveItem();\n      this._hasFocus = false;\n      this.nanoBlur.emit();\n    }\n  }\n\n  private handleFocus = () => {\n    this.setActiveFocusItem(this.selectedItem || this.getItems[0]);\n\n    this._hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nano-nav-item');\n\n    if (item && !item.disabled) {\n      this.nanoSelect.emit(item);\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // When keying through the menu, if the mouse happens to be hovering over a menu item and the menu scrolls, the\n    // mouseout/mouseover event will fire causing the selection to be different than what the user expects. This gives\n    // us a way to temporarily ignore mouse events while the user is interacting with a keyboard.\n    clearTimeout(this.ignoreMouseTimeout);\n    this.ignoreMouseTimeout = setTimeout(\n      () => (this.ignoreMouseEvents = false),\n      500\n    );\n    this.ignoreMouseEvents = true;\n\n    // Make a selection when pressing enter\n    switch (event.key) {\n      case ' ':\n        if (this.activeItem) this.activeItem.click();\n        break;\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'PageDown':\n      case 'PageUp':\n      case 'Home':\n      case 'End':\n        const items = this.getItems;\n        const selectedItem = this.activeItem;\n        let index = items.indexOf(selectedItem);\n\n        if (items.length) {\n          event.preventDefault();\n\n          if (event.key === 'ArrowDown') {\n            index++;\n          } else if (event.key === 'ArrowUp') {\n            index--;\n          } else if (event.key === 'Home' || event.key === 'PageUp') {\n            index = 0;\n          } else if (event.key === 'End' || event.key === 'PageDown') {\n            index = items.length - 1;\n          }\n\n          if (index < 0) index = items.length - 1;\n          if (index > items.length - 1) index = 0;\n\n          this.setActiveFocusItem(items[index]);\n          if (items[index]) items[index].scrollIntoView({ block: 'nearest' });\n          return;\n        }\n        break;\n    }\n\n    // Handle type-to-search behavior when non-control characters are entered\n    if (event.key === ' ' || /^[a-z0-9]+$/i.test(event.key)) {\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = setTimeout(\n        () => (this.typeToSelect = ''),\n        750\n      );\n      this.typeToSelect += event.key;\n\n      const items = this.getItems;\n      for (const item of items) {\n        const slot = item.shadowRoot.querySelector(\n          'slot:not([name])'\n        ) as HTMLSlotElement;\n        const label = getTextContent(slot).toLowerCase().trim();\n        if (\n          label.substring(0, this.typeToSelect.length) === this.typeToSelect\n        ) {\n          this.setActiveFocusItem(item);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleMouseOver = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    const item =\n      target.closest('nano-nav-item') || target.closest('nano-option');\n\n    if (item && !this.ignoreMouseEvents) {\n      this.setActiveFocusItem(item);\n    }\n  };\n\n  // Component Lifecycle\n\n  render() {\n    return (\n      <Host\n        class={{\n          legacy: !CANSHADOW,\n        }}\n      >\n        <div\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseOver={this.handleMouseOver}\n          onFocus={this.handleFocus}\n          aria-label={this.label ? this.label : undefined}\n          role={this.type}\n          ref={(el) => (this.menu = el)}\n          part=\"base\"\n          class={{\n            menu: true,\n            ['menu--' + this.type]: true,\n            'menu--has-focus': this.hasFocus,\n          }}\n          tabIndex={-1}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n","@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 --padding-top: Defaults to #{$spacing-small};\n   * @prop --padding-bottom: Defaults to #{$spacing-small};\n   * @prop --padding-start: Defaults to #{$spacing-small};\n   * @prop --padding-end: Defaults to #{$spacing-small};\n\n   * @prop --bg: default background. Defaults to none;\n   * @prop --bg-selected: background when selected. Defaults to #{$select-opt-selected};\n   * @prop --bg-focus: background when focused. Defaults to var(--nano-color-base, #{nano-color(primary, tint)});\n   * @prop --bg-disabled: background when disabled. Defaults to none;\n\n   * @prop --color: default text color. Defaults to var(--input-text-color, #{$input-text-color});\n   * @prop --color-selected: text color when selected. Defaults to var(--nano-color-base, #{nano-color(primary, base)});\n   * @prop --color-focus: text color when focused. Defaults to var(--nano-color-base, #{nano-color(primary, contrast)});\n   * @prop --color-disabled: text color when disabled. Defaults to #{map.get($colors, palegrey)};\n\n    * @prop --opt-icon-size: Sizes all icons within the option. Defaults to 1.4em;\n  */\n\n  --bg: none;\n  --bg-selected: #{$select-opt-selected};\n  --bg-focus: var(--nano-color-base, #{nano-color(primary, tint)});\n  --bg-disabled: none;\n  --color: var(--input-text-color, #{$input-text-color});\n  --color-selected: var(--nano-color-base, #{nano-color(primary, base)});\n  --color-focus: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --color-disabled: #{map.get($colors, palegrey)};\n  --opt-icon-size: 1.6em;\n\n  display: block;\n  color: var(--color);\n  overflow: hidden;\n  font-size: 14px;\n  font-size: #{'clamp(12px, .9em, 16px)'};\n}\n\n:host(:focus) {\n  outline: none;\n}\n\n.option {\n  $self: &;\n\n  position: relative;\n  user-select: none;\n  cursor: pointer;\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  background: var(--bg);\n\n  @include padding(\n    var(--padding-top),\n    var(--padding-end),\n    var(--padding-bottom),\n    var(--padding-start)\n  );\n\n  // focus\n  :host(:focus) &:not(.option--disabled),\n  :host &.option--selected {\n    outline: none;\n    background: var(--bg-selected);\n    color: var(--color-selected);\n  }\n\n  :host(:focus) &:not(.option--disabled) {\n    background: var(--bg-focus);\n    color: var(--color-focus);\n  }\n\n  // disabled\n  &.option--disabled {\n    outline: none;\n    color: var(--color-disabled);\n    cursor: not-allowed;\n    background: var(--bg-disabled);\n  }\n\n  // no value\n  &.option--novalue {\n    font-style: italic;\n    opacity: 0.7;\n  }\n\n  &__label {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  &__start {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:last-child) {\n      @include margin(null, 0.5em, null, null);\n    }\n  }\n\n  &__end {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(nano-icon) {\n      font-size: var(--opt-icon-size);\n    }\n\n    ::slotted(:first-child) {\n      @include margin(null, null, null, 0.5em);\n    }\n  }\n\n  &__check {\n    visibility: hidden;\n    display: flex;\n    position: absolute;\n    left: 0.6em;\n    top: calc(50% - 0.6em);\n    align-items: center;\n    font-size: 0.9em;\n\n    #{$self}--selected:not(#{$self}--novalue) & {\n      visibility: visible;\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  h,\n  Host,\n  State,\n  Watch,\n  Element,\n  Listen,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\nimport { OptionInterface } from '../../interface';\nimport { debounce, getDirectChildren } from '../../utils';\n\nlet optIds = 0;\n\n/**\n * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)\n *\n * @slot - main label. Defaults to `label` or `value` prop\n * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check\n * @slot start - suitable for an icon or content displayed at the start of the main label\n * @slot end - suitable for an icon or content displayed at the end of the main label\n */\n@Component({\n  tag: 'nano-option',\n  styleUrl: 'option.scss',\n  shadow: true,\n})\nexport class Option implements OptionInterface {\n  private optId = `nano-option-${optIds++}`;\n  @Element() host: HTMLNanoOptionElement;\n  @State() hasFocus = false;\n\n  constructor() {\n    this.handleClick = debounce(this.handleClick.bind(this), 5);\n  }\n\n  // Public API\n\n  /**\n   * Value of the option\n   */\n  @Prop({ mutable: true, reflect: true }) value: string = '';\n\n  @Watch('value')\n  valueChanged() {\n    if (!this.value || !this.value.length) this.value = this.labelContent;\n  }\n\n  /**\n   * Label of the option\n   */\n  @Prop({ mutable: true, reflect: true }) label: string = '';\n\n  @Watch('label')\n  labelChanged() {\n    if (!this.label || !this.label.length)\n      this.label = this.labelContent.length ? this.labelContent : this.value;\n  }\n\n  /**\n   * Whether this option is selected\n   */\n  @Prop({ reflect: true }) selected: boolean = false;\n\n  /**\n   * Whether this option should be disabled\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** You can add extra meta for this option. When displayed in a list, users\n   * search / filter via extra related terms. Another usecase is 'endonyms'\n   */\n  @Prop() filterMeta: string = '';\n\n  /** Fired when an option is selected */\n  @Event() nanoSelect!: EventEmitter<HTMLNanoOptionElement>;\n\n  // Event handlers\n\n  // stop scrolling on select\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (e.key !== ' ' && e.key !== 'Enter') return;\n    e.preventDefault();\n    this.nanoSelect.emit(this.host);\n  }\n\n  private handleClick() {\n    if (this.disabled) return;\n    this.nanoSelect.emit(this.host);\n  }\n\n  // Private logic\n\n  private get labelContent() {\n    return getDirectChildren(this.host, '*:not([slot])', false)\n      .map((el) => el.textContent)\n      .join(' ')\n      .trim();\n  }\n\n  // Component lifecycle\n\n  componentWillLoad() {\n    this.valueChanged();\n    this.labelChanged();\n  }\n\n  render() {\n    return (\n      <Host\n        role=\"option\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <div\n          onMouseDown={this.handleClick}\n          id={this.optId}\n          class={{\n            option: true,\n            'option--selected': this.selected,\n            'option--disabled': this.disabled,\n            'option--novalue': !this.value,\n          }}\n        >\n          <div part=\"check-icon\" class=\"option__check\">\n            <slot name=\"check-icon\">\n              <nano-icon name=\"light/check\" aria-hidden=\"true\" />\n            </slot>\n          </div>\n          <div part=\"start\" class=\"option__start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <div part=\"label\" class=\"option__label\">\n            <slot>{this.label || this.value}</slot>\n          </div>\n          <div part=\"end\" class=\"option__end\">\n            <slot name=\"end\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-3aa1d07d.entry.js

@@ -1,5 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-import{r as t,c as i,h as s,e,g as h}from"./p-ab5813a7.js";import{i as n}from"./p-debd9efc.js";import{r as o,h as r,b as a}from"./p-289aa03f.js";import{a as c}from"./p-b619500f.js";import{d as l}from"./p-1da5f8df.js";const f=':host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden]{display:none !important}:host{--stuck-left:initial;--stuck-right:initial;--stuck-z-index:var(--nano-layer-index-menubar, 10);--top-hide:translateY(-110%);--bottom-hide:translateY(110%);display:block;max-width:100%}:host([sticky]){position:-webkit-sticky;position:sticky;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;will-change:min-height}:host([sticky][stuck]){left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index) !important}:host([sticky][hide][placed-top]){-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([sticky][hide][placed-bottom]){-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}:host([sticky][index="1"]){z-index:calc(var(--stuck-z-index) + 1)}:host([sticky][index="2"]){z-index:calc(var(--stuck-z-index) + 2)}:host([sticky][index="3"]){z-index:calc(var(--stuck-z-index) + 3)}:host([sticky][index="4"]){z-index:calc(var(--stuck-z-index) + 4)}:host([sticky][index="5"]){z-index:calc(var(--stuck-z-index) + 5)}.sticker{display:inherit;max-width:inherit;width:100%}.sticker:not(.stuck){width:auto !important}.sticker.sticky{-webkit-transition:0.3s ease all;transition:0.3s ease all;position:relative}:host([index="1"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 1)}:host([index="2"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 2)}:host([index="3"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 3)}:host([index="4"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 4)}:host([index="5"]) .sticker.sticky{z-index:calc(var(--stuck-z-index) + 5)}.sticker.stuck{position:fixed;left:var(--stuck-left);right:var(--stuck-right);z-index:var(--stuck-z-index);-webkit-transform:translateY(0);transform:translateY(0)}:host([placed-top]) .sticker.stuck{top:0}:host([placed-bottom]) .sticker.stuck{bottom:0}:host([placed-top]) .sticker.stuck.hide{-webkit-transform:var(--top-hide);transform:var(--top-hide)}:host([placed-bottom]) .sticker.stuck.hide{-webkit-transform:var(--bottom-hide);transform:var(--bottom-hide)}.sticker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}';function d(t){return t instanceof Document?window.pageYOffset:t.scrollTop}function u(t,i){let s=i instanceof Document?document.documentElement:i;return c(t,s)}let k=class{constructor(s){t(this,s);this.nanoStuck=i(this,"nanoStuck",7);this.nanoUnstuck=i(this,"nanoUnstuck",7);this.nanoHide=i(this,"nanoHide",7);this.nanoShow=i(this,"nanoShow",7);this.isRtl=false;this.scrollPosCache=0;this.scrollPosThresholdCache=0;this.cacheOffset=0;this.pauseResizeWatcher=false;this.listenForScrollParent=false;this.positions=[];this.pauseHide=false;this.hasBootstrapped=false;this.isStuck=false;this.isRootSticker=true;this.hide=false;this.scrollHide=false;this.multiStickerHide=false;this.scrollingTo=false;this.quietModeIsOn=false;this.stuckCounter=0;this.stickerIndex=0;this._offset=0;this.autoResize=true;this.isSticky=true;this.offset=0;this.position="top";this.quietMode={h:600,w:600};this.hideOnNewStickers=true;this.breakPointMax=null;this.breakPointMin=null;this.setupParentResizeListener=()=>{if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.parentSizeObserver=new n((t=>{for(const i of t){let t,s;if(i.contentRect.height)t=i.contentRect.height;if(i.contentRect.width)s=i.contentRect.width;if(typeof this.quietMode==="object"){if(s<this.quietMode.w||t<this.quietMode.h)this.quietModeIsOn=true;else this.quietModeIsOn=false}if(this.breakPointMin){if(s>this.breakPointMin)this.isSticky=true;else this.isSticky=false}if(this.breakPointMax){if(s<this.breakPointMax)this.isSticky=true;else this.isSticky=false}if(this.isRootSticker&&this.sticker&&this.autoResize)this.sticker.style.width=this.host.scrollWidth+"px"}}));let t=this.scrollParent instanceof Document?this.scrollParent.documentElement:this.scrollParent;if(t)this.parentSizeObserver.observe(t)};this.onStickToDisplayEvent=t=>{if(t.detail.sticker!==this.stickToEle)return;switch(t.type){case"nanoHide":this._offset=0;this.cacheOffset=this.offset;this.offset=0;if(!this.isStuck)this.moveTrigger(false);if(!this.isRootSticker&&this.quietModeIsOn){o((()=>{this.stickToEle.style.minHeight=this.stickToEleInitSize.height+(this.host.scrollHeight+(typeof this.cacheOffset==="object"?this.cacheOffset.v:this.cacheOffset))+"px";this.stickToEle.setTriggerPos(this.stickToEleInitSize.height*-1)}))}break;case"nanoShow":this._offset=this.stickToEleInitSize.height;this.offset=this.cacheOffset;this.moveTrigger(true);if(!this.isRootSticker&&this.quietModeIsOn){o((()=>{this.stickToEle.style.minHeight="";this.stickToEle.setTriggerPos(0)}))}break;case"nanoStuck":this.stickToEleInitSize=this.stickToEle.getBoundingClientRect();this._offset=this.stickToEleInitSize.height;break}};this.onStickEvent=async t=>{let i=t.detail?t.detail.sticker:null;if(!i||i.position!==this.position)return;const s=await i.getTriggerPos();if(t.type==="nanoStuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex++;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.multiStickerHide=true;this.stuckCounter++}}if(t.type==="nanoUnstuck"&&i!==this.host&&i.scrollParent===this.host.scrollParent){this.stickerIndex--;if(!this.hideOnNewStickers)return;if(this.positions.includes("top")&&this.triggerPos.top<s.top||this.positions.includes("bottom")&&this.triggerPos.top>s.top){this.stuckCounter--;if(this.stuckCounter<1)this.multiStickerHide=false}}};this.onScroll=()=>{let t=d(this.scrollParent);if(t<this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollTo();else this.handleScrollAway(t)}if(t>this.scrollPosCache){if(!this.positions.includes("bottom"))this.handleScrollAway(t);else this.handleScrollTo()}this.scrollPosCache=t}}async isHiding(){return this.hide}async isSticking(){this.shouldStick();return this.isStuck}async setTriggerPos(t){return this._offset=t}async getTriggerPos(){return this.triggerPos}async pauseHiding(t){return this.pauseHide=t}updateTriggerOffset(){if(!this.trigger||!this.scrollParent||!this.listenForScrollParent)return;this.triggerPos=u(this.trigger,this.scrollParent)}stickerResizeListener(){if(this.contentSizeObserver){this.contentSizeObserver.disconnect();this.contentSizeObserver=undefined}this.contentSizeObserver=new n((t=>{for(const i of t){if(this.pauseResizeWatcher)return;if(i.contentRect.height){if(this.position==="top")this.host.style.height=i.contentRect.height+"px";if(this.position==="bottom")this.host.style.minHeight=i.contentRect.height+"px"}}}));this.contentSizeObserver.observe(this.content)}quietModeChange(){if(this.quietMode==="on")o((()=>this.quietModeIsOn=true));else if(this.quietMode==="off")o((()=>this.quietModeIsOn=false))}setOffset(){this.trigger.setAttribute("style","");let t,i,s,e;let h=this.isRootSticker||this.stickToEle?this.sticker:this.host;if(!h)return;if(typeof this.offset==="object")({v:t,h:i}=this.offset);else t=i=this.offset;if(typeof this._offset==="object")({v:t=s,h:i=e}=this._offset);else s=e=this._offset;const n=s=>{let e=s.match(/(top|bottom)/)?t:i;o(s);h.style[s]=e+"px";if(!a())return;if(e)this.host.style.setProperty("--hide-transform-amount",`(110% + ${e}px)`);else this.host.style.setProperty("--hide-transform-amount",null)};const o=h=>{let n=h.match(/(top|bottom)/)?t+s:i+e;this.trigger.style[h]=n*-1+"px";this.trigger.style.position="relative";this.trigger.style.height="1px"};if(this.positions.includes("start")&&this.isRtl||this.positions.includes("end")&&!this.isRtl)n("right");if(this.positions.includes("end")&&this.isRtl||this.positions.includes("start")&&!this.isRtl)n("left");if(this.positions.includes("top"))n("top");if(this.positions.includes("bottom"))n("bottom")}positionChange(){this.positions=this.position.split("-");this.setOffset()}async stuckChange(){if(this.isStuck){if(this.stickToEle){let t=r(this.host)?this.host.children:this.content.children;this.slottedContent=Array.from(t);this.slottedContent.forEach((t=>{if(r(this.host))this.stickToEle.appendChild(t);else this.stickToEle.querySelector(".sticker-content").appendChild(t);t.style.order=this.stickerIndex+""}));this.nanoStuck.emit({sticker:this.stickToEle})}else this.nanoStuck.emit({sticker:this.host})}else{this.scrollHide=false;if(this.stickToEle){this.slottedContent.forEach((t=>{this.host.appendChild(t);t.style.order=""}));this.nanoUnstuck.emit({sticker:this.stickToEle})}else this.nanoUnstuck.emit({sticker:this.host})}}attachScrollListeners(){if(this.quietModeIsOn)this.scrollParent.addEventListener("scroll",this.onScroll,{passive:true,capture:false});else{this.scrollParent.removeEventListener("scroll",this.onScroll);this.moveTrigger(true)}}handleParentEvents(t,i=null){if(!this.listenForScrollParent)return;if(i)this.manageListenersOnParent(false,i);if(this.scrollParent)this.manageListenersOnParent(!this.stickToEle)}stickToEleChange(t,i){if(this.stickToEle){this.stickToEle.addEventListener("nanoHide",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoShow",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoStuck",this.onStickToDisplayEvent);this.stickToEle.addEventListener("nanoUnstuck",this.onStickToDisplayEvent)}if(i){i.removeEventListener("nanoHide",this.onStickToDisplayEvent);i.removeEventListener("nanoShow",this.onStickToDisplayEvent);i.removeEventListener("nanoStuck",this.onStickToDisplayEvent);i.removeEventListener("nanoUnstuck",this.onStickToDisplayEvent)}}stickToChange(){if(this.stickTo)this.stickToEle=this.scrollParent.querySelector(this.stickTo);else this.stickToEle=undefined}visibilityDecisionHandler(){if(this.multiStickerHide||this.scrollHide)this.hide=true;else this.hide=false}handleHideChange(){if(this.hide)this.nanoHide.emit({sticker:this.host});else this.nanoShow.emit({sticker:this.host})}setupIO(){if(this.io){this.io.disconnect();this.io=undefined}if(!this.scrollParent||!this.hasBootstrapped||!this.trigger)return;this.isRootSticker=this.scrollParent instanceof Document;let t=this.scrollParent;if(this.scrollParent instanceof Document)t=null;this.io=new window.IntersectionObserver((t=>{if(this.pauseResizeWatcher||!this.isSticky)return;this.shouldStick(t.slice(-1)[0])}),{root:t});this.io.observe(this.trigger)}manageListenersOnParent(t,i){let s=i||this.scrollParent;if(!s)return;if(!t){try{if(this.quietModeIsOn)s.removeEventListener("scroll",this.onScroll);s.removeEventListener("nanoStuck",this.onStickEvent);s.removeEventListener("nanoUnstuck",this.onStickEvent)}catch(e){console.error("Events haven`t been added")}}else{s.addEventListener("nanoStuck",this.onStickEvent);s.addEventListener("nanoUnstuck",this.onStickEvent);if(this.quietModeIsOn)this.attachScrollListeners()}this.setupParentResizeListener()}handleScrollTo(){this.scrollPosThresholdCache=null;if(!this.scrollHide)return;if(this.scrollingTo!==true){this._offset=this.cacheOffset||this._offset}this.scrollingTo=true;this.scrollHide=false}handleScrollAway(t){if(this.scrollHide)return;if(!this.isStuck)return;if(this.scrollingTo!==false){this.cacheOffset=this._offset;this._offset=0}this.scrollingTo=false;if(!this.scrollPosThresholdCache)this.scrollPosThresholdCache=t;else if(!this.pauseHide&&Math.abs(t-this.scrollPosThresholdCache)>100)this.scrollHide=true}moveTrigger(t){if(this.positions.includes("bottom")&&!t||!this.positions.includes("bottom")&&t){this.host.parentNode.insertBefore(this.trigger,this.host)}else this.host.parentNode.insertBefore(this.trigger,this.host.nextSibling)}getScrollParent(){const t=/(auto|scroll)/;const i=(t,s)=>{if(t.parentNode===null){return s}return i(t.parentNode,s.concat([t]))};const s=(t,i)=>getComputedStyle(t,null).getPropertyValue(i);const e=t=>s(t,"overflow")+s(t,"overflow-y")+s(t,"overflow-x");const h=i=>t.test(e(i));const n=document.documentElement.getBoundingClientRect().height;const o=t=>{if(!(t instanceof HTMLElement))return;const s=i(t,[]);return s.find((t=>h(t)&&t.getBoundingClientRect().height!==n))||document};return o(this.host)}shouldStick(t){let i;if(this.positions.includes("top")){if(!this.isRootSticker)i=u(this.trigger,this.scrollParent).top;else i=this.trigger.getBoundingClientRect().top;this.isStuck=i<-1}else if(this.positions.includes("bottom")){i=this.trigger.getBoundingClientRect().top;const s=t&&t.rootBounds?t.rootBounds:(this.scrollParent instanceof Document?document.documentElement:this.scrollParent).getBoundingClientRect();this.isStuck=i>s.height+s.top}}bootstrapGurantor(){this.hasBootstrapped=true;this.scrollParent=this.scrollParent||this.getScrollParent();this.isRootSticker=this.scrollParent instanceof Document;this.trigger=this.trigger||document.createElement("div");this.trigger.classList.add("sticker-trigger");this.positionChange();this.moveTrigger(true);this.quietModeChange();this.listenForScrollParent=true;this.handleParentEvents(true);this.stickerIndex=Array.from(this.scrollParent.querySelectorAll("nano-sticker")).filter((t=>t.position===this.position)).findIndex((t=>t===this.host));this.setOffset();this.stickerResizeListener();this.setupParentResizeListener();this.slottedContent=Array.from(this.host.children);this.slottedContent.forEach((t=>{t.style.order=this.stickerIndex+""}));this.updateTriggerOffset();this.stickToChange();this.setupIO();this.onStickToDisplayEvent=l(this.onStickToDisplayEvent,50)}connectedCallback(){this.isRtl=this.host.dir==="rtl"||this.host.ownerDocument.dir==="rtl";document.documentElement.addEventListener("nanoComponentsReady",(()=>{setTimeout((t=>this.bootstrapGurantor()),200)}));setTimeout((t=>{if(!this.hasBootstrapped)this.bootstrapGurantor()}),1e3)}disconnectedCallback(){if(this.io){this.io.disconnect();this.io=undefined}if(this.parentSizeObserver){this.parentSizeObserver.disconnect();this.parentSizeObserver=undefined}this.quietMode="off";this.scrollParent=null}render(){return s(e,{sticky:!this.isRootSticker&&!this.stickToEle&&this.isSticky,hide:this.hide&&this.isStuck,siblings:this.stuckCounter,index:this.stickerIndex,stuck:this.isStuck&&this.isSticky,"placed-bottom":this.positions.includes("bottom"),"placed-top":this.positions.includes("top"),"placed-end":this.positions.includes("end"),"placed-start":this.positions.includes("start")},s("div",{class:{sticker:true,sticky:this.isRootSticker&&this.isSticky,stuck:this.isStuck&&this.isRootSticker&&this.isSticky,hide:this.isRootSticker&&this.hide&&this.isStuck},ref:t=>this.sticker=t},s("div",{class:"sticker-content",ref:t=>this.content=t},s("slot",null))))}get host(){return h(this)}static get watchers(){return{trigger:["updateTriggerOffset"],scrollParent:["updateTriggerOffset","handleParentEvents","setupIO"],position:["stickerResizeListener","positionChange"],quietMode:["quietModeChange"],offset:["setOffset"],_offset:["setOffset"],isStuck:["stuckChange"],quietModeIsOn:["attachScrollListeners"],stickToEle:["handleParentEvents","stickToEleChange"],stickTo:["stickToChange"],multiStickerHide:["visibilityDecisionHandler"],scrollHide:["visibilityDecisionHandler"],hide:["handleHideChange"]}}};k.style=f;export{k as nano_sticker};
-//# sourceMappingURL=p-3aa1d07d.entry.js.map

package/dist/nano-components/p-3aa1d07d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/sticky/sticker.scss?tag=nano-sticker&encapsulation=shadow","src/components/sticky/sticker.tsx"],"names":["stickerCss","_getScrollTop","ele","Document","window","pageYOffset","scrollTop","_getOffset","parent","parentEle","document","documentElement","getOffset","Sticker","[object Object]","hostRef","this","isRtl","scrollPosCache","scrollPosThresholdCache","cacheOffset","pauseResizeWatcher","listenForScrollParent","positions","pauseHide","hasBootstrapped","isStuck","isRootSticker","hide","scrollHide","multiStickerHide","scrollingTo","quietModeIsOn","stuckCounter","stickerIndex","_offset","autoResize","isSticky","offset","position","quietMode","h","w","hideOnNewStickers","breakPointMax","breakPointMin","setupParentResizeListener","parentSizeObserver","disconnect","undefined","ResizeObserver","entries","entry","height","width","contentRect","sticker","style","host","scrollWidth","toWatch","scrollParent","observe","onStickToDisplayEvent","e","detail","stickToEle","type","moveTrigger","raf","minHeight","stickToEleInitSize","scrollHeight","v","setTriggerPos","getBoundingClientRect","onStickEvent","async","incomingTriggerPos","getTriggerPos","includes","triggerPos","top","onScroll","y","handleScrollTo","handleScrollAway","shouldStick","pause","trigger","contentSizeObserver","content","setAttribute","_v","_h","setPos","pos","u","match","setTriggetPos","browserCanUseCssVariables","setProperty","split","setOffset","hasShadowDom","children","slottedContent","Array","from","forEach","child","appendChild","querySelector","order","nanoStuck","emit","nanoUnstuck","addEventListener","passive","capture","removeEventListener","_","oldParent","manageListenersOnParent","oldEle","stickTo","nanoHide","nanoShow","io","root","IntersectionObserver","slice","addEvents","console","error","attachScrollListeners","currScroll","Math","abs","toInitial","parentNode","insertBefore","nextSibling","regex","parents","_node","ps","concat","prop","getComputedStyle","getPropertyValue","overflow","scroll","test","docHeight","HTMLElement","find","data","scrollAmt","parentBounding","rootBounds","getScrollParent","createElement","classList","add","positionChange","quietModeChange","handleParentEvents","querySelectorAll","filter","findIndex","stickerResizeListener","updateTriggerOffset","stickToChange","setupIO","debounce","dir","ownerDocument","setTimeout","bootstrapGurantor","Host","sticky","siblings","index","stuck","placed-bottom","placed-top","placed-end","placed-start","class","ref","div"],"mappings":"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","sourcesContent":["@import '../../global/style/nano-theme/layers';\n\n:host {\n  /**\n  * @prop --stuck-left: The left position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-right: The right position when your sticker is stuck. This can be useful to force your sticker to fill the viewport for example. Defaults to initial\n  * @prop --stuck-z-index: The z-index order to display your sticker. Can be useful when displaying multiple stickers simultaneously. Defaults to #{$layer-index-menubar};\n  @prop --top-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(-110%);\n  @prop --bottom-hide: This is used for the hide transform animation (e.g. when quiet-mode is on). Defaults to translateY(110%);\n  */\n\n  --stuck-left: initial;\n  --stuck-right: initial;\n  --stuck-z-index: #{$layer-index-menubar};\n  --top-hide: translateY(-110%);\n  --bottom-hide: translateY(110%);\n\n  display: block;\n  max-width: 100%;\n}\n\n:host([sticky]) {\n  position: sticky;\n  transition: 0.3s ease transform;\n  will-change: min-height;\n}\n\n:host([sticky][stuck]) {\n  left: var(--stuck-left);\n  right: var(--stuck-right);\n  z-index: var(--stuck-z-index) !important;\n}\n\n:host([sticky][hide][placed-top]) {\n  transform: var(--top-hide);\n}\n\n:host([sticky][hide][placed-bottom]) {\n  transform: var(--bottom-hide);\n}\n\n:host([sticky][index='1']) {\n  z-index: calc(var(--stuck-z-index) + 1);\n}\n\n:host([sticky][index='2']) {\n  z-index: calc(var(--stuck-z-index) + 2);\n}\n\n:host([sticky][index='3']) {\n  z-index: calc(var(--stuck-z-index) + 3);\n}\n\n:host([sticky][index='4']) {\n  z-index: calc(var(--stuck-z-index) + 4);\n}\n\n:host([sticky][index='5']) {\n  z-index: calc(var(--stuck-z-index) + 5);\n}\n\n.sticker {\n  display: inherit;\n  max-width: inherit;\n  width: 100%;\n\n  &:not(.stuck) {\n    width: auto !important;\n  }\n\n  &.sticky {\n    transition: 0.3s ease all;\n    position: relative;\n\n    :host([index='1']) & {\n      z-index: calc(var(--stuck-z-index) + 1);\n    }\n\n    :host([index='2']) & {\n      z-index: calc(var(--stuck-z-index) + 2);\n    }\n\n    :host([index='3']) & {\n      z-index: calc(var(--stuck-z-index) + 3);\n    }\n\n    :host([index='4']) & {\n      z-index: calc(var(--stuck-z-index) + 4);\n    }\n\n    :host([index='5']) & {\n      z-index: calc(var(--stuck-z-index) + 5);\n    }\n  }\n\n  &.stuck {\n    position: fixed;\n    left: var(--stuck-left);\n    right: var(--stuck-right);\n    z-index: var(--stuck-z-index);\n    transform: translateY(0);\n\n    :host([placed-top]) & {\n      top: 0;\n    }\n\n    :host([placed-bottom]) & {\n      bottom: 0;\n    }\n\n    &.hide {\n      :host([placed-top]) & {\n        transform: var(--top-hide);\n      }\n\n      :host([placed-bottom]) & {\n        transform: var(--bottom-hide);\n      }\n    }\n  }\n}\n\n.sticker-content {\n  display: flex;\n  flex-wrap: wrap;\n}\n","import {\n  Component,\n  ComponentInterface,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport {\n  browserCanUseCssVariables,\n  debounce,\n  getOffset,\n  hasShadowDom,\n  raf,\n} from '../../utils';\n\nfunction _getScrollTop(ele: HTMLElement | Document) {\n  return ele instanceof Document ? window.pageYOffset : ele.scrollTop;\n}\n\nfunction _getOffset(ele: HTMLElement, parent: HTMLElement | Document) {\n  let parentEle =\n    parent instanceof Document ? document.documentElement : parent;\n  return getOffset(ele, parentEle);\n}\n\ntype Positions = 'top' | 'bottom' | 'start' | 'end';\n\n/**\n * The Sticker component is a toolbox for 'sticking' items to scrolling containers.\n *\n */\n@Component({\n  tag: 'nano-sticker',\n  styleUrl: 'sticker.scss',\n  shadow: true,\n})\nexport class Sticker implements ComponentInterface {\n  private isRtl: boolean = false;\n  private io: IntersectionObserver;\n  private contentSizeObserver: ResizeObserver;\n  private parentSizeObserver: ResizeObserver;\n  private sticker: HTMLDivElement;\n  private content: HTMLDivElement;\n  private scrollPosCache = 0;\n  private scrollPosThresholdCache = 0;\n  private cacheOffset: number | { v: number; h: number } = 0;\n  private slottedContent: Element[];\n  private pauseResizeWatcher = false;\n  private listenForScrollParent = false;\n  private stickToEleInitSize?: DOMRect;\n  private positions: Positions[] = [];\n  private pauseHide: boolean = false;\n  private hasBootstrapped = false;\n\n  @Element() host: HTMLNanoStickerElement;\n\n  // Internal State\n\n  @State() isStuck = false;\n  @State() isRootSticker = true;\n  @State() hide = false;\n  @State() scrollHide = false;\n  @State() multiStickerHide = false;\n  @State() scrollingTo = false;\n  @State() quietModeIsOn = false;\n  @State() stuckCounter = 0;\n  @State() stickerIndex = 0;\n  @State() stickToEle?: HTMLNanoStickerElement;\n  @State() triggerPos: { top: number; left: number };\n  @State() trigger: HTMLDivElement;\n  @State() _offset: number | { v: number; h: number } = 0;\n\n  // Public API\n\n  /** Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size */\n  @Prop() autoResize = true;\n\n  /** Manually enable / disabled sticky behaviour */\n  @Prop({ mutable: true }) isSticky = true;\n\n  /** Distance the item should be stuck from the sticky edge. */\n  @Prop({ mutable: true }) offset: number | { v: number; h: number } = 0;\n\n  /** The edge of the scroll-parent to stick to */\n  @Prop() position: 'top' | 'bottom' = 'top';\n  // other opts I'd like one day. 'start' | 'end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'\n\n  /** When applied, the sticker will hide when the scroll-parent\n   * is scrolling away from the sticker's stuck position and show when scrolling toward it.\n   * By default this will apply when the parent is below either the h or w dimensions */\n  @Prop() quietMode: 'on' | 'off' | { h: number; w: number } = {\n    h: 600,\n    w: 600,\n  };\n\n  /** When applied stickers will hide upon new stickers being stuck to the same position */\n  @Prop() hideOnNewStickers = true;\n\n  /** The max width of the item to implement sticky behaviour. */\n  @Prop() breakPointMax: null | number = null;\n\n  /** The min width of the item to implement sticky behaviour. */\n  @Prop() breakPointMin: null | number = null;\n\n  /** Define which scroll element to listen & stick to.\n   * By default, it will find traverse the DOM to find the closest. */\n  @Prop({ mutable: true }) scrollParent?: HTMLElement | Document;\n\n  /** Upon being stuck, attach the sticker to another sticker element.\n   * A JS query selector that returns a <nano-sticker> */\n  @Prop() stickTo: string;\n\n  // Broadcasted Events\n\n  /** Emitted when a sticker is stuck */\n  @Event() nanoStuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is unstuck */\n  @Event() nanoUnstuck!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is hidden */\n  @Event() nanoHide!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  /** Emitted when a sticker is showing */\n  @Event() nanoShow!: EventEmitter<{ sticker: HTMLNanoStickerElement }>;\n\n  // Public methods\n\n  /**\n   * Method to return the visibility status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isHiding() {\n    return this.hide;\n  }\n\n  /**\n   * Method to return the stuck status of the sticker\n   * @returns boolean\n   */\n  @Method()\n  async isSticking() {\n    this.shouldStick();\n    return this.isStuck;\n  }\n\n  /** @internal */\n  @Method()\n  async setTriggerPos(offset: number | { v: number; h: number }) {\n    return (this._offset = offset);\n  }\n\n  /** @internal */\n  @Method()\n  async getTriggerPos() {\n    return this.triggerPos;\n  }\n\n  /** @internal */\n  @Method()\n  async pauseHiding(pause: boolean) {\n    return (this.pauseHide = pause);\n  }\n\n  // Watchers\n\n  /** Keep a note of trigger position. Need this to track sticker order in the DOM */\n  @Watch('trigger')\n  @Watch('scrollParent')\n  updateTriggerOffset() {\n    if (!this.trigger || !this.scrollParent || !this.listenForScrollParent)\n      return;\n    this.triggerPos = _getOffset(this.trigger, this.scrollParent);\n  }\n\n  /** A root sticker is a fixed element Or this sticker is sticking to another.\n   * We need a content resize watcher to make sure we maintain a correct placeholder size in the body */\n  @Watch('position')\n  stickerResizeListener() {\n    if (this.contentSizeObserver) {\n      this.contentSizeObserver.disconnect();\n      this.contentSizeObserver = undefined;\n    }\n\n    this.contentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (this.pauseResizeWatcher) return;\n\n        if (entry.contentRect.height) {\n          if (this.position === 'top')\n            this.host.style.height = entry.contentRect.height + 'px';\n          if (this.position === 'bottom')\n            this.host.style.minHeight = entry.contentRect.height + 'px';\n        }\n      }\n    });\n    this.contentSizeObserver.observe(this.content);\n  }\n\n  @Watch('quietMode')\n  quietModeChange() {\n    if (this.quietMode === 'on') raf(() => (this.quietModeIsOn = true));\n    else if (this.quietMode === 'off') raf(() => (this.quietModeIsOn = false));\n  }\n\n  /** offset is part of the public API but we also use it to manipulate trigger points */\n  @Watch('offset')\n  @Watch('_offset')\n  setOffset() {\n    this.trigger.setAttribute('style', '');\n    let v: number, h: number, _v: number, _h: number;\n    let sticker: HTMLElement =\n      this.isRootSticker || this.stickToEle ? this.sticker : this.host;\n\n    if (!sticker) return;\n\n    if (typeof this.offset === 'object') ({ v, h } = this.offset);\n    else v = h = this.offset;\n\n    if (typeof this._offset === 'object') ({ v = _v, h = _h } = this._offset);\n    else _v = _h = this._offset;\n\n    const setPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v : h;\n      setTriggetPos(pos);\n      sticker.style[pos] = u + 'px';\n      if (!browserCanUseCssVariables()) return;\n      if (u)\n        this.host.style.setProperty(\n          '--hide-transform-amount',\n          `(110% + ${u}px)`\n        );\n      else this.host.style.setProperty('--hide-transform-amount', null);\n    };\n\n    const setTriggetPos = (pos: 'top' | 'bottom' | 'left' | 'right') => {\n      let u = pos.match(/(top|bottom)/) ? v + _v : h + _h;\n      this.trigger.style[pos] = u * -1 + 'px';\n      this.trigger.style.position = 'relative';\n      this.trigger.style.height = '1px';\n    };\n\n    if (\n      (this.positions.includes('start') && this.isRtl) ||\n      (this.positions.includes('end') && !this.isRtl)\n    )\n      setPos('right');\n\n    if (\n      (this.positions.includes('end') && this.isRtl) ||\n      (this.positions.includes('start') && !this.isRtl)\n    )\n      setPos('left');\n\n    if (this.positions.includes('top')) setPos('top');\n    if (this.positions.includes('bottom')) setPos('bottom');\n  }\n\n  @Watch('position')\n  positionChange() {\n    this.positions = this.position.split('-') as Positions[];\n    this.setOffset();\n  }\n\n  /** If this sticker is attached to a 'master' sticker (stickToEle),\n   * here we move the content of this sticker in and out accordingly */\n  @Watch('isStuck')\n  async stuckChange() {\n    if (this.isStuck) {\n      if (this.stickToEle) {\n        let content = hasShadowDom(this.host)\n          ? this.host.children\n          : this.content.children;\n        this.slottedContent = Array.from(content);\n\n        this.slottedContent.forEach((child: HTMLElement) => {\n          if (hasShadowDom(this.host)) this.stickToEle.appendChild(child);\n          else\n            this.stickToEle\n              .querySelector('.sticker-content')\n              .appendChild(child);\n          child.style.order = this.stickerIndex + '';\n        });\n\n        this.nanoStuck.emit({ sticker: this.stickToEle });\n      } else this.nanoStuck.emit({ sticker: this.host });\n    } else {\n      this.scrollHide = false;\n\n      if (this.stickToEle) {\n        this.slottedContent.forEach((child: HTMLElement) => {\n          this.host.appendChild(child);\n          child.style.order = '';\n        });\n        this.nanoUnstuck.emit({ sticker: this.stickToEle });\n      } else this.nanoUnstuck.emit({ sticker: this.host });\n    }\n  }\n\n  /** attach scroll listener. 'hides' stickers when scrolling away from trigger and 'shows' when scrolling toward */\n  @Watch('quietModeIsOn')\n  attachScrollListeners() {\n    if (this.quietModeIsOn)\n      this.scrollParent.addEventListener('scroll', this.onScroll, {\n        passive: true,\n        capture: false,\n      });\n    else {\n      this.scrollParent.removeEventListener('scroll', this.onScroll);\n      this.moveTrigger(true);\n    }\n  }\n\n  /** Add / remove parent scrolling listeners. If there's stickToEle we need to remove them */\n  @Watch('scrollParent')\n  @Watch('stickToEle')\n  handleParentEvents(_, oldParent: null | HTMLElement = null) {\n    if (!this.listenForScrollParent) return;\n    if (oldParent) this.manageListenersOnParent(false, oldParent);\n    if (this.scrollParent) this.manageListenersOnParent(!this.stickToEle);\n  }\n\n  /** Add remove specific listeners if we're sticking to a sticker.\n   * We need to adjust triggers according to the status of the 'master'  */\n  @Watch('stickToEle')\n  stickToEleChange(_, oldEle: null | HTMLNanoStickerElement) {\n    if (this.stickToEle) {\n      this.stickToEle.addEventListener('nanoHide', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoShow', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener('nanoStuck', this.onStickToDisplayEvent);\n      this.stickToEle.addEventListener(\n        'nanoUnstuck',\n        this.onStickToDisplayEvent\n      );\n    }\n    if (oldEle) {\n      oldEle.removeEventListener('nanoHide', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoShow', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoStuck', this.onStickToDisplayEvent);\n      oldEle.removeEventListener('nanoUnstuck', this.onStickToDisplayEvent);\n    }\n  }\n\n  /** Find and set the stickToEle from the public, selector string */\n  @Watch('stickTo')\n  stickToChange() {\n    if (this.stickTo)\n      this.stickToEle = this.scrollParent.querySelector(this.stickTo);\n    else this.stickToEle = undefined;\n  }\n\n  /** 2 potential criteria for hiding. Multi-stickers or quietmode. */\n  @Watch('multiStickerHide')\n  @Watch('scrollHide')\n  visibilityDecisionHandler() {\n    if (this.multiStickerHide || this.scrollHide) this.hide = true;\n    else this.hide = false;\n  }\n\n  @Watch('hide')\n  handleHideChange() {\n    if (this.hide) this.nanoHide.emit({ sticker: this.host });\n    else this.nanoShow.emit({ sticker: this.host });\n  }\n\n  @Watch('scrollParent')\n  setupIO() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n    if (!this.scrollParent || !this.hasBootstrapped || !this.trigger) return;\n\n    this.isRootSticker = this.scrollParent instanceof Document;\n    let root = this.scrollParent;\n    if (this.scrollParent instanceof Document) root = null;\n\n    this.io = new window.IntersectionObserver(\n      (_) => {\n        if (this.pauseResizeWatcher || !this.isSticky) return;\n        this.shouldStick(_.slice(-1)[0]);\n      },\n      { root: root as HTMLElement }\n    );\n\n    this.io.observe(this.trigger);\n  }\n\n  // Private methods / handlers\n\n  /** Assesses the public API quitemode and works out if it should be applied atm.\n   * If 'smallscreen', or there is a breakpointmax / min it will add a resizeobserver to conditionally add behaviour */\n  private setupParentResizeListener = () => {\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.parentSizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        let height: number, width: number;\n        if (entry.contentRect.height) height = entry.contentRect.height;\n        if (entry.contentRect.width) width = entry.contentRect.width;\n\n        if (typeof this.quietMode === 'object') {\n          if (width < this.quietMode.w || height < this.quietMode.h)\n            this.quietModeIsOn = true;\n          else this.quietModeIsOn = false;\n        }\n\n        if (this.breakPointMin) {\n          if (width > this.breakPointMin) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.breakPointMax) {\n          if (width < this.breakPointMax) this.isSticky = true;\n          else this.isSticky = false;\n        }\n\n        if (this.isRootSticker && this.sticker && this.autoResize)\n          this.sticker.style.width = this.host.scrollWidth + 'px';\n      }\n    });\n\n    let toWatch =\n      this.scrollParent instanceof Document\n        ? this.scrollParent.documentElement\n        : this.scrollParent;\n    if (toWatch) this.parentSizeObserver.observe(toWatch);\n  };\n\n  /** For stickTo stickers. We listen to the events from the 'master' sticker to ammend the hide/show trigger\n   * Main diffs from rootstickers / non is height being on 'master' */\n  private onStickToDisplayEvent = (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    if (e.detail.sticker !== this.stickToEle) return;\n\n    switch (e.type) {\n      case 'nanoHide':\n        this._offset = 0;\n        this.cacheOffset = this.offset;\n        this.offset = 0;\n        /** trigger moves down, underneath sticker if the main sticker hides */\n        if (!this.isStuck) this.moveTrigger(false);\n\n        /** If it's an actual 'position: sticky' element, we need to give the sticker an appropriate height.\n         * This minimises content jumping around as items are added */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight =\n              this.stickToEleInitSize.height +\n              (this.host.scrollHeight +\n                (typeof this.cacheOffset === 'object'\n                  ? this.cacheOffset.v\n                  : this.cacheOffset)) +\n              'px';\n            this.stickToEle.setTriggerPos(this.stickToEleInitSize.height * -1);\n          });\n        }\n        break;\n      case 'nanoShow':\n        this._offset = this.stickToEleInitSize.height;\n        this.offset = this.cacheOffset;\n        this.moveTrigger(true);\n\n        /** reset master sticker size */\n        if (!this.isRootSticker && this.quietModeIsOn) {\n          raf(() => {\n            this.stickToEle.style.minHeight = '';\n            this.stickToEle.setTriggerPos(0);\n          });\n        }\n        break;\n      case 'nanoStuck':\n        this.stickToEleInitSize = this.stickToEle.getBoundingClientRect();\n        this._offset = this.stickToEleInitSize.height;\n        break;\n    }\n  };\n\n  /** Add or removes event listeners / observers on scrolling parent\n   * for when the scrolling parent changes, or, this sticker is sticking to another */\n  private manageListenersOnParent(\n    addEvents: boolean,\n    ele?: HTMLElement | Document\n  ) {\n    let scrollParent = ele || this.scrollParent;\n\n    if (!scrollParent) return;\n\n    if (!addEvents) {\n      try {\n        if (this.quietModeIsOn)\n          scrollParent.removeEventListener('scroll', this.onScroll);\n        scrollParent.removeEventListener('nanoStuck', this.onStickEvent);\n        scrollParent.removeEventListener('nanoUnstuck', this.onStickEvent);\n      } catch (e) {\n        console.error('Events haven`t been added');\n      }\n    } else {\n      scrollParent.addEventListener('nanoStuck', this.onStickEvent);\n      scrollParent.addEventListener('nanoUnstuck', this.onStickEvent);\n\n      if (this.quietModeIsOn) this.attachScrollListeners();\n    }\n    this.setupParentResizeListener();\n  }\n\n  /** Handler applied to scrolling parent. When 'hideOnNewStickers' is true, hide this sticker on subsequent stuck stickers.  */\n  private onStickEvent = async (\n    e: CustomEvent<{ sticker: HTMLNanoStickerElement }>\n  ) => {\n    let sticker = e.detail ? e.detail.sticker : null;\n    if (!sticker || sticker.position !== this.position) return;\n\n    const incomingTriggerPos = await sticker.getTriggerPos();\n\n    if (\n      e.type === 'nanoStuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex++;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.multiStickerHide = true;\n        this.stuckCounter++;\n      }\n    }\n\n    if (\n      e.type === 'nanoUnstuck' &&\n      sticker !== this.host &&\n      sticker.scrollParent === this.host.scrollParent\n    ) {\n      this.stickerIndex--;\n\n      if (!this.hideOnNewStickers) return;\n\n      if (\n        (this.positions.includes('top') &&\n          this.triggerPos.top < incomingTriggerPos.top) ||\n        (this.positions.includes('bottom') &&\n          this.triggerPos.top > incomingTriggerPos.top)\n      ) {\n        this.stuckCounter--;\n        if (this.stuckCounter < 1) this.multiStickerHide = false;\n      }\n    }\n  };\n\n  /** Scroll handler applied to scrolling parent. Only applied when quietmode is on.\n   * 'hides' stickers when scrolling over 100px away from trigger and 'shows' when scrolling toward */\n  private onScroll = () => {\n    let y: number = _getScrollTop(this.scrollParent);\n\n    // scrolling up\n    if (y < this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollTo();\n      else this.handleScrollAway(y);\n    }\n\n    // scrolling down\n    if (y > this.scrollPosCache) {\n      if (!this.positions.includes('bottom')) this.handleScrollAway(y);\n      else this.handleScrollTo();\n    }\n    this.scrollPosCache = y;\n  };\n\n  /** Watch for scroll direction. Only applies when quietmode is on.\n   * We need to addjust the position of the trigger when the sticker is hidden */\n  private handleScrollTo() {\n    this.scrollPosThresholdCache = null;\n    if (!this.scrollHide) return;\n\n    if (this.scrollingTo !== true) {\n      this._offset = this.cacheOffset || this._offset;\n    }\n    this.scrollingTo = true;\n    this.scrollHide = false;\n  }\n\n  private handleScrollAway(currScroll: number) {\n    if (this.scrollHide) return;\n\n    if (!this.isStuck) return;\n\n    if (this.scrollingTo !== false) {\n      this.cacheOffset = this._offset;\n      this._offset = 0;\n    }\n    this.scrollingTo = false;\n\n    if (!this.scrollPosThresholdCache)\n      this.scrollPosThresholdCache = currScroll;\n    else if (\n      !this.pauseHide &&\n      Math.abs(currScroll - this.scrollPosThresholdCache) > 100\n    )\n      this.scrollHide = true;\n  }\n\n  private moveTrigger(toInitial?: boolean) {\n    if (\n      (this.positions.includes('bottom') && !toInitial) ||\n      (!this.positions.includes('bottom') && toInitial)\n    ) {\n      this.host.parentNode.insertBefore(this.trigger, this.host);\n    } else\n      this.host.parentNode.insertBefore(this.trigger, this.host.nextSibling);\n  }\n\n  /** Gets the 'closest' scrolling parent */\n  private getScrollParent() {\n    const regex = /(auto|scroll)/;\n    const parents = (_node: Node, ps: Node[]) => {\n      if (_node.parentNode === null) {\n        return ps;\n      }\n      return parents(_node.parentNode, ps.concat([_node]));\n    };\n    const style = (_node, prop) =>\n      getComputedStyle(_node, null).getPropertyValue(prop);\n    const overflow = (_node) =>\n      style(_node, 'overflow') +\n      style(_node, 'overflow-y') +\n      style(_node, 'overflow-x');\n    const scroll = (_node) => regex.test(overflow(_node));\n    const docHeight = document.documentElement.getBoundingClientRect().height;\n\n    const scrollParent = (_node: HTMLElement) => {\n      if (!(_node instanceof HTMLElement)) return;\n\n      const ps = parents(_node, []);\n      return (\n        ps.find(\n          (ele) =>\n            scroll(ele) && ele.getBoundingClientRect().height !== docHeight\n        ) || document\n      );\n    };\n\n    return scrollParent(this.host);\n  }\n\n  private shouldStick(data?: IntersectionObserverEntry) {\n    let scrollAmt: number;\n\n    if (this.positions.includes('top')) {\n      if (!this.isRootSticker)\n        scrollAmt = _getOffset(this.trigger, this.scrollParent).top;\n      else scrollAmt = this.trigger.getBoundingClientRect().top;\n      this.isStuck = scrollAmt < -1;\n    } else if (this.positions.includes('bottom')) {\n      scrollAmt = this.trigger.getBoundingClientRect().top;\n      const parentBounding =\n        data && data.rootBounds\n          ? data.rootBounds\n          : (this.scrollParent instanceof Document\n              ? document.documentElement\n              : this.scrollParent\n            ).getBoundingClientRect();\n      this.isStuck = scrollAmt > parentBounding.height + parentBounding.top;\n    }\n  }\n\n  private bootstrapGurantor() {\n    this.hasBootstrapped = true;\n\n    this.scrollParent = this.scrollParent || this.getScrollParent();\n    this.isRootSticker = this.scrollParent instanceof Document;\n\n    this.trigger = this.trigger || document.createElement('div');\n    this.trigger.classList.add('sticker-trigger');\n\n    this.positionChange();\n    this.moveTrigger(true);\n    this.quietModeChange();\n\n    this.listenForScrollParent = true;\n    this.handleParentEvents(true);\n\n    this.stickerIndex = Array.from(\n      this.scrollParent.querySelectorAll('nano-sticker')\n    )\n      .filter(\n        (sticker: HTMLNanoStickerElement) => sticker.position === this.position\n      )\n      .findIndex((sticker) => sticker === this.host);\n\n    this.setOffset();\n    this.stickerResizeListener();\n    this.setupParentResizeListener();\n\n    // bit of a hack ... add default 'order'. Required for 'stickTo' elements.\n    this.slottedContent = Array.from(this.host.children);\n    this.slottedContent.forEach((child: HTMLElement) => {\n      child.style.order = this.stickerIndex + '';\n    });\n\n    this.updateTriggerOffset();\n    this.stickToChange();\n    this.setupIO();\n    this.onStickToDisplayEvent = debounce(this.onStickToDisplayEvent, 50);\n  }\n\n  // Stencil metthods\n\n  connectedCallback() {\n    this.isRtl =\n      this.host.dir === 'rtl' ||\n      (this.host.ownerDocument as Document).dir === 'rtl';\n\n    // this is all horrible.... shrug\n    document.documentElement.addEventListener('nanoComponentsReady', () => {\n      setTimeout((_) => this.bootstrapGurantor(), 200);\n    });\n    setTimeout((_) => {\n      if (!this.hasBootstrapped) this.bootstrapGurantor();\n    }, 1000);\n  }\n\n  disconnectedCallback() {\n    if (this.io) {\n      this.io.disconnect();\n      this.io = undefined;\n    }\n\n    if (this.parentSizeObserver) {\n      this.parentSizeObserver.disconnect();\n      this.parentSizeObserver = undefined;\n    }\n\n    this.quietMode = 'off';\n    this.scrollParent = null;\n  }\n\n  render() {\n    return (\n      <Host\n        sticky={!this.isRootSticker && !this.stickToEle && this.isSticky}\n        hide={this.hide && this.isStuck}\n        siblings={this.stuckCounter}\n        index={this.stickerIndex}\n        stuck={this.isStuck && this.isSticky}\n        placed-bottom={this.positions.includes('bottom')}\n        placed-top={this.positions.includes('top')}\n        placed-end={this.positions.includes('end')}\n        placed-start={this.positions.includes('start')}\n      >\n        <div\n          class={{\n            sticker: true,\n            sticky: this.isRootSticker && this.isSticky,\n            stuck: this.isStuck && this.isRootSticker && this.isSticky,\n            hide: this.isRootSticker && this.hide && this.isStuck,\n          }}\n          ref={(div) => (this.sticker = div)}\n        >\n          <div class=\"sticker-content\" ref={(div) => (this.content = div)}>\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-4265cf95.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,n,o,t){function c(e){return e instanceof o?e:new o((function(n){n(e)}))}return new(o||(o=Promise))((function(o,a){function i(e){try{s(t.next(e))}catch(n){a(n)}}function r(e){try{s(t["throw"](e))}catch(n){a(n)}}function s(e){e.done?o(e.value):c(e.value).then(i,r)}s((t=t.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var o={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},t,c,a,i;return i={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function r(e){return function(n){return s([e,n])}}function s(i){if(t)throw new TypeError("Generator is already executing.");while(o)try{if(t=1,c&&(a=i[0]&2?c["return"]:i[0]?c["throw"]||((a=c["return"])&&a.call(c),0):c.next)&&!(a=a.call(c,i[1])).done)return a;if(c=0,a)i=[i[0]&2,a.value];switch(i[0]){case 0:case 1:a=i;break;case 4:o.label++;return{value:i[1],done:false};case 5:o.label++;c=i[1];i=[0];continue;case 7:i=o.ops.pop();o.trys.pop();continue;default:if(!(a=o.trys,a=a.length>0&&a[a.length-1])&&(i[0]===6||i[0]===2)){o=0;continue}if(i[0]===3&&(!a||i[1]>a[0]&&i[1]<a[3])){o.label=i[1];break}if(i[0]===6&&o.label<a[1]){o.label=a[1];a=i;break}if(a&&o.label<a[2]){o.label=a[2];o.ops.push(i);break}if(a[2])o.ops.pop();o.trys.pop();continue}i=n.call(e,o)}catch(r){i=[6,r];c=0}finally{t=a=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-89edc042.system.js","./p-0784f2ad.system.js"],(function(e){"use strict";var n,o,t,c,a,i,r;return{setters:[function(e){n=e.r;o=e.c;t=e.h;c=e.e;a=e.g},function(e){i=e.c},function(e){r=e.f}],execute:function(){var s='.sc-nano-checkbox-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  #e4e6e8);--padding:initial;--check-bg-color:#fff;--check-border-style:1px solid #b5aea7;--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--tagbox-rgb:144, 198, 231;--tagbox-border-color:rgba(var(--tagbox-rgb), 0.5);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.2);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgba(0, 0, 0, 0.2);--cb-border-radius:2px;--radio-border-radius:50%;display:inline-block;max-width:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{-webkit-box-sizing:inherit;box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-style:1px solid rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgba(var(--tagbox-rgb), 0.8);--tagbox-bg-color:rgba(var(--tagbox-rgb), 0.5)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104, 117, 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;height:1.5em;width:1.5em;min-width:1.5em;border:var(--check-border-style);-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.2);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.625em;top:0.625em;width:0;height:0;border:2px solid var(--check-checked-higlight-color);-webkit-transform:scale(0);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:"";left:0.75em;top:0.75em;height:0;width:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;-webkit-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);opacity:1;-webkit-transition:all 0.15s ease-out;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em 0}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--invalid-shadow);box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{-webkit-box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);-webkit-box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);border-width:0.3125em;background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:rotate(45deg) scale(1);transform:rotate(45deg) scale(1);opacity:1;left:0.475em;top:0.1875em;width:0.375em;height:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{-webkit-transform:scale(1);transform:scale(1);opacity:1;left:0.3125em;top:0;width:0.7em;height:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-left:10px;padding-right:0;padding-top:0;padding-bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-stretch:condensed;line-height:1;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label.sc-nano-checkbox{padding-left:unset;padding-right:unset;-webkit-padding-start:10px;padding-inline-start:10px;-webkit-padding-end:0;padding-inline-end:0}}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);-webkit-box-shadow:var(--segment-shadow);box-shadow:var(--segment-shadow);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.sc-nano-checkbox-h:first-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius);border-right:none}.sc-nano-checkbox-h:first-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0;border-left:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type):not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 0 0 0;border-right:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type)[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-left:none}.sc-nano-checkbox-h:last-of-type:not([dir=rtl]) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0 var(--segment-border-radius) var(--segment-border-radius) 0}.sc-nano-checkbox-h:last-of-type[dir=rtl] .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius) 0 0 var(--segment-border-radius)}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:500;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);-webkit-transition:all 0.2s;transition:all 0.2s;border-radius:var(--cb-border-radius);width:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:"+";margin-left:0.3125em;margin-right:0;margin-top:0;margin-bottom:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:center;transform-origin:center}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.nanocb__label--tag.sc-nano-checkbox::after{margin-left:unset;margin-right:unset;-webkit-margin-start:0.3125em;margin-inline-start:0.3125em;-webkit-margin-end:0;margin-inline-end:0}}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}';var b=0;var h=e("nano_checkbox",function(){function e(e){var t=this;n(this,e);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId="nano-cb-"+b++;this.shouldReport=false;this._invalid=false;this.inputType="checkbox";this.hasFocus=false;this.checked=false;this.disabled=false;this.value="on";this.required=false;this.type="checkbox";this.indeterminate=false;this.handleInvalid=function(e){t.shouldReport=true;t._invalid=!e.target.validity.valid};this.handleChange=function(e){t.checked=e.target.checked;t.indeterminate=false};this.handleFocus=function(){t.hasFocus=true;t.nanoFocus.emit()};this.handleBlur=function(){t.hasFocus=false;t.nanoBlur.emit()}}e.prototype.handleCheckedChange=function(){return __awaiter(this,void 0,void 0,(function(){var e,n;var o=this;return __generator(this,(function(t){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){e=this.host.closest("form");n=void 0;if(e){n=Array.from(e.querySelectorAll('nano-checkbox[name="'+this.name+'"]'))}else{n=Array.from(document.querySelectorAll('nano-checkbox[name="'+this.name+'"]')).filter((function(e){return!e.closest("form")}))}n.map((function(e){if(e!==o.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked});return[2]}))}))};e.prototype.typeChange=function(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"};e.prototype.handleIndeterminateChange=function(){this.checked=false;this.input.indeterminate=this.indeterminate};Object.defineProperty(e.prototype,"invalid",{get:function(){if(!this.shouldReport)return false;return!this.input.validity.valid},enumerable:false,configurable:true});e.prototype.getInputElement=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input)return[2,this.input];return[2]}))}))};e.prototype.reportValidity=function(e){if(e===void 0){e=false}return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return[2,{isValid:!this.invalid,errorMessage:this.input.validationMessage}]}))}))};e.prototype.setError=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(!this.input)return[2];this._invalid=!!e.length;this.input.setCustomValidity(e);return[2]}))}))};e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input){this.input.focus();r.force(this.input)}return[2]}))}))};e.prototype.removeFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.input){this.input.blur();r.force(this.input,false)}return[2]}))}))};e.prototype.isRadioChecked=function(){var e=this;setTimeout((function(){return e.checked=e.input.checked}),20)};e.prototype.componentWillLoad=function(){this.typeChange()};e.prototype.componentDidLoad=function(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();r.observe(this.input)};e.prototype.disconnectedCallback=function(){r.unobserve(this.input)};e.prototype.render=function(){var e=this;var n=this.inputId+"-lbl";var o=this.host.ownerDocument.dir==="rtl";return t(c,{class:Object.assign({},i(this.color)),dir:o?"rtl":null},t("label",{class:{nanocb:true,"nanocb--checked":this.checked,"nanocb--invalid":this.invalid,"nanocb--disabled":this.disabled,"nanocb--focused":this.hasFocus,"nanocb--indeterminate":this.indeterminate},htmlFor:this.inputId},t("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":n,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:function(n){return e.input=n},id:this.inputId,onInvalid:this.handleInvalid}),t("span",{class:"nanocb__input nanocb__input--"+this.type}),t("div",{id:n,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&t("span",null,this.label),t("span",{hidden:this.label&&!!this.label.length},t("slot",null)))))};Object.defineProperty(e.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}},enumerable:false,configurable:true});return e}());h.style=s}}}));
-//# sourceMappingURL=p-4265cf95.system.entry.js.map

package/dist/nano-components/p-4265cf95.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"names":["checkboxCss","checkboxIds","Checkbox","exports","class_1","hostRef","_this","this","inputId","shouldReport","_invalid","inputType","hasFocus","checked","disabled","value","required","type","indeterminate","handleInvalid","ev","target","validity","valid","handleChange","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","prototype","handleCheckedChange","input","name","form","host","closest","radios","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","typeChange","handleIndeterminateChange","Object","defineProperty","getInputElement","reportValidity","validateFirst","isValid","invalid","errorMessage","validationMessage","setError","message","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","isRadioChecked","setTimeout","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","isRtl","ownerDocument","dir","h","Host","class","assign","createColorClasses","color","nanocb","nanocb--checked","nanocb--invalid","nanocb--disabled","nanocb--focused","nanocb--indeterminate","htmlFor","aria-labelledby","onBlur","onFocus","onChange","ref","id","onInvalid","label","hidden"],"mappings":";;;iQAAA,IAAMA,EAAc,ohWCkBpB,IAAIC,EAAc,MAcLC,EAAQC,EAAA,gBAAA,WALrB,SAAAC,EAAAC,GAAA,IAAAC,EAAAC,8HAMUA,KAAAC,QAAU,WAAWP,IAErBM,KAAAE,aAAe,MAIdF,KAAAG,SAAW,MACXH,KAAAI,UAAkC,WAGHJ,KAAAK,SAAW,MAKXL,KAAAM,QAAmB,MA4BlCN,KAAAO,SAAoB,MAMpBP,KAAAQ,MAAgB,KAUhBR,KAAAS,SAAoB,MAKpBT,KAAAU,KAKJ,WAiBmBV,KAAAW,cAAyB,MAuGzDX,KAAAY,cAAgB,SAACC,GACvBd,EAAKG,aAAe,KACpBH,EAAKI,UAAaU,EAAGC,OAA4BC,SAASC,OAGpDhB,KAAAiB,aAAe,SAACJ,GACtBd,EAAKO,QAAWO,EAAGC,OAA4BR,QAC/CP,EAAKY,cAAgB,OAGfX,KAAAkB,YAAc,WACpBnB,EAAKM,SAAW,KAChBN,EAAKoB,UAAUC,QAGTpB,KAAAqB,WAAa,WACnBtB,EAAKM,SAAW,MAChBN,EAAKuB,SAASF,QA5LVvB,EAAA0B,UAAAC,oBAAN,mHACExB,KAAKyB,MAAMnB,QAAUN,KAAKM,QAE1B,GAAIN,KAAKI,YAAc,SAAWJ,KAAK0B,MAAQ1B,KAAKM,QAAS,CACvDqB,EAAO3B,KAAK4B,KAAKC,QAAQ,QACzBC,OAAiB,EACrB,GAAIH,EAAM,CACRG,EAASC,MAAMC,KACbL,EAAKM,iBAAiB,uBAAuBjC,KAAK0B,KAAI,WAEnD,CACLI,EAASC,MAAMC,KACbE,SAASD,iBAAiB,uBAAuBjC,KAAK0B,KAAI,OAC1DS,QAAO,SAACC,GAAU,OAACA,EAAMP,QAAQ,WAErCC,EAAOO,KAAI,SAACC,GACV,GAAIA,IAAOvC,EAAK6B,KAAMU,EAAGhC,QAAU,SAGvCN,KAAKuC,WAAWnB,KAAK,CAAEZ,MAAOR,KAAKQ,MAAOF,QAASN,KAAKM,2BAmC1DT,EAAA0B,UAAAiB,WAAA,WACE,GAAIxC,KAAKU,OAAS,YAAcV,KAAKU,OAAS,MAC5CV,KAAKI,UAAY,gBACdJ,KAAKI,UAAY,SAcxBP,EAAA0B,UAAAkB,0BAAA,WACEzC,KAAKM,QAAU,MACfN,KAAKyB,MAAMd,cAAgBX,KAAKW,eAOlC+B,OAAAC,eACI9C,EAAA0B,UAAA,UAAO,KADX,WAEE,IAAKvB,KAAKE,aAAc,OAAO,MAC/B,OAAQF,KAAKyB,MAAMV,SAASC,4CA6BxBnB,EAAA0B,UAAAqB,gBAAN,gGACE,GAAI5C,KAAKyB,MAAO,MAAA,CAAA,EAAOzB,KAAKyB,wBASxB5B,EAAA0B,UAAAsB,eAAN,SACEC,GAAA,GAAAA,SAAA,EAAA,CAAAA,EAAA,2FAEA,GAAIA,EAAe,CACjB9C,KAAKE,aAAe,KACpBF,KAAKG,UAAYH,KAAKyB,MAAMoB,iBAE9B,MAAA,CAAA,EAAO,CACLE,SAAU/C,KAAKgD,QACfC,aAAcjD,KAAKyB,MAAMyB,2BASvBrD,EAAA0B,UAAA4B,SAAN,SAAeC,wFACb,IAAKpD,KAAKyB,MAAO,MAAA,CAAA,GAEjBzB,KAAKG,WAAaiD,EAAQC,OAC1BrD,KAAKyB,MAAM6B,kBAAkBF,oBAOzBvD,EAAA0B,UAAAgC,SAAN,gGACE,GAAIvD,KAAKyB,MAAO,CACdzB,KAAKyB,MAAM+B,QACXC,EAAaC,MAAM1D,KAAKyB,wBAQtB5B,EAAA0B,UAAAoC,YAAN,gGACE,GAAI3D,KAAKyB,MAAO,CACdzB,KAAKyB,MAAMmC,OACXH,EAAaC,MAAM1D,KAAKyB,MAAO,wBA4B3B5B,EAAA0B,UAAAsC,eAAA,WAAA,IAAA9D,EAAAC,KACN8D,YAAW,WAAA,OAAO/D,EAAKO,QAAUP,EAAK0B,MAAMnB,UAAU,KAKxDT,EAAA0B,UAAAwC,kBAAA,WACE/D,KAAKwC,cAGP3C,EAAA0B,UAAAyC,iBAAA,WACEhE,KAAKyB,MAAMd,cAAgBX,KAAKW,cAChCX,KAAK6D,iBACLJ,EAAaQ,QAAQjE,KAAKyB,QAG5B5B,EAAA0B,UAAA2C,qBAAA,WACET,EAAaU,UAAUnE,KAAKyB,QAG9B5B,EAAA0B,UAAA6C,OAAA,WAAA,IAAArE,EAAAC,KACE,IAAMqE,EAAUrE,KAAKC,QAAU,OAC/B,IAAIqE,EAAStE,KAAK4B,KAAK2C,cAA2BC,MAAQ,MAE1D,OACEC,EAACC,EAAI,CACHC,MAAKjC,OAAAkC,OAAA,GAAOC,EAAmB7E,KAAK8E,QACpCN,IAAKF,EAAQ,MAAQ,MAErBG,EAAA,QAAA,CACEE,MAAO,CACLI,OAAQ,KACRC,kBAAmBhF,KAAKM,QACxB2E,kBAAmBjF,KAAKgD,QACxBkC,mBAAoBlF,KAAKO,SACzB4E,kBAAmBnF,KAAKK,SACxB+E,wBAAyBpF,KAAKW,eAEhC0E,QAASrF,KAAKC,SAEdwE,EAAA,QAAA,CACE/D,KAAMV,KAAKI,UACXsB,KAAM1B,KAAK0B,KACXjB,SAAUT,KAAKS,SACfH,QAASN,KAAKM,QACdC,SAAUP,KAAKO,SACfC,MAAOR,KAAKQ,MAAK8E,kBACAjB,EACjBkB,OAAQvF,KAAKqB,WACbmE,QAASxF,KAAKkB,YACduE,SAAUzF,KAAKiB,aACfyE,IAAK,SAACjE,GAAK,OAAM1B,EAAK0B,MAAQA,GAC9BkE,GAAI3F,KAAKC,QACT2F,UAAW5F,KAAKY,gBAElB6D,EAAA,OAAA,CAAME,MAAO,gCAAkC3E,KAAKU,OAEpD+D,EAAA,MAAA,CAAKkB,GAAItB,EAASM,MAAO,gCAAkC3E,KAAKU,MAC7DV,KAAK6F,SAAW7F,KAAK6F,MAAMxC,QAAUoB,EAAA,OAAA,KAAOzE,KAAK6F,OAClDpB,EAAA,OAAA,CAAMqB,OAAQ9F,KAAK6F,SAAW7F,KAAK6F,MAAMxC,QACvCoB,EAAA,OAAA,mUAhRO","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\n:host {\n  /**\n   * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{$control-invalid-style};\n   * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{$control-focus-style};\n   * @prop --padding: padding around radio and checkbox controls. Defaults to initial;\n   * @prop --control-padding: padding around tag and segmented controls text. Various defaults.\n\n   * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get($colors, white)};\n   * @prop --check-border-style: Initial border style. Defaults to 1px solid #{map.get($colors, palegrey)};\n   * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get($colors, darkgrey)};\n   * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get($colors, white)};\n   * @prop --check-base-size: Relative scaling size for check controls. Defaults to to inherit;\n\n   * @prop --cb-border-radius: Checkbox border radius. Defaults to to 2px and 5px on [has-focus];\n   * @prop --radio-border-radius: Radio border radius. Defaults to to 50%;\n   * @prop --tagbox-rgb: an rba list for tags which can be used to generate --tagbox-border-color and --tagbox-bg-color. Defaults to #{color-to-rgb-list(map.get($colors, lightblue))};\n   * @prop --tagbox-border-color: Defaults to rgba(var(--tagbox-rgb), .5);\n   * @prop --tagbox-bg-color: Defaults to rgba(var(--tagbox-rgb), .1);\n   * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get($colors, blue)};\n   * @prop --segment-border-radius: Defaults to 3px;\n   * @prop --segment-shadow: 0 1px 4px rgba(0,0,0,.2);\n  */\n\n  --focus-shadow: #{$control-focus-style};\n  --invalid-shadow: #{$control-invalid-style};\n  --padding: initial;\n  --check-bg-color: #{map.get($colors, white)};\n  --check-border-style: 1px solid #{map.get($colors, palegrey)};\n  --check-checked-bg-color: #{map.get($colors, darkgrey)};\n  --check-checked-border-color: #{map.get($colors, darkgrey)};\n  --check-checked-higlight-color: #{map.get($colors, white)};\n  --check-base-size: inherit;\n\n  // type specific\n\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, lightblue))};\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.5);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.2);\n  --tagbox-border-radius: 0;\n  --segment-color: #{map.get($colors, blue)};\n  --segment-border-radius: 3px;\n  --segment-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n  --cb-border-radius: 2px;\n  --radio-border-radius: 50%;\n\n  display: inline-block;\n  max-width: 100%;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\n:host([type='tag']) {\n  text-transform: uppercase;\n\n  --control-padding: 0.2rem 1rem;\n}\n\n:host([type='segment']) {\n  --check-border-style: none;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host([type='segment-pill']) {\n  --check-border-style: 1px solid #{rgba(map.get($colors, palegrey), 0.5)};\n  --segment-border-radius: 5px;\n  --control-padding: 0.7em 1em 0.7em 1em;\n}\n\n:host(.nano-color) {\n  --tagbox-rgb: var(--nano-color-base-rgb);\n  --focus-shadow: #{$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n  --tagbox-border-color: rgba(var(--tagbox-rgb), 0.8);\n  --tagbox-bg-color: rgba(var(--tagbox-rgb), 0.5);\n}\n\n:host([has-focus]:not([has-focus='false'])) {\n  --cb-border-radius: 5px;\n}\n\n:host([disabled]:not([disabled='false'])) {\n  opacity: 0.7;\n\n  --tagbox-rgb: #{color-to-rgb-list(map.get($colors, mediumgrey))};\n  --check-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --check-checked-bg-color: #{rgba(map.get($colors, mediumgrey), 0.5)};\n  --segment-color: #{map.get($colors, darkgrey)};\n}\n\n.nanocb {\n  padding: var(--padding);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &__input {\n    @include border-radius(var(--cb-border-radius, 3px));\n\n    font-size: var(--check-base-size);\n    position: relative;\n    height: 1.5em;\n    width: 1.5em;\n    min-width: 1.5em;\n    border: var(--check-border-style);\n    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);\n\n    &::before {\n      @include border-radius(var(--cb-border-radius));\n\n      position: absolute;\n      content: '';\n      left: 0.625em;\n      top: 0.625em;\n      width: 0;\n      height: 0;\n      border: 2px solid var(--check-checked-higlight-color);\n      transform: scale(0);\n    }\n\n    &--radio {\n      @include border-radius(var(--radio-border-radius));\n\n      background-color: var(--check-bg-color);\n    }\n\n    &--checkbox {\n      background-color: var(--check-bg-color);\n\n      &::after {\n        @include border-radius(var(--cb-border-radius));\n\n        position: absolute;\n        content: '';\n        left: 0.75em;\n        top: 0.75em;\n        height: 0;\n        width: 0;\n        border: solid var(--check-checked-higlight-color);\n        border-width: 0 0.1875em 0.1875em 0;\n        transform: rotate(0deg) scale(0);\n        opacity: 1;\n        transition: all 0.15s ease-out;\n\n        .nanocb--indeterminate & {\n          border-width: 0 0 0.1875em 0;\n        }\n      }\n    }\n\n    &--segment,\n    &--segment-pill {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n\n    &--tag {\n      @include visually-hide();\n\n      &::before {\n        display: none;\n      }\n    }\n  }\n\n  &--invalid:not(.nanocb--focused) {\n    .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow);\n\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--invalid-shadow);\n        z-index: 1;\n      }\n    }\n  }\n\n  input {\n    @include visually-hide();\n\n    &:focus ~ .nanocb__input {\n      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow);\n    }\n\n    &.focus-visible:focus ~ .nanocb__input {\n      &--tag + .nanocb__label,\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        box-shadow: var(--focus-shadow);\n        z-index: 1;\n      }\n    }\n\n    &:checked ~ .nanocb__input {\n      @include border-radius(var(--cb-border-radius));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-border-color);\n\n      &--segment + .nanocb__label,\n      &--segment-pill + .nanocb__label {\n        color: var(--check-checked-higlight-color);\n        background-color: var(--check-checked-bg-color);\n        box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.2);\n      }\n\n      &--radio {\n        border-radius: var(--radio-border-radius);\n        border-width: 0.3125em;\n        background-color: var(--check-checked-higlight-color);\n\n        &::after {\n          border: solid var(--check-checked-border-color);\n          border-width: 0 0.125em 0.125em 0;\n          opacity: 0;\n        }\n\n        &::before {\n          border-radius: var(--radio-border-radius);\n        }\n      }\n\n      &--checkbox {\n        &::after {\n          transform: rotate(45deg) scale(1);\n          opacity: 1;\n          left: 0.475em;\n          top: 0.1875em;\n          width: 0.375em;\n          height: 0.75em;\n          border-radius: 0;\n        }\n      }\n\n      &--tag + .nanocb__label::after {\n        transform: rotate(45deg);\n      }\n    }\n\n    &:indeterminate ~ .nanocb__input--checkbox {\n      @include border-radius(var(--input-border-radius, 5px));\n\n      background-color: var(--check-checked-bg-color);\n      transform: rotate(0deg) scale(1);\n      opacity: 1;\n      border: 0.125em solid var(--check-checked-bg-color);\n\n      &::after {\n        transform: scale(1);\n        opacity: 1;\n        left: 0.3125em;\n        top: 0;\n        width: 0.7em;\n        height: 0.7em;\n        border-radius: 0;\n      }\n    }\n  }\n\n  &__label {\n    @include padding(0, 0, 0, 10px);\n\n    display: flex;\n    align-items: center;\n    font-stretch: condensed;\n    line-height: 1;\n    flex: 1;\n    justify-content: space-between;\n\n    &--segment,\n    &--segment-pill {\n      border: var(--check-border-style);\n      border-radius: var(--segment-border-radius);\n      box-shadow: var(--segment-shadow);\n      display: inline-flex;\n      padding: var(--control-padding);\n      background: var(--check-bg-color);\n      color: var(--segment-color);\n      align-items: center;\n      width: 100%;\n    }\n\n    &--segment-pill {\n      // first\n      @include ltr-host(':first-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n        border-right: none;\n      }\n\n      @include rtl-host(':first-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n        border-left: none;\n      }\n      // middle\n      @include ltr-host(':not(:last-of-type):not(:first-of-type)') {\n        border-radius: 0 0 0 0;\n        border-right: none;\n      }\n\n      @include rtl-host(':not(:last-of-type):not(:first-of-type)') {\n        border-left: none;\n      }\n      // last\n      @include ltr-host(':last-of-type') {\n        border-radius:\n          0 var(--segment-border-radius)\n          var(--segment-border-radius) 0;\n      }\n\n      @include rtl-host(':last-of-type') {\n        border-radius:\n          var(--segment-border-radius) 0 0\n          var(--segment-border-radius);\n      }\n      // single\n      @include host(':first-of-type:last-of-type') {\n        border-radius: var(--segment-border-radius);\n        border: var(--check-border-style);\n      }\n    }\n\n    &--tag {\n      letter-spacing: 2px;\n      font-weight: 500;\n      font-size: 0.65em;\n      line-height: 1.4;\n      padding: var(--control-padding);\n      border: 2px solid #b5aea7;\n      border-color: var(--tagbox-border-color);\n      background-color: var(--tagbox-bg-color);\n      transition: all 0.2s;\n      border-radius: var(--cb-border-radius);\n      width: 100%;\n\n      &::after {\n        content: '+';\n\n        @include margin(0, 0, 0, 0.3125em);\n\n        font-weight: 200;\n        position: relative;\n        font-family: inherit;\n        font-size: 1.8em;\n        display: inline-block;\n        transform: rotate(0deg);\n        transform-origin: center;\n      }\n\n      span {\n        display: block;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  ComponentInterface,\n  State,\n  Watch,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, ControlValidity } from '../../interface';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils';\nimport { focusVisible } from '../../utils/focus-visible';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n  tag: 'nano-checkbox',\n  styleUrl: 'checkbox.scss',\n  scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n  private inputId = `nano-cb-${checkboxIds++}`;\n  private input: HTMLInputElement;\n  private shouldReport = false;\n\n  @Element() private host: HTMLNanoCheckboxElement;\n\n  @State() _invalid = false;\n  @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n  /** @internal */\n  @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n  /**\n   * checked property that can be used to get/set the value. accepts only boolean values\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  @Watch('checked')\n  async handleCheckedChange() {\n    this.input.checked = this.checked;\n\n    if (this.inputType === 'radio' && this.name && this.checked) {\n      let form = this.host.closest('form');\n      let radios: Element[];\n      if (form) {\n        radios = Array.from(\n          form.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        );\n      } else {\n        radios = Array.from(\n          document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\n        ).filter((radio) => !radio.closest('form'));\n      }\n      radios.map((el: HTMLNanoCheckboxElement) => {\n        if (el !== this.host) el.checked = false;\n      });\n    }\n    this.nanoChange.emit({ value: this.value, checked: this.checked });\n  }\n\n  /**\n   * If `true`, the user cannot interact with the checkbox.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n   * it's only present when `checked` is true.\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Set to true to make the field required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Controls the underlying field type and style.\n   */\n  @Prop({ reflect: true }) type:\n    | 'radio'\n    | 'checkbox'\n    | 'tag'\n    | 'segment'\n    | 'segment-pill' = 'checkbox';\n\n  @Watch('type')\n  typeChange() {\n    if (this.type === 'checkbox' || this.type === 'tag')\n      this.inputType = 'checkbox';\n    else this.inputType = 'radio';\n  }\n\n  /**\n   * label property that can be used to set the label text. Alternatively you may use a label slot.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n  @Watch('indeterminate')\n  handleIndeterminateChange() {\n    this.checked = false;\n    this.input.indeterminate = this.indeterminate;\n  }\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    if (!this.shouldReport) return false;\n    return !this.input.validity.valid;\n  }\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emited when the checkbox is toggled\n   */\n  @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  /**\n   * Emited when the checkbox is focused\n   */\n  @Event() nanoFocus: EventEmitter;\n\n  /**\n   * Emited when the checkbox is blurred\n   */\n  @Event() nanoBlur: EventEmitter;\n\n  // public methods\n\n  /**\n   * Returns the native input control\n   */\n  @Method()\n  async getInputElement() {\n    if (this.input) return this.input;\n  }\n\n  /**\n   * Get the current state of the control.\n   * @param validateFirst - perform validation first before reporting\n   * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n   */\n  @Method()\n  async reportValidity(\n    validateFirst: boolean = false\n  ): Promise<ControlValidity> {\n    if (validateFirst) {\n      this.shouldReport = true;\n      this._invalid = !this.input.reportValidity();\n    }\n    return {\n      isValid: !this.invalid,\n      errorMessage: this.input.validationMessage,\n    };\n  }\n\n  /**\n   * Sets a custom validation message.\n   * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n   */\n  @Method()\n  async setError(message: string) {\n    if (!this.input) return;\n\n    this._invalid = !!message.length;\n    this.input.setCustomValidity(message);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus() {\n    if (this.input) {\n      this.input.focus();\n      focusVisible.force(this.input);\n    }\n  }\n\n  /**\n   * Removes focus from the checkbox.\n   */\n  @Method()\n  async removeFocus() {\n    if (this.input) {\n      this.input.blur();\n      focusVisible.force(this.input, false);\n    }\n  }\n\n  // private handlers\n\n  private handleInvalid = (ev: Event) => {\n    this.shouldReport = true;\n    this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n  };\n\n  private handleChange = (ev: InputEvent) => {\n    this.checked = (ev.target as HTMLInputElement).checked;\n    this.indeterminate = false;\n  };\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n    this.nanoFocus.emit();\n  };\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n    this.nanoBlur.emit();\n  };\n\n  /* Although many radio components can be 'checked',\n  the underlying control may not be. Check */\n  private isRadioChecked() {\n    setTimeout(() => (this.checked = this.input.checked), 20);\n  }\n\n  // Stencil hooks\n\n  componentWillLoad() {\n    this.typeChange();\n  }\n\n  componentDidLoad() {\n    this.input.indeterminate = this.indeterminate;\n    this.isRadioChecked();\n    focusVisible.observe(this.input);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.input);\n  }\n\n  render() {\n    const labelId = this.inputId + '-lbl';\n    let isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n    return (\n      <Host\n        class={{ ...createColorClasses(this.color) }}\n        dir={isRtl ? 'rtl' : null}\n      >\n        <label\n          class={{\n            nanocb: true,\n            'nanocb--checked': this.checked,\n            'nanocb--invalid': this.invalid,\n            'nanocb--disabled': this.disabled,\n            'nanocb--focused': this.hasFocus,\n            'nanocb--indeterminate': this.indeterminate,\n          }}\n          htmlFor={this.inputId}\n        >\n          <input\n            type={this.inputType}\n            name={this.name}\n            required={this.required}\n            checked={this.checked}\n            disabled={this.disabled}\n            value={this.value}\n            aria-labelledby={labelId}\n            onBlur={this.handleBlur}\n            onFocus={this.handleFocus}\n            onChange={this.handleChange}\n            ref={(input) => (this.input = input)}\n            id={this.inputId}\n            onInvalid={this.handleInvalid}\n          />\n          <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n          <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n            {this.label && !!this.label.length && <span>{this.label}</span>}\n            <span hidden={this.label && !!this.label.length}>\n              <slot />\n            </span>\n          </div>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/p-44c08842.system.entry.js

@@ -1,5 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(t,n,e,i){function a(t){return t instanceof e?t:new e((function(n){n(t)}))}return new(e||(e=Promise))((function(e,o){function r(t){try{s(i.next(t))}catch(n){o(n)}}function l(t){try{s(i["throw"](t))}catch(n){o(n)}}function s(t){t.done?e(t.value):a(t.value).then(r,l)}s((i=i.apply(t,n||[])).next())}))};var __generator=this&&this.__generator||function(t,n){var e={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,r;return r={next:l(0),throw:l(1),return:l(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function l(t){return function(n){return s([t,n])}}function s(r){if(i)throw new TypeError("Generator is already executing.");while(e)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:e.label++;return{value:r[1],done:false};case 5:e.label++;a=r[1];r=[0];continue;case 7:r=e.ops.pop();e.trys.pop();continue;default:if(!(o=e.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){e=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){e.label=r[1];break}if(r[0]===6&&e.label<o[1]){e.label=o[1];o=r;break}if(o&&e.label<o[2]){e.label=o[2];e.ops.push(r);break}if(o[2])e.ops.pop();e.trys.pop();continue}r=n.call(t,e)}catch(l){r=[6,l];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
-/*!
- * Web Components for Nanopore digital Web Apps
- */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-6eb25600.system.js","./p-ef053a2f.system.js","./p-1d13dbdf.system.js","./p-89edc042.system.js"],(function(t){"use strict";var n,e,i,a,o,r,l,s,p,c,u;return{setters:[function(t){n=t.r;e=t.c;i=t.h;a=t.e;o=t.g},function(t){r=t.r},function(t){l=t.F;s=t.a},function(t){p=t.a},function(t){c=t.c},function(t){u=t.c}],execute:function(){var d='.sc-nano-input-h{-webkit-box-sizing:border-box;box-sizing:border-box}*.sc-nano-input,*.sc-nano-input::before,*.sc-nano-input::after{-webkit-box-sizing:border-box;box-sizing:border-box}[hidden].sc-nano-input{display:none !important}[disabled].sc-nano-input-h:not([disabled=false]){opacity:0.5}.form-ctrl.sc-nano-input{min-width:100%;display:block}.form-ctrl.has-helper-end.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;gap:1rem;opacity:0}.form-ctrl.has-helper-end.is-ready.sc-nano-input{opacity:1}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__wrapper.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 100%;flex:1 1 100%}.form-ctrl.has-helper-end.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:none}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper-end.sc-nano-input{display:block}.form-ctrl.has-helper-end.has-enough-width.sc-nano-input .form-ctrl__helper.sc-nano-input{display:none}.form-ctrl__wrapper.sc-nano-input{display:block}label.sc-nano-input,.form-ctrl__more.sc-nano-input,.form-ctrl__error.sc-nano-input,.form-ctrl__helper.sc-nano-input{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}label.visually-hide.sc-nano-input,.form-ctrl__more.visually-hide.sc-nano-input,.form-ctrl__error.visually-hide.sc-nano-input,.form-ctrl__helper.visually-hide.sc-nano-input{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.form-ctrl__float-label.sc-nano-input{padding-top:0;padding-bottom:0;-webkit-padding-end:0;padding-inline-end:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);color:var(--label-color);position:absolute;font-size:1.15em;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transform-origin:top left;transform-origin:top left;top:50%;-webkit-transition:0.125s ease-in;transition:0.125s ease-in;opacity:1}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input{-webkit-transform:translateY(-110%);transform:translateY(-110%);font-size:0.8em;opacity:0.7}.form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input,.has-value.sc-nano-input-h .form-ctrl__float-label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{opacity:1}.form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:50%}.has-focus.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.has-value.sc-nano-input-h .form-ctrl__textarea.sc-nano-input .form-ctrl__float-label.sc-nano-input{top:0;-webkit-transform:translateY(38%);transform:translateY(38%)}.form-ctrl__label.sc-nano-input{color:var(--label-color);font-size:var(--label-font-size);padding-bottom:var(--padding-bottom);line-height:1;display:-webkit-box;display:-ms-flexbox;display:flex}.form-ctrl__label.sc-nano-input .form-ctrl__label-wrap.sc-nano-input{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:5px;margin-inline-end:5px;margin-bottom:0;-webkit-margin-start:0;margin-inline-start:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition:0.3s ease opacity;transition:0.3s ease opacity;font-size:0.9em}.form-ctrl__label.sc-nano-input .form-ctrl__label-charcount.sc-nano-input{margin-left:unset;margin-right:unset;margin-top:0;-webkit-margin-end:0;margin-inline-end:0;margin-bottom:0;-webkit-margin-start:auto;margin-inline-start:auto;font-size:0.9em;opacity:0.5}.has-value.sc-nano-input-h .form-ctrl__label.sc-nano-input .form-ctrl__label-placeholder.sc-nano-input{opacity:0.5}.has-focus.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--focus)}.is-invalid.sc-nano-input-h .form-ctrl__label.sc-nano-input{color:var(--label-color--invalid)}.has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:0;-webkit-transition:opacity 0.125s ease-in;transition:opacity 0.125s ease-in}.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__multi-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .select__native-input.sc-nano-input,.has-focus.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input,.has-value.sc-nano-input-h .has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{opacity:1}.form-ctrl__more.sc-nano-input{height:1em;position:relative;margin-left:unset;margin-right:unset;margin-top:4px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:3px;margin-inline-start:3px;margin-bottom:var(--padding-bottom)}.form-ctrl__helper.sc-nano-input,.form-ctrl__error.sc-nano-input{top:0;left:0;position:absolute;font-size:var(--invalid-msg-font-size);line-height:1.2;-webkit-transition:0.3s ease-out opacity;transition:0.3s ease-out opacity}.form-ctrl__helper.sc-nano-input{font-style:italic;color:var(--help-msg-color)}[show-inline-error].sc-nano-input-h:not([show-inline-error=false]).is-invalid .form-ctrl__helper.sc-nano-input{opacity:0}.form-ctrl__helper-end.sc-nano-input{-webkit-box-flex:1;-ms-flex:1 1 30%;flex:1 1 30%;min-width:150px;font-size:var(--invalid-msg-font-size);color:var(--help-msg-color);font-style:italic}.form-ctrl__error.sc-nano-input{opacity:0;color:var(--invalid-msg-color);font-stretch:condensed}.is-invalid.sc-nano-input-h .form-ctrl__error.sc-nano-input{opacity:1}.form-ctrl__input.sc-nano-input{font-family:inherit;font-size: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;border-radius:var(--input-border-radius);width:100%;padding-top:0 !important;padding-bottom:0 !important;padding-left:0 !important;padding-right:0 !important;position:relative;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;background:var(--input-bg-color);border:var(--input-border-style);border-width:var(--input-border-width);font-size:var(--input-font-size);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--focus);border:var(--input-border-style--focus);border-width:var(--input-border-width);-webkit-padding-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important;padding-inline-start:calc(var(--input-border-hint-width) - var(--input-border-width)) !important}.is-invalid.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.is-invalid.has-focus.sc-nano-input-h .form-ctrl__input.sc-nano-input{background:var(--input-bg-color--invalid);border:var(--input-border-style--invalid-focus);border-width:var(--input-border-width);-webkit-border-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);border-inline-start:var(--input-border-style--invalid-focus) var(--input-border-hint-width);-webkit-padding-start:0 !important;padding-inline-start:0 !important}.form-ctrl__input-wrap.sc-nano-input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-flex:1;-ms-flex:1;flex:1}.form-ctrl__clear-btn.sc-nano-input,.form-ctrl__slot-end.sc-nano-input,.form-ctrl__slot-start.sc-nano-input,.form-ctrl__slot-value-end.sc-nano-input{--nano-icon-size:1.4em;margin-top:0;margin-bottom:0;margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:0;margin-inline-end:0;font-size:1em;border:0;outline:none;background-color:transparent;background-repeat:no-repeat;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:auto}.has-float-label.sc-nano-input .form-ctrl__slot-start.sc-nano-input{display:none}.form-ctrl__slot-start.sc-nano-input-s>*,.form-ctrl__slot-start .sc-nano-input-s>*,.form-ctrl__slot-end.sc-nano-input-s>*,.form-ctrl__slot-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{--nano-icon-size:1.4em;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);font-size:1em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;z-index:1}.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-start .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-end .sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input-s>*,.sc-nano-input-h[disabled]:not([disabled=false]) .form-ctrl__slot-value-end .sc-nano-input-s>*,[disabled].sc-nano-input-h:not([disabled=false]) .form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__slot-value-end.sc-nano-input-s>*,.form-ctrl__slot-value-end .sc-nano-input-s>*,.form-ctrl__slot-value-end.sc-nano-input *.sc-nano-input{pointer-events:none}.form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color);padding:0;opacity:0;width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden}.is-invalid.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{color:var(--clear-btn-color--invalid)}.has-value.sc-nano-input-h .form-ctrl__clear-btn.sc-nano-input{padding-top:0;padding-bottom:0;padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);opacity:1;width:auto}.form-ctrl__clear-btn.sc-nano-input:hover{color:var(--clear-btn-color--hover)}.sc-nano-input-h{--placeholder-color:var(--nano-input-placeholder-color, initial);--placeholder-font-style:var(--nano-input-placeholder-style, initial);--placeholder-font-weight:var(--nano-input-placeholder-weight, initial);--placeholder-opacity:var(--nano-input-placeholder-opacity, 0.5);--padding-top:var(--nano-input-padding-top, var(--nano-input-padding, 8px));--padding-end:var(--nano-input-padding-end, var(--nano-input-padding, 8px));--padding-bottom:var(--nano-input-padding-bottom, var(--nano-input-padding, 8px));--padding-start:var(--nano-input-padding-start, var(--nano-input-padding, 8px));--color-invalid:var(--nano-color-danger-rgb, 239, 65, 53);--color--focus-rgb:var(\n      --nano-color-base-rgb,\n      var(--nano-color-primary-rgb, 0, 116, 149)\n    );--input-font-size:var(--nano-input-font-size, 0.87em);--input-text-color:var(--nano-input-text-color, #4a4a4a);--input-border-width:var(--nano-input-border-width, 1px);--input-border-hint-width:3px;--input-border-color:var(--nano-input-border-color, #e4e6e8);--input-border-radius:var(--nano-input-border-radius, 0);--input-border-style:var(--nano-input-border-style, solid) var(--nano-input-border-color, #e4e6e8);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--focus, #90c6e7);--input-border-style--invalid:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #e4e6e8);--input-border-style--invalid-focus:var(--nano-input-border-style, solid) var(--nano-input-border-color--invalid, #ef4135);--input-bg-color:var(--nano-input-background-color, #fff);--input-bg-color--focus:var(--input-bg-color);--input-bg-color--invalid:var(--nano-input-background-color, white);--invalid-msg-color:rgba(var(--color-invalid), 1);--invalid-msg-font-size:var(--nano-input-help-font-size, 0.75em);--help-msg-color:var(--nano-input-help-color, #616d6e);--clear-btn-color:var(--nano-clear-btn-color, rgba(0, 0, 0, 0.3));--clear-btn-color--hover:rgba(var(--color--focus-rgb), 1);--clear-btn-color--invalid:rgba(var(--color-invalid), 1);--label-color:var(--nano-input-label-color, "currentColor");--label-color--focus:var(--label-color);--label-color--invalid:var(--nano-input-label-color-invalid, "currentColor");--label-font-size:var(--nano-input-label-color, 1em);--multi-input-value-bg:var(--nano-input-tag-bg, 186, 220, 240);--multi-input-value-text-color:var(--nano-input-tag-color, #455556);--multi-input-value-border:var(--nano-input-tag-color, #badcf0);position:relative;width:100%;padding:0 !important;color:currentColor;display:block}.nano-color.sc-nano-input-h{color:var(--nano-color-base);--input-border-style--focus:var(--nano-input-border-style, solid) var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5))}.input__native-ctrl.sc-nano-input{font-family:inherit;font-size: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;padding-left:unset;padding-right:unset;padding-top:0;padding-bottom:0;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end);border-radius:var(--input-border-radius);text-overflow:ellipsis;color:var(--input-text-color);display:inline-block;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:100%;max-height:100%;border:0;outline:none;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;resize:none;overflow:hidden;line-height:2.5em;min-height:2.5em}.has-float-label.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:2.1em;min-height:2.1em;padding-top:1.4em}.input__native-ctrl.sc-nano-input::-webkit-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input:-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-ms-input-placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::placeholder{color:var(--placeholder-color);font-family:inherit;font-style:var(--placeholder-font-style);font-weight:var(--placeholder-font-weight);opacity:var(--placeholder-opacity);line-height:inherit;min-height:inherit}.input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:2.8em;text-overflow:ellipsis}.input__native-ctrl.sc-nano-input:-webkit-autofill{background-color:transparent}.input__native-ctrl.sc-nano-input::-webkit-search-decoration,.input__native-ctrl.sc-nano-input::-webkit-search-cancel-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-button,.input__native-ctrl.sc-nano-input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.input__native-ctrl.sc-nano-input:invalid{-webkit-box-shadow:none;box-shadow:none}.input__native-ctrl.sc-nano-input::-ms-clear,.input__native-ctrl.sc-nano-input::-ms-reveal{display:none}.input__native-ctrl.input__resizable.sc-nano-input{resize:vertical;overflow:auto}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{line-height:1.5em;padding-top:var(--padding-top);padding-bottom:0.25em;white-space:pre-wrap}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-webkit-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-moz-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input:-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::-ms-input-placeholder{line-height:1.5em}.form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input::placeholder{line-height:1.5em}.has-float-label.sc-nano-input .form-ctrl__textarea.sc-nano-input .input__native-ctrl.sc-nano-input{padding-top:1.75em}[readonly].sc-nano-input-h:not([readonly=false]) .input__native-ctrl.sc-nano-input{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}';var h=0;var f=t("nano_input",function(){function t(t){var i=this;n(this,t);this.nanoInput=e(this,"nanoInput",7);this.nanoChange=e(this,"nanoChange",7);this.nanoBlur=e(this,"nanoBlur",7);this.nanoFocus=e(this,"nanoFocus",7);this.nanoDidLoad=e(this,"nanoDidLoad",7);this.nanoDidUnload=e(this,"nanoDidUnload",7);this.nanoValidate=e(this,"nanoValidate",7);this.inputId="nano-input-"+h++;this.didBlurAfterEdit=false;this.rtl=false;this.charCount=0;this.hasRendered=false;this.hasFocus=false;this.hasLabelSlot=false;this.hasHelperSlot=false;this.hasHelperEndSlot=false;this.errorMessage="";this.datalist=null;this._invalid=false;this.autocapitalise="none";this.autocomplete="off";this.autocorrect="off";this.autofocus=false;this.clearInput=false;this.debounce=0;this.disabled=false;this.validateOn="submit";this.showInlineError=true;this.hideLabel=false;this.floatLabel=false;this.name=this.inputId;this.readonly=false;this.required=false;this.spellcheck=false;this.type="text";this.value="";this.resize="auto";this.rows=2;this.showCharCount=false;this.validate=function(t){if(i.validateOn==="submitThenDirty")i.validateOn="dirty";if(!i.nativeInput.validity.valid){if(i.showInlineError){if(t)t.preventDefault();i.errorMessage=i.nativeInput.validationMessage}i._invalid=true}else i._invalid=false;i.nanoValidate.emit({isValid:!i._invalid,errorMessage:i.nativeInput.validationMessage,originalEvent:t})};this.onInput=function(t){var n=t.target;i.value=(n===null||n===void 0?void 0:n.value)||"";i.nanoInput.emit(t)};this.onBlur=function(){i.hasFocus=false;i.focusChanged();if(i.validateOn==="dirty")i.validate();i.nanoBlur.emit()};this.onFocus=function(){i.hasFocus=true;i.focusChanged();i.nanoFocus.emit()};this.onKeydown=function(){if(i.shouldClearOnEdit()){if(i.didBlurAfterEdit&&i.hasValue()){i.clearTextInput()}i.didBlurAfterEdit=false}};this.clearTextInput=function(t){if(i.clearInput&&!i.readonly&&!i.disabled&&t){t.preventDefault();t.stopPropagation()}i.value="";i.nativeInput.value="";var n=new window.Event("change");i.nativeInput.dispatchEvent(n)}}Object.defineProperty(t.prototype,"nativeInputWrap",{get:function(){return this._nativeInputWrap},set:function(t){if(this._nativeInputWrap===t)return;this._nativeInputWrap=t;this.setDataListOpts()},enumerable:false,configurable:true});t.prototype.setDataListOpts=function(){if(!this.datalist)return;var t=this.datalist.dropDownConfig||{};this.datalist.dropDownConfig=Object.assign(Object.assign({},t),{skidding:-1,tetherTo:this.nativeInputWrap})};Object.defineProperty(t.prototype,"invalid",{get:function(){return this._invalid},enumerable:false,configurable:true});t.prototype.shouldValidate=function(){var t=this;if(!this.hasRendered)return;setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.valueChanged=function(){var t=this;this.nanoChange.emit({value:this.value});this.charCount=this.value.length;if(this.type==="textarea"&&this.resize==="auto"){this.nativeInput.style.height="auto";if(this.value.length)this.nativeInput.style.height=this.nativeInput.scrollHeight+"px"}setTimeout((function(){if(t.validateOn==="dirty")t.validate()}),20)};t.prototype.debounceChanged=function(){this.nanoChange=p(this.nanoChange,this.debounce)};t.prototype.reportValidity=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(t)this.validate();return[2,{isValid:!this._invalid,errorMessage:this.nativeInput.validationMessage}]}))}))};t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.nativeInput){this.nativeInput.focus();this.nativeInput.click()}return[2]}))}))};t.prototype.getInputElement=function(){return Promise.resolve(this.nativeInput)};t.prototype.showError=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.nativeInput){this.nativeInput.setCustomValidity(t);this.validate()}return[2]}))}))};t.prototype.onReset=function(t){var n=this.form?document.querySelector("#"+this.form):this.el.closest("form");if(!n||t.target!==this.el.closest("form"))return;this.value=""};t.prototype.handleBlur=function(t){var n=this;if(!this.hasFocus)return;var e=t;var i;r((function(){if(e.key){if(e.key!=="Tab")return;i=document.activeElement}else i=t.target;if(c(n.el.tagName.toLowerCase(),i)!==n.el){n.onBlur()}}))};t.prototype.shouldClearOnEdit=function(){var t=this,n=t.type,e=t.clearOnEdit;return e===undefined?n==="password":e};t.prototype.getValue=function(){return this.value||""};t.prototype.focusChanged=function(){if(!this.hasFocus&&this.shouldClearOnEdit()&&this.hasValue()){this.didBlurAfterEdit=true}};t.prototype.hasValue=function(){return this.getValue().length>0};t.prototype.slotChangeObserver=function(){var t=this;if(this.mo)this.mo.disconnect();var n=this.mo=new MutationObserver((function(){return t.processSlottedContent()}));n.observe(this.el,{childList:true,subtree:true})};t.prototype.processSlottedContent=function(){this.hasLabelSlot=!!this.el.querySelectorAll('[slot="label"]');this.hasHelperSlot=!!this.el.querySelector('[slot="helper"]');this.hasHelperEndSlot=!!this.el.querySelector('[slot="helper-end"]');this.datalist=this.el.querySelector("nano-datalist:not([slot])");if(!!this.el.querySelector('[slot="inline-button"]')){console.warn("The `inline-button` slot was renamed to `end` in v2 - please update your code",this.el)}if(!!this.el.querySelector('[slot="legacy"]')){console.warn("The `legacy` slot has been removed. Please update your code",this.el)}};t.prototype.connectedCallback=function(){this.debounceChanged();{this.el.dispatchEvent(new CustomEvent("nanoDidLoad",{detail:this.el}))}};t.prototype.disconnectedCallback=function(){{document.dispatchEvent(new CustomEvent("nanoDidUnload",{detail:this.el}))}if(this.mo)this.mo.disconnect()};t.prototype.componentDidLoad=function(){var t=this;this.slotChangeObserver();this.hasRendered=true;if(this.autofocus)setTimeout((function(n){return t.setFocus()}),300)};t.prototype.componentWillLoad=function(){this.processSlottedContent()};t.prototype.render=function(){var t=this;var n=this.getValue();var e=this.inputId+"-lbl";var o=this.showInlineError||this.hasHelperSlot?this.inputId+"-more":"";var r=this.hasHelperEndSlot?this.inputId+"-helper":"";this.rtl=this.el.ownerDocument.dir==="rtl";var p=function(t){var n=t.el,e=t.floatLabel,i=t.label,a=t.errorMessage,o=t.type,r=t.showInlineError,l=t.hasHelperSlot,s=t.hasLabelSlot,p=t.hideLabel,c=t.placeholder,u=t.maxlength,d=t.charCount,h=t.showCharCount,f=t.rtl,b=t.hasHelperEndSlot;return{el:n,floatLabel:e,label:i,errorMessage:a,type:o,showInlineError:r,hasHelperSlot:l,hasLabelSlot:s,hideLabel:p,placeholder:c,maxlength:u,charCount:d,showCharCount:h,rtl:f,hasHelperEndSlot:b}}(this);var c=Object.assign(Object.assign({},p),{labelId:e,moreId:o,helperEndId:r,hasValue:this.hasValue(),controlId:this.inputId});var d=function(n){var e=n.clearInput,i=n.readonly,a=n.disabled;return{clearInput:e,readonly:i,disabled:a,clearControl:t.clearInput}}(this);return i(a,{"aria-disabled":this.disabled?"true":null,dir:this.rtl?"rtl":null,class:Object.assign(Object.assign({},u(this.color)),{"has-value":this.hasValue(),"has-focus":this.hasFocus,"is-invalid":this._invalid})},i(l,Object.assign({},c),i(s,Object.assign({},d,{onClearText:this.clearTextInput,control:this.el,ref:function(n){return t.nativeInputWrap=n}}),this.type!=="textarea"&&i("input",{id:this.inputId,class:"input__native-ctrl",ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o+" "+r,disabled:this.disabled,accept:this.accept,autoCapitalize:this.autocapitalise,autoComplete:this.autocomplete,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,min:this.min,max:this.max,minLength:this.minlength,maxLength:this.maxlength,multiple:this.multiple,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,step:this.step,size:this.size,type:this.type,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate}),this.type==="textarea"&&i("textarea",{rows:this.floatLabel?1:this.rows,id:this.inputId,class:{"input__native-ctrl":true,input__resizable:this.resize==="true"},ref:function(n){return t.nativeInput=n},"aria-labelledby":e+" "+o+" "+r,disabled:this.disabled,autoCapitalize:this.autocapitalise,autoCorrect:this.autocorrect,autoFocus:this.autofocus,inputMode:this.inputmode,form:this.form,minLength:this.minlength,maxLength:this.maxlength,name:this.name,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,spellcheck:this.spellcheck,value:n,onInput:this.onInput,onChange:this.onInput,onFocus:this.onFocus,onKeyDown:this.onKeydown,onInvalid:this.validate})),i("slot",null)))};Object.defineProperty(t.prototype,"el",{get:function(){return o(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{datalist:["setDataListOpts"],minlength:["shouldValidate"],maxlength:["shouldValidate"],min:["shouldValidate"],max:["shouldValidate"],required:["shouldValidate"],disabled:["shouldValidate"],validateOn:["shouldValidate"],readonly:["shouldValidate"],pattern:["shouldValidate"],inputmode:["shouldValidate"],value:["valueChanged"],debounce:["debounceChanged"]}},enumerable:false,configurable:true});return t}());f.style=d}}}));
-//# sourceMappingURL=p-44c08842.system.entry.js.map