@nanoporetech-digital/components 2.4.0 → 2.7.0

package/dist/nano-components/p-4ee978ff.entry.js.map

@@ -0,0 +1 @@
+{"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","[object Object]","hostRef","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","async","listBox","setFocus","inputClick","manageDropdownDisplay","inputKeydown","ignoreKeys","includes","key","typeToSelectTimeout","test","clearTimeout","window","setTimeout","setOptStartsWith","optionKeyDown","connectedInput","focus","deleteKeys","exactMatch","debounce","bind","allOptEles","opts","_a","value","forEach","opt","dropDownConfig","ddc","Object","assign","activeOptions","writeTask","nanoDropdown","setAttribute","toString","nanoInput","host","getInputElement","input","HTMLElement","length","mo","MutationObserver","processSlottedContent","observe","childList","subtree","disconnect","undefined","flatMap","option","i","label","createElement","ariaPosinset","ariaSetsize","textContent","slot","append","dwConfig","closeOnSelect","autocompleteType","readonly","placement","tetherTo","readOnly","newInput","oldInput","removeEventListener","inputLabel","removeAttribute","addEventListener","labels","item","c","val","optIds","hidden","isSelected","push","hasNoResult","nanoOptionsUpdated","emit","dropwdownOpen","find","nanoSelected","filter","nanoDeselect","nanoSelect","defaultPrevented","event","Event","dispatchEvent","attrFind","toFind","toLowerCase","substring","foundEle","trim","filterMeta","Array","from","querySelectorAll","valStr","activeEles","indexOf","watchInputChange","manageSlotChangeListener","openWatcher","console","warn","h","Host","role","aria-owns","join","aria-label","ref","el","dialogTitle","class","dlist__dropdown","dlist--isfiltered","onNanoAfterShow","onNanoAfterHide","_","dlist__menu","dlist__menu--open","tabIndex","onNanoSelect","onKeyDown","name","aria-live","menuCss","CANSHADOW","head","attachShadow","Menu","ignoreMouseEvents","_hasFocus","handleFocus","setActiveFocusItem","selectedItem","getItems","nanoFocus","handleClick","target","handleKeyDown","ignoreMouseTimeout","activeItem","click","items","index","preventDefault","scrollIntoView","block","shadowRoot","getTextContent","handleMouseOver","hasFocus","menu","preventScroll","blur","tagName","map","opened","ctx","getDirectChildren","activeElement","getActiveElement","getAttribute","classList","contains","kev","found","composedPath","resetActiveItem","nanoBlur","legacy","onClick","onMouseOver","onFocus","part","menu--has-focus","optionCss","Option","optId","labelContent","valueChanged","labelChanged","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.type === 'select' || this.shouldFocus) {\n      this.shouldFocus = false;\n      this.listBox.setFocus();\n    }\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    const activeElement = getActiveElement();\n    return this.getItems.find((i) => i.selected || i === activeElement);\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-d9f2dda5.entry.js → p-58d7f10f.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as i,c as t,h as e,e as s,g as n}from"./p-ab5813a7.js";import{c as o,r}from"./p-289aa03f.js";import{d as h}from"./p-1da5f8df.js";function a(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const o=s.left+n.pageXOffset;const r=s.top+n.pageYOffset;const h=e.pageX-o;const a=e.pageY-r;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const d=':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{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';let l=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();a(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);r((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);r((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);r((()=>this.shouldAnimate=true))}};this.handlePositionChange=h(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let o=s;let h=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const d=()=>{h+=1/e;o=a(h,s,n,t);if(i>s&&o>=i||i<s&&o<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=o;r(d)};this.shouldAnimate=false;this.isAnimating=true;r(d)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){r((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const o="auto";if(this.primary==="end"){i[t]=`${o} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${o}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
-//# sourceMappingURL=p-d9f2dda5.entry.js.map
+import{r as i,c as t,h as e,e as s,g as n}from"./p-ab5813a7.js";import{c as o,r}from"./p-289aa03f.js";import{d as h}from"./p-1da5f8df.js";function a(i,t){function e(e){const s=i.getBoundingClientRect();const n=i.ownerDocument.defaultView;const o=s.left+n.pageXOffset;const r=s.top+n.pageYOffset;const h=e.pageX-o;const a=e.pageY-r;t(h,a)}function s(){document.removeEventListener("pointermove",e);document.removeEventListener("pointerup",s)}document.addEventListener("pointermove",e,{passive:true});document.addEventListener("pointerup",s)}const d=':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{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';let l=class{constructor(e){i(this,e);this.nanoReposition=t(this,"nanoReposition",7);this.nanoDragging=t(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=i=>{if(this.disabled){return}i.preventDefault();a(this.host,((i,t)=>{let e=this.vertical?t:i;this.nanoDragging.emit(e);if(this.primary==="end"){e=this.size-e}if(this.snap){const i=this.snap.split(" ");i.forEach((i=>{let t;if(i.endsWith("%")){t=this.size*(parseFloat(i)/100)}else{t=parseFloat(i)}if(e>=t-this.snapThreshold&&e<=t+this.snapThreshold){e=t}}))}this.shouldAnimate=false;this.position=o(this.pixelsToPercentage(e),0,100);r((()=>this.shouldAnimate=true))}))};this.handleKeyDown=i=>{if(this.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*(this.primary==="end"?-1:1);i.preventDefault();if(i.key==="ArrowLeft"&&!this.vertical||i.key==="ArrowUp"&&this.vertical){t-=e}if(i.key==="ArrowRight"&&!this.vertical||i.key==="ArrowDown"&&this.vertical){t+=e}if(i.key==="Home"){t=this.primary==="end"?100:0}if(i.key==="End"){t=this.primary==="end"?0:100}this.shouldAnimate=false;this.position=o(t,0,100);r((()=>this.shouldAnimate=true))}};this.handleResize=()=>{if(!this.didLoad||this.isAnimating)return;if(this.primary){this.shouldAnimate=false;this.position=this.pixelsToPercentage(this.cachedPositionInPixels);r((()=>this.shouldAnimate=true))}};this.handlePositionChange=h(this.handlePositionChange.bind(this),100)}get size(){const{width:i,height:t}=this.host.getBoundingClientRect();return this.vertical?t:i}get shouldAnimate(){return this.didLoad&&this._shouldAnimate}set shouldAnimate(i){this._shouldAnimate=i}get position(){return this._position}set position(i){i=Math.min(Math.max(i,0),100);if(isNaN(i)||i===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(i);return}this._position=i}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}async getPercentageToPixels(i){return this.percentageToPixels(i)}async getPixelsToPercentage(i){return this.pixelsToPercentage(i)}animatePosition(i){if(this.isAnimating)return;const t=this.animationDuration;const e=60;const s=this.position;const n=i-s;let o=s;let h=0;function a(i,t,e,s){if((i/=s/2)<1)return e/2*i*i+t;else return-e/2*(--i*(i-2)-1)+t}const d=()=>{h+=1/e;o=a(h,s,n,t);if(i>s&&o>=i||i<s&&o<=i){this.position=i;this.shouldAnimate=true;this.isAnimating=false;return}this.position=o;r(d)};this.shouldAnimate=false;this.isAnimating=true;r(d)}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}attachRO(){this.detachRO();this.ro=new ResizeObserver((()=>this.handleResize()));this.ro.observe(this.host)}detachRO(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined}componentDidLoad(){if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((()=>this.didLoad=true))}connectedCallback(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()}disconnectedCallback(){this.detachRO()}componentDidRender(){r((()=>{if(typeof this.position==="undefined"){this.position=50}}))}render(){if(typeof this.position==="undefined")return;const i={};const t=this.vertical?"gridTemplateRows":"gridTemplateColumns";const n=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;const o="auto";if(this.primary==="end"){i[t]=`${o} var(--divider-width) ${n}`}else{i[t]=`${n} var(--divider-width) ${o}`}return e(s,{style:i},e("div",{part:"panel start",class:"start"},e("slot",{name:"start"})),e("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},e("slot",{name:"handle"},!this.disabled&&this.vertical?e("nano-icon",{slot:"handle",name:"solid/grip-lines"}):e("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),e("div",{part:"panel end",class:"end"},e("slot",{name:"end"})))}get host(){return n(this)}static get watchers(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}}};l.style=d;export{l as nano_split_pane};
+//# sourceMappingURL=p-58d7f10f.entry.js.map

package/dist/nano-components/p-58d7f10f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","[object Object]","hostRef","this","isAnimating","didLoad","_shouldAnimate","vertical","disabled","snapThreshold","animationDuration","handleDrag","e","preventDefault","host","newPositionInPixels","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","width","height","sa","_position","pos","Math","min","max","isNaN","animatePosition","percentageToPixels","positionInPixels","nanoReposition","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","detachRO","ro","ResizeObserver","observe","unobserve","undefined","handlePositionInPixelsChange","setTimeout","attachRO","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  height: 100%;\n  left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  height: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      raf(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    raf(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      raf(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    raf(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/nano-components/{p-20db18f3.entry.js → p-5a315696.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as e,c as o,h as n,e as c,g as a}from"./p-ab5813a7.js";import{c as t}from"./p-d99437a6.js";import{f as i}from"./p-f8f89998.js";const 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  #fac6c3);--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}';let r=0;let b=class{constructor(n){e(this,n);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId=`nano-cb-${r++}`;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=e=>{this.shouldReport=true;this._invalid=!e.target.validity.valid};this.handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()}}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){let e=this.host.closest("form");let o;if(e){o=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{o=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form")))}o.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){if(!this.shouldReport)return false;return!this.input.validity.valid}async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e){if(!this.input)return;this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();i.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();i.force(this.input,false)}}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o=this.host.ownerDocument.dir==="rtl";return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("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},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("span",{hidden:this.label&&!!this.label.length},n("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=s;export{b as nano_checkbox};
-//# sourceMappingURL=p-20db18f3.entry.js.map
+import{r as e,c as o,h as n,e as c,g as a}from"./p-ab5813a7.js";import{c as t}from"./p-d99437a6.js";import{f as i}from"./p-f8f89998.js";const 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}';let r=0;let b=class{constructor(n){e(this,n);this.nanoChange=o(this,"nanoChange",7);this.nanoFocus=o(this,"nanoFocus",7);this.nanoBlur=o(this,"nanoBlur",7);this.inputId=`nano-cb-${r++}`;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=e=>{this.shouldReport=true;this._invalid=!e.target.validity.valid};this.handleChange=e=>{this.checked=e.target.checked;this.indeterminate=false};this.handleFocus=()=>{this.hasFocus=true;this.nanoFocus.emit()};this.handleBlur=()=>{this.hasFocus=false;this.nanoBlur.emit()}}async handleCheckedChange(){this.input.checked=this.checked;if(this.inputType==="radio"&&this.name&&this.checked){let e=this.host.closest("form");let o;if(e){o=Array.from(e.querySelectorAll(`nano-checkbox[name="${this.name}"]`))}else{o=Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`)).filter((e=>!e.closest("form")))}o.map((e=>{if(e!==this.host)e.checked=false}))}this.nanoChange.emit({value:this.value,checked:this.checked})}typeChange(){if(this.type==="checkbox"||this.type==="tag")this.inputType="checkbox";else this.inputType="radio"}handleIndeterminateChange(){this.checked=false;this.input.indeterminate=this.indeterminate}get invalid(){if(!this.shouldReport)return false;return!this.input.validity.valid}async getInputElement(){if(this.input)return this.input}async reportValidity(e=false){if(e){this.shouldReport=true;this._invalid=!this.input.reportValidity()}return{isValid:!this.invalid,errorMessage:this.input.validationMessage}}async setError(e){if(!this.input)return;this._invalid=!!e.length;this.input.setCustomValidity(e)}async setFocus(){if(this.input){this.input.focus();i.force(this.input)}}async removeFocus(){if(this.input){this.input.blur();i.force(this.input,false)}}isRadioChecked(){setTimeout((()=>this.checked=this.input.checked),20)}componentWillLoad(){this.typeChange()}componentDidLoad(){this.input.indeterminate=this.indeterminate;this.isRadioChecked();i.observe(this.input)}disconnectedCallback(){i.unobserve(this.input)}render(){const e=this.inputId+"-lbl";let o=this.host.ownerDocument.dir==="rtl";return n(c,{class:Object.assign({},t(this.color)),dir:o?"rtl":null},n("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},n("input",{type:this.inputType,name:this.name,required:this.required,checked:this.checked,disabled:this.disabled,value:this.value,"aria-labelledby":e,onBlur:this.handleBlur,onFocus:this.handleFocus,onChange:this.handleChange,ref:e=>this.input=e,id:this.inputId,onInvalid:this.handleInvalid}),n("span",{class:"nanocb__input nanocb__input--"+this.type}),n("div",{id:e,class:"nanocb__label nanocb__label--"+this.type},this.label&&!!this.label.length&&n("span",null,this.label),n("span",{hidden:this.label&&!!this.label.length},n("slot",null)))))}get host(){return a(this)}static get watchers(){return{checked:["handleCheckedChange"],type:["typeChange"],indeterminate:["handleIndeterminateChange"]}}};b.style=s;export{b as nano_checkbox};
+//# sourceMappingURL=p-5a315696.entry.js.map

package/dist/nano-components/p-5a315696.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"names":["checkboxCss","checkboxIds","Checkbox","[object Object]","hostRef","this","inputId","shouldReport","_invalid","inputType","hasFocus","checked","disabled","value","required","type","indeterminate","handleInvalid","ev","target","validity","valid","handleChange","handleFocus","nanoFocus","emit","handleBlur","nanoBlur","input","name","form","host","closest","radios","Array","from","querySelectorAll","document","filter","radio","map","el","nanoChange","invalid","validateFirst","reportValidity","isValid","errorMessage","validationMessage","message","length","setCustomValidity","focus","focusVisible","force","blur","setTimeout","typeChange","isRadioChecked","observe","unobserve","labelId","isRtl","ownerDocument","dir","h","Host","class","Object","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":"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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\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-e11bd40d.entry.js → p-7246bef5.entry.js}

@@ -1,5 +1,5 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import{r as t,c as o,i as r,f as n,h as i,e,g as a}from"./p-ab5813a7.js";import{i as s}from"./p-debd9efc.js";import{c as d}from"./p-d99437a6.js";import{d as l}from"./p-289aa03f.js";const b=':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{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:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';let c=class{constructor(r){t(this,r);this.nanoOpened=o(this,"nanoOpened",7);this.nanoClosed=o(this,"nanoClosed",7);this.slideId=`nano-details-${h++}`;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}};this.onMouseDown=()=>{if(this.stateChanging)return;this.open=!this.open}}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){this.nanoClosed.emit(this.open);l(this.contentEl,"is-shown",false).then((()=>this.stateChanging=false));this.contentEl.style.height="0px"}show(){this.nanoOpened.emit();l(this.contentEl,"is-shown",true).then((()=>{this.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((()=>{if(this.contentArea.scrollHeight>0){n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}}))}attachRO(){if(this.ro||!this.contentArea)return;const t=this.ro=new s((()=>this.resize()));t.observe(this.contentArea)}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((()=>{this.isLoading=false}),100)}componentDidLoad(){if(this.open){setTimeout((()=>{this.show()}),0)}this.attachRO()}connectedCallback(){const t=this.mo=new MutationObserver((()=>this.resize()));t.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()}render(){return i(e,{class:Object.assign({},d(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""}},this.hasStartSlot?i("span",{class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId},i("div",{ref:t=>this.contentArea=t,class:"content__area"},i("slot",null)))))}get el(){return a(this)}static get watchers(){return{open:["toggleClick"]}}};let h=0;c.style=b;export{c as nano_details};
-//# sourceMappingURL=p-e11bd40d.entry.js.map
+import{r as t,c as o,i as r,f as n,h as i,e,g as a}from"./p-ab5813a7.js";import{i as s}from"./p-debd9efc.js";import{c as d}from"./p-d99437a6.js";import{d as l}from"./p-289aa03f.js";const c=':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{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:1em;--btn-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--content-bg-color:transparent;--content-text-color:#455556;--content-transition:height 0.2s ease-out;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}:host(.nano-color){--btn-bg-color:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--btn-bg-color--open:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-bg-color--hover:var(--nano-color-tint, var(--nano-color-primary-tint, #2689a5));--btn-text-color:var(--nano-color-base, var(--nano-color-primary, #007495));--btn-text-color--open:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--btn-text-color--hover:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    )}button{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;margin:0;-webkit-transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims)}button[dir=rtl]{left:unset;right:unset;right:0}button::-moz-focus-inner{border:0}button:focus{-webkit-box-shadow:var(--focus-style);box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}:hover button{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open button{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-bottom-right-radius:0;border-bottom-left-radius:0}button .label{width:100%;max-width:100%;max-height:100%;-webkit-box-flex:1;-ms-flex:1;flex:1;display:inline-block}button .icon{line-height:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:inline-block;color:currentColor;-webkit-transition:0.3s ease transform;transition:0.3s ease transform;-webkit-transform-origin:center;transform-origin:center}button .icon--start{margin-left:0;margin-right:var(--padding);margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--start{margin-left:unset;margin-right:unset;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-end:var(--padding);margin-inline-end:var(--padding)}}button .icon--end{margin-left:var(--padding);margin-right:0;margin-top:0;margin-bottom:0}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){button .icon--end{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--padding);margin-inline-start:var(--padding);-webkit-margin-end:0;margin-inline-end:0}}button .icon ::slotted(nano-icon){--color:"currentColor"}.content{color:var(--content-text-color);background:var(--content-bg-color);height:0;overflow:hidden;-webkit-transition:0.2s ease border-radius;transition:0.2s ease border-radius;outline:none}.loaded .content{-webkit-transition:var(--content-transition), 0.2s ease border-radius;transition:var(--content-transition), 0.2s ease border-radius}.content>*{opacity:0;-webkit-transition:opacity 0.2s ease-out;transition:opacity 0.2s ease-out}.open .content>*{opacity:1}.content__area{padding:var(--padding)}';let b=class{constructor(r){t(this,r);this.nanoOpened=o(this,"nanoOpened",7);this.nanoClosed=o(this,"nanoClosed",7);this.slideId=`nano-details-${h++}`;this.stateChanging=false;this.isLoading=true;this.label="";this.open=false;this.noHandle=false;this.iconRotation=90;this.onKeyDown=t=>{switch(t.key){case"Enter":case" ":this.open=!this.open;break}};this.onMouseDown=()=>{if(this.stateChanging)return;this.open=!this.open}}toggleClick(){this.stateChanging=true;if(this.open)this.show();else this.hide()}hide(){this.nanoClosed.emit(this.open);l(this.contentEl,"is-shown",false).then((()=>this.stateChanging=false));this.contentEl.style.height="0px"}show(){this.nanoOpened.emit();l(this.contentEl,"is-shown",true).then((()=>{this.stateChanging=false}));this.contentEl.style.height=this.contentArea.scrollHeight+"px"}resize(){if(!this.open||!this.contentArea||!this.contentEl||this.stateChanging)return;r((()=>{if(this.contentArea.scrollHeight>0){n((()=>{this.contentEl.style.height=this.contentArea.scrollHeight+"px"}))}}))}attachRO(){if(this.ro||!this.contentArea)return;const t=this.ro=new s((()=>this.resize()));t.observe(this.contentArea)}componentWillLoad(){this.hasStartSlot=!!this.el.querySelector('[slot="icon-start"]');this.hasEndSlot=!!this.el.querySelector('[slot="icon-end"]');setTimeout((()=>{this.isLoading=false}),100)}componentDidLoad(){if(this.open){setTimeout((()=>{this.show()}),0)}this.attachRO()}connectedCallback(){const t=this.mo=new MutationObserver((()=>this.resize()));t.observe(this.el,{childList:true,subtree:true,attributes:false});this.attachRO()}disconnectedCallback(){if(this.mo)this.mo.disconnect();if(this.ro)this.ro.disconnect()}render(){return i(e,{class:Object.assign({},d(this.color))},i("div",{class:{open:this.open,loaded:!this.isLoading}},i("button",{onKeyDown:this.onKeyDown,onMouseDown:this.onMouseDown,onTouchEnd:this.onMouseDown,"aria-controls":this.slideId,"aria-expanded":this.open?"true":"false",style:{display:this.noHandle?"none":""},part:"button"},this.hasStartSlot?i("span",{part:"icon--start",class:"icon icon--start",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-start"})):"",i("div",{class:"label",part:"label"},this.label?this.label:i("slot",{name:"label"})),this.hasEndSlot?i("span",{part:"icon--end",class:"icon icon--end",style:{transform:this.open?`rotate(${this.iconRotation}deg)`:""}},i("slot",{name:"icon-end"})):""),i("div",{class:"content",ref:t=>this.contentEl=t,tabindex:"-1",id:this.slideId,part:"content"},i("div",{ref:t=>this.contentArea=t,class:"content__area"},i("slot",null)))))}get el(){return a(this)}static get watchers(){return{open:["toggleClick"]}}};let h=0;b.style=c;export{b as nano_details};
+//# sourceMappingURL=p-7246bef5.entry.js.map

package/dist/nano-components/p-7246bef5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/components/details/details.scss?tag=nano-details&encapsulation=shadow","src/components/details/details.tsx"],"names":["detailsCss","Details","[object Object]","hostRef","this","slideId","slideIds","stateChanging","isLoading","label","open","noHandle","iconRotation","onKeyDown","ev","key","onMouseDown","show","hide","nanoClosed","emit","displayTransition","contentEl","then","style","height","nanoOpened","contentArea","scrollHeight","readTask","writeTask","ro","ResizeObserver","resize","observe","hasStartSlot","el","querySelector","hasEndSlot","setTimeout","attachRO","mo","MutationObserver","childList","subtree","attributes","disconnect","h","Host","class","Object","assign","createColorClasses","color","loaded","onTouchEnd","aria-controls","aria-expanded","display","part","transform","name","ref","div","tabindex","id"],"mappings":"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","sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n    * @prop --padding: Default to 1em;\n\n    * @prop --btn-padding: Defaults to var(--padding);\n    * @prop --btn-bg-color: Defaults to var(--nano-color-contrast, #dad6d3);\n    * @prop --btn-bg-color--open: Defaults to var(--nano-color-base, #dad6d3);\n    * @prop --btn-bg-color--hover: Defaults to var(--nano-color-tint, #{map.get($colors, offwhite)});\n\n    * @prop --btn-text-color: Defaults to var(--nano-color-base, #455556);\n    * @prop --btn-text-color--open: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n    * @prop --btn-text-color--hover: Defaults to var(--nano-color-contrast, var(--btn-text-color));\n\n    * @prop --content-bg-color: Defaults to transparent;\n    * @prop --content-text-color: Defaults to #455556;\n    * @prop --content-transition: Defaults to height .2s ease-out;\n\n    * @prop --border-width: Defaults to none;\n    * @prop --border-color: Defaults to none;\n    * @prop --border-style: Defaults to none;\n    * @prop --border-radius: Defaults to none;\n    * @prop --box-shadow: Defaults to none;\n    * @prop --focus-style: Defaults to #{$control-focus-style}\n  */\n\n  @include text-inherit();\n\n  --padding: 1em;\n  --btn-padding: var(--padding);\n  --btn-bg-color: var(--nano-color-contrast, #dad6d3);\n  --btn-bg-color--open: var(--nano-color-base, #dad6d3);\n  --btn-bg-color--hover: var(--nano-color-tint, #{map.get($colors, offwhite)});\n  --btn-text-color: var(--nano-color-base, #455556);\n  --btn-text-color--open: var(--nano-color-contrast, var(--btn-text-color));\n  --btn-text-color--hover: var(--nano-color-contrast, var(--btn-text-color));\n  --content-bg-color: transparent;\n  --content-text-color: #455556;\n  --content-transition: height 0.2s ease-out;\n  --border-width: none;\n  --border-color: none;\n  --border-style: none;\n  --border-radius: none;\n  --box-shadow: none;\n  --focus-style: #{$control-focus-style};\n\n  display: block;\n  border-style: var(--border-style);\n  border-width: var(--border-width-dims);\n  border-color: var(--border-color);\n  border-radius: var(--border-radius-dims);\n  box-shadow: var(--box-shadow);\n}\n\n:host(:last-of-type) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n  --border-radius-dims: 0 0 var(--border-radius) var(--border-radius);\n\n  .open .content {\n    border-radius: 0 0 var(--border-radius) var(--border-radius);\n  }\n}\n\n:host(:first-of-type) {\n  --border-radius-dims: var(--border-radius) var(--border-radius) 0 0;\n  --border-width-dims: var(--border-width);\n}\n\n:host(:first-of-type:last-of-type) {\n  --border-radius-dims: var(--border-radius);\n  --border-width-dims: var(--border-width);\n}\n\n:host(:not(:last-of-type):not(:first-of-type)) {\n  --border-width-dims: 0 var(--border-width) var(--border-width);\n}\n\n:host(.nano-color) {\n  --btn-bg-color: var(--nano-color-contrast, #{nano-color(primary, contrast)});\n  --btn-bg-color--open: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-bg-color--hover: var(--nano-color-tint, #{nano-color(primary, tint)});\n  --btn-text-color: var(--nano-color-base, #{nano-color(primary, base)});\n  --btn-text-color--open:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n  --btn-text-color--hover:\n    var(\n      --nano-color-contrast,\n      #{nano-color(primary, contrast)}\n    );\n}\n\nbutton {\n  @include input-cover;\n\n  padding: var(--btn-padding);\n  text-align: inherit;\n  position: relative;\n  font-size: 1em;\n  margin: 0;\n  transition: 0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;\n  display: flex;\n  align-items: center;\n  background: var(--btn-bg-color);\n  color: var(--btn-text-color);\n  border-radius: var(--border-radius-dims);\n\n  &:focus {\n    box-shadow: var(--focus-style);\n    outline: none;\n    position: relative;\n    z-index: 1;\n  }\n\n  :hover & {\n    background: var(--btn-bg-color--hover);\n    color: var(--btn-text-color--hover);\n  }\n\n  .open & {\n    background: var(--btn-bg-color--open);\n    color: var(--btn-text-color--open);\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n\n  .label {\n    width: 100%;\n    max-width: 100%;\n    max-height: 100%;\n    flex: 1;\n    display: inline-block;\n  }\n\n  .icon {\n    line-height: 0;\n    flex-direction: column;\n    justify-content: center;\n    display: inline-block;\n    color: currentColor;\n    transition: 0.3s ease transform;\n    transform-origin: center;\n\n    &--start {\n      @include margin(0, var(--padding), 0, 0);\n    }\n\n    &--end {\n      @include margin(0, 0, 0, var(--padding));\n    }\n\n    ::slotted(nano-icon) {\n      --color: 'currentColor';\n    }\n  }\n}\n\n.content {\n  color: var(--content-text-color);\n  background: var(--content-bg-color);\n  height: 0;\n  overflow: hidden;\n  transition: 0.2s ease border-radius;\n  outline: none;\n\n  .loaded & {\n    transition: var(--content-transition), 0.2s ease border-radius;\n  }\n\n  > * {\n    opacity: 0;\n    transition: opacity 0.2s ease-out;\n\n    .open & {\n      opacity: 1;\n    }\n  }\n\n  &__area {\n    padding: var(--padding);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Host,\n  State,\n  writeTask,\n  readTask,\n} from '@stencil/core';\nimport ResizeObserver from 'resize-observer-polyfill';\nimport { Color } from '../../interface';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils';\n\n/**\n * A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](story/components-accordion--accordion) element to add 'one item open at a time' support.\n */\n/**\n * @slot - content that will be hidden / revealed\n * @slot icon-start - used for icons at the start of the handle\n * @slot label - can be used when you wish to insert complex label markup\n * @slot icon-end - used for icons at the end of the handle\n * @part button - the main details ui control\n * @part label - the text wrapper of the ui control\n * @part icon--start - the icon wrapper at the start of the ui control\n * @part icon--end - the icon wrapper at the end of the ui control\n * @part content - the main content wrapper\n */\n@Component({\n  tag: 'nano-details',\n  styleUrl: 'details.scss',\n  shadow: true,\n})\nexport class Details {\n  private hasStartSlot: boolean;\n  private hasEndSlot: boolean;\n  private slideId = `nano-details-${slideIds++}`;\n  private mo?: MutationObserver;\n  private ro?: ResizeObserver;\n  private contentArea: HTMLDivElement;\n  private stateChanging: boolean = false;\n\n  @State() isLoading = true;\n\n  @Element() private el: HTMLNanoDetailsElement;\n\n  private contentEl: HTMLElement;\n\n  /**\n   * Button / handle text to be used if no complex markup required.\n   * Otherwise use label slot.\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Should item be open on load\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * Have no handle - you will need to control the hiding / showing of content with script\n   */\n  @Prop() noHandle: boolean = false;\n\n  /**\n   * Icon slot rotation amount (degrees) on open\n   */\n  @Prop() iconRotation: number = 90;\n\n  /**\n   * Color to use from your application's color palette.\n   */\n  @Prop() color?: Color;\n\n  /**\n   * Emitted when the component opens.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoOpened: EventEmitter;\n\n  /**\n   * Emitted when the component closes.\n   * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.\n   */\n  @Event() nanoClosed: EventEmitter;\n\n  @Watch('open')\n  toggleClick() {\n    this.stateChanging = true;\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  private onKeyDown = (ev: KeyboardEvent) => {\n    switch (ev.key) {\n      case 'Enter':\n      case ' ':\n        this.open = !this.open;\n        break;\n    }\n  };\n\n  private onMouseDown = () => {\n    if (this.stateChanging) return;\n    this.open = !this.open;\n  };\n\n  private hide() {\n    this.nanoClosed.emit(this.open);\n    displayTransition(this.contentEl, 'is-shown', false).then(\n      () => (this.stateChanging = false)\n    );\n    this.contentEl.style.height = '0px';\n  }\n\n  private show() {\n    this.nanoOpened.emit();\n    displayTransition(this.contentEl, 'is-shown', true).then(() => {\n      this.stateChanging = false;\n    });\n    this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n  }\n\n  private resize() {\n    if (\n      !this.open ||\n      !this.contentArea ||\n      !this.contentEl ||\n      this.stateChanging\n    )\n      return;\n    readTask(() => {\n      if (this.contentArea.scrollHeight > 0) {\n        writeTask(() => {\n          this.contentEl.style.height = this.contentArea.scrollHeight + 'px';\n        });\n      }\n    });\n  }\n\n  private attachRO() {\n    if (this.ro || !this.contentArea) return;\n\n    const ro = (this.ro = new ResizeObserver(() => this.resize()));\n    ro.observe(this.contentArea);\n  }\n\n  componentWillLoad() {\n    this.hasStartSlot = !!this.el.querySelector('[slot=\"icon-start\"]');\n    this.hasEndSlot = !!this.el.querySelector('[slot=\"icon-end\"]');\n    setTimeout(() => {\n      this.isLoading = false;\n    }, 100);\n  }\n\n  componentDidLoad() {\n    if (this.open) {\n      // disable animation on start\n      setTimeout(() => {\n        this.show();\n      }, 0);\n    }\n    this.attachRO();\n  }\n\n  connectedCallback() {\n    const mo = (this.mo = new MutationObserver(() => this.resize()));\n    mo.observe(this.el, { childList: true, subtree: true, attributes: false });\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    if (this.mo) this.mo.disconnect();\n    if (this.ro) this.ro.disconnect();\n  }\n\n  render() {\n    return (\n      <Host class={{ ...createColorClasses(this.color) }}>\n        <div\n          class={{\n            open: this.open,\n            loaded: !this.isLoading,\n          }}\n        >\n          <button\n            onKeyDown={this.onKeyDown}\n            onMouseDown={this.onMouseDown}\n            onTouchEnd={this.onMouseDown}\n            aria-controls={this.slideId}\n            aria-expanded={this.open ? 'true' : 'false'}\n            style={{ display: this.noHandle ? 'none' : '' }}\n            part=\"button\"\n          >\n            {this.hasStartSlot ? (\n              <span\n                part=\"icon--start\"\n                class=\"icon icon--start\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-start\" />\n              </span>\n            ) : (\n              ''\n            )}\n            <div class=\"label\" part=\"label\">\n              {this.label ? this.label : <slot name=\"label\" />}\n            </div>\n            {this.hasEndSlot ? (\n              <span\n                part=\"icon--end\"\n                class=\"icon icon--end\"\n                style={{\n                  transform: this.open ? `rotate(${this.iconRotation}deg)` : '',\n                }}\n              >\n                <slot name=\"icon-end\" />\n              </span>\n            ) : (\n              ''\n            )}\n          </button>\n          <div\n            class=\"content\"\n            ref={(div) => (this.contentEl = div)}\n            tabindex=\"-1\"\n            id={this.slideId}\n            part=\"content\"\n          >\n            <div ref={(div) => (this.contentArea = div)} class=\"content__area\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\nlet slideIds = 0;\n"]}

package/dist/nano-components/p-7d351076.system.entry.js

@@ -0,0 +1,5 @@
+var __awaiter=this&&this.__awaiter||function(e,t,i,n){function o(e){return e instanceof i?e:new i((function(t){t(e)}))}return new(i||(i=Promise))((function(i,r){function a(e){try{l(n.next(e))}catch(t){r(t)}}function s(e){try{l(n["throw"](e))}catch(t){r(t)}}function l(e){e.done?i(e.value):o(e.value).then(a,s)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var i={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,o,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(a){if(n)throw new TypeError("Generator is already executing.");while(i)try{if(n=1,o&&(r=a[0]&2?o["return"]:a[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;if(o=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;o=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(r=i.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(a[0]===6&&i.label<r[1]){i.label=r[1];r=a;break}if(r&&i.label<r[2]){i.label=r[2];i.ops.push(a);break}if(r[2])i.ops.pop();i.trys.pop();continue}a=t.call(e,i)}catch(s){a=[6,s];o=0}finally{n=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};
+/*!
+ * Web Components for Nanopore digital Web Apps
+ */System.register(["./p-59b3d24b.system.js","./p-1c216ca4.system.js","./p-ef053a2f.system.js"],(function(e){"use strict";var t,i,n,o,r,a,s,l;return{setters:[function(e){t=e.r;i=e.c;n=e.h;o=e.e;r=e.g},function(e){a=e.c;s=e.r},function(e){l=e.d}],execute:function(){function d(e,t){function i(i){var n=e.getBoundingClientRect();var o=e.ownerDocument.defaultView;var r=n.left+o.pageXOffset;var a=n.top+o.pageYOffset;var s=i.pageX-r;var l=i.pageY-a;t(s,l)}function n(){document.removeEventListener("pointermove",i);document.removeEventListener("pointerup",n)}document.addEventListener("pointermove",i,{passive:true});document.addEventListener("pointerup",n)}var c=':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{--divider-width:12px;--divider-hit-area:14px;--min:0%;--max:100%;--background-color:#e4e6e8;--content-color:#918b86;display:-ms-grid;display:grid}.start,.end{overflow:hidden}.divider{-webkit-box-flex:0;-ms-flex:0 0 var(--divider-width);flex:0 0 var(--divider-width);display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--background-color);color:var(--content-color);z-index:1;font-size:0.8rem}.divider:focus{outline:none}:host(:not([disabled])) .divider:focus-visible{background-color:var(--nano-control-focus-color, rgba(144, 198, 231, 0.8))}:host([disabled]) .divider{cursor:not-allowed}:host(:not([vertical],[disabled])) .divider{cursor:col-resize}:host(:not([vertical])) .divider::after{display:-webkit-box;display:-ms-flexbox;display:flex;content:"";position:absolute;height:100%;left:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);width:var(--divider-hit-area)}:host([vertical]){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}:host([vertical]:not([disabled])) .divider{cursor:row-resize}:host([vertical]) .divider::after{content:"";position:absolute;width:100%;top:calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);height:var(--divider-hit-area)}';var h=e("nano_split_pane",function(){function e(e){var n=this;t(this,e);this.nanoReposition=i(this,"nanoReposition",7);this.nanoDragging=i(this,"nanoDragging",7);this.isAnimating=false;this.didLoad=false;this._shouldAnimate=true;this.vertical=false;this.disabled=false;this.snapThreshold=12;this.animationDuration=.6;this.handleDrag=function(e){if(n.disabled){return}e.preventDefault();d(n.host,(function(e,t){var i=n.vertical?t:e;n.nanoDragging.emit(i);if(n.primary==="end"){i=n.size-i}if(n.snap){var o=n.snap.split(" ");o.forEach((function(e){var t;if(e.endsWith("%")){t=n.size*(parseFloat(e)/100)}else{t=parseFloat(e)}if(i>=t-n.snapThreshold&&i<=t+n.snapThreshold){i=t}}))}n.shouldAnimate=false;n.position=a(n.pixelsToPercentage(i),0,100);s((function(){return n.shouldAnimate=true}))}))};this.handleKeyDown=function(e){if(n.disabled){return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(e.key)){var t=n.position;var i=(e.shiftKey?10:1)*(n.primary==="end"?-1:1);e.preventDefault();if(e.key==="ArrowLeft"&&!n.vertical||e.key==="ArrowUp"&&n.vertical){t-=i}if(e.key==="ArrowRight"&&!n.vertical||e.key==="ArrowDown"&&n.vertical){t+=i}if(e.key==="Home"){t=n.primary==="end"?100:0}if(e.key==="End"){t=n.primary==="end"?0:100}n.shouldAnimate=false;n.position=a(t,0,100);s((function(){return n.shouldAnimate=true}))}};this.handleResize=function(){if(!n.didLoad||n.isAnimating)return;if(n.primary){n.shouldAnimate=false;n.position=n.pixelsToPercentage(n.cachedPositionInPixels);s((function(){return n.shouldAnimate=true}))}};this.handlePositionChange=l(this.handlePositionChange.bind(this),100)}Object.defineProperty(e.prototype,"size",{get:function(){var e=this.host.getBoundingClientRect(),t=e.width,i=e.height;return this.vertical?i:t},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"shouldAnimate",{get:function(){return this.didLoad&&this._shouldAnimate},set:function(e){this._shouldAnimate=e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"position",{get:function(){return this._position},set:function(e){e=Math.min(Math.max(e,0),100);if(isNaN(e)||e===this._position)return;if(this.shouldAnimate&&this.animationDuration>0&&!isNaN(this.position)){this.animatePosition(e);return}this._position=e},enumerable:false,configurable:true});e.prototype.handlePositionChange=function(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.positionInPixels=this.percentageToPixels(this.position);this.nanoReposition.emit()};e.prototype.handlePositionInPixelsChange=function(){this.position=this.pixelsToPercentage(this.positionInPixels)};e.prototype.getPercentageToPixels=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.percentageToPixels(e)]}))}))};e.prototype.getPixelsToPercentage=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.pixelsToPercentage(e)]}))}))};e.prototype.animatePosition=function(e){var t=this;if(this.isAnimating)return;var i=this.animationDuration;var n=60;var o=this.position;var r=e-o;var a=o;var l=0;function d(e,t,i,n){if((e/=n/2)<1)return i/2*e*e+t;else return-i/2*(--e*(e-2)-1)+t}var c=function(){l+=1/n;a=d(l,o,r,i);if(e>o&&a>=e||e<o&&a<=e){t.position=e;t.shouldAnimate=true;t.isAnimating=false;return}t.position=a;s(c)};this.shouldAnimate=false;this.isAnimating=true;s(c)};e.prototype.percentageToPixels=function(e){return this.size*(e/100)};e.prototype.pixelsToPercentage=function(e){return e/this.size*100};e.prototype.attachRO=function(){var e=this;this.detachRO();this.ro=new ResizeObserver((function(){return e.handleResize()}));this.ro.observe(this.host)};e.prototype.detachRO=function(){if(!this.ro)return;this.ro.unobserve(this.host);this.ro=undefined};e.prototype.componentDidLoad=function(){var e=this;if(this.positionInPixels)this.handlePositionInPixelsChange();setTimeout((function(){return e.didLoad=true}))};e.prototype.connectedCallback=function(){this.cachedPositionInPixels=this.percentageToPixels(this.position);this.attachRO()};e.prototype.disconnectedCallback=function(){this.detachRO()};e.prototype.componentDidRender=function(){var e=this;s((function(){if(typeof e.position==="undefined"){e.position=50}}))};e.prototype.render=function(){if(typeof this.position==="undefined")return;var e={};var t=this.vertical?"gridTemplateRows":"gridTemplateColumns";var i="\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          "+this.position+"% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    ";var r="auto";if(this.primary==="end"){e[t]=r+" var(--divider-width) "+i}else{e[t]=i+" var(--divider-width) "+r}return n(o,{style:e},n("div",{part:"panel start",class:"start"},n("slot",{name:"start"})),n("div",{part:"divider",class:"divider",tabindex:this.disabled?undefined:"0",role:"separator","aria-label":"Resize",onKeyDown:this.handleKeyDown,onMouseDown:this.handleDrag,onTouchStart:this.handleDrag},n("slot",{name:"handle"},!this.disabled&&this.vertical?n("nano-icon",{slot:"handle",name:"solid/grip-lines"}):n("nano-icon",{slot:"handle",name:"solid/grip-lines-vertical"}))),n("div",{part:"panel end",class:"end"},n("slot",{name:"end"})))};Object.defineProperty(e.prototype,"host",{get:function(){return r(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{position:["handlePositionChange"],positionInPixels:["handlePositionInPixelsChange"]}},enumerable:false,configurable:true});return e}());h.style=c}}}));
+//# sourceMappingURL=p-7d351076.system.entry.js.map

package/dist/nano-components/p-7d351076.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/utils/drag.ts","src/components/split-pane/split-pane.scss?tag=nano-split-pane&encapsulation=shadow","src/components/split-pane/split-pane.tsx"],"names":["drag","container","onMove","move","pointerEvent","dims","getBoundingClientRect","defaultView","ownerDocument","offsetX","left","pageXOffset","offsetY","top","pageYOffset","x","pageX","y","pageY","stop","document","removeEventListener","addEventListener","passive","splitPaneCss","SplitPane","exports","class_1","hostRef","_this","this","isAnimating","didLoad","_shouldAnimate","vertical","disabled","snapThreshold","animationDuration","handleDrag","e","preventDefault","host","newPositionInPixels","nanoDragging","emit","primary","size","snap","snaps","split","forEach","value","snapPoint","endsWith","parseFloat","shouldAnimate","position","clamp","pixelsToPercentage","raf","handleKeyDown","event","includes","key","newPosition","incr","shiftKey","handleResize","cachedPositionInPixels","handlePositionChange","debounce","bind","Object","defineProperty","prototype","_a","width","height","sa","_position","pos","Math","min","max","isNaN","animatePosition","percentageToPixels","positionInPixels","nanoReposition","handlePositionInPixelsChange","getPercentageToPixels","getPixelsToPercentage","end","duration","fps","start","distance","time","easeInOutQuad","t","s","d","go","attachRO","detachRO","ro","ResizeObserver","observe","unobserve","undefined","componentDidLoad","setTimeout","connectedCallback","disconnectedCallback","componentDidRender","render","styles","gridTemplate","secondary","h","Host","style","part","class","name","tabindex","role","aria-label","onKeyDown","onMouseDown","onTouchStart","slot"],"mappings":"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","sourcesContent":["export function drag(\n  container: HTMLElement,\n  onMove: (x: number, y: number) => void\n) {\n  function move(pointerEvent: PointerEvent) {\n    const dims = container.getBoundingClientRect();\n    const defaultView = container.ownerDocument.defaultView!;\n    const offsetX = dims.left + defaultView.pageXOffset;\n    const offsetY = dims.top + defaultView.pageYOffset;\n    const x = pointerEvent.pageX - offsetX;\n    const y = pointerEvent.pageY - offsetY;\n\n    onMove(x, y);\n  }\n\n  function stop() {\n    document.removeEventListener('pointermove', move);\n    document.removeEventListener('pointerup', stop);\n  }\n\n  document.addEventListener('pointermove', move, { passive: true });\n  document.addEventListener('pointerup', stop);\n}\n","@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/components';\n@import '../../global/style/nano-theme/form';\n\n:host {\n  /**\n  * @prop --divider-width: The width of the visible divider. Default 4px.\n  * @prop --divider-hit-area: The invisible region around the divider where dragging can occur. This is\n  *  usually wider than the divider to facilitate easier dragging. Default 12px.\n  * @prop --min: The minimum allowed size of the primary panel. Default 0.\n  * @prop --max: The maximum allowed size of the primary panel. Default 100%.\n  * @prop --background-color: Handle background. Default #{map.get($colors, lightgrey)}.\n  * @prop --content-color: Handle color. Default #{map.get($colors, dimgrey)}.\n  */\n  --divider-width: 12px;\n  --divider-hit-area: 14px;\n  --min: 0%;\n  --max: 100%;\n  --background-color: #{map.get($colors, lightgrey)};\n  --content-color: #{map.get($colors, dimgrey)};\n\n  display: grid;\n}\n\n.start,\n.end {\n  overflow: hidden;\n}\n\n.divider {\n  flex: 0 0 var(--divider-width);\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--background-color);\n  color: var(--content-color);\n  z-index: 1;\n  font-size: 0.8rem;\n}\n\n.divider:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) .divider:focus-visible {\n  background-color: #{$control-focus-color};\n}\n\n:host([disabled]) .divider {\n  cursor: not-allowed;\n}\n\n/* Horizontal */\n:host(:not([vertical], [disabled])) .divider {\n  cursor: col-resize;\n}\n\n:host(:not([vertical])) .divider::after {\n  display: flex;\n  content: '';\n  position: absolute;\n  height: 100%;\n  left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  width: var(--divider-hit-area);\n}\n\n/* Vertical */\n:host([vertical]) {\n  flex-direction: column;\n}\n\n:host([vertical]:not([disabled])) .divider {\n  cursor: row-resize;\n}\n\n:host([vertical]) .divider::after {\n  content: '';\n  position: absolute;\n  width: 100%;\n  top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);\n  height: var(--divider-hit-area);\n}\n","import {\n  Prop,\n  Component,\n  Watch,\n  Event,\n  EventEmitter,\n  ComponentInterface,\n  Element,\n  Host,\n  h,\n  Method,\n} from '@stencil/core';\nimport { clamp, raf, debounce } from '../../utils';\nimport { drag } from '../../utils/drag';\n\n/**\n * Split panes display two adjacent panels, allowing the user to reposition them.\n *\n * @part start - The start panel.\n * @part end - The end panel.\n * @part panel - Targets both the start and end panels.\n * @part divider - The divider that separates the start and end panels.\n *\n * @slot start - The start panel.\n * @slot end - The end panel.\n * @slot handle - An optional handle to render at the center of the divider.\n */\n@Component({\n  tag: 'nano-split-pane',\n  styleUrl: 'split-pane.scss',\n  shadow: true,\n})\nexport class SplitPane implements ComponentInterface {\n  @Element() host: HTMLNanoSplitPaneElement;\n  private cachedPositionInPixels: number;\n  private ro: ResizeObserver;\n  private isAnimating = false;\n  private didLoad = false;\n\n  private get size() {\n    const { width, height } = this.host.getBoundingClientRect();\n    return this.vertical ? height : width;\n  }\n\n  private get shouldAnimate() {\n    return this.didLoad && this._shouldAnimate;\n  }\n  private set shouldAnimate(sa: boolean) {\n    this._shouldAnimate = sa;\n  }\n  private _shouldAnimate: boolean = true;\n\n  constructor() {\n    this.handlePositionChange = debounce(\n      this.handlePositionChange.bind(this),\n      100\n    );\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge as a percentage 0-100. Defaults to 50% of the\n   * container's initial size.\n   */\n  @Prop()\n  get position() {\n    return this._position;\n  }\n  set position(pos: number) {\n    // override too high / low\n    pos = Math.min(Math.max(pos, 0), 100);\n    if (isNaN(pos) || pos === this._position) return;\n\n    if (\n      this.shouldAnimate &&\n      this.animationDuration > 0 &&\n      !isNaN(this.position)\n    ) {\n      this.animatePosition(pos);\n      return;\n    }\n    this._position = pos;\n  }\n  private _position: number;\n\n  // eslint-disable-next-line @stencil/no-unused-watch\n  @Watch('position')\n  handlePositionChange() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.positionInPixels = this.percentageToPixels(this.position);\n    this.nanoReposition.emit();\n  }\n\n  /**\n   * The current position of the divider from the primary panel's edge in pixels.\n   */\n  @Prop({ mutable: true }) positionInPixels: number;\n\n  @Watch('positionInPixels')\n  handlePositionInPixelsChange() {\n    this.position = this.pixelsToPercentage(this.positionInPixels);\n  }\n\n  /** Draws the split panel in a vertical orientation with the start and end panels stacked. */\n  @Prop({ reflect: true }) vertical = false;\n\n  /** Disables resizing. Note that the position may still change as a result of resizing the host element. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\n   * primary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\n   * host element is resized.\n   */\n  @Prop() primary?: 'start' | 'end';\n\n  /**\n   * One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n   * `\"100px 50%\"`.\n   */\n  @Prop() snap?: string;\n\n  /** How close the divider must be to a snap point until snapping occurs. */\n  @Prop() snapThreshold = 12;\n\n  /** When changing `position` via property, the pane will animate into position. Make `animationDuration` 0 to disable. */\n  @Prop() animationDuration = 0.6;\n\n  /** Emitted when the divider's position changes. */\n  @Event() nanoReposition: EventEmitter;\n\n  /** Emitted when the divider is being dragged. */\n  @Event() nanoDragging: EventEmitter<number>;\n\n  /** Utility to convert % to pixels */\n  @Method()\n  async getPercentageToPixels(value: number) {\n    return this.percentageToPixels(value);\n  }\n\n  /** Utility to convert pixels to % (`position`) */\n  @Method()\n  async getPixelsToPercentage(value: number) {\n    return this.pixelsToPercentage(value);\n  }\n\n  // Private logic\n\n  private animatePosition(end: number) {\n    if (this.isAnimating) return;\n\n    const duration = this.animationDuration; // seconds\n    const fps = 60;\n    const start = this.position;\n    const distance = end - start;\n\n    let position = start;\n    let time = 0;\n\n    function easeInOutQuad(t: number, s: number, e: number, d: number) {\n      if ((t /= d / 2) < 1) return (e / 2) * t * t + s;\n      else return (-e / 2) * (--t * (t - 2) - 1) + s;\n    }\n\n    const go = () => {\n      time += 1 / fps;\n      position = easeInOutQuad(time, start, distance, duration);\n\n      if (\n        (end > start && position >= end) ||\n        (end < start && position <= end)\n      ) {\n        this.position = end;\n        this.shouldAnimate = true;\n        this.isAnimating = false;\n        return;\n      }\n      this.position = position;\n      raf(go);\n    };\n\n    this.shouldAnimate = false;\n    this.isAnimating = true;\n    raf(go);\n  }\n\n  private percentageToPixels(value: number) {\n    return this.size * (value / 100);\n  }\n\n  private pixelsToPercentage(value: number) {\n    return (value / this.size) * 100;\n  }\n\n  private attachRO() {\n    this.detachRO();\n    this.ro = new ResizeObserver(() => this.handleResize());\n    this.ro.observe(this.host);\n  }\n\n  private detachRO() {\n    if (!this.ro) return;\n    this.ro.unobserve(this.host);\n    this.ro = undefined;\n  }\n\n  // Event handlers\n\n  private handleDrag = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    // Prevent text selection when dragging\n    e.preventDefault();\n\n    drag(this.host, (x, y) => {\n      let newPositionInPixels = this.vertical ? y : x;\n\n      this.nanoDragging.emit(newPositionInPixels);\n\n      // Flip for end panels\n      if (this.primary === 'end') {\n        newPositionInPixels = this.size - newPositionInPixels;\n      }\n\n      // Check snap points\n      if (this.snap) {\n        const snaps = this.snap.split(' ');\n\n        snaps.forEach((value) => {\n          let snapPoint: number;\n\n          if (value.endsWith('%')) {\n            snapPoint = this.size * (parseFloat(value) / 100);\n          } else {\n            snapPoint = parseFloat(value);\n          }\n\n          if (\n            newPositionInPixels >= snapPoint - this.snapThreshold &&\n            newPositionInPixels <= snapPoint + this.snapThreshold\n          ) {\n            newPositionInPixels = snapPoint;\n          }\n        });\n      }\n      this.shouldAnimate = false;\n      this.position = clamp(\n        this.pixelsToPercentage(newPositionInPixels),\n        0,\n        100\n      );\n      raf(() => (this.shouldAnimate = true));\n    });\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (\n      [\n        'ArrowLeft',\n        'ArrowRight',\n        'ArrowUp',\n        'ArrowDown',\n        'Home',\n        'End',\n      ].includes(event.key)\n    ) {\n      let newPosition = this.position;\n      const incr =\n        (event.shiftKey ? 10 : 1) * (this.primary === 'end' ? -1 : 1);\n\n      event.preventDefault();\n\n      if (\n        (event.key === 'ArrowLeft' && !this.vertical) ||\n        (event.key === 'ArrowUp' && this.vertical)\n      ) {\n        newPosition -= incr;\n      }\n\n      if (\n        (event.key === 'ArrowRight' && !this.vertical) ||\n        (event.key === 'ArrowDown' && this.vertical)\n      ) {\n        newPosition += incr;\n      }\n\n      if (event.key === 'Home') {\n        newPosition = this.primary === 'end' ? 100 : 0;\n      }\n\n      if (event.key === 'End') {\n        newPosition = this.primary === 'end' ? 0 : 100;\n      }\n\n      this.shouldAnimate = false;\n\n      this.position = clamp(newPosition, 0, 100);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  private handleResize = () => {\n    if (!this.didLoad || this.isAnimating) return;\n\n    // Resize when a primary panel is set\n    if (this.primary) {\n      this.shouldAnimate = false;\n      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);\n      raf(() => (this.shouldAnimate = true));\n    }\n  };\n\n  componentDidLoad(): void {\n    if (this.positionInPixels) this.handlePositionInPixelsChange();\n    setTimeout(() => (this.didLoad = true));\n  }\n\n  connectedCallback() {\n    this.cachedPositionInPixels = this.percentageToPixels(this.position);\n    this.attachRO();\n  }\n\n  disconnectedCallback() {\n    this.detachRO();\n  }\n\n  componentDidRender(): void {\n    // bit hacky ... because we use getter / setter for position, there's a render *before* `position` is passed in via attribute\n    // if we set a default position in the class, this causes the divider to jump (from default to user set position)\n    // so - wait a render, see if there's a position passed in via attribute, *then* set default if not\n    raf(() => {\n      if (typeof this.position === 'undefined') {\n        this.position = 50;\n      }\n    });\n  }\n\n  render() {\n    if (typeof this.position === 'undefined') return;\n    const styles: { gridTemplateRows?: string; gridTemplateColumns?: string } =\n      {};\n    const gridTemplate = this.vertical\n      ? 'gridTemplateRows'\n      : 'gridTemplateColumns';\n    const primary = `\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `;\n    const secondary = 'auto';\n\n    if (this.primary === 'end') {\n      styles[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;\n    } else {\n      styles[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;\n    }\n\n    return (\n      <Host style={styles}>\n        <div part=\"panel start\" class=\"start\">\n          <slot name=\"start\"></slot>\n        </div>\n        <div\n          part=\"divider\"\n          class=\"divider\"\n          tabindex={this.disabled ? undefined : '0'}\n          role=\"separator\"\n          aria-label=\"Resize\"\n          onKeyDown={this.handleKeyDown}\n          onMouseDown={this.handleDrag}\n          onTouchStart={this.handleDrag}\n        >\n          <slot name=\"handle\">\n            {!this.disabled && this.vertical ? (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines\" />\n            ) : (\n              <nano-icon slot=\"handle\" name=\"solid/grip-lines-vertical\" />\n            )}\n          </slot>\n        </div>\n        <div part=\"panel end\" class=\"end\">\n          <slot name=\"end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}