@nanoporetech-digital/components 7.9.0 → 7.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/nano-checkbox.cjs.entry.js +8 -4
  3. package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
  4. package/dist/cjs/nano-components.cjs.js +1 -1
  5. package/dist/cjs/nano-datalist_3.cjs.entry.js +7 -6
  6. package/dist/cjs/nano-datalist_3.cjs.entry.js.map +1 -1
  7. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +9 -9
  8. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  9. package/dist/collection/components/checkbox/checkbox.js +8 -4
  10. package/dist/collection/components/checkbox/checkbox.js.map +1 -1
  11. package/dist/collection/components/datalist/datalist.js +9 -6
  12. package/dist/collection/components/datalist/datalist.js.map +1 -1
  13. package/dist/collection/components/select/select.js +9 -9
  14. package/dist/collection/components/select/select.js.map +1 -1
  15. package/dist/components/datalist.js +8 -6
  16. package/dist/components/datalist.js.map +1 -1
  17. package/dist/components/nano-checkbox.js +8 -4
  18. package/dist/components/nano-checkbox.js.map +1 -1
  19. package/dist/components/select.js +9 -9
  20. package/dist/components/select.js.map +1 -1
  21. package/dist/esm/loader.js +1 -1
  22. package/dist/esm/nano-checkbox.entry.js +8 -4
  23. package/dist/esm/nano-checkbox.entry.js.map +1 -1
  24. package/dist/esm/nano-components.js +1 -1
  25. package/dist/esm/nano-datalist_3.entry.js +7 -6
  26. package/dist/esm/nano-datalist_3.entry.js.map +1 -1
  27. package/dist/esm/nano-global-nav-user-profile_3.entry.js +9 -9
  28. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  29. package/dist/nano-components/nano-checkbox.entry.js +1 -1
  30. package/dist/nano-components/nano-checkbox.entry.js.map +1 -1
  31. package/dist/nano-components/nano-components.esm.js +1 -1
  32. package/dist/nano-components/nano-components.esm.js.map +1 -1
  33. package/dist/nano-components/nano-datalist_3.entry.js +1 -1
  34. package/dist/nano-components/nano-datalist_3.entry.js.map +1 -1
  35. package/dist/nano-components/nano-global-nav-user-profile_3.entry.js +1 -1
  36. package/dist/nano-components/nano-global-nav-user-profile_3.entry.js.map +1 -1
  37. package/docs-json.json +1 -1
  38. package/hydrate/index.js +24 -19
  39. package/hydrate/index.mjs +24 -19
  40. package/package.json +1 -1
package/dist/nano-components/nano-checkbox.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","form","host","closest","ctrls","Array","from","querySelectorAll","transformTag","document","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$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 * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get(tokens.$colors, palegrey)};\n * @prop --check-border-size: initial border size. Default to 1px;\n * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$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 #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n */\n\n --focus-shadow: #{tokens.$control-focus-style};\n --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get(tokens.$colors, white)};\n --check-border-color: #{map.get(tokens.$colors, palegrey)};\n --check-border-size: 1px;\n --check-border-style: var(--check-border-size) solid var(--check-border-color);\n --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n\n // segment\n --segment-color: #{map.get(tokens.$colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n // cb / radio\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n // switch\n --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n display: inline-block;\n max-inline-size: 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='radio'][checked]):not([checked='false']) {\n --check-border-size: 0.3125em;\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-color: #{rgba(map.get(tokens.$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: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\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: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --segment-color: #{map.get(tokens.$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 // The mock, viewable 'input' control. Only relevant for controls where the label\n // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n block-size: 1.5em;\n inline-size: 1.5em;\n min-inline-size: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.725em - var(--check-border-size));\n inset-block-start: calc(0.725em - var(--check-border-size));\n inline-size: 0;\n block-size: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.825em - var(--check-border-size));\n inset-block-start: calc(0.825em - var(--check-border-size));\n block-size: 0;\n inline-size: 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;\n }\n }\n }\n\n &--switch {\n border-radius: 1em !important;\n inline-size: 2.4em;\n block-size: 1.3em;\n background: var(--switch-inactive-color);\n\n :host([type=\"switch\"]:not([disabled])) & {\n &:hover::after {\n scale: 1.1 1;\n }\n }\n\n &::after {\n position: relative;\n content: '';\n display: block;\n border-radius: inherit;\n block-size: 80%;\n inline-size: 40%;\n background: var(--check-checked-higlight-color);\n transform-origin: left;\n inset-inline-start: 6%;\n inset-block-start: 10%;\n transition: .1s ease scale, .15s ease left;\n }\n }\n\n &--segment,\n &--segment-pill {\n @include mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include mx.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 rgb(0 0 0 / 20%), 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 // The 'real' input control which we hide but use it's state for display\n input {\n @include mx.visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), 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 border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border-color: var(--check-checked-border-color);\n\n // segment / segment-pill active\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 rgb(0 0 0 / 20%);\n }\n\n // radio active\n\n &--radio {\n border-radius: var(--radio-border-radius);\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 active\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: calc(0.575em - var(--check-border-size));\n inset-block-start: calc(0.2875em - var(--check-border-size));\n inline-size: 0.375em;\n block-size: 0.75em;\n border-radius: 0;\n }\n }\n\n // tag active\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n\n // switch active\n\n &--switch {\n background: var(--switch-active-color);\n\n &::after {\n inset-inline-start: 56%;\n transform-origin: right;\n }\n }\n }\n\n // indeterminate (only checkbox?)\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\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 inset-inline-start: 0.3125em;\n inset-block-start: 0;\n inline-size: 0.7em;\n block-size: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n // The label\n &__label {\n padding-inline: var(--label-spacing);\n padding-block: 0;\n display: flex;\n align-items: center;\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 inline-size: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :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: 400;\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 inline-size: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\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 ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\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\n @Element() private host: HTMLNanoCheckboxElement;\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 if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (this.inputType === 'radio' && this.name && this.checked) {\n const form = this.host.closest('form');\n let ctrls: Element[];\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n )?.filter((radio) => !radio.closest('form'));\n }\n ctrls.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 | 'switch'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\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 return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * 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 * @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) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\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, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) 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 @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\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 requestAnimationFrame(() => (this.checked = this.input.checked));\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\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\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 form={this.form}\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"],"mappings":";;;kMAAA,MAAMA,EAAc,s9UACpB,MAAAC,EAAeD,ECkBf,IAAIE,EAAc,E,MAcLC,EAAQ,M,wIACXC,QAAU,WAAWF,MACrBG,M,0BAGCC,UAAkC,WAGHC,SAAW,MAKXC,QAAmB,MAG3D,yBAAMC,GACJ,IAAKC,KAAKL,MAAO,OAEjBK,KAAKL,MAAMG,QAAUE,KAAKF,QAE1B,GAAIE,KAAKJ,YAAc,SAAWI,KAAKC,MAAQD,KAAKF,QAAS,CAC3D,MAAMI,EAAOF,KAAKG,KAAKC,QAAQ,QAC/B,IAAIC,EACJ,GAAIH,EAAM,CACRG,EAAQC,MAAMC,KACZL,EAAKM,iBACH,GAAGC,EAAa,0BAA0BT,KAAKC,U,KAG9C,CACLI,EAAQC,MAAMC,KACZG,SAASF,iBACP,GAAGC,EAAa,0BAA0BT,KAAKC,YAEhDU,QAAQC,IAAWA,EAAMR,QAAQ,S,CAEtCC,EAAMQ,KAAKC,IACT,GAAIA,IAAOd,KAAKG,KAAMW,EAAGhB,QAAU,KAAK,G,CAG5CE,KAAKe,WAAWC,KAAK,CAAEC,MAAOjB,KAAKiB,MAAOnB,QAASE,KAAKF,S,CAMjCoB,SAAoB,MAMpBD,MAAgB,KAKhBhB,KAKAkB,SAAoB,MAKpBC,KAMJ,WAGrB,UAAAC,GACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAAStB,KAAKoB,MAC9CpB,KAAKJ,UAAY,gBACdI,KAAKJ,UAAY,O,CAMhB2B,MAKgCC,cAAyB,MAGjE,yBAAAC,GACEzB,KAAKF,QAAU,MACfE,KAAKL,MAAM6B,cAAgBxB,KAAKwB,a,CAOlC,WACIE,GACF,OAAO1B,KAAK2B,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAK5B,KAAKL,MAAO,MAAO,GACxB,OAAOK,KAAKL,MAAMkC,iB,CAMZC,MAKA5B,KAKCa,WAKAgB,UAKAC,SAST,qBAAMC,GACJ,GAAIjC,KAAKL,MAAO,OAAOK,KAAKL,K,CAS9B,oBAAMuC,CACJC,EAAyB,OAEzB,GAAIA,EAAenC,KAAKL,MAAMuC,iBAC9BlC,KAAK2B,UAAY3B,KAAKL,MAAMyC,SAASC,MAErC,MAAO,CACLC,SAAUtC,KAAK0B,QACfa,aAAcvC,KAAKL,MAAMkC,kB,CAS7B,cAAMW,CAASC,EAAiBC,EAAe,MAC7C,IAAK1C,KAAKL,MAAO,OACjB,GAAI+C,EAAc1C,KAAK2B,WAAac,EAAQE,OAC5C3C,KAAKL,MAAMiD,kBAAkBH,E,CAO/B,cAAMI,GACJ,GAAI7C,KAAKL,MAAO,CACdK,KAAKL,MAAMmD,QACXC,EAAaC,MAAMhD,KAAKL,M,EAQ5B,iBAAMsD,GACJ,GAAIjD,KAAKL,MAAO,CACdK,KAAKL,MAAMuD,OACXH,EAAaC,MAAMhD,KAAKL,MAAO,M,EAKnC,OAAAwD,CAAQC,GACN,MAAMlD,EAAOF,KAAKE,KACdQ,SAAS2C,cAAc,IAAMrD,KAAKE,MAClCF,KAAKG,KAAKC,QAAQ,QACtB,IAAKF,GAAQkD,EAAEE,SAAWtD,KAAKG,KAAKC,QAAQ,QAAS,OAErDJ,KAAKF,QAAU,K,CAKTyD,cAAiBC,IACvBxD,KAAK2B,UAAa6B,EAAGF,OAA4BlB,SAASC,KAAK,EAGzDoB,aAAgBD,IACtBxD,KAAKF,QAAW0D,EAAGF,OAA4BxD,QAC/CE,KAAKwB,cAAgB,KAAK,EAGpBkC,YAAc,KACpB1D,KAAKH,SAAW,KAChBG,KAAK+B,UAAUf,MAAM,EAGf2C,WAAa,KACnB3D,KAAKH,SAAW,MAChBG,KAAKgC,SAAShB,MAAM,EAKd,cAAA4C,GACNC,uBAAsB,IAAO7D,KAAKF,QAAUE,KAAKL,MAAMG,S,CAKzD,iBAAAgE,GACE9D,KAAKqB,Y,CAGP,gBAAA0C,GACE/D,KAAKL,MAAM6B,cAAgBxB,KAAKwB,cAChCxB,KAAK4D,iBACLb,EAAaiB,QAAQhE,KAAKL,M,CAG5B,oBAAAsE,GACElB,EAAamB,UAAUlE,KAAKL,M,CAG9B,MAAAwE,GACE,MAAMC,EAAUpE,KAAKN,QAAU,OAE/B,OACE2E,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IAAKC,EAAmBzE,KAAK8B,OAAQ,gBAAiB,OAE7DuC,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACLE,OAAQ,KACR,kBAAmB1E,KAAKF,QACxB,kBAAmBE,KAAK0B,QACxB,mBAAoB1B,KAAKkB,SACzB,kBAAmBlB,KAAKH,SACxB,wBAAyBG,KAAKwB,eAEhCmD,QAAS3E,KAAKN,SAEd2E,EAAA,SAAAE,IAAA,2CACEnD,KAAMpB,KAAKJ,UACXK,KAAMD,KAAKC,KACXC,KAAMF,KAAKE,KACXiB,SAAUnB,KAAKmB,SACfrB,QAASE,KAAKF,QACdoB,SAAUlB,KAAKkB,SACfD,MAAOjB,KAAKiB,MAAK,kBACAmD,EACjBQ,OAAQ5E,KAAK2D,WACbkB,QAAS7E,KAAK0D,YACdoB,SAAU9E,KAAKyD,aACfsB,IAAMpF,GAAWK,KAAKL,MAAQA,EAC9BqF,GAAIhF,KAAKN,QACTuF,UAAWjF,KAAKuD,gBAElBc,EAAA,QAAAE,IAAA,2CAAMC,MAAO,gCAAkCxE,KAAKoB,OAEpDiD,EAAA,OAAAE,IAAA,2CAAKS,GAAIZ,EAASI,MAAO,gCAAkCxE,KAAKoB,MAC7DpB,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QAAU0B,EAAA,QAAAE,IAAA,4CAAOvE,KAAKuB,OAClD8C,EAAA,QAAAE,IAAA,2CAAMW,OAAQlF,KAAKuB,SAAWvB,KAAKuB,MAAMoB,QACvC0B,EAAA,QAAAE,IAAA,gD","ignoreList":[]}
1
+ {"version":3,"names":["checkboxCss","NanoCheckboxStyle0","checkboxIds","Checkbox","inputId","input","inputType","hasFocus","checked","handleCheckedChange","this","name","host","isConnected","form","closest","root","getRootNode","ctrls","Array","from","querySelectorAll","transformTag","filter","radio","map","el","nanoChange","emit","value","disabled","required","type","typeChange","includes","label","indeterminate","handleIndeterminateChange","invalid","_invalid","validityMessage","validationMessage","color","nanoFocus","nanoBlur","getInputElement","reportValidity","validateFirst","validity","valid","isValid","errorMessage","setError","message","updateStatus","length","setCustomValidity","setFocus","focus","focusVisible","force","removeFocus","blur","onReset","e","document","querySelector","target","handleInvalid","ev","handleChange","handleFocus","handleBlur","isRadioChecked","requestAnimationFrame","componentWillLoad","componentDidLoad","observe","disconnectedCallback","unobserve","render","labelId","h","Host","key","class","createColorClasses","nanocb","htmlFor","onBlur","onFocus","onChange","ref","id","onInvalid","hidden"],"sources":["src/components/checkbox/checkbox.scss?tag=nano-checkbox&encapsulation=scoped","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/utilities' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /**\n * @prop --control-invalid-style: Control box-shadow when invalid. Defaults to to #{tokens.$control-invalid-style};\n * @prop --focus-shadow: Control focus box-shadow. Defaults to to #{tokens.$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 * @prop --check-bg-color: Initial Bg color of radio / checkbox controls. Changes for [checked] and [disabled] states. Defaults to #{map.get(tokens.$colors, white)};\n * @prop --check-border-color: initial border color. Defaults to #{map.get(tokens.$colors, palegrey)};\n * @prop --check-border-size: initial border size. Default to 1px;\n * @prop --check-border-style: Initial border style. Defaults to var(--check-border-size) solid var(--check-border-color);\n * @prop --check-checked-bg-color: Checked bg of controls (not tag). Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-border-color: Checked border color of radio / checkbox controls. Defaults to #{map.get(tokens.$colors, darkgrey)};\n * @prop --check-checked-higlight-color: Checked forgrdound / icon color. Defaults to #{map.get(tokens.$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 #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n * @prop --tagbox-border-color: Defaults to rgb(var(--tagbox-rgb) / 50%);\n * @prop --tagbox-bg-color: Defaults to rgb(var(--tagbox-rgb) / 10%);\n * @prop --segment-color: Segment, unselected text color. (selected color is --check-checked-higlight-color). Defaults to #{map.get(tokens.$colors, blue)};\n * @prop --segment-border-radius: Defaults to 3px;\n * @prop --segment-shadow: Defaults to 0 1px 4px rgb(0 0 0 / 20%);\n * @prop --switch-inactive-color: Defaults to rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n * @prop --switch-active-color: Defaults to #{map.get(tokens.$colors, blue)};\n */\n\n --focus-shadow: #{tokens.$control-focus-style};\n --invalid-shadow: #{tokens.$control-focus-size + ' ' map.get(tokens.$colors, red)};\n --padding: initial;\n --check-bg-color: #{map.get(tokens.$colors, white)};\n --check-border-color: #{map.get(tokens.$colors, palegrey)};\n --check-border-size: 1px;\n --check-border-style: var(--check-border-size) solid var(--check-border-color);\n --check-checked-bg-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-border-color: #{map.get(tokens.$colors, darkgrey)};\n --check-checked-higlight-color: #{map.get(tokens.$colors, white)};\n --check-base-size: inherit;\n --label-spacing: 10px 0;\n\n // type specific\n\n // tag\n --tagbox-rgb: #{mx.color-to-rgb-list(map.get(tokens.$colors, lightblue))};\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 50%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 20%);\n --tagbox-border-radius: 0;\n\n // segment\n --segment-color: #{map.get(tokens.$colors, blue)};\n --segment-border-radius: 3px;\n --segment-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n // cb / radio\n --cb-border-radius: 2px;\n --radio-border-radius: 50%;\n\n // switch\n --switch-inactive-color: rgb(#{mx.color-to-rgb-list(map.get(tokens.$colors, palegrey))} / 70%);\n --switch-active-color: #{map.get(tokens.$colors, blue)};\n\n display: inline-block;\n max-inline-size: 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='radio'][checked]):not([checked='false']) {\n --check-border-size: 0.3125em;\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-color: #{rgba(map.get(tokens.$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: #{tokens.$control-focus-size} var(--nano-color-shade);\n}\n\n:host([checked]:not([checked='false'])) {\n --tagbox-border-color: rgb(var(--tagbox-rgb) / 80%);\n --tagbox-bg-color: rgb(var(--tagbox-rgb) / 50%);\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: #{mx.color-to-rgb-list(map.get(tokens.$colors, mediumgrey))};\n --check-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --check-checked-bg-color: #{rgba(map.get(tokens.$colors, mediumgrey), 0.5)};\n --segment-color: #{map.get(tokens.$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 // The mock, viewable 'input' control. Only relevant for controls where the label\n // is outside / separate from the UI control (e.g. checkbox, radio, switch).\n\n &__input {\n border-radius: var(--cb-border-radius, 3px);\n font-size: var(--check-base-size);\n position: relative;\n block-size: 1.5em;\n inline-size: 1.5em;\n min-inline-size: 1.5em;\n border: var(--check-border-style);\n box-shadow: 0 1px 4px rgb(0 0 0 / 20%);\n\n &::before {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.725em - var(--check-border-size));\n inset-block-start: calc(0.725em - var(--check-border-size));\n inline-size: 0;\n block-size: 0;\n border: 2px solid var(--check-checked-higlight-color);\n transform: scale(0);\n }\n\n &--radio {\n border-radius: var(--radio-border-radius);\n background-color: var(--check-bg-color);\n }\n\n &--checkbox {\n background-color: var(--check-bg-color);\n\n &::after {\n border-radius: var(--cb-border-radius);\n position: absolute;\n content: '';\n inset-inline-start: calc(0.825em - var(--check-border-size));\n inset-block-start: calc(0.825em - var(--check-border-size));\n block-size: 0;\n inline-size: 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;\n }\n }\n }\n\n &--switch {\n border-radius: 1em !important;\n inline-size: 2.4em;\n block-size: 1.3em;\n background: var(--switch-inactive-color);\n\n :host([type=\"switch\"]:not([disabled])) & {\n &:hover::after {\n scale: 1.1 1;\n }\n }\n\n &::after {\n position: relative;\n content: '';\n display: block;\n border-radius: inherit;\n block-size: 80%;\n inline-size: 40%;\n background: var(--check-checked-higlight-color);\n transform-origin: left;\n inset-inline-start: 6%;\n inset-block-start: 10%;\n transition: .1s ease scale, .15s ease left;\n }\n }\n\n &--segment,\n &--segment-pill {\n @include mx.visually-hide();\n\n &::before {\n display: none;\n }\n }\n\n &--tag {\n @include mx.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 rgb(0 0 0 / 20%), 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 // The 'real' input control which we hide but use it's state for display\n input {\n @include mx.visually-hide();\n\n &:focus ~ .nanocb__input {\n box-shadow: 0 0 15px rgb(0 0 0 / 20%), 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 border-radius: var(--cb-border-radius);\n background-color: var(--check-checked-bg-color);\n transform: rotate(0deg) scale(1);\n opacity: 1;\n border-color: var(--check-checked-border-color);\n\n // segment / segment-pill active\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 rgb(0 0 0 / 20%);\n }\n\n // radio active\n\n &--radio {\n border-radius: var(--radio-border-radius);\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 active\n\n &--checkbox {\n &::after {\n transform: rotate(45deg) scale(1);\n opacity: 1;\n inset-inline-start: calc(0.575em - var(--check-border-size));\n inset-block-start: calc(0.2875em - var(--check-border-size));\n inline-size: 0.375em;\n block-size: 0.75em;\n border-radius: 0;\n }\n }\n\n // tag active\n\n &--tag + .nanocb__label::after {\n transform: rotate(45deg);\n }\n\n // switch active\n\n &--switch {\n background: var(--switch-active-color);\n\n &::after {\n inset-inline-start: 56%;\n transform-origin: right;\n }\n }\n }\n\n // indeterminate (only checkbox?)\n\n &:indeterminate ~ .nanocb__input--checkbox {\n border-radius: var(--input-border-radius, 5px);\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 inset-inline-start: 0.3125em;\n inset-block-start: 0;\n inline-size: 0.7em;\n block-size: 0.7em;\n border-radius: 0;\n }\n }\n }\n\n // The label\n &__label {\n padding-inline: var(--label-spacing);\n padding-block: 0;\n display: flex;\n align-items: center;\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 inline-size: 100%;\n }\n\n &--segment-pill {\n // first\n :host(:first-of-type) & {\n border-start-start-radius: var(--segment-border-radius);\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n border-end-start-radius: var(--segment-border-radius);\n border-inline-end: none;\n }\n\n // middle\n :host(:not(:last-of-type):not(:first-of-type)) & {\n border-radius: 0;\n border-inline-end: none;\n }\n\n // last\n :host(:last-of-type) & {\n border-start-start-radius: 0;\n border-start-end-radius: var(--segment-border-radius);\n border-end-end-radius: var(--segment-border-radius);\n border-end-start-radius: 0;\n }\n\n // single\n :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: 400;\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 inline-size: 100%;\n\n &::after {\n content: '+';\n margin-inline: 0.3125em 0;\n margin-block: 0;\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 ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\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\n @Element() private host: HTMLNanoCheckboxElement;\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 if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (\n this.inputType === 'radio' &&\n this.name &&\n this.checked &&\n this.host.isConnected\n ) {\n const form = this.host.closest('form');\n const root = this.host.getRootNode() as ShadowRoot | Document;\n let ctrls: Element[];\n\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n root.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n )?.filter((radio) => !radio.closest('form'));\n }\n ctrls.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 | 'switch'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\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 return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * 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 * @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) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\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, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) 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 @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\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 requestAnimationFrame(() => (this.checked = this.input.checked));\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\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\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 form={this.form}\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"],"mappings":";;;uMAAA,MAAMA,EAAc,s9UACpB,MAAAC,EAAeD,ECkBf,IAAIE,EAAc,E,MAcLC,EAAQ,M,wIACXC,QAAU,WAAWF,MACrBG,M,0BAGCC,UAAkC,WAGHC,SAAW,MAKXC,QAAmB,MAG3D,yBAAMC,GACJ,IAAKC,KAAKL,MAAO,OAEjBK,KAAKL,MAAMG,QAAUE,KAAKF,QAE1B,GACEE,KAAKJ,YAAc,SACnBI,KAAKC,MACLD,KAAKF,SACLE,KAAKE,KAAKC,YACV,CACA,MAAMC,EAAOJ,KAAKE,KAAKG,QAAQ,QAC/B,MAAMC,EAAON,KAAKE,KAAKK,cACvB,IAAIC,EAEJ,GAAIJ,EAAM,CACRI,EAAQC,MAAMC,KACZN,EAAKO,iBACH,GAAGC,EAAa,0BAA0BZ,KAAKC,U,KAG9C,CACLO,EAAQC,MAAMC,KACZJ,EAAKK,iBACH,GAAGC,EAAa,0BAA0BZ,KAAKC,YAEhDY,QAAQC,IAAWA,EAAMT,QAAQ,S,CAEtCG,EAAMO,KAAKC,IACT,GAAIA,IAAOhB,KAAKE,KAAMc,EAAGlB,QAAU,KAAK,G,CAG5CE,KAAKiB,WAAWC,KAAK,CAAEC,MAAOnB,KAAKmB,MAAOrB,QAASE,KAAKF,S,CAMjCsB,SAAoB,MAMpBD,MAAgB,KAKhBlB,KAKAoB,SAAoB,MAKpBC,KAMJ,WAGrB,UAAAC,GACE,GAAI,CAAC,WAAY,SAAU,OAAOC,SAASxB,KAAKsB,MAC9CtB,KAAKJ,UAAY,gBACdI,KAAKJ,UAAY,O,CAMhB6B,MAKgCC,cAAyB,MAGjE,yBAAAC,GACE3B,KAAKF,QAAU,MACfE,KAAKL,MAAM+B,cAAgB1B,KAAK0B,a,CAOlC,WACIE,GACF,OAAO5B,KAAK6B,Q,CAELA,SAAW,MAKpB,mBACIC,GACF,IAAK9B,KAAKL,MAAO,MAAO,GACxB,OAAOK,KAAKL,MAAMoC,iB,CAMZC,MAKA5B,KAKCa,WAKAgB,UAKAC,SAST,qBAAMC,GACJ,GAAInC,KAAKL,MAAO,OAAOK,KAAKL,K,CAS9B,oBAAMyC,CACJC,EAAyB,OAEzB,GAAIA,EAAerC,KAAKL,MAAMyC,iBAC9BpC,KAAK6B,UAAY7B,KAAKL,MAAM2C,SAASC,MAErC,MAAO,CACLC,SAAUxC,KAAK4B,QACfa,aAAczC,KAAKL,MAAMoC,kB,CAS7B,cAAMW,CAASC,EAAiBC,EAAe,MAC7C,IAAK5C,KAAKL,MAAO,OACjB,GAAIiD,EAAc5C,KAAK6B,WAAac,EAAQE,OAC5C7C,KAAKL,MAAMmD,kBAAkBH,E,CAO/B,cAAMI,GACJ,GAAI/C,KAAKL,MAAO,CACdK,KAAKL,MAAMqD,QACXC,EAAaC,MAAMlD,KAAKL,M,EAQ5B,iBAAMwD,GACJ,GAAInD,KAAKL,MAAO,CACdK,KAAKL,MAAMyD,OACXH,EAAaC,MAAMlD,KAAKL,MAAO,M,EAKnC,OAAA0D,CAAQC,GACN,MAAMlD,EAAOJ,KAAKI,KACdmD,SAASC,cAAc,IAAMxD,KAAKI,MAClCJ,KAAKE,KAAKG,QAAQ,QACtB,IAAKD,GAAQkD,EAAEG,SAAWzD,KAAKE,KAAKG,QAAQ,QAAS,OAErDL,KAAKF,QAAU,K,CAKT4D,cAAiBC,IACvB3D,KAAK6B,UAAa8B,EAAGF,OAA4BnB,SAASC,KAAK,EAGzDqB,aAAgBD,IACtB3D,KAAKF,QAAW6D,EAAGF,OAA4B3D,QAC/CE,KAAK0B,cAAgB,KAAK,EAGpBmC,YAAc,KACpB7D,KAAKH,SAAW,KAChBG,KAAKiC,UAAUf,MAAM,EAGf4C,WAAa,KACnB9D,KAAKH,SAAW,MAChBG,KAAKkC,SAAShB,MAAM,EAKd,cAAA6C,GACNC,uBAAsB,IAAOhE,KAAKF,QAAUE,KAAKL,MAAMG,S,CAKzD,iBAAAmE,GACEjE,KAAKuB,Y,CAGP,gBAAA2C,GACElE,KAAKL,MAAM+B,cAAgB1B,KAAK0B,cAChC1B,KAAK+D,iBACLd,EAAakB,QAAQnE,KAAKL,M,CAG5B,oBAAAyE,GACEnB,EAAaoB,UAAUrE,KAAKL,M,CAG9B,MAAA2E,GACE,MAAMC,EAAUvE,KAAKN,QAAU,OAE/B,OACE8E,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,IAAKC,EAAmB5E,KAAKgC,OAAQ,gBAAiB,OAE7DwC,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACLE,OAAQ,KACR,kBAAmB7E,KAAKF,QACxB,kBAAmBE,KAAK4B,QACxB,mBAAoB5B,KAAKoB,SACzB,kBAAmBpB,KAAKH,SACxB,wBAAyBG,KAAK0B,eAEhCoD,QAAS9E,KAAKN,SAEd8E,EAAA,SAAAE,IAAA,2CACEpD,KAAMtB,KAAKJ,UACXK,KAAMD,KAAKC,KACXG,KAAMJ,KAAKI,KACXiB,SAAUrB,KAAKqB,SACfvB,QAASE,KAAKF,QACdsB,SAAUpB,KAAKoB,SACfD,MAAOnB,KAAKmB,MAAK,kBACAoD,EACjBQ,OAAQ/E,KAAK8D,WACbkB,QAAShF,KAAK6D,YACdoB,SAAUjF,KAAK4D,aACfsB,IAAMvF,GAAWK,KAAKL,MAAQA,EAC9BwF,GAAInF,KAAKN,QACT0F,UAAWpF,KAAK0D,gBAElBc,EAAA,QAAAE,IAAA,2CAAMC,MAAO,gCAAkC3E,KAAKsB,OAEpDkD,EAAA,OAAAE,IAAA,2CAAKS,GAAIZ,EAASI,MAAO,gCAAkC3E,KAAKsB,MAC7DtB,KAAKyB,SAAWzB,KAAKyB,MAAMoB,QAAU2B,EAAA,QAAAE,IAAA,4CAAO1E,KAAKyB,OAClD+C,EAAA,QAAAE,IAAA,2CAAMW,OAAQrF,KAAKyB,SAAWzB,KAAKyB,MAAMoB,QACvC2B,EAAA,QAAAE,IAAA,gD","ignoreList":[]}
package/dist/nano-components/nano-components.esm.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{p as e,w as a,N as n,H as l,b as o}from"./index-6cc72cd9.js";export{s as setNonce}from"./index-6cc72cd9.js";import{g as t}from"./app-globals-f0120bbe.js";var i=()=>{{r(l.prototype)}const o=a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${n}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===n));const t=import.meta.url;const i=(o||{})["data-opts"]||{};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};var r=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const n=a.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){n.appendChild(l[e].cloneNode(true))}}}return n}};i().then((async e=>{await t();return o(JSON.parse('[["nano-global-nav",[[1,"nano-global-nav",{"env":[1],"ssoDataUrl":[1,"sso-data-url"],"myAccountData":[16],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[1040],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"userProfileUrl":[32],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]],{"myAccountData":["handleMyAccountData"],"env":["getMyAccData"],"ssoDataUrl":["getMyAccData"],"searchIndex":["currentSelectedIndex"],"searchValInternal":["changeInternalSearchVal"],"searchApiKey":["initAlgoliaClient"],"searchAppId":["initAlgoliaClient"],"searchIndeces":["addIndeces"],"internalSearchIndeces":["addAlgoliaIndeces"],"threshold":["thresholdChange"],"thresholdReady":["assessReady"],"remoteDataReady":["assessReady"],"showAutocomplete":["setupAutocompleteBlur","resetHitFocus"],"secondaryMenuOpen":["closeSearchBar"],"aboutSlotLen":["slotChange"],"iconSlotLen":["slotChange"],"mainSlotLen":["slotChange"],"overflowSlotLen":["slotChange"],"searchSlotLen":["slotChange"],"userMenuOpen":["handleUserMenu"]}]]],["nano-table",[[4,"nano-table",{"customRenderer":[16],"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[4],"placeholderSize":[2,"placeholder-size"],"rows":[16],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"virtualTotalItems":[2,"virtual-total-items"],"appliedFilters":[2064],"internalLoading":[32],"blocks":[32],"activeBlocks":[32],"resetSorting":[64],"addSort":[64],"resetFilters":[64],"addFilters":[64],"removeFilters":[64],"updateRow":[64]},null,{"rows":["handleRowsChange"],"columns":["handleColsChange"],"searchTerm":["handleSearchTermChange"],"virtualTotalItems":["virtualTotalItemsChangeHandler"]}]]],["nano-date-input",[[6,"nano-date-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"dropDownConfig":[6160],"dateValue":[2064],"isDateDisabled":[16],"pattern":[32],"inputValue":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},null,{"value":["handleValueChange","testDateValidity"],"dateOrder":["handleDateOrderChange"],"min":["testDateValidity"],"max":["testDateValidity"],"pickerOpen":["handlePickerOpenChange"]}]]],["nano-dialog",[[1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"hidden":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"],"hoist":["handleHoistChange"]}]]],["nano-drawer",[[1,"nano-drawer",{"open":[1540],"label":[513],"placement":[513],"contained":[516],"noHeader":[516,"no-header"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"noUserDismiss":[4,"no-user-dismiss"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]},null,{"hoist":["handleHoistChange"],"contained":["handleNoModalChange"],"open":["handleOpenChange"]}]]],["nano-hero",[[1,"nano-hero",{"imgSrc":[1,"img-src"],"imgSrcSet":[1,"img-src-set"],"largeScreenBP":[2,"large-screen-b-p"],"theme":[1],"level":[1],"hasIconBox":[32],"hasScrim":[32],"hasSecondaryContent":[32],"hasQuote":[32],"hasBg":[32],"hasBackBtn":[32],"hasCtas":[32],"breadCrumbs":[32],"iconBoxItems":[32]},null,{"breadCrumbs":["breadCrumbChange"],"iconBoxItems":["iconBoxItemChange"]}]]],["nano-alert",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"noDismiss":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"],"hoist":["handleHoistChange"]}]]],["nano-file-upload",[[6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"form":[1],"invalid":[2564],"validityMessage":[2049,"validity-message"],"files":[6160],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"],[16,"reset","onReset"]],{"fileList":["fileListChange","shouldValidate"],"maxFiles":["shouldValidate"],"maxFileSize":["shouldValidate"],"capture":["shouldValidate"],"accept":["shouldValidate"],"required":["shouldValidate"],"disabled":["shouldValidate"]}]]],["nano-overflow-nav",[[1,"nano-overflow-nav",{"scrollControls":[4,"scroll-controls"],"orientation":[513],"activeHandler":[16],"inActiveHandler":[16],"isActiveHandler":[16],"instantReCalc":[32],"hasScrollControls":[32],"hideControlEnd":[32],"hideControlStart":[32],"syncActiveItem":[64]},null,{"isActiveHandler":["watchIsActiveHandler"],"hasScrollControls":["watchScrollControls"],"hideControlEnd":["hideEndBtn"],"hideControlStart":["hideStartBtn"]}]]],["nano-tab",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["nano-global-search-results",[[1,"nano-global-search-results",{"algoliaResults":[32],"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32],"closeSearch":[64]},[[16,"nanoSearchReset","handleGlobalNavReset"],[16,"nanoSearchResult","handleGlobalNavSearch"],[0,"nanoChange","handleReorder"],[0,"nanoResultsShown","attachListeners"],[16,"nanoNewResults","attachResultListeners"]],{"algoliaEle":["handleAlgoliaCredsChange","handleAlgoliaIndexChange","handleAlgoliaEleChange"],"apiKey":["handleAlgoliaCredsChange"],"appId":["handleAlgoliaCredsChange"],"index":["handleAlgoliaIndexChange"],"algoliaResults":["handleAlgoliaEleChange"]}]]],["nano-menu-drawer",[[1,"nano-menu-drawer",{"open":[1028],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"],[16,"nanoIsReady","handleGlobalNavReady"]],{"open":["openChange"],"widthOk":["widthChange"],"hideHeight":["hideHeightChange"]}]]],["nano-split-pane",[[1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"],"getPercentageToPixels":[64],"getPixelsToPercentage":[64]},null,{"position":["handlePositionChange"],"positionInPixels":["handlePositionInPixelsChange"]}]]],["nano-tab-group",[[1,"nano-tab-group",{"placement":[513],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32],"show":[64]},[[0,"nanoTabClose","handleTabClose"]],{"tab":["handleTabNameChange"],"placement":["handlePlacementChange"],"noScrollControls":["handleNoScrollControlsChange"],"hideControlRight":["hideRightBtn"],"hideControlLeft":["hideLeftBtn"],"hasScrollControls":["watchScrollControls"]}]]],["nano-accordion",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["nano-algolia-filter",[[1,"nano-algolia-filter",{"filterName":[1,"filter-name"],"value":[1025],"operator":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"changeEvent":[32],"internalValue":[32],"showFilter":[32],"indexResults":[32],"filterChanged":[32],"facets":[32],"tplRenderFn":[32],"globalStoreMethod":[32]},[[0,"nanoChange","handleChangeEvent"],[0,"change","handleChangeEvent"]],{"value":["valueSet"],"internalValue":["valueChanged"],"facets":["appliedFilterChanged"],"tplRenderFn":["tplUpdate"],"indexResults":["handleFilterChange"]}]]],["nano-algolia-pagination",[[1,"nano-algolia-pagination",{"maxToShow":[2,"max-to-show"],"currentPage":[32],"canGoPrev":[32],"canGoNext":[32],"show":[32],"tplRenderFn":[32],"indexResults":[32],"infiniteScroll":[32],"nextPage":[64],"prevPage":[64],"goToPage":[64]},null,{"currentPage":["currentPageChange"],"infiniteScroll":["infiniteScrollChange"]}]]],["nano-algolia-results",[[1,"nano-algolia-results",{"infiniteScroll":[4,"infinite-scroll"],"appendPages":[4,"append-pages"],"showResults":[32],"tplRenderFn":[32],"results":[32],"indexResults":[32],"resultsPage":[32],"changeEvent":[32],"facets":[32],"isLoading":[32]},null,{"results":["addContentIndex","resultsChange"],"tplRenderFn":["resultsChange"],"facets":["headerFooterChange"],"appendPages":["appendChange"],"infiniteScroll":["infiniteScrollChange"],"resultsPage":["handlePageChage"],"isLoading":["handleLoading"]}]]],["nano-animation",[[1,"nano-animation",{"name":[1],"play":[1540],"delay":[2],"direction":[1],"duration":[2],"easing":[1],"endDelay":[2,"end-delay"],"fill":[1],"iterations":[2],"iterationStart":[2,"iteration-start"],"keyframes":[16],"playbackRate":[2,"playback-rate"],"currentTime":[6146,"current-time"],"defaultSlot":[32],"cancel":[64],"finish":[64]},null,{"defaultSlot":["createAnimation"],"name":["handleAnimationChange"],"delay":["handleAnimationChange"],"direction":["handleAnimationChange"],"duration":["handleAnimationChange"],"easing":["handleAnimationChange"],"endDelay":["handleAnimationChange"],"fill":["handleAnimationChange"],"iterations":["handleAnimationChange"],"iterationStart":["handleAnimationChange"],"keyframes":["handleAnimationChange"],"play":["handlePlayChange"],"playbackRate":["handlePlaybackRateChange"]}]]],["nano-checkbox",[[6,"nano-checkbox",{"hasFocus":[1540,"has-focus"],"checked":[1540],"disabled":[516],"value":[513],"name":[513],"required":[516],"type":[513],"label":[1],"indeterminate":[1540],"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"form":[1],"inputType":[32],"_invalid":[32],"getInputElement":[64],"reportValidity":[64],"setError":[64],"setFocus":[64],"removeFocus":[64]},[[16,"reset","onReset"]],{"checked":["handleCheckedChange"],"type":["typeChange"],"indeterminate":["handleIndeterminateChange"]}]]],["nano-checkbox-group",[[6,"nano-checkbox-group",{"validateOn":[1025,"validate-on"],"showInlineError":[4,"show-inline-error"],"min":[2],"max":[2],"disabled":[516],"legend":[1],"hideLegend":[4,"hide-legend"],"invalid":[2564],"validityMessage":[2049,"validity-message"],"value":[1025],"checkboxes":[32],"nativeCbs":[32],"errorMessage":[32],"showErrorMsg":[32],"hasHelperSlot":[32],"_invalid":[32],"reportValidity":[64],"showError":[64]},[[0,"nanoChange","handleValueChange"]],{"value":["handleValuePropChange"],"min":["handleCbChange"],"max":["handleCbChange"],"nativeCbs":["customValidate"],"checkboxes":["handleComponentChange","handleDisabledChange"],"disabled":["handleDisabledChange"]}]]],["nano-details",[[1,"nano-details",{"label":[1],"open":[1540],"disabled":[516],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"useCacheHeight":[4,"use-cache-height"]},null,{"open":["toggleClick"]}]]],["nano-field-validator",[[6,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"extraFieldSelector":[1,"extra-field-selector"],"validation":[16],"submitted":[32],"userForm":[32],"_dirty":[32],"_valid":[32],"_store":[32],"setStore":[64],"setCustomValidity":[64],"resetValidity":[64],"scrollToFirstInvalid":[64]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]],{"userForm":["userFormChange"],"validateOn":["validateOnChange"],"extraFieldSelector":["attachSlotObserver"]}]]],["nano-grid-item",[[1,"nano-grid-item"]]],["nano-intersection-observe",[[1,"nano-intersection-observe",{"root":[1],"rootMargin":[1,"root-margin"],"threshold":[1],"defaultSlot":[32]},null,{"root":["handleRootChange"],"threshold":["handleThresholdChange"],"defaultSlot":["addIO"]}]]],["nano-more-less",[[1,"nano-more-less",{"show":[1540],"childrenSelector":[1,"children-selector"],"maxToShow":[2,"max-to-show"],"noHideBtn":[4,"no-hide-btn"]},null,{"maxToShow":["handleShowHideElements"],"show":["handleShowHideElements"],"childrenSelector":["handleShowHideElements"]}]]],["nano-range",[[6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]},null,{"debounce":["debounceChanged"],"min":["minChanged"],"max":["maxChanged"],"disabled":["disabledChanged"],"value":["valueChanged"]}]]],["nano-rating",[[2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32],"setFocus":[64],"removeFocus":[64]},null,{"value":["handleValueChange"],"symbolName":["handleSymbolChange"]}]]],["nano-slide",[[1,"nano-slide",{"ready":[1540]},null,{"ready":["readyChange"]}]]],["nano-slides",[[1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32],"update":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipes":[64],"getflickity":[64],"reload":[64]},null,{"options":["optionsChanged"],"navbtns":["navbtnsChanged"],"pager":["pagerChanged"],"fullscreenbtn":["fullscreenBtnChanged"],"fullscreen":["fullscreenChanged"],"animation":["animationChange"],"currentSlide":["currentSlideChange"],"iCurrentSlide":["internalSlideChange"],"autoplay":["autoPlayChange"]}]]],["nano-sortable",[[1,"nano-sortable",{"itemSelector":[1,"item-selector"],"handleSelector":[1,"handle-selector"],"dropzoneSelector":[1,"dropzone-selector"],"helperText":[1,"helper-text"],"itemDescriptor":[16],"grabbedHelperText":[16],"droppedHelperText":[16],"reorderHelperText":[16],"createKeyboardHandle":[16],"sortableHostElement":[16],"animationEnabled":[4,"animation-enabled"],"draggedClass":[1,"dragged-class"],"handleDraggedClass":[1,"handle-dragged-class"],"placeholderClass":[1,"placeholder-class"],"dropzoneActiveClass":[1,"dropzone-active-class"],"animationTiming":[8,"animation-timing"],"orientation":[1],"dragResize":[4,"drag-resize"],"keyboardSortActive":[32],"ariaTextList":[32],"refreshKeyboardHandles":[64]},null,{"itemSelector":["handleItemSelectorChange"],"handleSelector":["handleHandleSelectorChange"],"createKeyboardHandle":["handleCreateKeyboardHandleChange"],"sortableHostElement":["handleSortableHostElement"]}]]],["nano-tab-content",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["nano-algolia",[[1,"nano-algolia",{"showResults":[1028,"show-results"],"resultsPage":[1026,"results-page"],"appId":[1025,"app-id"],"apiKey":[1025,"api-key"],"searchIndex":[1040],"searchIndexName":[1025,"search-index-name"],"listenTo":[1,"listen-to"],"query":[1025],"operator":[1],"filters":[16],"tplRenderFn":[16],"replicaIndex":[1025,"replica-index"],"browseIndex":[1028,"browse-index"],"minChars":[2,"min-chars"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"_dynFacetFilters":[32],"inputField":[32],"algoliaIndex":[32],"indeces":[32],"indexResults":[32],"filterChanged":[32],"currentHits":[32],"changeEvent":[32],"isLoading":[32],"wormholeState":[32],"removeFilters":[64]},[[0,"nanoTplUpdated","onAllTplUpdate"],[0,"nanoPageChanged","onPageChange"],[0,"nanoFilterChanged","onFilterChange"],[16,"nanoChange","handleInputChange"],[16,"change","handleInputChange"]],{"listenTo":["handleListenToChange"],"_dynFacetFilters":["dynFacetFiltersChange"],"browseIndex":["browseIndexChange"],"inputField":["inputFieldSet"],"query":["queryChange"],"replicaIndex":["internalIndexSwitch"],"resultsPage":["pageChange"],"searchIndexName":["searchIndexNameChange"],"apiKey":["initAlgoliaClient"],"appId":["initAlgoliaClient"],"searchIndex":["initAlgoliaIndex"],"showResults":["showResultsChange"],"filters":["handleFilterpropChange"]}]]],["nano-date-picker",[[1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32],"setFocus":[64]},null,{"selectedDate":["handleSelectedDateChange"]}]]],["nano-progress-bar",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["nano-grid_2",[[1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]},null,{"_src":["_srcChanged"],"src":["srcChanged"],"srcSet":["srcSetChanged"],"lazy":["lazyChanged"]}],[1,"nano-grid",{"sSize":[520,"s-size"],"mSize":[520,"m-size"],"lSize":[520,"l-size"],"xlSize":[520,"xl-size"],"sCols":[514,"s-cols"],"mCols":[514,"m-cols"],"lCols":[514,"l-cols"],"xlCols":[514,"xl-cols"],"xxlCols":[514,"xxl-cols"],"sTpl":[1,"s-tpl"],"mTpl":[1,"m-tpl"],"lTpl":[1,"l-tpl"],"xlTpl":[1,"xl-tpl"],"xxlTpl":[1,"xxl-tpl"],"showHelper":[516,"show-helper"],"cacheKey":[32]},null,{"sTpl":["constructSizeArray"],"mTpl":["constructSizeArray"],"lTpl":["constructSizeArray"],"xlTpl":["constructSizeArray"],"xxlTpl":["constructSizeArray"],"sSize":["constructSizeArray"],"mSize":["constructSizeArray"],"lSize":["constructSizeArray"],"xlSize":["constructSizeArray"],"sCols":["constructSizeArray"],"mCols":["constructSizeArray"],"lCols":["constructSizeArray"],"xlCols":["constructSizeArray"],"xxlCols":["constructSizeArray"],"showHelper":["constructSizeArray"]}]]],["nano-input",[[6,"nano-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[513],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"errorMessage":[32],"datalist":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"select":[64],"getInputElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]],{"datalist":["setDataListOpts"],"minlength":["shouldValidate"],"maxlength":["shouldValidate"],"min":["shouldValidate"],"max":["shouldValidate"],"required":["shouldValidate"],"disabled":["shouldValidate"],"readonly":["shouldValidate"],"pattern":["shouldValidate"],"inputmode":["shouldValidate"],"value":["valueChanged"],"debounce":["debounceChanged"]}]]],["nano-sticker",[[1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32],"isHiding":[64],"isSticking":[64],"setTriggerPos":[64],"getTriggerPos":[64],"pauseHiding":[64]},null,{"trigger":["updateTriggerOffset"],"scrollParent":["updateTriggerOffset","handleParentEvents","setupIO"],"position":["stickerResizeListener","positionChange"],"quietMode":["quietModeChange"],"offset":["setOffset"],"_offset":["setOffset"],"isStuck":["stuckChange"],"quietModeIsOn":["attachScrollListeners"],"stickToEle":["handleParentEvents","stickToEleChange"],"stickTo":["stickToChange"],"multiStickerHide":["visibilityDecisionHandler"],"scrollHide":["visibilityDecisionHandler"],"hide":["handleHideChange"]}]]],["nano-spinner",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["nano-dropdown",[[1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"closeOnSelect":[4,"close-on-select"],"containingElement":[1040],"tetherTo":[16],"placement":[1],"distance":[2],"skidding":[2],"hoist":[1028],"dialogTitle":[1,"dialog-title"],"eventType":[16],"show":[64],"hide":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]],{"open":["handleOpenChange"],"tetherTo":["handleTetherToChange"],"placement":["handlePopoverOptionsChange"],"distance":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"]}]]],["nano-resize-observe_2",[[1,"nano-resize-observe",{"notifyContentFit":[1,"notify-content-fit"],"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32],"contentFitX":[32],"contentFitY":[32]},null,{"classNames":["classNameChange"],"states":["newStatesProp","statesChanged"],"currentHeight":["dimensionChanged"],"currentWidth":["dimensionChanged"]}],[1,"nano-skeleton",{"animated":[4]}]]],["nano-icon",[[1,"nano-icon",{"color":[1],"role":[1537],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]},null,{"ariaLabel":["udpateRole"],"role":["setAriaLabel"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["nano-datalist_3",[[1,"nano-datalist",{"selected":[1040],"dropDownConfig":[6160],"options":[16],"input":[1],"type":[1],"activeOptions":[2064],"open":[1028],"disableFilter":[4,"disable-filter"],"disabled":[4],"actvOptEles":[32],"connectedInput":[32],"inputLabel":[32],"hasNoResult":[32],"shouldOpen":[32],"canOpen":[32],"optionIds":[32]},null,{"open":["openWatcher"],"input":["watchInputChange"],"options":["handleOptionsChange"],"type":["watchTypeChange"],"connectedInput":["watchTypeChange","manageInputEvents"],"selected":["watchActvOptChange"],"actvOptEles":["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],"hasNoResult":["manageCanOpen"],"shouldOpen":["manageDropdownDisplay"],"canOpen":["manageDropdownDisplay"]}],[1,"nano-option",{"value":[1537],"label":[1537],"selected":[516],"disabled":[516],"filterMeta":[1,"filter-meta"],"hasFocus":[32]},[[0,"keydown","handleKeyDown"]],{"value":["valueChanged"],"label":["labelChanged"]}],[1,"nano-menu",{"hasFocus":[2052,"has-focus"],"type":[1],"label":[1],"setFocus":[64],"removeFocus":[64],"showActiveElement":[64],"resetActiveItem":[64]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-global-nav-user-profile_3",[[6,"nano-select",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"maxValuesVisible":[8,"max-values-visible"],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[16],"valueTagTemplate":[16],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_invalid":[32],"_elementOptions":[32],"reportValidity":[64],"setFocus":[64],"getSelectElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]],{"maxValuesVisible":["watchMaxValuesVisible"],"debounce":["debounceChanged"],"required":["shouldValidate"],"disabled":["shouldValidate"],"min":["shouldValidate"],"max":["shouldValidate"],"readonly":["shouldValidate"],"value":["valueChanged"],"dropDownConfig":["setDataListOpts"]}],[0,"nano-global-nav-user-profile",{"myAccountUser":[16],"userProfileUrl":[1,"user-profile-url"]}],[1,"nano-nav-item",{"href":[1025],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"notification":[4],"hasAnchorEle":[32],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"hasFocus":[32],"setFocus":[64]},[[16,"click","handleClose"],[16,"keyup","handleClose"]],{"open":["openChange"],"didOpen":["didOpenChange"]}]]],["nano-icon-button_2",[[1,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"rel":[1],"target":[1],"form":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[1028],"trigger":[1],"show":[64],"hide":[64]},null,{"content":["setLabel"],"open":["handleOpenChange"]}]]]]'),e)}));
4
+ import{p as e,w as a,N as n,H as l,b as o}from"./index-6cc72cd9.js";export{s as setNonce}from"./index-6cc72cd9.js";import{g as t}from"./app-globals-f0120bbe.js";var i=()=>{{r(l.prototype)}const o=a.document&&Array.from(a.document.querySelectorAll("script")).find((e=>new RegExp(`/${n}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===n));const t=import.meta.url;const i=(o||{})["data-opts"]||{};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};var r=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const n=a.call(this,false);const l=this.childNodes;if(e){for(let e=0;e<l.length;e++){if(l[e].nodeType!==2){n.appendChild(l[e].cloneNode(true))}}}return n}};i().then((async e=>{await t();return o(JSON.parse('[["nano-global-nav",[[1,"nano-global-nav",{"env":[1],"ssoDataUrl":[1,"sso-data-url"],"myAccountData":[16],"ssoRedirect":[1,"sso-redirect"],"getMyAccountData":[4,"get-my-account-data"],"activeMyAccountSections":[16],"showSearch":[4,"show-search"],"showLogo":[4,"show-logo"],"logoUrl":[1,"logo-url"],"searchIndeces":[16],"myAccountUser":[1040],"searchAppId":[1025,"search-app-id"],"searchApiKey":[1025,"search-api-key"],"searchValue":[1025,"search-value"],"searchIndex":[1025,"search-index"],"cartCount":[1026,"cart-count"],"msgCount":[1026,"msg-count"],"cartUrl":[1025,"cart-url"],"msgUrl":[1025,"msg-url"],"userProfileUrl":[32],"hasLoggedinSlot":[32],"hasSiteSlot":[32],"hasPromotionSlot":[32],"aboutSlotLen":[32],"iconSlotLen":[32],"mainSlotLen":[32],"overflowSlotLen":[32],"searchSlotLen":[32],"thresholdReady":[32],"remoteDataReady":[32],"ready":[32],"isResizing":[32],"threshold":[32],"modalOpen":[32],"modalIsOpen":[32],"searchBarShown":[32],"scrollingUp":[32],"showAutocomplete":[32],"secondaryMenuOpen":[32],"userMenuOpen":[32],"menuFullScreen":[32],"searchLoading":[32],"searchValInternal":[32],"internalSearchIndeces":[32],"submitSearch":[64],"toggleOverflowMenu":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[16,"click","menuClose"]],{"myAccountData":["handleMyAccountData"],"env":["getMyAccData"],"ssoDataUrl":["getMyAccData"],"searchIndex":["currentSelectedIndex"],"searchValInternal":["changeInternalSearchVal"],"searchApiKey":["initAlgoliaClient"],"searchAppId":["initAlgoliaClient"],"searchIndeces":["addIndeces"],"internalSearchIndeces":["addAlgoliaIndeces"],"threshold":["thresholdChange"],"thresholdReady":["assessReady"],"remoteDataReady":["assessReady"],"showAutocomplete":["setupAutocompleteBlur","resetHitFocus"],"secondaryMenuOpen":["closeSearchBar"],"aboutSlotLen":["slotChange"],"iconSlotLen":["slotChange"],"mainSlotLen":["slotChange"],"overflowSlotLen":["slotChange"],"searchSlotLen":["slotChange"],"userMenuOpen":["handleUserMenu"]}]]],["nano-table",[[4,"nano-table",{"customRenderer":[16],"type":[1],"caption":[1],"showCaption":[4,"show-caption"],"loading":[4],"placeholderSize":[2,"placeholder-size"],"rows":[16],"columns":[1040],"headRender":[16],"rowRender":[16],"footRender":[16],"showFooter":[4,"show-footer"],"perBlock":[2,"per-block"],"blocksLength":[2050,"blocks-length"],"searchTerm":[1,"search-term"],"customFilterFn":[16],"customSortFn":[16],"defaultSort":[4,"default-sort"],"virtualTotalItems":[2,"virtual-total-items"],"appliedFilters":[2064],"internalLoading":[32],"blocks":[32],"activeBlocks":[32],"resetSorting":[64],"addSort":[64],"resetFilters":[64],"addFilters":[64],"removeFilters":[64],"updateRow":[64]},null,{"rows":["handleRowsChange"],"columns":["handleColsChange"],"searchTerm":["handleSearchTermChange"],"virtualTotalItems":["virtualTotalItemsChangeHandler"]}]]],["nano-date-input",[[6,"nano-date-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"helperText":[4,"helper-text"],"helperTextFormat":[16],"floatLabel":[4,"float-label"],"name":[1],"readonly":[4],"size":[2],"form":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"disabled":[4],"color":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"label":[1],"placeholder":[1025],"value":[1537],"validateOn":[1,"validate-on"],"showInlineError":[516,"show-inline-error"],"dateOrder":[1,"date-order"],"required":[4],"min":[1],"max":[1],"hideLabel":[4,"hide-label"],"picker":[4],"initialPickerDate":[1,"initial-picker-date"],"pickerOpen":[1540,"picker-open"],"closeAfterPicked":[4,"close-after-picked"],"dropDownConfig":[6160],"dateValue":[2064],"isDateDisabled":[16],"pattern":[32],"inputValue":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},null,{"value":["handleValueChange","testDateValidity"],"dateOrder":["handleDateOrderChange"],"min":["testDateValidity"],"max":["testDateValidity"],"pickerOpen":["handlePickerOpenChange"]}]]],["nano-dialog",[[1,"nano-dialog",{"showRibbon":[4,"show-ribbon"],"open":[1540],"label":[1],"noHeader":[4,"no-header"],"noFooter":[4,"no-footer"],"noUserDismiss":[4,"no-user-dismiss"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"hidden":[32],"show":[64],"hide":[64]},null,{"open":["handleOpenChange"],"hoist":["handleHoistChange"]}]]],["nano-drawer",[[1,"nano-drawer",{"open":[1540],"label":[513],"placement":[513],"contained":[516],"noHeader":[516,"no-header"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"noUserDismiss":[4,"no-user-dismiss"],"hoist":[4],"noDismiss":[32],"hasFooter":[32],"show":[64],"hide":[64]},null,{"hoist":["handleHoistChange"],"contained":["handleNoModalChange"],"open":["handleOpenChange"]}]]],["nano-hero",[[1,"nano-hero",{"imgSrc":[1,"img-src"],"imgSrcSet":[1,"img-src-set"],"largeScreenBP":[2,"large-screen-b-p"],"theme":[1],"level":[1],"hasIconBox":[32],"hasScrim":[32],"hasSecondaryContent":[32],"hasQuote":[32],"hasBg":[32],"hasBackBtn":[32],"hasCtas":[32],"breadCrumbs":[32],"iconBoxItems":[32]},null,{"breadCrumbs":["breadCrumbChange"],"iconBoxItems":["iconBoxItemChange"]}]]],["nano-alert",[[1,"nano-alert",{"open":[1540],"closable":[516],"color":[513],"duration":[2],"hoist":[4],"isModal":[32],"isToast":[32],"isShowing":[32],"label":[32],"noDismiss":[32],"show":[64],"hide":[64],"toast":[64],"alert":[64]},null,{"open":["handleOpenChange"],"duration":["handleDurationChange"],"hoist":["handleHoistChange"]}]]],["nano-file-upload",[[6,"nano-file-upload",{"name":[1],"accept":[1],"capture":[1],"maxFileSize":[2,"max-file-size"],"maxFiles":[2,"max-files"],"label":[1],"placeholder":[1],"hideLabel":[4,"hide-label"],"required":[4],"disabled":[516],"clearInput":[4,"clear-input"],"showInlineError":[516,"show-inline-error"],"validateOn":[1025,"validate-on"],"form":[1],"invalid":[2564],"validityMessage":[2049,"validity-message"],"files":[6160],"value":[6145],"hasHelperSlot":[32],"hasLabelSlot":[32],"errorMessage":[32],"isDragging":[32],"fileList":[32],"hasFocus":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"getInputElement":[64],"showError":[64]},[[8,"click","globalClickHandler"],[8,"keydown","globalKeydownHandler"],[16,"reset","onReset"]],{"fileList":["fileListChange","shouldValidate"],"maxFiles":["shouldValidate"],"maxFileSize":["shouldValidate"],"capture":["shouldValidate"],"accept":["shouldValidate"],"required":["shouldValidate"],"disabled":["shouldValidate"]}]]],["nano-overflow-nav",[[1,"nano-overflow-nav",{"scrollControls":[4,"scroll-controls"],"orientation":[513],"activeHandler":[16],"inActiveHandler":[16],"isActiveHandler":[16],"instantReCalc":[32],"hasScrollControls":[32],"hideControlEnd":[32],"hideControlStart":[32],"syncActiveItem":[64]},null,{"isActiveHandler":["watchIsActiveHandler"],"hasScrollControls":["watchScrollControls"],"hideControlEnd":["hideEndBtn"],"hideControlStart":["hideStartBtn"]}]]],["nano-tab",[[1,"nano-tab",{"panel":[513],"active":[516],"disabled":[516],"closable":[4],"setFocus":[64],"removeFocus":[64]}]]],["nano-global-search-results",[[1,"nano-global-search-results",{"algoliaResults":[32],"algoliaEle":[32],"currentWidth":[32],"apiKey":[32],"appId":[32],"index":[32],"closeSearch":[64]},[[16,"nanoSearchReset","handleGlobalNavReset"],[16,"nanoSearchResult","handleGlobalNavSearch"],[0,"nanoChange","handleReorder"],[0,"nanoResultsShown","attachListeners"],[16,"nanoNewResults","attachResultListeners"]],{"algoliaEle":["handleAlgoliaCredsChange","handleAlgoliaIndexChange","handleAlgoliaEleChange"],"apiKey":["handleAlgoliaCredsChange"],"appId":["handleAlgoliaCredsChange"],"index":["handleAlgoliaIndexChange"],"algoliaResults":["handleAlgoliaEleChange"]}]]],["nano-menu-drawer",[[1,"nano-menu-drawer",{"open":[1028],"saveState":[4,"save-state"],"hideWidth":[2,"hide-width"],"hideHeight":[4,"hide-height"],"reset":[32],"widthOk":[32],"heightOk":[32],"isLoading":[32],"hide":[32]},[[0,"nanoOpen","cancelNavItemEvents"],[0,"nanoClose","cancelNavItemEvents"],[16,"nanoIsReady","handleGlobalNavReady"]],{"open":["openChange"],"widthOk":["widthChange"],"hideHeight":["hideHeightChange"]}]]],["nano-split-pane",[[1,"nano-split-pane",{"position":[6146],"positionInPixels":[1026,"position-in-pixels"],"vertical":[516],"disabled":[516],"primary":[1],"snap":[1],"snapThreshold":[2,"snap-threshold"],"animationDuration":[2,"animation-duration"],"getPercentageToPixels":[64],"getPixelsToPercentage":[64]},null,{"position":["handlePositionChange"],"positionInPixels":["handlePositionInPixelsChange"]}]]],["nano-tab-group",[[1,"nano-tab-group",{"placement":[513],"noScrollControls":[4,"no-scroll-controls"],"color":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"disableSwipe":[4,"disable-swipe"],"hasScrollControls":[32],"hideControlRight":[32],"hideControlLeft":[32],"tab":[32],"show":[64]},[[0,"nanoTabClose","handleTabClose"]],{"tab":["handleTabNameChange"],"placement":["handlePlacementChange"],"noScrollControls":["handleNoScrollControlsChange"],"hideControlRight":["hideRightBtn"],"hideControlLeft":["hideLeftBtn"],"hasScrollControls":["watchScrollControls"]}]]],["nano-accordion",[[1,"nano-accordion",{"color":[1],"itemOpened":[32]},[[0,"nanoOpened","onToggleHandler"],[0,"nanoClosed","onClosedHandler"]]]]],["nano-algolia-filter",[[1,"nano-algolia-filter",{"filterName":[1,"filter-name"],"value":[1025],"operator":[1],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"changeEvent":[32],"internalValue":[32],"showFilter":[32],"indexResults":[32],"filterChanged":[32],"facets":[32],"tplRenderFn":[32],"globalStoreMethod":[32]},[[0,"nanoChange","handleChangeEvent"],[0,"change","handleChangeEvent"]],{"value":["valueSet"],"internalValue":["valueChanged"],"facets":["appliedFilterChanged"],"tplRenderFn":["tplUpdate"],"indexResults":["handleFilterChange"]}]]],["nano-algolia-pagination",[[1,"nano-algolia-pagination",{"maxToShow":[2,"max-to-show"],"currentPage":[32],"canGoPrev":[32],"canGoNext":[32],"show":[32],"tplRenderFn":[32],"indexResults":[32],"infiniteScroll":[32],"nextPage":[64],"prevPage":[64],"goToPage":[64]},null,{"currentPage":["currentPageChange"],"infiniteScroll":["infiniteScrollChange"]}]]],["nano-algolia-results",[[1,"nano-algolia-results",{"infiniteScroll":[4,"infinite-scroll"],"appendPages":[4,"append-pages"],"showResults":[32],"tplRenderFn":[32],"results":[32],"indexResults":[32],"resultsPage":[32],"changeEvent":[32],"facets":[32],"isLoading":[32]},null,{"results":["addContentIndex","resultsChange"],"tplRenderFn":["resultsChange"],"facets":["headerFooterChange"],"appendPages":["appendChange"],"infiniteScroll":["infiniteScrollChange"],"resultsPage":["handlePageChage"],"isLoading":["handleLoading"]}]]],["nano-animation",[[1,"nano-animation",{"name":[1],"play":[1540],"delay":[2],"direction":[1],"duration":[2],"easing":[1],"endDelay":[2,"end-delay"],"fill":[1],"iterations":[2],"iterationStart":[2,"iteration-start"],"keyframes":[16],"playbackRate":[2,"playback-rate"],"currentTime":[6146,"current-time"],"defaultSlot":[32],"cancel":[64],"finish":[64]},null,{"defaultSlot":["createAnimation"],"name":["handleAnimationChange"],"delay":["handleAnimationChange"],"direction":["handleAnimationChange"],"duration":["handleAnimationChange"],"easing":["handleAnimationChange"],"endDelay":["handleAnimationChange"],"fill":["handleAnimationChange"],"iterations":["handleAnimationChange"],"iterationStart":["handleAnimationChange"],"keyframes":["handleAnimationChange"],"play":["handlePlayChange"],"playbackRate":["handlePlaybackRateChange"]}]]],["nano-checkbox",[[6,"nano-checkbox",{"hasFocus":[1540,"has-focus"],"checked":[1540],"disabled":[516],"value":[513],"name":[513],"required":[516],"type":[513],"label":[1],"indeterminate":[1540],"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"form":[1],"inputType":[32],"_invalid":[32],"getInputElement":[64],"reportValidity":[64],"setError":[64],"setFocus":[64],"removeFocus":[64]},[[16,"reset","onReset"]],{"checked":["handleCheckedChange"],"type":["typeChange"],"indeterminate":["handleIndeterminateChange"]}]]],["nano-checkbox-group",[[6,"nano-checkbox-group",{"validateOn":[1025,"validate-on"],"showInlineError":[4,"show-inline-error"],"min":[2],"max":[2],"disabled":[516],"legend":[1],"hideLegend":[4,"hide-legend"],"invalid":[2564],"validityMessage":[2049,"validity-message"],"value":[1025],"checkboxes":[32],"nativeCbs":[32],"errorMessage":[32],"showErrorMsg":[32],"hasHelperSlot":[32],"_invalid":[32],"reportValidity":[64],"showError":[64]},[[0,"nanoChange","handleValueChange"]],{"value":["handleValuePropChange"],"min":["handleCbChange"],"max":["handleCbChange"],"nativeCbs":["customValidate"],"checkboxes":["handleComponentChange","handleDisabledChange"],"disabled":["handleDisabledChange"]}]]],["nano-details",[[1,"nano-details",{"label":[1],"open":[1540],"disabled":[516],"noHandle":[4,"no-handle"],"iconRotation":[2,"icon-rotation"],"useCacheHeight":[4,"use-cache-height"]},null,{"open":["toggleClick"]}]]],["nano-field-validator",[[6,"nano-field-validator",{"validateOn":[1025,"validate-on"],"scrollToInvalid":[4,"scroll-to-invalid"],"dirty":[2564],"valid":[2564],"store":[2064],"payload":[2064],"showValidation":[2052,"show-validation"],"validationState":[2064],"extraFieldSelector":[1,"extra-field-selector"],"validation":[16],"submitted":[32],"userForm":[32],"_dirty":[32],"_valid":[32],"_store":[32],"setStore":[64],"setCustomValidity":[64],"resetValidity":[64],"scrollToFirstInvalid":[64]},[[0,"nanoChange","handleFieldChange"],[0,"input","handlePlainFieldChange"],[0,"change","handlePlainFieldChange"],[0,"submit","handleSubmit"]],{"userForm":["userFormChange"],"validateOn":["validateOnChange"],"extraFieldSelector":["attachSlotObserver"]}]]],["nano-grid-item",[[1,"nano-grid-item"]]],["nano-intersection-observe",[[1,"nano-intersection-observe",{"root":[1],"rootMargin":[1,"root-margin"],"threshold":[1],"defaultSlot":[32]},null,{"root":["handleRootChange"],"threshold":["handleThresholdChange"],"defaultSlot":["addIO"]}]]],["nano-more-less",[[1,"nano-more-less",{"show":[1540],"childrenSelector":[1,"children-selector"],"maxToShow":[2,"max-to-show"],"noHideBtn":[4,"no-hide-btn"]},null,{"maxToShow":["handleShowHideElements"],"show":["handleShowHideElements"],"childrenSelector":["handleShowHideElements"]}]]],["nano-range",[[6,"nano-range",{"color":[1],"debounce":[2],"name":[1],"dualKnobs":[4,"dual-knobs"],"min":[2],"max":[2],"pin":[4],"snaps":[4],"step":[2],"ticks":[4],"disabled":[4],"value":[1026],"ratioA":[32],"ratioB":[32],"pressedKnob":[32]},null,{"debounce":["debounceChanged"],"min":["minChanged"],"max":["maxChanged"],"disabled":["disabledChanged"],"value":["valueChanged"]}]]],["nano-rating",[[2,"nano-rating",{"value":[1538],"max":[2],"precision":[2],"readonly":[4],"disabled":[4],"name":[1],"symbolName":[1,"symbol-name"],"symbol":[16],"hoverValue":[32],"isHovering":[32],"setFocus":[64],"removeFocus":[64]},null,{"value":["handleValueChange"],"symbolName":["handleSymbolChange"]}]]],["nano-slide",[[1,"nano-slide",{"ready":[1540]},null,{"ready":["readyChange"]}]]],["nano-slides",[[1,"nano-slides",{"options":[1040],"navbtns":[4],"pager":[4],"fullscreenbtn":[4],"fullscreen":[1540],"animation":[513],"currentSlide":[1538,"current-slide"],"autoplay":[8],"ready":[1540],"iCurrentSlide":[32],"slidesReady":[32],"didInit":[32],"update":[64],"slideTo":[64],"slideNext":[64],"slidePrev":[64],"getActiveIndex":[64],"length":[64],"isEnd":[64],"isBeginning":[64],"startAutoplay":[64],"stopAutoplay":[64],"lockSwipes":[64],"getflickity":[64],"reload":[64]},null,{"options":["optionsChanged"],"navbtns":["navbtnsChanged"],"pager":["pagerChanged"],"fullscreenbtn":["fullscreenBtnChanged"],"fullscreen":["fullscreenChanged"],"animation":["animationChange"],"currentSlide":["currentSlideChange"],"iCurrentSlide":["internalSlideChange"],"autoplay":["autoPlayChange"]}]]],["nano-sortable",[[1,"nano-sortable",{"itemSelector":[1,"item-selector"],"handleSelector":[1,"handle-selector"],"dropzoneSelector":[1,"dropzone-selector"],"helperText":[1,"helper-text"],"itemDescriptor":[16],"grabbedHelperText":[16],"droppedHelperText":[16],"reorderHelperText":[16],"createKeyboardHandle":[16],"sortableHostElement":[16],"animationEnabled":[4,"animation-enabled"],"draggedClass":[1,"dragged-class"],"handleDraggedClass":[1,"handle-dragged-class"],"placeholderClass":[1,"placeholder-class"],"dropzoneActiveClass":[1,"dropzone-active-class"],"animationTiming":[8,"animation-timing"],"orientation":[1],"dragResize":[4,"drag-resize"],"keyboardSortActive":[32],"ariaTextList":[32],"refreshKeyboardHandles":[64]},null,{"itemSelector":["handleItemSelectorChange"],"handleSelector":["handleHandleSelectorChange"],"createKeyboardHandle":["handleCreateKeyboardHandleChange"],"sortableHostElement":["handleSortableHostElement"]}]]],["nano-tab-content",[[1,"nano-tab-content",{"name":[513],"active":[516],"ready":[32]}]]],["nano-algolia",[[1,"nano-algolia",{"showResults":[1028,"show-results"],"resultsPage":[1026,"results-page"],"appId":[1025,"app-id"],"apiKey":[1025,"api-key"],"searchIndex":[1040],"searchIndexName":[1025,"search-index-name"],"listenTo":[1,"listen-to"],"query":[1025],"operator":[1],"filters":[16],"tplRenderFn":[16],"replicaIndex":[1025,"replica-index"],"browseIndex":[1028,"browse-index"],"minChars":[2,"min-chars"],"storeId":[1,"store-id"],"storeMethod":[1,"store-method"],"_dynFacetFilters":[32],"inputField":[32],"algoliaIndex":[32],"indeces":[32],"indexResults":[32],"filterChanged":[32],"currentHits":[32],"changeEvent":[32],"isLoading":[32],"wormholeState":[32],"removeFilters":[64]},[[0,"nanoTplUpdated","onAllTplUpdate"],[0,"nanoPageChanged","onPageChange"],[0,"nanoFilterChanged","onFilterChange"],[16,"nanoChange","handleInputChange"],[16,"change","handleInputChange"]],{"listenTo":["handleListenToChange"],"_dynFacetFilters":["dynFacetFiltersChange"],"browseIndex":["browseIndexChange"],"inputField":["inputFieldSet"],"query":["queryChange"],"replicaIndex":["internalIndexSwitch"],"resultsPage":["pageChange"],"searchIndexName":["searchIndexNameChange"],"apiKey":["initAlgoliaClient"],"appId":["initAlgoliaClient"],"searchIndex":["initAlgoliaIndex"],"showResults":["showResultsChange"],"filters":["handleFilterpropChange"]}]]],["nano-date-picker",[[1,"nano-date-picker",{"selectedDate":[1025,"selected-date"],"min":[1],"max":[1],"firstDayOfWeek":[2,"first-day-of-week"],"localization":[16],"color":[1],"isDateDisabled":[16],"isModal":[4,"is-modal"],"firstFocusEle":[16],"activeFocus":[32],"focusedDay":[32],"setFocus":[64]},null,{"selectedDate":["handleSelectedDateChange"]}]]],["nano-progress-bar",[[1,"nano-progress-bar",{"value":[2],"indeterminate":[4],"showPercent":[4,"show-percent"]}]]],["nano-grid_2",[[1,"nano-img",{"alt":[1],"src":[1],"srcSet":[1,"src-set"],"lazy":[4],"background":[4],"autoHeight":[1,"auto-height"],"loadSrc":[32],"loadError":[32],"hasLoaded":[32],"imgStates":[32],"_src":[32]},null,{"_src":["_srcChanged"],"src":["srcChanged"],"srcSet":["srcSetChanged"],"lazy":["lazyChanged"]}],[1,"nano-grid",{"sSize":[520,"s-size"],"mSize":[520,"m-size"],"lSize":[520,"l-size"],"xlSize":[520,"xl-size"],"sCols":[514,"s-cols"],"mCols":[514,"m-cols"],"lCols":[514,"l-cols"],"xlCols":[514,"xl-cols"],"xxlCols":[514,"xxl-cols"],"sTpl":[1,"s-tpl"],"mTpl":[1,"m-tpl"],"lTpl":[1,"l-tpl"],"xlTpl":[1,"xl-tpl"],"xxlTpl":[1,"xxl-tpl"],"showHelper":[516,"show-helper"],"cacheKey":[32]},null,{"sTpl":["constructSizeArray"],"mTpl":["constructSizeArray"],"lTpl":["constructSizeArray"],"xlTpl":["constructSizeArray"],"xxlTpl":["constructSizeArray"],"sSize":["constructSizeArray"],"mSize":["constructSizeArray"],"lSize":["constructSizeArray"],"xlSize":["constructSizeArray"],"sCols":["constructSizeArray"],"mCols":["constructSizeArray"],"lCols":["constructSizeArray"],"xlCols":["constructSizeArray"],"xxlCols":["constructSizeArray"],"showHelper":["constructSizeArray"]}]]],["nano-input",[[6,"nano-input",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"accept":[1],"autocapitalise":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[516],"inputmode":[1],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[516],"required":[4],"spellcheck":[4],"step":[1],"size":[2],"type":[513],"form":[1],"value":[1025],"resize":[1],"rows":[2],"showCharCount":[4,"show-char-count"],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"errorMessage":[32],"datalist":[32],"_invalid":[32],"reportValidity":[64],"setFocus":[64],"select":[64],"getInputElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]],{"datalist":["setDataListOpts"],"minlength":["shouldValidate"],"maxlength":["shouldValidate"],"min":["shouldValidate"],"max":["shouldValidate"],"required":["shouldValidate"],"disabled":["shouldValidate"],"readonly":["shouldValidate"],"pattern":["shouldValidate"],"inputmode":["shouldValidate"],"value":["valueChanged"],"debounce":["debounceChanged"]}]]],["nano-sticker",[[1,"nano-sticker",{"autoResize":[4,"auto-resize"],"isSticky":[1028,"is-sticky"],"offset":[1026],"position":[1],"quietMode":[1,"quiet-mode"],"hideOnNewStickers":[4,"hide-on-new-stickers"],"breakPointMax":[2,"break-point-max"],"breakPointMin":[2,"break-point-min"],"scrollParent":[1040],"stickTo":[1,"stick-to"],"isStuck":[32],"isRootSticker":[32],"hide":[32],"scrollHide":[32],"multiStickerHide":[32],"scrollingTo":[32],"quietModeIsOn":[32],"stuckCounter":[32],"stickerIndex":[32],"stickToEle":[32],"triggerPos":[32],"trigger":[32],"_offset":[32],"isHiding":[64],"isSticking":[64],"setTriggerPos":[64],"getTriggerPos":[64],"pauseHiding":[64]},null,{"trigger":["updateTriggerOffset"],"scrollParent":["updateTriggerOffset","handleParentEvents","setupIO"],"position":["stickerResizeListener","positionChange"],"quietMode":["quietModeChange"],"offset":["setOffset"],"_offset":["setOffset"],"isStuck":["stuckChange"],"quietModeIsOn":["attachScrollListeners"],"stickToEle":["handleParentEvents","stickToEleChange"],"stickTo":["stickToChange"],"multiStickerHide":["visibilityDecisionHandler"],"scrollHide":["visibilityDecisionHandler"],"hide":["handleHideChange"]}]]],["nano-spinner",[[1,"nano-spinner",{"type":[1],"overlay":[516],"hasText":[32]}]]],["nano-dropdown",[[1,"nano-dropdown",{"autoOpen":[4,"auto-open"],"open":[1540],"closeOnSelect":[4,"close-on-select"],"containingElement":[1040],"tetherTo":[16],"placement":[1],"distance":[2],"skidding":[2],"hoist":[1028],"dialogTitle":[1,"dialog-title"],"eventType":[16],"show":[64],"hide":[64]},[[0,"nanoOpen","secondaryOpen"],[0,"nanoClose","secondaryClose"],[0,"nanoSelect","handlePanelSelect"]],{"open":["handleOpenChange"],"tetherTo":["handleTetherToChange"],"placement":["handlePopoverOptionsChange"],"distance":["handlePopoverOptionsChange"],"skidding":["handlePopoverOptionsChange"],"hoist":["handlePopoverOptionsChange"]}]]],["nano-resize-observe_2",[[1,"nano-resize-observe",{"notifyContentFit":[1,"notify-content-fit"],"states":[1],"currentWidth":[32],"currentHeight":[32],"classNames":[32],"contentFitX":[32],"contentFitY":[32]},null,{"classNames":["classNameChange"],"states":["newStatesProp","statesChanged"],"currentHeight":["dimensionChanged"],"currentWidth":["dimensionChanged"]}],[1,"nano-skeleton",{"animated":[4]}]]],["nano-icon",[[1,"nano-icon",{"color":[1],"role":[1537],"ariaLabel":[1537,"aria-label"],"flipRtl":[4,"flip-rtl"],"name":[1],"src":[1],"icon":[8],"size":[1],"lazy":[4],"svgContent":[32],"isVisible":[32],"isLoading":[32]},null,{"ariaLabel":["udpateRole"],"role":["setAriaLabel"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["nano-datalist_3",[[1,"nano-datalist",{"selected":[1040],"dropDownConfig":[6160],"options":[16],"input":[1],"type":[1],"activeOptions":[2064],"open":[1028],"disableFilter":[4,"disable-filter"],"disabled":[4],"actvOptEles":[32],"connectedInput":[32],"inputLabel":[32],"hasNoResult":[32],"shouldOpen":[32],"canOpen":[32],"optionIds":[32]},null,{"open":["openWatcher"],"input":["watchInputChange"],"options":["handleOptionsChange"],"type":["watchTypeChange"],"connectedInput":["watchTypeChange","manageInputEvents"],"disabled":["watchTypeChange"],"selected":["watchActvOptChange"],"actvOptEles":["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],"hasNoResult":["manageCanOpen"],"shouldOpen":["manageDropdownDisplay"],"canOpen":["manageDropdownDisplay"]}],[1,"nano-option",{"value":[1537],"label":[1537],"selected":[516],"disabled":[516],"filterMeta":[1,"filter-meta"],"hasFocus":[32]},[[0,"keydown","handleKeyDown"]],{"value":["valueChanged"],"label":["labelChanged"]}],[1,"nano-menu",{"hasFocus":[2052,"has-focus"],"type":[1],"label":[1],"setFocus":[64],"removeFocus":[64],"showActiveElement":[64],"resetActiveItem":[64]},[[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]]]]],["nano-global-nav-user-profile_3",[[6,"nano-select",{"invalid":[2564],"validityMessage":[2049,"validity-message"],"color":[1],"autofocus":[4],"disabled":[516],"validateOn":[1025,"validate-on"],"showInlineError":[516,"show-inline-error"],"label":[1],"hideLabel":[4,"hide-label"],"floatLabel":[4,"float-label"],"multiple":[4],"maxValuesVisible":[8,"max-values-visible"],"name":[1],"placeholder":[1],"readonly":[516],"required":[4],"size":[2],"max":[2],"min":[2],"form":[1],"allowCustomValues":[4,"allow-custom-values"],"value":[6145],"options":[6160],"clearSelect":[4,"clear-select"],"mask":[4],"debounce":[2],"dropDownConfig":[16],"valueTagTemplate":[16],"currInsertIndex":[32],"showErrorMsg":[32],"errorMessage":[32],"hasFocus":[32],"hasLabelSlot":[32],"hasHelperSlot":[32],"hasHelperEndSlot":[32],"inputSearchVal":[32],"_invalid":[32],"_elementOptions":[32],"reportValidity":[64],"setFocus":[64],"getSelectElement":[64],"showError":[64]},[[16,"reset","onReset"],[17,"mousedown","handleBlur"],[0,"keydown","handleBlur"]],{"maxValuesVisible":["watchMaxValuesVisible"],"debounce":["debounceChanged"],"required":["shouldValidate"],"disabled":["shouldValidate"],"min":["shouldValidate"],"max":["shouldValidate"],"readonly":["shouldValidate"],"value":["valueChanged"],"dropDownConfig":["setDataListOpts"]}],[0,"nano-global-nav-user-profile",{"myAccountUser":[16],"userProfileUrl":[1,"user-profile-url"]}],[1,"nano-nav-item",{"href":[1025],"target":[1],"disabled":[4],"open":[1540],"selected":[516],"secondaryActiveWidth":[2,"secondary-active-width"],"secondaryFallback":[16],"closeOnBlur":[4,"close-on-blur"],"notification":[4],"hasAnchorEle":[32],"didOpen":[32],"isInGlobalNav":[32],"isInMenuDrawer":[32],"isInMenu":[32],"hasFocus":[32],"setFocus":[64]},[[16,"click","handleClose"],[16,"keyup","handleClose"]],{"open":["openChange"],"didOpen":["didOpenChange"]}]]],["nano-icon-button_2",[[1,"nano-icon-button",{"iconName":[1,"icon-name"],"iconSrc":[1,"icon-src"],"type":[513],"name":[513],"value":[513],"label":[1],"showTooltip":[4,"show-tooltip"],"disabled":[516],"href":[1],"rel":[1],"target":[1],"form":[1],"setFocus":[64]}],[1,"nano-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"hoist":[1028],"trigger":[1],"show":[64],"hide":[64]},null,{"content":["setLabel"],"open":["handleOpenChange"]}]]]]'),e)}));
5
5
  //# sourceMappingURL=nano-components.esm.js.map
package/dist/nano-components/nano-components.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","win","document","Array","from","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;iKAOA,IAAIA,EAAe,KAIO,CACtBC,EAAkBC,EAAEC,UACxB,CACE,MAAMC,EAAmCC,EAAIC,UAAYC,MAAMC,KAAKH,EAAIC,SAASG,iBAAiB,WAAWC,MAC1GC,GAAM,IAAIC,OAAO,IAAIC,4BAAoCC,KAAKH,EAAEI,MAAQJ,EAAEK,aAAa,4BAA8BH,IAExH,MAAMI,cAAyBC,IAC/B,MAAMC,GAA+Bf,GAAa,IAAI,cAAgB,GACtE,GAAIa,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EAE7B,IAAIlB,EAAqBuB,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAASC,GACxC,GAAIC,KAAKC,WAAa,WAAY,CAChC,OAAOJ,EAAkBK,KAAKF,KAAMD,EAC1C,CACI,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACR,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAC7C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACnCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MAC5D,CACA,CACA,CACI,OAAOK,CACX,CAAG,ECpCH/B,IAAesC,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,8v1BAAuCJ,EAAA","ignoreList":[]}
1
+ {"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","scriptElm","win","document","Array","from","querySelectorAll","find","s","RegExp","NAMESPACE","test","src","getAttribute","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/.pnpm/@stencil+core@4.27.2/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;iKAOA,IAAIA,EAAe,KAIO,CACtBC,EAAkBC,EAAEC,UACxB,CACE,MAAMC,EAAmCC,EAAIC,UAAYC,MAAMC,KAAKH,EAAIC,SAASG,iBAAiB,WAAWC,MAC1GC,GAAM,IAAIC,OAAO,IAAIC,4BAAoCC,KAAKH,EAAEI,MAAQJ,EAAEK,aAAa,4BAA8BH,IAExH,MAAMI,cAAyBC,IAC/B,MAAMC,GAA+Bf,GAAa,IAAI,cAAgB,GACtE,GAAIa,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EAE7B,IAAIlB,EAAqBuB,IACvB,MAAMC,EAAoBD,EAAqBE,UAC/CF,EAAqBE,UAAY,SAASC,GACxC,GAAIC,KAAKC,WAAa,WAAY,CAChC,OAAOJ,EAAkBK,KAAKF,KAAMD,EAC1C,CACI,MAAMI,EAAaN,EAAkBK,KAAKF,KAAM,OAChD,MAAMI,EAAgBJ,KAAKK,WAC3B,GAAIN,EAAM,CACR,IAAK,IAAIO,EAAI,EAAGA,EAAIF,EAAcG,OAAQD,IAAK,CAC7C,GAAIF,EAAcE,GAAGE,WAAa,EAAG,CACnCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU,MAC5D,CACA,CACA,CACI,OAAOK,CACX,CAAG,ECpCH/B,IAAesC,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,6x1BAAuCJ,EAAA","ignoreList":[]}
package/dist/nano-components/nano-datalist_3.entry.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
2
  * Web Components for Nanopore digital Web Apps
3
3
  */
4
- import{g as t,r as e,c as i,d as s,a as n}from"./index-6cc72cd9.js";import{t as o,h as a}from"./renderer-4bc3e2dc.js";import{g as r}from"./active-element-a2502948.js";import{d as l}from"./throttle-df960210.js";import{g as h}from"./dom-fafdec9a.js";import{g as c}from"./slot-1cd90e53.js";const d=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";const p=d;function f(t){let e;if(t.id){e=document.querySelector(`label[for='${t.id}']`)}if(!e){e=t.closest("label")}return e}let u=0;const b=class{isNanoInput=false;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId=`nano-datalist-${u++}`;isFiltered=false;shouldFocus=false;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t;if(this.connectedInput?.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=true;optionIds=[];constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.inputChange=l(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=false;openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=false;disabled=false;async watchInputChange(){let t;if(t=this.host.closest(o("nano-input"))){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}handleOptionsChange(){if(!this.host)return;h(this.host,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")));if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if(this.options?.length){if(this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll(o("nano-option"));s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,e)=>{if(t.value||t.label){const i=Object.assign(document.createElement(o("nano-option")),{label:t.label,value:t.value,ariaPosinset:e,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+e,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(i);return i}}));if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput)return;let t={closeOnSelect:false};let e="both";let i=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":e="list";i=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=i}manageInputEvents(t,e){if(e){const t=e.closest(o("nano-input"));if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(e);this.inputLabel=null;s((()=>{e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(t){const e=t.closest(o("nano-input"));if(e){e.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=t?.labels?.item(0)||f(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const e=this.connectedInput?.value||"";const i=[];s((()=>{this.allOptEles.forEach(((s,n)=>{if(this.actvOptEles.includes(s)){t++;s.setAttribute("aria-posinset",t+"");s.setAttribute("aria-setsize",this.actvOptEles.length+"");s.hidden=false;this.isSelected(s,e)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;i.push(s.id)}));this.optionIds=i}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let e;if(this.selected.includes(t.value)){this.selected=this.selected.filter((e=>e!==t.value));e=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];e=this.nanoSelect.emit(t)}if(!e.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const e=new window.Event("change");this.connectedInput?.dispatchEvent(e)}}optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const e=this.allOptEles.find((e=>e.value.trim().length>0&&!e.disabled&&(t(e.textContent)||t(e.value)||t(e.label)||t(e.filterMeta))));if(e)this.changeInputValue(e)}removeEventListeners(t){const e=t.closest(o("nano-input"));if(e){e.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(o("nano-option")));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};handleHide=()=>{this.open=false;const t=r();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const e=t.trim().toLowerCase();let i=false;const s=[];const n=t=>t.toLowerCase().indexOf(e)>-1;this.allOptEles.forEach((e=>{if((t===e.value||t===e.label)&&this.type!=="selctMulti"){e.selected=true;i=true}else this.isSelected(e,t)}));this.allOptEles.forEach((t=>{if(!e.length||i){s.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){s.push(t)}}));this.isFiltered=e.length&&!i;this.actvOptEles=s}inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};inputKeydown=t=>{const e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-zA0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}if(this.open&&["ArrowDown","ArrowUp"].includes(t.key)){this.listBox.setFocus();return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};optionKeyDown=t=>{const e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const i=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||i.includes(t.key))){this.connectedInput.focus()}};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.handleOptionsChange();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return a(n,{key:"967dd82369e855a7f9edf70cb17737d36efc1828",class:"nano-datalist",role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},a("nano-dropdown",{key:"d98ed992c76129d5f1a1b5cb3c2a7e4c0c385118",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"b06ac3c64408a331819e3326fb72adfdf5c07b91",hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t},a("slot",{key:"58683fab717385e8dff20602683964327093f660",name:"list-top"}),a("slot",{key:"949fb5e02b13f878cde4d90a9848fcb18b35ea2c"}),a("slot",{key:"ed9bccc1520dc103e1673fae32094b05245ab704",name:"internal-opts"}),a("slot",{key:"aca33681c6282a17386c9934b93cfce6622c08e1",name:"list-bottom"})),a("nano-menu",{key:"4de595aded1e1f586a8d11d21bf6151758da9f9d",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"0da09df34253d8bd83bdd263e25f40b9075d30a7",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"ee9d3f67a82cc6a2e0c25efb0c79e031995d0587",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};b.style=p;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=m;const v=class{constructor(t){e(this,t);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=false;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return t(this)}get hasFocus(){return this._hasFocus}_hasFocus=false;type="menu";label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){if(this.menu?.focus)this.menu.focus({preventScroll:true})}async removeFocus(){if(this.menu?.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===o("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const e=this.el.querySelectorAll(`${o("nano-nav-item")}.secondary-open`);if(e.length){const i=e[e.length-1];t=Array.from(i.querySelectorAll(`${o("nano-nav-item")}, ${o("nano-option")}`))}else{t=h(this.el,`${o("nano-nav-item")}, ${o("nano-option")}`,"slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=r();return this.getItems.find((e=>e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,e=true){const i=this.getItems;const s=!t?i.find((t=>t.selected))||i[0]:t;i.filter((t=>t.tagName.toLowerCase()===o("nano-option"))).map((t=>t.setAttribute("tabindex",t===s?"0":"-1")));if(!e)return;if(s){if(s.setFocus)s.setFocus();else s.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const e=t;let i;if(e.key){if(e.key!=="Tab")return;i=r()&&r().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};handleClick=t=>{const e=t.target;const i=e.closest(o("nano-nav-item"));if(i&&!i.disabled){this.nanoSelect.emit(i)}};handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const e=this.getItems;const i=this.activeItem;let s=e.indexOf(i);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"||t.key==="PageUp"){s=0}else if(t.key==="End"||t.key==="PageDown"){s=e.length-1}if(s<0)s=e.length-1;if(s>e.length-1)s=0;this.setActiveFocusItem(e[s]);if(e[s])e[s].scrollIntoView({block:"nearest"});return}break}}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const e=this.getItems;for(const t of e){const e=t.shadowRoot.querySelector("slot:not([name])");const i=c(e).toLowerCase().trim();if(i.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};handleMouseOver=t=>{const e=t.target;const i=e.closest(o("nano-nav-item"))||e.closest(o("nano-option"));if(i&&!this.ignoreMouseEvents){this.setActiveFocusItem(i)}};componentDidLoad(){{h(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return a(n,{key:"78d73e5aceb8bc9890134c9253834d37c0faf1c3",role:this.type==="menu"?"menu":"group",class:"nano-menu"},a("div",{key:"e38c5896dc520623bf97392954f278f5ea1b0450",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},a("slot",{key:"213aae294bd3f00e968561ed98716b67c76387a6"})))}};v.style=g;const y=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const w=y;let x=0;const k=class{optId=`nano-option-${x++}`;get host(){return t(this)}hasFocus=false;constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.handleClick=l(this.handleClick.bind(this),5)}value="";valueChanged(){if((!this.value||!this.value.length)&&!this.label)this.value=this.labelContent}label="";labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}selected=false;disabled=false;filterMeta="";nanoSelect;handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return h(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return a(n,{key:"9c710d546cb6c588559561ea7759446d8a4b5a48",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a("div",{key:"b8824f9d1d8736e434ffb32b122a419767e897d3",onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"81424ff221aa45c36268315cea0a07a49d5bd092",part:"check-icon",class:"option__check"},a("slot",{key:"331a405714047eb22fc7043d4e0bf3dbdf67ca55",name:"check-icon"},a("nano-icon",{key:"0fc3ee15ccca0c3195bd9a5feb844060419f9ed2",name:"light/check","aria-hidden":"true"}))),a("div",{key:"e83acd281d86ea73e39566c718bef76781ab77ac",part:"start",class:"option__start"},a("slot",{key:"f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8",name:"start"})),a("div",{key:"5e69f3f9cbe5358714802d3718ab154d3badc9e4",part:"label",class:"option__label"},a("slot",{key:"3449b82ecd58edc5faf2bb713d63db9e975fdc96"},this.label||this.value)),a("div",{key:"a634d9bb9bb769ad94dc4141bfd938eb65dd78b2",part:"end",class:"option__end"},a("slot",{key:"64de93cc1d913c4a842d27c622f8e0a45567677a",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};k.style=w;export{b as nano_datalist,v as nano_menu,k as nano_option};
4
+ import{g as t,r as e,c as i,d as s,a as n}from"./index-6cc72cd9.js";import{t as o,h as a}from"./renderer-4bc3e2dc.js";import{g as r}from"./active-element-a2502948.js";import{d as l}from"./throttle-df960210.js";import{g as h}from"./dom-fafdec9a.js";import{g as c}from"./slot-1cd90e53.js";const d=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--padding-start:var(--nano-spacing-xlarge, 24px);--padding-end:var(--nano-spacing-xlarge, 24px);--font-size:0.8em;--color:#b5aea7;color:var(--color)}.dlist--isfiltered ::slotted(*:not(.nano-option):not([slot=no-result]):not([slot=list-top]):not([slot=list-bottom])){display:none !important}.dlist__dropdown{--min-width:100%;--overflow:auto}.dlist__status{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.dlist__menu{--padding-top:inherit;--padding-bottom:inherit;--padding-start:inherit;--padding-end:inherit;--font-size:inherit}";const p=d;function f(t){let e;if(t.id){e=document.querySelector(`label[for='${t.id}']`)}if(!e){e=t.closest("label")}return e}let u=0;const b=class{isNanoInput=false;typeToSelect="";typeToSelectTimeout;nanoDropdown;listBox;mo;listId=`nano-datalist-${u++}`;isFiltered=false;shouldFocus=false;get allOptEles(){return this._allOptEles}set allOptEles(t){this._allOptEles=t;if(this.connectedInput?.value)return;t.forEach((t=>{if(t.selected&&!this.selected.includes(t.value)){this.changeInputValue(t)}}))}_allOptEles=[];get host(){return t(this)}actvOptEles=[];connectedInput;inputLabel;hasNoResult;shouldOpen;canOpen=true;optionIds=[];constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.nanoDeselect=i(this,"nanoDeselect",7);this.nanoOptionsUpdated=i(this,"nanoOptionsUpdated",7);this.inputChange=l(this.inputChange.bind(this),50)}selected=[];get dropDownConfig(){return this._dropDownConfig}set dropDownConfig(t){this._dropDownConfig={...this._dropDownConfig,...t}}_dropDownConfig={skidding:-1};options=[];input;type="input";get activeOptions(){return this.allOptEles}open=false;openWatcher(){s((()=>{this.nanoDropdown.open=this.open;if(this.connectedInput)this.connectedInput.setAttribute("aria-expanded",this.open.toString())}))}disableFilter=false;disabled=false;async watchInputChange(){let t;if(t=this.host.closest(o("nano-input"))){this.isNanoInput=true;this.connectedInput=await t.getInputElement()}else if(this.input&&typeof this.input==="string"&&(t=document.querySelector(this.input))){this.isNanoInput=false;this.connectedInput=t}else if(typeof this.input==="object"){this.connectedInput=this.input}}handleOptionsChange(){if(!this.host)return;h(this.host,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")));if((!this.options||!this.options.length)&&!this.mo){{const t=this.mo=new MutationObserver((()=>this.processSlottedContent()));t.observe(this.host,{childList:true,subtree:true})}this.processSlottedContent();return}if(this.options?.length){if(this.mo){this.mo.disconnect();this.mo=undefined}const t=this.host.querySelectorAll(o("nano-option"));s((()=>{if(t?.length)t.forEach((t=>t.remove()));this.allOptEles=this.options.flatMap(((t,e)=>{if(t.value||t.label){const i=Object.assign(document.createElement(o("nano-option")),{label:t.label,value:t.value,ariaPosinset:e,ariaSetsize:this.options.length,selected:t.selected,id:this.listId+"-option-"+e,textContent:t.label?t.label:t.value,slot:"internal-opts"});this.host.append(i);return i}}));if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else{this.actvOptEles=[...this.allOptEles]}}))}}watchTypeChange(){if(!this.connectedInput||this.disabled)return;let t={closeOnSelect:false};let e="both";let i=false;switch(this.type){case"input":t={closeOnSelect:true};break;case"select":e="list";i=true;t={closeOnSelect:true,placement:"center"};break}if(!this.isNanoInput){t.tetherTo=this.connectedInput}this.dropDownConfig={...this.dropDownConfig,...t};this.connectedInput.setAttribute("aria-autocomplete",e);this.connectedInput.readOnly=i}manageInputEvents(t,e){if(e){const t=e.closest(o("nano-input"));if(t){t.removeEventListener("nanoChange",this.inputChange)}this.removeEventListeners(e);this.inputLabel=null;s((()=>{e.removeAttribute("role");e.removeAttribute("aria-expanded");e.removeAttribute("aria-controls");e.removeAttribute("aria-owns");e.removeAttribute("aria-haspopup");e.removeAttribute("aria-autocomplete");e.removeAttribute("autocomplete")}))}if(t){const e=t.closest(o("nano-input"));if(e){e.addEventListener("nanoChange",this.inputChange)}t.addEventListener("change",this.inputChange);t.addEventListener("click",this.inputClick);t.addEventListener("keydown",this.inputKeydown);t.addEventListener("input",this.inputChange);this.listId=this.host.id||this.listId;this.inputLabel=t?.labels?.item(0)||f(t);s((()=>{this.host.id=this.listId;t.setAttribute("role","combobox");t.setAttribute("aria-expanded","false");t.setAttribute("aria-controls",this.listId);t.setAttribute("aria-owns",this.listId);t.setAttribute("aria-haspopup","listbox");t.setAttribute("autocomplete","off")}))}}watchActvOptChange(){let t=0;const e=this.connectedInput?.value||"";const i=[];s((()=>{this.allOptEles.forEach(((s,n)=>{if(this.actvOptEles.includes(s)){t++;s.setAttribute("aria-posinset",t+"");s.setAttribute("aria-setsize",this.actvOptEles.length+"");s.hidden=false;this.isSelected(s,e)}else{s.removeAttribute("aria-posinset");s.removeAttribute("aria-setsize");s.hidden=true;s.selected=false}s.id=this.listId+"-option-"+n;i.push(s.id)}));this.optionIds=i}))}manageCanOpen(){if(this.actvOptEles.length||this.hasNoResult)this.canOpen=true;else this.canOpen=false}manageDropdownDisplay(){if(this.shouldOpen&&this.canOpen&&!this.disabled)this.open=true;if(!this.shouldOpen||!this.canOpen)this.open=false;this.openWatcher()}fireActiveOptsEvent(){this.nanoOptionsUpdated.emit(this.actvOptEles)}nanoSelect;nanoDeselect;nanoOptionsUpdated;isSelected(t,e){if(e===t.value||this.selected.includes(t.value)){t.selected=true}else t.selected=false}get dropwdownOpen(){if(!this.nanoDropdown||!this.open)return false;return true}get exactMatch(){return this.allOptEles.find((t=>this.connectedInput.value===t.value))}changeInputValue(t){let e;if(this.selected.includes(t.value)){this.selected=this.selected.filter((e=>e!==t.value));e=this.nanoDeselect.emit(t)}else{this.selected=[...this.selected];e=this.nanoSelect.emit(t)}if(!e.defaultPrevented){if(this.connectedInput)this.connectedInput.value=t.value;const e=new window.Event("change");this.connectedInput?.dispatchEvent(e)}}optSelected=t=>{t.stopPropagation();this.changeInputValue(t.detail);requestAnimationFrame((()=>this.inputChange()));if(this.type!=="selctMulti")this.shouldOpen=false};setOptStartsWith(){const t=t=>t.toLowerCase().substring(0,this.typeToSelect.length)===this.typeToSelect;const e=this.allOptEles.find((e=>e.value.trim().length>0&&!e.disabled&&(t(e.textContent)||t(e.value)||t(e.label)||t(e.filterMeta))));if(e)this.changeInputValue(e)}removeEventListeners(t){const e=t.closest(o("nano-input"));if(e){e.removeEventListener("nanoChange",this.inputChange)}t.removeEventListener("change",this.inputChange);t.removeEventListener("click",this.inputClick);t.removeEventListener("keydown",this.inputKeydown);t.removeEventListener("input",this.inputChange)}processSlottedContent(){requestAnimationFrame((()=>{this.allOptEles=Array.from(this.host.querySelectorAll(o("nano-option")));this.hasNoResult=!!this.host.querySelector('[slot="no-result"]');if(this.connectedInput?.value.length&&this.type!=="select"){this.inputChange()}else this.actvOptEles=this.allOptEles}))}handleShow=async()=>{if(this.shouldFocus){this.shouldFocus=false;this.listBox.setFocus()}else if(this.type==="select")this.listBox.showActiveElement()};handleHide=()=>{this.open=false;const t=r();if(t.closest(this.host.tagName.toLowerCase())){this.connectedInput.select()}};inputChange(){if(this.disableFilter){this.actvOptEles=this.allOptEles;return}const t=this.connectedInput.value;const e=t.trim().toLowerCase();let i=false;const s=[];const n=t=>t.toLowerCase().indexOf(e)>-1;this.allOptEles.forEach((e=>{if((t===e.value||t===e.label)&&this.type!=="selctMulti"){e.selected=true;i=true}else this.isSelected(e,t)}));this.allOptEles.forEach((t=>{if(!e.length||i){s.push(t)}else if(t.value.trim().length>0&&!t.disabled&&(n(t.textContent)||n(t.value)||n(t.label)||n(t.filterMeta))){s.push(t)}}));this.isFiltered=e.length&&!i;this.actvOptEles=s}inputClick=()=>{this.shouldOpen=true;this.manageDropdownDisplay()};inputKeydown=t=>{const e=["Shift","ArrowRight","ArrowLeft","Escape","Enter","Tab"];if(e.includes(t.key)){if(t.key==="Tab")this.shouldOpen=false;return}if(this.type==="select"&&!["ArrowDown","ArrowUp"].includes(t.key)&&(t.key!==" "||this.typeToSelectTimeout)){if(t.key===" "||/^[a-zA0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=window.setTimeout((()=>{this.typeToSelect="";this.typeToSelectTimeout=0}),750);this.typeToSelect+=t.key;this.setOptStartsWith()}return}if(this.open&&["ArrowDown","ArrowUp"].includes(t.key)){this.listBox.setFocus();return}this.shouldOpen=true;this.manageDropdownDisplay();if(["ArrowDown","ArrowUp"].includes(t.key)){t.preventDefault();this.shouldFocus=true}};optionKeyDown=t=>{const e=["Shift","ArrowUp","ArrowDown","Escape","Enter","Tab","Space","PageUp","PageDown","Home","End"," "];if(e.includes(t.key)){if(t.key==="Escape")this.connectedInput.focus();return}const i=["Delete","Backspace"];if(this.type!=="select"&&(!this.exactMatch||i.includes(t.key))){this.connectedInput.focus()}};connectedCallback(){this.watchInputChange()}componentDidLoad(){this.handleOptionsChange();this.openWatcher()}componentDidRender(){setTimeout((()=>{if(!this.connectedInput)console.warn("no `nano-input` found. `nano-datalist` should be nested within an `nano-input` or linked via `input` prop",this.host)}),500)}disconnectedCallback(){if(this.mo){this.mo.disconnect();this.mo=undefined}if(this.connectedInput)this.removeEventListeners(this.connectedInput)}render(){return a(n,{key:"e6a6afd64373143835f8e12f9349e839abaf63e1",class:"nano-datalist",role:this.actvOptEles.length?"listbox":undefined,"aria-owns":this.optionIds.length?this.optionIds.join(" "):undefined,"aria-label":this.optionIds.length?"Select options from the list below":undefined},a("nano-dropdown",{key:"bd1a92afc347e6e3a9d63695bd56fb76b3a06464",...this.dropDownConfig,ref:t=>this.nanoDropdown=t,dialogTitle:"Select options from the list below",class:{dlist__dropdown:true,"dlist--isfiltered":this.isFiltered},onNanoAfterShow:this.handleShow,onNanoAfterHide:this.handleHide,role:"group"},a("nano-menu",{key:"846d438e2314582af9a962289ab0f908857083fa",hidden:!this.actvOptEles.length,type:"listbox",label:this.inputLabel?this.inputLabel.textContent:undefined,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen},tabIndex:-1,onNanoSelect:this.optSelected,onKeyDown:this.optionKeyDown,ref:t=>this.listBox=t},a("slot",{key:"f306217f59daac3e67e41bd5dbbf2a3681d56007",name:"list-top"}),a("slot",{key:"0174164d6761691413ead34af1436ee370849d98"}),a("slot",{key:"fdcaea628c1920017a4d250b125769d422d306dc",name:"internal-opts"}),a("slot",{key:"bcb453282e86a98805fa0c8f357b389110764252",name:"list-bottom"})),a("nano-menu",{key:"61b91937f773707bd6369649d5761951459b7991",type:"listbox",label:"No results found",hidden:!!this.actvOptEles.length,class:{dlist__menu:true,"dlist__menu--open":this.dropwdownOpen}},a("slot",{key:"433a4643f759e5391b13ee757628c6f196cb8060",name:"no-result"})),!!this.actvOptEles&&a("div",{key:"caafff3ec17cba31fdc5092d96da166f64541776",class:"dlist__status"},this.actvOptEles.length," result",this.actvOptEles.length>1?"s":""," available.")))}static get watchers(){return{open:["openWatcher"],input:["watchInputChange"],options:["handleOptionsChange"],type:["watchTypeChange"],connectedInput:["watchTypeChange","manageInputEvents"],disabled:["watchTypeChange"],selected:["watchActvOptChange"],actvOptEles:["watchActvOptChange","manageCanOpen","fireActiveOptsEvent"],hasNoResult:["manageCanOpen"],shouldOpen:["manageDropdownDisplay"],canOpen:["manageDropdownDisplay"]}}};b.style=p;const m=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--padding-start:var(--nano-spacing-medium, 16px);--padding-end:var(--nano-spacing-medium, 16px);--padding-top:var(--nano-spacing-small, 8px);--padding-bottom:var(--nano-spacing-small, 8px);--secondary-padding-top:0;--secondary-padding-bottom:0;--bg-color-hover:#f2f7f9;--bg-color-focus:#f2f7f9;--bg-color-selected:#f2f7f9;--color-hover:#007495;--color-selected:#007495;--color-focus:#007495;--focus-outline:none;--font-size:0.9em;display:block}.menu{font-size:var(--font-size, 0.9em);overscroll-behavior:none;min-inline-size:var(--width);position:relative}.menu:focus{outline:none}::slotted(*:not(.nano-nav-item):not(.nano-option):not(hr):not(slot)){padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom);display:block}";const g=m;const v=class{constructor(t){e(this,t);this.nanoFocus=i(this,"nanoFocus",7);this.nanoBlur=i(this,"nanoBlur",7);this.nanoSelect=i(this,"nanoSelect",7)}ignoreMouseEvents=false;ignoreMouseTimeout;menu;typeToSelect="";typeToSelectTimeout;get el(){return t(this)}get hasFocus(){return this._hasFocus}_hasFocus=false;type="menu";label;nanoFocus;nanoBlur;nanoSelect;async setFocus(){if(this.menu?.focus)this.menu.focus({preventScroll:true})}async removeFocus(){if(this.menu?.blur)this.menu.blur()}async showActiveElement(){if(this.selectedItem)this.selectedItem.scrollIntoView({block:"nearest"})}async resetActiveItem(){this.getItems.filter((t=>t.tagName.toLowerCase()===o("nano-option"))).map((t=>t.setAttribute("tabindex","-1")))}get getItems(){let t;const e=this.el.querySelectorAll(`${o("nano-nav-item")}.secondary-open`);if(e.length){const i=e[e.length-1];t=Array.from(i.querySelectorAll(`${o("nano-nav-item")}, ${o("nano-option")}`))}else{t=h(this.el,`${o("nano-nav-item")}, ${o("nano-option")}`,"slot")}return t.filter((t=>!t.disabled&&!t.hidden))}get activeItem(){const t=r();return this.getItems.find((e=>e.getAttribute("tabindex")==="0"||e===t||e.classList.contains("has-focus")))}get selectedItem(){return this.getItems.find((t=>t.selected))}async setActiveFocusItem(t,e=true){const i=this.getItems;const s=!t?i.find((t=>t.selected))||i[0]:t;i.filter((t=>t.tagName.toLowerCase()===o("nano-option"))).map((t=>t.setAttribute("tabindex",t===s?"0":"-1")));if(!e)return;if(s){if(s.setFocus)s.setFocus();else s.focus()}else this.menu.focus()}handleBlur(t){if(!this.hasFocus)return;const e=t;let i;if(e.key){if(e.key!=="Tab")return;i=r()&&r().closest(this.el.tagName.toLowerCase())===this.el}else i=!!t.composedPath().find((t=>t===this.el));if(!i){this.resetActiveItem();this._hasFocus=false;this.nanoBlur.emit()}}handleFocus=()=>{this.setActiveFocusItem(this.selectedItem||this.getItems[0]);this._hasFocus=true;this.nanoFocus.emit()};handleClick=t=>{const e=t.target;const i=e.closest(o("nano-nav-item"));if(i&&!i.disabled){this.nanoSelect.emit(i)}};handleKeyDown=t=>{clearTimeout(this.ignoreMouseTimeout);this.ignoreMouseTimeout=setTimeout((()=>this.ignoreMouseEvents=false),500);this.ignoreMouseEvents=true;switch(t.key){case" ":if(this.activeItem)this.activeItem.click();break;case"ArrowDown":case"ArrowUp":case"PageDown":case"PageUp":case"Home":case"End":{const e=this.getItems;const i=this.activeItem;let s=e.indexOf(i);if(e.length){t.preventDefault();if(t.key==="ArrowDown"){s++}else if(t.key==="ArrowUp"){s--}else if(t.key==="Home"||t.key==="PageUp"){s=0}else if(t.key==="End"||t.key==="PageDown"){s=e.length-1}if(s<0)s=e.length-1;if(s>e.length-1)s=0;this.setActiveFocusItem(e[s]);if(e[s])e[s].scrollIntoView({block:"nearest"});return}break}}if(t.key===" "||/^[a-z0-9]+$/i.test(t.key)){clearTimeout(this.typeToSelectTimeout);this.typeToSelectTimeout=setTimeout((()=>this.typeToSelect=""),750);this.typeToSelect+=t.key;const e=this.getItems;for(const t of e){const e=t.shadowRoot.querySelector("slot:not([name])");const i=c(e).toLowerCase().trim();if(i.substring(0,this.typeToSelect.length)===this.typeToSelect){this.setActiveFocusItem(t);break}}}};handleMouseOver=t=>{const e=t.target;const i=e.closest(o("nano-nav-item"))||e.closest(o("nano-option"));if(i&&!this.ignoreMouseEvents){this.setActiveFocusItem(i)}};componentDidLoad(){{h(this.el,":not(nano-nav-item):not(nano-option):not([role])",true).forEach((t=>t.setAttribute("role","none")))}}render(){return a(n,{key:"78d73e5aceb8bc9890134c9253834d37c0faf1c3",role:this.type==="menu"?"menu":"group",class:"nano-menu"},a("div",{key:"e38c5896dc520623bf97392954f278f5ea1b0450",onClick:this.handleClick,onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onFocus:this.handleFocus,"aria-label":this.label?this.label:undefined,ref:t=>this.menu=t,part:"base",class:{menu:true,["menu--"+this.type]:true,"menu--has-focus":this.hasFocus},tabIndex:-1,role:"group"},a("slot",{key:"213aae294bd3f00e968561ed98716b67c76387a6"})))}};v.style=g;const y=":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--bg:none;--bg-selected:var(--nano-select-opt-bg, #f2f7f9);--bg-focus:var(--nano-color-base, var(--nano-color-primary-tint, #2689a5));--bg-disabled:none;--color:var(--input-text-color, var(--nano-input-text-color, #4a4a4a));--color-selected:var(--nano-color-base, var(--nano-color-primary, #007495));--color-focus:var(--nano-color-contrast, var(--nano-color-primary-contrast, #fff));--color-disabled:#b5aea7;--opt-icon-size:1.6em;display:block;color:var(--color);overflow:hidden;font-size:14px;font-size:clamp(12px, .9em, 16px)}:host(:focus){outline:none}.option{position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;align-items:stretch;inline-size:100%;background:var(--bg);padding-inline:var(--padding-start) var(--padding-end);padding-block:var(--padding-top) var(--padding-bottom)}:host(:focus) .option:not(.option--disabled),:host .option.option--selected{outline:none;background:var(--bg-selected);color:var(--color-selected)}:host(:focus) .option:not(.option--disabled){background:var(--bg-focus);color:var(--color-focus)}.option.option--disabled{outline:none;color:var(--color-disabled);cursor:not-allowed;background:var(--bg-disabled)}.option.option--novalue{font-style:italic;opacity:0.7}.option__label{flex:1 1 auto;display:flex;align-items:center}.option__start{flex:0 0 auto;display:flex;align-items:center}.option__start ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__start ::slotted(:last-child){margin-inline-end:0.5em}.option__end{flex:0 0 auto;display:flex;align-items:center}.option__end ::slotted(.nano-icon){font-size:var(--opt-icon-size)}.option__end ::slotted(:first-child){margin-inline-start:0.5em}.option__check{visibility:hidden;display:flex;position:absolute;inset-inline-start:0.6em;inset-block-start:calc(50% - 0.6em);align-items:center;font-size:0.9em}.option--selected:not(.option--novalue) .option__check{visibility:visible}";const w=y;let x=0;const k=class{optId=`nano-option-${x++}`;get host(){return t(this)}hasFocus=false;constructor(t){e(this,t);this.nanoSelect=i(this,"nanoSelect",7);this.handleClick=l(this.handleClick.bind(this),5)}value="";valueChanged(){if((!this.value||!this.value.length)&&!this.label)this.value=this.labelContent}label="";labelChanged(){if(!this.label||!this.label.length)this.label=this.labelContent.length?this.labelContent:this.value}selected=false;disabled=false;filterMeta="";nanoSelect;handleKeyDown(t){if(t.key!==" "&&t.key!=="Enter")return;t.preventDefault();this.nanoSelect.emit(this.host)}handleClick(){if(this.disabled)return;this.nanoSelect.emit(this.host)}get labelContent(){return h(this.host,"*:not([slot])",false).map((t=>t.textContent)).join(" ").trim()}componentWillLoad(){this.valueChanged();this.labelChanged()}render(){return a(n,{key:"9c710d546cb6c588559561ea7759446d8a4b5a48",role:"option","aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",class:"nano-option"},a("div",{key:"b8824f9d1d8736e434ffb32b122a419767e897d3",onMouseDown:this.handleClick,id:this.optId,class:{option:true,"option--selected":this.selected,"option--disabled":this.disabled,"option--novalue":!this.value}},a("div",{key:"81424ff221aa45c36268315cea0a07a49d5bd092",part:"check-icon",class:"option__check"},a("slot",{key:"331a405714047eb22fc7043d4e0bf3dbdf67ca55",name:"check-icon"},a("nano-icon",{key:"0fc3ee15ccca0c3195bd9a5feb844060419f9ed2",name:"light/check","aria-hidden":"true"}))),a("div",{key:"e83acd281d86ea73e39566c718bef76781ab77ac",part:"start",class:"option__start"},a("slot",{key:"f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8",name:"start"})),a("div",{key:"5e69f3f9cbe5358714802d3718ab154d3badc9e4",part:"label",class:"option__label"},a("slot",{key:"3449b82ecd58edc5faf2bb713d63db9e975fdc96"},this.label||this.value)),a("div",{key:"a634d9bb9bb769ad94dc4141bfd938eb65dd78b2",part:"end",class:"option__end"},a("slot",{key:"64de93cc1d913c4a842d27c622f8e0a45567677a",name:"end"}))))}static get watchers(){return{value:["valueChanged"],label:["labelChanged"]}}};k.style=w;export{b as nano_datalist,v as nano_menu,k as nano_option};
5
5
  //# sourceMappingURL=nano-datalist_3.entry.js.map