npm - @nanoporetech-digital/components - Versions diffs - 7.6.0 → 7.7.0 - Mend

@nanoporetech-digital/components 7.6.0 → 7.7.0

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 (680) hide show

package/dist/esm/nano-checkbox-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox-group.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{tokens.$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{tokens.$input-help-color};\n\n * @prop --label-color: Default #{tokens.$label-color};\n * @prop --label-color--invalid: Default #{tokens.$label-color-invalid};\n * @prop --label-font-size: Default #{tokens.$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{tokens.$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{tokens.nano-color(danger, base)};\n --invalid-msg-font-size: #{tokens.$input-help-font-size};\n --help-msg-color: #{tokens.$input-help-color};\n --label-color: #{tokens.$label-color};\n --label-color--invalid: #{tokens.$label-color-invalid};\n --label-font-size: #{tokens.$label-font-size};\n --label-padding: #{tokens.$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host(.types-tag),\n:host(.types-segment) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host(.types-checkbox),\n:host(.types-radio) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n inline-size: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n\n &.visually-hide {\n @include mx.visually-hide;\n }\n }\n\n &__more {\n block-size: 1em;\n margin-block:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n ) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n h,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n Build,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../types/shared';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes?: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n Visually hide the legend but still available to screen readers.\n /\n @Prop() hideLegend?: boolean = false;\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 return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (!this.checkboxes) return;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInternalValue();\n this.handleCbChange();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) {\n this.showErrorMsg = this._invalid = false;\n }\n this.showErrorMsg = this._invalid = this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (\n !Build.isBrowser \|\|\n !this.nativeCbs \|\|\n !this.nativeCbs.length \|\|\n !this.checkboxes\n )\n return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes?.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + (cb.type \|\| 'checkbox'))\n );\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null \|\| !this.checkboxes?.length) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInternalValue() {\n if (!this.nativeCbs?.length) return;\n\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes?.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(this.host.querySelectorAll('nano-checkbox'));\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.handleValueChange = this.handleValueChange.bind(this);\n this.handleValueChange = debounce(this.handleValueChange, 1);\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n this.setCbValue();\n this.handleComponentChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (!this.nativeCbs?.length) return;\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n });\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host class={this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend\n id={legendId}\n class={{\n nanogroupcb__legend: true,\n 'visually-hide': this.hideLegend,\n }}\n >\n <slot name=\"legend\">{this.legend}</slot>\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}
1	+ {"file":"nano-checkbox-group.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox-group.scss?tag=nano-checkbox-group&encapsulation=scoped","src/components/checkbox/checkbox-group.tsx"],"sourcesContent":["@use '../../global/style/utilities/mixins' as mx;\n@use '../../global/style/nano-theme/tokens';\n\n:host {\n /*\n @prop --control-margin-top: Margin between controls. Default depends on control type;\n * @prop --control-margin-end: Margin between controls. Default depends on control type;\n * @prop --control-margin-bottom: Margin between controls. Default depends on control type;\n * @prop --control-margin-start: Margin between controls. Default depends on control type;\n\n * @prop --invalid-msg-color: Default #{nano-color(danger, base)};\n * @prop --invalid-msg-font-size: Default #{tokens.$input-help-font-size};\n\n * @prop --help-msg-color: Font color applied to slot=\"helper\". Default #{tokens.$input-help-color};\n\n * @prop --label-color: Default #{tokens.$label-color};\n * @prop --label-color--invalid: Default #{tokens.$label-color-invalid};\n * @prop --label-font-size: Default #{tokens.$label-font-size};\n * @prop --label-padding: space between legend and control. Default #{tokens.$input-padding-bottom};\n /\n\n --control-margin-top: 0;\n --control-margin-end: 0;\n --control-margin-bottom: 0;\n --control-margin-start: 0;\n --invalid-msg-color: #{tokens.nano-color(danger, base)};\n --invalid-msg-font-size: #{tokens.$input-help-font-size};\n --help-msg-color: #{tokens.$input-help-color};\n --label-color: #{tokens.$label-color};\n --label-color--invalid: #{tokens.$label-color-invalid};\n --label-font-size: #{tokens.$label-font-size};\n --label-padding: #{tokens.$input-padding-bottom};\n\n display: block;\n\n {\n box-sizing: inherit;\n }\n}\n\n:host(.types-tag),\n:host(.types-segment) {\n --control-margin-top: 0;\n --control-margin-end: 8px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n:host(.types-checkbox),\n:host(.types-radio) {\n --control-margin-top: 0;\n --control-margin-end: 10px;\n --control-margin-bottom: 6px;\n --control-margin-start: 0;\n}\n\n.nanogroupcb {\n border: none;\n margin: 0;\n padding: 0;\n\n &__error,\n &__help,\n &__more {\n display: block;\n inline-size: 100%;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n &__legend {\n font-size: var(--label-font-size);\n padding: 0 0 var(--label-padding);\n margin: 0;\n line-height: 1.5;\n white-space: normal;\n display: block;\n inline-size: 100%;\n\n :host([invalid]:not([invalid='false'])) & {\n color: var(--label-color--invalid);\n }\n\n &.visually-hide {\n @include mx.visually-hide;\n }\n }\n\n &__more {\n block-size: 1em;\n margin-block:\n calc(\n var(--label-padding) - var(--control-margin-bottom)\n ) var(--label-padding);\n margin-inline: 3px 0;\n position: relative;\n }\n\n &__error,\n &__help {\n inset-block-start: 0;\n inset-inline-start: 0;\n position: absolute;\n font-size: var(--invalid-msg-font-size);\n line-height: 1.2;\n transition: 0.3s ease-out opacity;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__error {\n color: var(--invalid-msg-color);\n opacity: 0;\n\n .show-error & {\n opacity: 1;\n }\n }\n\n &__help {\n font-style: italic;\n opacity: 1;\n color: var(--help-msg-color);\n\n .show-error & {\n opacity: 0;\n }\n }\n\n &__cbs {\n margin: 0;\n padding: 0;\n line-height: 1;\n display: flex;\n flex-wrap: wrap;\n\n ::slotted(:not([type='tag']):not([type='segment']):not([type='segment-pill'])) {\n --check-base-size: 1.2em;\n\n font-size: 0.85em;\n }\n\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n margin-block: var(--control-margin-top) var(--control-margin-bottom);\n }\n }\n}\n\n/* autoprefixer: ignore next /\n@supports ((margin-inline-start: 0) or (-webkit-margin-start: 0)) {\n .nanogroupcb__cbs {\n &::slotted(),\n ::slotted() {\n margin-inline: var(--control-margin-start) var(--control-margin-end);\n }\n }\n}\n","import {\n Component,\n Prop,\n Element,\n ComponentInterface,\n State,\n Listen,\n Watch,\n Host,\n Method,\n Event,\n EventEmitter,\n Build,\n} from '@stencil/core';\nimport { getClassMap } from '../../utils/theme';\nimport { debounce } from '../../utils/throttle';\nimport { transformTag, h } from '../../utils/renderer';\nimport type {\n CssClassMap,\n ControlValidityEventDetail,\n ControlValidity,\n} from '../../types/shared';\n\n/\n `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\n * It provides a convenient place to anchor a collective label and any validation issues.\n \n @slot - Used for grouping checkboxes inside the group wrapper\n * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup\n * @slot helper - helper text to accompany the form field underneath.\n /\n@Component({\n tag: 'nano-checkbox-group',\n styleUrl: 'checkbox-group.scss',\n scoped: true,\n})\nexport class CheckboxGroup implements ComponentInterface {\n private mo?: MutationObserver;\n private checkboxTypes: CssClassMap;\n private grpId = `nano-checkbox-group-${grpIds++}`;\n private ignoreValueSet = false;\n\n @Element() host: HTMLNanoCheckboxGroupElement;\n\n // internal state\n\n @State() checkboxes?: HTMLNanoCheckboxElement[];\n @State() nativeCbs: HTMLInputElement[];\n @State() errorMessage: string = '';\n @State() showErrorMsg = false;\n @State() hasHelperSlot = false;\n\n // public properties\n\n /\n When should the field perform validation\n /\n @Prop({ mutable: true }) validateOn?: 'dirty' \| 'submit' \| 'submitThenDirty' =\n 'submitThenDirty';\n\n /\n Whether to show validation errors underneath input\n /\n @Prop() showInlineError = true;\n\n /\n The minimum number of checkboxes required to be valid. Only relevant for checkbox type controls.\n * A validation error will be thrown if not enough controls are checked.\n /\n @Prop() min: number = 0;\n\n /\n The maximum number of checkboxes allowed. Only relevant for checkbox type controls.\n * Other controls will automatically be disabled upon reaching this number.\n /\n @Prop() max: number = null;\n\n /\n Disable all the nested form controls\n /\n @Prop({ reflect: true }) disabled: boolean \| null = null;\n\n /\n A common label for children controls\n /\n @Prop() legend: string = '';\n\n /\n Visually hide the legend but still available to screen readers.\n /\n @Prop() hideLegend?: boolean = false;\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 return this.errorMessage;\n }\n\n /* The current, collective checkbox value /\n @Prop({ mutable: true }) value: string[] \| string;\n\n @Watch('value')\n handleValuePropChange() {\n this.nanoChange.emit(this.value);\n\n // this change is coming from a checkbox being checked\n // so don't then change the checkbox state\n // (would cause an infinite loop)\n if (this.ignoreValueSet) return;\n\n // value has changed via prop directly, so update the checkbox's state\n this.setCbValue();\n }\n\n // Public methods\n\n /\n Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `{ isValid: boolean, errorMessage: string }`\n /\n @Method()\n async reportValidity(validateFirst: boolean): Promise<ControlValidity> {\n return new Promise((resolve) => {\n if (validateFirst) {\n this.customValidate();\n this.showInlineValidation();\n }\n setTimeout(() => {\n resolve({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n });\n }, 50);\n });\n }\n\n /\n Invalidate the field and show a custom error message.\n * To clear the error you will need to re-call this method with an empty string.\n * @param message - the error message to show\n * @param optVal - optionally supply an option value to target which checkbox to show invalidate against (default is the first)\n /\n @Method()\n async showError(message: string, optVal?: string) {\n let cb: HTMLNanoCheckboxElement;\n if (!this.checkboxes) return;\n if (optVal) cb = this.checkboxes.find((c) => c.value === optVal);\n if (!cb) cb = this.checkboxes[0];\n if (!cb) return;\n\n this.errorMessage = message;\n await cb.setError(message);\n if (this.showInlineError) this.showInlineValidation();\n }\n\n // Events\n\n /\n Called when a nested checkbox changes\n /\n @Event() nanoChange: EventEmitter<string \| string[]>;\n\n /\n Called when validation is performed (which depends on `validateOn`).\n * @returns event.detail: `{ isValid: boolean, errorMessage: string, originalEvent: Event }`.\n /\n @Event() nanoValidate: EventEmitter<ControlValidityEventDetail>;\n\n // listeners & watchers\n\n @Listen('nanoChange')\n handleValueChange(ev: CustomEvent) {\n if (ev.target === this.host) return;\n this.setInternalValue();\n this.handleCbChange();\n }\n\n /\n Notes on validation... custom validation messages should be set\n * no matter whether we show inline messages or native html5.\n * this will mean forms cannot submit when there are pending validation issues.\n */\n @Watch('min')\n @Watch('max')\n handleCbChange() {\n if (this.invalid) {\n this.showErrorMsg = this._invalid = false;\n }\n this.showErrorMsg = this._invalid = this.customValidate();\n\n if (this.validateOn !== 'dirty') return;\n this.showInlineValidation();\n }\n\n @Watch('nativeCbs')\n customValidate() {\n if (\n !Build.isBrowser \|\|\n !this.nativeCbs \|\|\n !this.nativeCbs.length \|\|\n !this.checkboxes\n )\n return;\n\n const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n\n if (\n onlyRadios &&\n onlyRadios.length &&\n (this.showErrorMsg \|\| this.validateOn === 'dirty')\n ) {\n const required = onlyRadios.find((cb) => cb.required);\n const checked = onlyRadios.filter((cb) => cb.checked);\n\n if (required && checked) {\n this.checkboxes.forEach((rd) => rd.reportValidity(false));\n return false;\n } else if (required && !checked) return true;\n }\n\n // we only care about checkbox controls.\n const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');\n if (!onlyCbs \|\| !onlyCbs.length) return;\n\n const checked = onlyCbs.filter((cb) => cb.checked);\n const required = onlyCbs.find((cb) => cb.required);\n let invalid = false;\n\n if (required && !checked.find((cb) => cb === required)) return true;\n\n this.checkboxes.forEach((cb, i) => {\n const nativeCb = this.nativeCbs[i];\n cb.setError('');\n nativeCb.setCustomValidity('');\n\n if (this.min && checked.length < this.min) {\n this.errorMessage = `You must select a minimum of ${this.min} values.`;\n invalid = true;\n }\n if (this.max && checked.length > this.max) {\n this.errorMessage = `Only up to ${this.max} values are allowed.`;\n invalid = true;\n }\n\n if (invalid) {\n cb.setError(this.errorMessage, this.showErrorMsg);\n // bit fugly. We're just doing this 'cos stencil\n // methods are async and we want the validity message\n // asap to keep things in sync\n nativeCb.setCustomValidity(this.errorMessage);\n }\n });\n return invalid;\n }\n\n @Watch('checkboxes')\n handleComponentChange() {\n if (!this.checkboxes?.length) return;\n\n this.checkboxTypes = getClassMap(\n this.checkboxes.map((cb) => 'types-' + (cb.type \|\| 'checkbox'))\n );\n this.checkboxTypes['nano-checkbox-group'] = true;\n }\n\n @Watch('disabled')\n @Watch('checkboxes')\n handleDisabledChange() {\n if (this.disabled === null \|\| !this.checkboxes?.length) return;\n this.checkboxes.map((cb) => (cb.disabled = this.disabled));\n }\n\n // private methods\n\n private setInternalValue() {\n if (!this.nativeCbs?.length) return;\n\n this.ignoreValueSet = true;\n const radios = this.nativeCbs.filter((cb) => cb?.type === 'radio');\n if (radios?.length) {\n this.value = radios.find((cb) => cb.checked)?.value \|\| null;\n return;\n }\n this.value = this.checkboxes.flatMap((cb) =>\n cb.checked ? [cb.value] : []\n );\n requestAnimationFrame(() => (this.ignoreValueSet = false));\n }\n\n private setCbValue() {\n this.checkboxes?.forEach((cb) => {\n if (\n cb.value === this.value \|\|\n (Array.isArray(this.value) && this.value.includes(cb.value))\n ) {\n cb.checked = true;\n }\n });\n }\n\n private attachSlotObserver() {\n if (!!this.mo \|\| !window['MutationObserver']) return;\n const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));\n mo.observe(this.host, { childList: true });\n }\n\n private async handleSlotChange() {\n this.checkboxes = Array.from(\n this.host.querySelectorAll(transformTag('nano-checkbox'))\n );\n this.hasHelperSlot = !!this.host.querySelector('[slot=\"helper\"]');\n\n this.nativeCbs = await Promise.all(\n this.checkboxes.reduce((acc: Array<Promise<HTMLInputElement>>, cb) => {\n acc.push(cb.getInputElement());\n return acc;\n }, [])\n );\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.addEventListener('invalid', this.handleInvalid);\n });\n }\n\n private handleInvalid = (ev: Event) => {\n this._invalid = true;\n\n if (this.validateOn === 'submit') {\n this._invalid = this.showErrorMsg = this.customValidate();\n }\n if (this.showInlineError) ev.preventDefault();\n\n this.showInlineValidation(ev);\n };\n\n private showInlineValidation = (ev?: Event) => {\n if (!this.nativeCbs \|\| !this.nativeCbs.length) return;\n if (this.validateOn === 'submitThenDirty') this.validateOn = 'dirty';\n this.showErrorMsg = false;\n this._invalid = false;\n\n this.nativeCbs.forEach((cb, _i) => {\n if (!cb.validity.valid) {\n this.errorMessage = cb.validationMessage;\n this.showErrorMsg = true;\n this._invalid = true;\n }\n });\n\n this.nanoValidate.emit({\n isValid: !this.invalid,\n errorMessage: this.errorMessage,\n originalEvent: ev,\n });\n };\n\n // stencil hooks\n\n componentWillLoad() {\n this.handleValueChange = this.handleValueChange.bind(this);\n this.handleValueChange = debounce(this.handleValueChange, 1);\n this.showInlineValidation = debounce(this.showInlineValidation, 50);\n this.customValidate = this.customValidate.bind(this);\n this.handleDisabledChange();\n this.handleSlotChange();\n this.setCbValue();\n this.handleComponentChange();\n }\n\n connectedCallback() {\n this.attachSlotObserver();\n }\n\n disconnectedCallback() {\n if (this.mo) this.mo.disconnect();\n if (!this.nativeCbs?.length) return;\n\n this.nativeCbs.forEach((cb) => {\n if (cb) cb.removeEventListener('invalid', this.handleInvalid);\n });\n }\n\n render() {\n const legendId = this.grpId + '-lbl';\n const moreId =\n this.showInlineError \|\| this.hasHelperSlot ? this.grpId + '-more' : '';\n\n return (\n <Host class={this.checkboxTypes}>\n <fieldset\n disabled={this.disabled}\n class={{ nanogroupcb: true, 'show-error': this.showErrorMsg }}\n >\n <legend\n id={legendId}\n class={{\n nanogroupcb__legend: true,\n 'visually-hide': this.hideLegend,\n }}\n >\n <slot name=\"legend\">{this.legend}</slot>\n </legend>\n <div\n class=\"nanogroupcb__cbs\"\n role=\"group\"\n aria-labelledby={legendId + ' ' + moreId}\n >\n <slot />\n </div>\n {(this.showInlineError \|\| this.hasHelperSlot) && (\n <div class=\"nanogroupcb__more\" id={moreId}>\n {this.showInlineError ? (\n <div class=\"nanogroupcb__error\">{this.errorMessage}</div>\n ) : (\n ''\n )}\n <div class=\"nanogroupcb__help\">\n <slot name=\"helper\" />\n </div>\n </div>\n )}\n </fieldset>\n </Host>\n );\n }\n}\n\nlet grpIds = 0;\n"],"version":3}

package/dist/esm/nano-checkbox.entry.js CHANGED Viewed

@@ -1,9 +1,10 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-3118109b.js';
+import { r as registerInstance, c as createEvent, g as getElement, a as Host } from './index-6cc72cd9.js';
 import { f as focusVisible } from './focus-visible-e5f02c46.js';
 import { c as createColorClasses } from './theme-d553c17a.js';
+import { t as transformTag, h } from './renderer-4bc3e2dc.js';
 const checkboxCss = ".sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{box-sizing:border-box}*.sc-nano-checkbox,*.sc-nano-checkbox::before,*.sc-nano-checkbox::after{box-sizing:border-box}[hidden].sc-nano-checkbox{display:none !important}.sc-nano-checkbox-h{--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--invalid-shadow:0 0 0 0.1875rem  #ef4135;--padding:initial;--check-bg-color:#fff;--check-border-color:#b5aea7;--check-border-size:1px;--check-border-style:var(--check-border-size) solid var(--check-border-color);--check-checked-bg-color:#455556;--check-checked-border-color:#455556;--check-checked-higlight-color:#fff;--check-base-size:inherit;--label-spacing:10px 0;--tagbox-rgb:144 198 231;--tagbox-border-color:rgb(var(--tagbox-rgb) / 50%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 20%);--tagbox-border-radius:0;--segment-color:#007495;--segment-border-radius:3px;--segment-shadow:0 1px 4px rgb(0 0 0 / 20%);--cb-border-radius:2px;--radio-border-radius:50%;--switch-inactive-color:rgb(181 174 167 / 70%);--switch-active-color:#007495;display:inline-block;max-inline-size:100%}.sc-nano-checkbox-h *.sc-nano-checkbox{box-sizing:inherit}[type=tag].sc-nano-checkbox-h{text-transform:uppercase;--control-padding:0.2rem 1rem}[type=radio][checked].sc-nano-checkbox-h:not([checked=false]){--check-border-size:0.3125em}[type=segment].sc-nano-checkbox-h{--check-border-style:none;--control-padding:0.7em 1em 0.7em 1em}[type=segment-pill].sc-nano-checkbox-h{--check-border-color:rgba(181, 174, 167, 0.5);--segment-border-radius:5px;--control-padding:0.7em 1em 0.7em 1em}.nano-color.sc-nano-checkbox-h{--tagbox-rgb:var(--nano-color-base-rgb);--focus-shadow:0 0 0 0.1875rem var(--nano-color-shade)}[checked].sc-nano-checkbox-h:not([checked=false]){--tagbox-border-color:rgb(var(--tagbox-rgb) / 80%);--tagbox-bg-color:rgb(var(--tagbox-rgb) / 50%)}[has-focus].sc-nano-checkbox-h:not([has-focus=false]){--cb-border-radius:5px}[disabled].sc-nano-checkbox-h:not([disabled=false]){opacity:0.7;--tagbox-rgb:104 117 118;--check-bg-color:rgba(104, 117, 118, 0.5);--check-checked-bg-color:rgba(104, 117, 118, 0.5);--segment-color:#455556}.nanocb.sc-nano-checkbox{padding:var(--padding);cursor:pointer;display:flex;align-items:center;line-height:1.2;position:relative}.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius, 3px);font-size:var(--check-base-size);position:relative;block-size:1.5em;inline-size:1.5em;min-inline-size:1.5em;border:var(--check-border-style);box-shadow:0 1px 4px rgba(0, 0, 0, 0.2)}.nanocb__input.sc-nano-checkbox::before{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.725em - var(--check-border-size));inset-block-start:calc(0.725em - var(--check-border-size));inline-size:0;block-size:0;border:2px solid var(--check-checked-higlight-color);transform:scale(0)}.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox{background-color:var(--check-bg-color)}.nanocb__input--checkbox.sc-nano-checkbox::after{border-radius:var(--cb-border-radius);position:absolute;content:\"\";inset-inline-start:calc(0.825em - var(--check-border-size));inset-block-start:calc(0.825em - var(--check-border-size));block-size:0;inline-size:0;border:solid var(--check-checked-higlight-color);border-width:0 0.1875em 0.1875em 0;transform:rotate(0deg) scale(0);opacity:1;transition:all 0.15s ease-out}.nanocb--indeterminate.sc-nano-checkbox .nanocb__input--checkbox.sc-nano-checkbox::after{border-width:0 0 0.1875em}.nanocb__input--switch.sc-nano-checkbox{border-radius:1em !important;inline-size:2.4em;block-size:1.3em;background:var(--switch-inactive-color)}[type=switch].sc-nano-checkbox-h:not([disabled]) .nanocb__input--switch.sc-nano-checkbox:hover::after{scale:1.1 1}.nanocb__input--switch.sc-nano-checkbox::after{position:relative;content:\"\";display:block;border-radius:inherit;block-size:80%;inline-size:40%;background:var(--check-checked-higlight-color);transform-origin:left;inset-inline-start:6%;inset-block-start:10%;transition:0.1s ease scale, 0.15s ease left}.nanocb__input--segment.sc-nano-checkbox,.nanocb__input--segment-pill.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--segment.sc-nano-checkbox::before,.nanocb__input--segment-pill.sc-nano-checkbox::before{display:none}.nanocb__input--tag.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb__input--tag.sc-nano-checkbox::before{display:none}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--invalid-shadow)}.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb--invalid.sc-nano-checkbox:not(.nanocb--focused) .nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--invalid-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:focus~.nanocb__input.sc-nano-checkbox{box-shadow:0 0 15px rgba(0, 0, 0, 0.2), var(--focus-shadow)}.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.focus-visible.sc-nano-checkbox:focus~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{box-shadow:var(--focus-shadow);z-index:1}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input.sc-nano-checkbox{border-radius:var(--cb-border-radius);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border-color:var(--check-checked-border-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox,.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--segment-pill.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox{color:var(--check-checked-higlight-color);background-color:var(--check-checked-bg-color);box-shadow:inset 0 3px 4px rgba(0, 0, 0, 0.2)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox{border-radius:var(--radio-border-radius);background-color:var(--check-checked-higlight-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::after{border:solid var(--check-checked-border-color);border-width:0 0.125em 0.125em 0;opacity:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--radio.sc-nano-checkbox::before{border-radius:var(--radio-border-radius)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:rotate(45deg) scale(1);opacity:1;inset-inline-start:calc(0.575em - var(--check-border-size));inset-block-start:calc(0.2875em - var(--check-border-size));inline-size:0.375em;block-size:0.75em;border-radius:0}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--tag.sc-nano-checkbox+.nanocb__label.sc-nano-checkbox::after{transform:rotate(45deg)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox{background:var(--switch-active-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:checked~.nanocb__input--switch.sc-nano-checkbox::after{inset-inline-start:56%;transform-origin:right}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox{border-radius:var(--input-border-radius, 5px);background-color:var(--check-checked-bg-color);transform:rotate(0deg) scale(1);opacity:1;border:0.125em solid var(--check-checked-bg-color)}.nanocb.sc-nano-checkbox input.sc-nano-checkbox:indeterminate~.nanocb__input--checkbox.sc-nano-checkbox::after{transform:scale(1);opacity:1;inset-inline-start:0.3125em;inset-block-start:0;inline-size:0.7em;block-size:0.7em;border-radius:0}.nanocb__label.sc-nano-checkbox{padding-inline:var(--label-spacing);padding-block:0;display:flex;align-items:center;line-height:1;flex:1;justify-content:space-between}.nanocb__label--segment.sc-nano-checkbox,.nanocb__label--segment-pill.sc-nano-checkbox{border:var(--check-border-style);border-radius:var(--segment-border-radius);box-shadow:var(--segment-shadow);display:inline-flex;padding:var(--control-padding);background:var(--check-bg-color);color:var(--segment-color);align-items:center;inline-size:100%}.sc-nano-checkbox-h:first-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:var(--segment-border-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--segment-border-radius);border-inline-end:none}.sc-nano-checkbox-h:not(:last-of-type):not(:first-of-type) .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:0;border-inline-end:none}.sc-nano-checkbox-h:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-start-start-radius:0;border-start-end-radius:var(--segment-border-radius);border-end-end-radius:var(--segment-border-radius);border-end-start-radius:0}.sc-nano-checkbox-h:first-of-type:last-of-type .nanocb__label--segment-pill.sc-nano-checkbox{border-radius:var(--segment-border-radius);border:var(--check-border-style)}.nanocb__label--tag.sc-nano-checkbox{letter-spacing:2px;font-weight:400;font-size:0.65em;line-height:1.4;padding:var(--control-padding);border:2px solid #b5aea7;border-color:var(--tagbox-border-color);background-color:var(--tagbox-bg-color);transition:all 0.2s;border-radius:var(--cb-border-radius);inline-size:100%}.nanocb__label--tag.sc-nano-checkbox::after{content:\"+\";margin-inline:0.3125em 0;margin-block:0;font-weight:200;position:relative;font-family:inherit;font-size:1.8em;display:inline-block;transform:rotate(0deg);transform-origin:center}.nanocb__label--tag.sc-nano-checkbox span.sc-nano-checkbox{display:block}";
 const NanoCheckboxStyle0 = checkboxCss;
@@ -34,10 +35,10 @@ const Checkbox = class {
             const form = this.host.closest('form');
             let ctrls;
             if (form) {
-                ctrls = Array.from(form.querySelectorAll(`nano-checkbox[name="${this.name}"]`));
+                ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
             }
             else {
-                ctrls = Array.from(document.querySelectorAll(`nano-checkbox[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
+                ctrls = Array.from(document.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
             }
             ctrls.map((el) => {
                 if (el !== this.host)
@@ -216,14 +217,14 @@ const Checkbox = class {
     }
     render() {
         const labelId = this.inputId + '-lbl';
-        return (h(Host, { key: '6afed2e718ea4744a7f9dfccab87bb1db2d4586a', class: { ...createColorClasses(this.color) } }, h("label", { key: 'f5686febf4252f257c8351f88c76c7d9e5930a53', class: {
+        return (h(Host, { key: '743ba20f7dc131a5df0dbef97f12682228b3a49d', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '9b0f1649bcf44a7685c3e1f91da816e7283f41e0', class: {
                 nanocb: true,
                 'nanocb--checked': this.checked,
                 'nanocb--invalid': this.invalid,
                 'nanocb--disabled': this.disabled,
                 'nanocb--focused': this.hasFocus,
                 'nanocb--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId }, h("input", { key: '37d6990dcea78794d01739627a68dc252c5e6c6e', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '17ef69fb920d6d6f8524c1fe8dc2d0b7e0ce66d0', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '369c14311913bdc03660271c86d41173b27c135b', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: '52356a0bad26c8f505ffe9992e58e4eba8a6839a' }, this.label), h("span", { key: 'd049601e083379e90a65df3ecd309ae1ed731399', hidden: this.label && !!this.label.length }, h("slot", { key: 'ded4ae2eac621e6811d2155702bdd916551b7a84' }))))));
+            }, htmlFor: this.inputId }, h("input", { key: '77bac537123647d224667f66ef9d8a3ea732af9a', type: this.inputType, name: this.name, form: this.form, required: this.required, checked: this.checked, disabled: this.disabled, value: this.value, "aria-labelledby": labelId, onBlur: this.handleBlur, onFocus: this.handleFocus, onChange: this.handleChange, ref: (input) => (this.input = input), id: this.inputId, onInvalid: this.handleInvalid }), h("span", { key: '6ee7540510d902daaf303edcc2a677e9819d3b00', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '0ea0aea0ca852394ae4a3ccc6eb998e990d61f01', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'a1b43b59fc067cba5fd22b87add0c5352666ca2f' }, this.label), h("span", { key: 'e2a1abe3e02c9a3deeda47430b164a0b0f03982b', hidden: this.label && !!this.label.length }, h("slot", { key: '30738b530444fd2051465eb6ff9098ebb06e2e88' }))))));
     }
     static get watchers() { return {
         "checked": ["handleCheckedChange"],

package/dist/esm/nano-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-checkbox.entry.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,69UAA69U,CAAC;AACl/U,2BAAe,WAAW;;ACkB1B,IAAI,WAAW,GAAG,CAAC,CAAC;MAcP,QAAQ;;;;;;;IACX,OAAO,GAAG,WAAW,WAAW,EAAE,EAAE,CAAC;IACrC,KAAK,CAAmB;;IAGvB,SAAS,GAAyB,UAAU,CAAC;;IAGd,QAAQ,GAAG,KAAK,CAAC;;;;IAKjB,OAAO,GAAY,KAAK,CAAC;IAGjE,MAAM,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QAExB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAElC,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE;YAC3D,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACvC,IAAI,KAAgB,CAAC;YACrB,IAAI,IAAI,EAAE;gBACR,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,CAAC,CAC5D,CAAC;aACH;iBAAM;gBACL,KAAK,GAAG,KAAK,CAAC,IAAI,CAChB,QAAQ,CAAC,gBAAgB,CAAC,uBAAuB,IAAI,CAAC,IAAI,IAAI,CAAC,CAChE,EAAE,MAAM,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;aAC9C;YACD,KAAK,CAAC,GAAG,CAAC,CAAC,EAA2B;gBACpC,IAAI,EAAE,KAAK,IAAI,CAAC,IAAI;oBAAE,EAAE,CAAC,OAAO,GAAG,KAAK,CAAC;aAC1C,CAAC,CAAC;SACJ;QACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KACpE;;;;IAKwB,QAAQ,GAAY,KAAK,CAAC;;;;;IAM1B,KAAK,GAAW,IAAI,CAAC;;;;IAKrB,IAAI,CAAS;;;;IAKb,QAAQ,GAAY,KAAK,CAAC;;;;IAK1B,IAAI,GAMR,UAAU,CAAC;IAGhC,UAAU;QACR,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;YACnD,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC;;YACzB,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC;KAC/B;;;;IAKO,KAAK,CAAU;;;;IAKiB,aAAa,GAAY,KAAK,CAAC;IAGvE,yBAAyB;QACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;KAC/C;;;;;IAMD,IACI,OAAO;QACT,OAAO,IAAI,CAAC,QAAQ,CAAC;KACtB;IACQ,QAAQ,GAAG,KAAK,CAAC;;;;IAK1B,IACI,eAAe;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,EAAE,CAAC;QAC3B,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;KACrC;;;;IAKO,KAAK,CAAS;;;;IAKd,IAAI,CAAiB;;;;IAKpB,UAAU,CAA0C;;;;IAKpD,SAAS,CAAe;;;;IAKxB,QAAQ,CAAe;;;;;;IAShC,MAAM,eAAe;QACnB,IAAI,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC;KACnC;;;;;;IAQD,MAAM,cAAc,CAClB,gBAAyB,KAAK;QAE9B,IAAI,aAAa;YAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC;QAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;QAE3C,OAAO;YACL,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;YACtB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB;SAC3C,CAAC;KACH;;;;;IAOD,MAAM,QAAQ,CAAC,OAAe,EAAE,YAAY,GAAG,IAAI;QACjD,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QACxB,IAAI,YAAY;YAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QACnD,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;KACvC;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACnB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAChC;KACF;;;;IAMD,MAAM,WAAW;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAClB,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;SACvC;KACF;IAGD,OAAO,CAAC,CAAC;QACP,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;cAClB,QAAQ,CAAC,aAAa,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;cACvC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAC9B,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;YAAE,OAAO;QAE5D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAIO,aAAa,GAAG,CAAC,EAAS;QAChC,IAAI,CAAC,QAAQ,GAAG,CAAE,EAAE,CAAC,MAA2B,CAAC,QAAQ,CAAC,KAAK,CAAC;KACjE,CAAC;IAEM,YAAY,GAAG,CAAC,EAAc;QACpC,IAAI,CAAC,OAAO,GAAI,EAAE,CAAC,MAA2B,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,UAAU,GAAG;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;KACtB,CAAC;;;IAIM,cAAc;QACpB,qBAAqB,CAAC,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAClE;;IAID,iBAAiB;QACf,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC;QAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;IAED,oBAAoB;QAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtC,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,EAAE,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAChD,8DACE,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,iBAAiB,EAAE,IAAI,CAAC,OAAO;gBAC/B,kBAAkB,EAAE,IAAI,CAAC,QAAQ;gBACjC,iBAAiB,EAAE,IAAI,CAAC,QAAQ;gBAChC,uBAAuB,EAAE,IAAI,CAAC,aAAa;aAC5C,EACD,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,8DACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,OAAO,EACxB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EACpC,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,aAAa,GAC7B,EACF,6DAAM,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI,GAAS,EAEjE,4DAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,+BAA+B,GAAG,IAAI,CAAC,IAAI,IACjE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,+DAAO,IAAI,CAAC,KAAK,CAAQ,EAC/D,6DAAM,MAAM,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAC7C,8DAAQ,CACH,CACH,CACA,CACH,EACP;KACH;;;;;;;;;;;","names":[],"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 h,\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 { 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(`nano-checkbox[name=\"${this.name}\"]`)\n );\n } else {\n ctrls = Array.from(\n document.querySelectorAll(`nano-checkbox[name=\"${this.name}\"]`)\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 class={{ ...createColorClasses(this.color) }}>\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"],"version":3}
1	+ {"file":"nano-checkbox.entry.js","mappings":"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","names":[],"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"],"version":3}

package/dist/esm/nano-components.js CHANGED Viewed

@@ -1,9 +1,9 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { p as promiseResolve, H, b as bootstrapLazy } from './index-3118109b.js';
-export { s as setNonce } from './index-3118109b.js';
-import { g as globalScripts } from './app-globals-d4ab01f2.js';
+import { p as promiseResolve, w as win, N as NAMESPACE, H, b as bootstrapLazy } from './index-6cc72cd9.js';
+export { s as setNonce } from './index-6cc72cd9.js';
+import { g as globalScripts } from './app-globals-f0120bbe.js';
 /*
  Stencil Client Patch Browser v4.27.2 | MIT Licensed | https://stenciljs.com
@@ -12,8 +12,11 @@ var patchBrowser = () => {
   {
     patchCloneNodeFix(H.prototype);
   }
+  const scriptElm = win.document && Array.from(win.document.querySelectorAll("script")).find(
+    (s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
+  ) ;
   const importMeta = import.meta.url;
-  const opts = {};
+  const opts = (scriptElm || {})["data-opts"] || {} ;
   if (importMeta !== "") {
     opts.resourcesUrl = new URL(".", importMeta).href;
   }

package/dist/esm/nano-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"nano-components.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAIzB,EAA0B;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AACnC,GAAG;~~AAIH~~,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,~~GAAiE~~,EAAE,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC;AACF,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS,CAAC;AAC3D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;AAC1C,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACnE,SAAS;AACT,OAAO;AACP,KAAK;AACL,IAAI,OAAO,UAAU,CAAC;AACtB,GAAG,CAAC;AACJ,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"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"],"version":3}
1	+ {"file":"nano-components.js","mappings":";;;;;;;AAAA;AACA;AACA;AAKA,IAAI,YAAY,GAAG,MAAM;AAIzB,EAA0B;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AACnC,GAAG;AACH,EAAE,MAAM,SAAS,GAA0B,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK,SAAS;AACnI,GAAG,CAAO,CAAC;AACX,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;AACrC,EAAE,MAAM,IAAI,GAA0B,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,CAAK,CAAC;AAChF,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AACtD,GAAG;AACH,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC;AACF,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS,CAAC;AAC3D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC;AAC1C,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACnE,SAAS;AACT,OAAO;AACP,KAAK;AACL,IAAI,OAAO,UAAU,CAAC;AACtB,GAAG,CAAC;AACJ,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE,CAAC;AACxB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC","names":[],"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"],"version":3}

package/dist/esm/nano-datalist_3.entry.js CHANGED Viewed

@@ -1,13 +1,14 @@
 /*!
  * Web Components for Nanopore digital Web Apps
  */
-import { g as getElement, r as registerInstance, c as createEvent, w as writeTask, h, a as Host } from './index-3118109b.js';
+import { g as getElement, r as registerInstance, c as createEvent, d as writeTask, a as Host } from './index-6cc72cd9.js';
+import { t as transformTag, h } from './renderer-4bc3e2dc.js';
 import { g as getActiveElement } from './active-element-a2502948.js';
 import { d as debounce } from './throttle-df960210.js';
-import { g as getDirectChildren } from './dom-d7f9f24c.js';
+import { g as getDirectChildren } from './dom-fafdec9a.js';
 import { g as getTextContent } from './slot-1cd90e53.js';
-const datalistCss = ":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 datalistCss = ":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 NanoDatalistStyle0 = datalistCss;
 function findLabel(formCtrl) {
@@ -112,7 +113,7 @@ const DataList = class {
     // State change watchers
     async watchInputChange() {
         let nanoInput;
-        if ((nanoInput = this.host.closest('nano-input'))) {
+        if ((nanoInput = this.host.closest(transformTag('nano-input')))) {
             this.isNanoInput = true;
             this.connectedInput = await nanoInput.getInputElement();
         }
@@ -145,7 +146,7 @@ const DataList = class {
                 this.mo.disconnect();
                 this.mo = undefined;
             }
-            const previousOptions = this.host.querySelectorAll('nano-option');
+            const previousOptions = this.host.querySelectorAll(transformTag('nano-option'));
             // add imperative `options`
             writeTask(() => {
                 // clear all previous
@@ -153,7 +154,7 @@ const DataList = class {
                     previousOptions.forEach((internalOpt) => internalOpt.remove());
                 this.allOptEles = this.options.flatMap((option, i) => {
                     if (option.value || option.label) {
-                        const opt = Object.assign(document.createElement('nano-option'), {
+                        const opt = Object.assign(document.createElement(transformTag('nano-option')), {
                             label: option.label,
                             value: option.value,
                             ariaPosinset: i,
@@ -202,7 +203,7 @@ const DataList = class {
     }
     manageInputEvents(newInput, oldInput) {
         if (oldInput) {
-            const nanoInput = oldInput.closest('nano-input');
+            const nanoInput = oldInput.closest(transformTag('nano-input'));
             if (nanoInput) {
                 nanoInput.removeEventListener('nanoChange', this.inputChange);
             }
@@ -219,7 +220,7 @@ const DataList = class {
             });
         }
         if (newInput) {
-            const nanoInput = newInput.closest('nano-input');
+            const nanoInput = newInput.closest(transformTag('nano-input'));
             if (nanoInput) {
                 nanoInput.addEventListener('nanoChange', this.inputChange);
             }
@@ -351,7 +352,7 @@ const DataList = class {
     }
     // Event handlers
     removeEventListeners(oldInput) {
-        const nanoInput = oldInput.closest('nano-input');
+        const nanoInput = oldInput.closest(transformTag('nano-input'));
         if (nanoInput) {
             nanoInput.removeEventListener('nanoChange', this.inputChange);
         }
@@ -362,7 +363,7 @@ const DataList = class {
     }
     processSlottedContent() {
         requestAnimationFrame(() => {
-            this.allOptEles = Array.from(this.host.querySelectorAll('nano-option'));
+            this.allOptEles = Array.from(this.host.querySelectorAll(transformTag('nano-option')));
             this.hasNoResult = !!this.host.querySelector('[slot="no-result"]');
             if (this.connectedInput?.value.length && this.type !== 'select') {
                 this.inputChange();
@@ -521,18 +522,18 @@ const DataList = class {
             this.removeEventListeners(this.connectedInput);
     }
     render() {
-        return (h(Host, { key: '468c4a8057baabdb5429ff7200b127d168cafbc2', role: this.actvOptEles.length ? 'listbox' : undefined, "aria-owns": this.optionIds.length ? this.optionIds.join(' ') : undefined, "aria-label": this.optionIds.length
+        return (h(Host, { 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 }, h("nano-dropdown", { key: '16736f4c8ca46fc4bd8cc76374f0b9adf5f8f1d3', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
+                : undefined }, h("nano-dropdown", { key: 'd98ed992c76129d5f1a1b5cb3c2a7e4c0c385118', ...this.dropDownConfig, ref: (el) => (this.nanoDropdown = el), dialogTitle: "Select options from the list below", class: {
                 dlist__dropdown: true,
                 'dlist--isfiltered': this.isFiltered,
-            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("nano-menu", { key: 'd136b8dcabbcf5f122643bea5b8fb42d0a8fa973', hidden: !this.actvOptEles.length, type: "listbox", label: this.inputLabel ? this.inputLabel.textContent : undefined, class: {
+            }, onNanoAfterShow: this.handleShow, onNanoAfterHide: this.handleHide, role: "group" }, h("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: (el) => (this.listBox = el) }, h("slot", { key: 'fe02ef6eb30a64537e70e98091070e4e39470e37', name: "list-top" }), h("slot", { key: 'bf39b92e5ab2832b657fe4613c9e53c2cf9c98b9' }), h("slot", { key: 'b452641ee00db203fe7c4f34ca9f124eb4dbd600', name: "internal-opts" }), h("slot", { key: '276ef711161276042262bff741111130462c97cc', name: "list-bottom" })), h("nano-menu", { key: '998a3e84c5987663bb85a25a94fbdfed54d6deb9', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
+            }, tabIndex: -1, onNanoSelect: this.optSelected, onKeyDown: this.optionKeyDown, ref: (el) => (this.listBox = el) }, h("slot", { key: '58683fab717385e8dff20602683964327093f660', name: "list-top" }), h("slot", { key: '949fb5e02b13f878cde4d90a9848fcb18b35ea2c' }), h("slot", { key: 'ed9bccc1520dc103e1673fae32094b05245ab704', name: "internal-opts" }), h("slot", { key: 'aca33681c6282a17386c9934b93cfce6622c08e1', name: "list-bottom" })), h("nano-menu", { key: '4de595aded1e1f586a8d11d21bf6151758da9f9d', type: "listbox", label: "No results found", hidden: !!this.actvOptEles.length, class: {
                 dlist__menu: true,
                 'dlist__menu--open': this.dropwdownOpen,
-            } }, h("slot", { key: '9151e7b9b8935bbfc8bf26924cd0c0fe8e0ffcf5', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'c9a63414caf5f60ee0f277f8c483b68ad93cf28c', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
+            } }, h("slot", { key: '0da09df34253d8bd83bdd263e25f40b9075d30a7', name: "no-result" })), !!this.actvOptEles && (h("div", { key: 'ee9d3f67a82cc6a2e0c25efb0c79e031995d0587', class: "dlist__status" }, this.actvOptEles.length, " result", this.actvOptEles.length > 1 ? 's' : '', " available.")))));
     }
     static get watchers() { return {
         "open": ["openWatcher"],
@@ -549,7 +550,7 @@ const DataList = class {
 };
 DataList.style = NanoDatalistStyle0;
-const menuCss = ":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 menuCss = ":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 NanoMenuStyle0 = menuCss;
 const Menu = class {
@@ -601,19 +602,19 @@ const Menu = class {
     /** Removes any active item's state */
     async resetActiveItem() {
         this.getItems
-            .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
             .map((i) => i.setAttribute('tabindex', '-1'));
     }
     // Private methods
     get getItems() {
         let items;
-        const opened = this.el.querySelectorAll('nano-nav-item.secondary-open');
+        const opened = this.el.querySelectorAll(`${transformTag('nano-nav-item')}.secondary-open`);
         if (opened.length) {
             const ctx = opened[opened.length - 1];
-            items = Array.from(ctx.querySelectorAll('nano-nav-item, nano-option'));
+            items = Array.from(ctx.querySelectorAll(`${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`));
         }
         else {
-            items = getDirectChildren(this.el, 'nano-nav-item, nano-option', 'slot');
+            items = getDirectChildren(this.el, `${transformTag('nano-nav-item')}, ${transformTag('nano-option')}`, 'slot');
         }
         return items.filter((el) => !el.disabled && !el.hidden);
     }
@@ -630,7 +631,7 @@ const Menu = class {
         const items = this.getItems;
         const activeItem = !item ? items.find((i) => i.selected) || items[0] : item;
         items
-            .filter((i) => i.tagName.toLowerCase() === 'nano-option')
+            .filter((i) => i.tagName.toLowerCase() === transformTag('nano-option'))
             .map((i) => i.setAttribute('tabindex', i === activeItem ? '0' : '-1'));
         if (!focus)
             return;
@@ -671,7 +672,7 @@ const Menu = class {
     };
     handleClick = (event) => {
         const target = event.target;
-        const item = target.closest('nano-nav-item');
+        const item = target.closest(transformTag('nano-nav-item'));
         if (item && !item.disabled) {
             this.nanoSelect.emit(item);
         }
@@ -742,7 +743,8 @@ const Menu = class {
     };
     handleMouseOver = (event) => {
         const target = event.target;
-        const item = target.closest('nano-nav-item') || target.closest('nano-option');
+        const item = target.closest(transformTag('nano-nav-item')) ||
+            target.closest(transformTag('nano-option'));
         if (item && !this.ignoreMouseEvents) {
             this.setActiveFocusItem(item);
         }
@@ -754,16 +756,16 @@ const Menu = class {
         }
     }
     render() {
-        return (h(Host, { key: '14c788bd695d9a8e93cc8117800d21f125eb3bd4', role: this.type === 'menu' ? 'menu' : 'group' }, h("div", { key: 'a1a3158e0a9a032cbc2c65bd55594243deaeee92', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
+        return (h(Host, { key: '78d73e5aceb8bc9890134c9253834d37c0faf1c3', role: this.type === 'menu' ? 'menu' : 'group', class: "nano-menu" }, h("div", { key: 'e38c5896dc520623bf97392954f278f5ea1b0450', onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onFocus: this.handleFocus, "aria-label": this.label ? this.label : undefined, ref: (el) => (this.menu = el), part: "base", class: {
                 menu: true,
                 ['menu--' + this.type]: true,
                 'menu--has-focus': this.hasFocus,
-            }, tabIndex: -1, role: "group" }, h("slot", { key: '272f1ee23857d126cf5a846d6eb74c8b9800514b' }))));
+            }, tabIndex: -1, role: "group" }, h("slot", { key: '213aae294bd3f00e968561ed98716b67c76387a6' }))));
     }
 };
 Menu.style = NanoMenuStyle0;
-const optionCss = ":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 optionCss = ":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 NanoOptionStyle0 = optionCss;
 let optIds = 0;
@@ -833,12 +835,12 @@ const Option = class {
         this.labelChanged();
     }
     render() {
-        return (h(Host, { key: '81da275412fb18c7e96d947c6e4612d8b4a4bfb1', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '65ec11bca28136d886a1ee24c93b0d14b2d3b296', onMouseDown: this.handleClick, id: this.optId, class: {
+        return (h(Host, { key: '9c710d546cb6c588559561ea7759446d8a4b5a48', role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', class: "nano-option" }, h("div", { key: 'b8824f9d1d8736e434ffb32b122a419767e897d3', onMouseDown: this.handleClick, id: this.optId, class: {
                 option: true,
                 'option--selected': this.selected,
                 'option--disabled': this.disabled,
                 'option--novalue': !this.value,
-            } }, h("div", { key: '5ca7ea12d12e17177a71c441b5600c2e5d1b4cbc', part: "check-icon", class: "option__check" }, h("slot", { key: 'd33caab711a7b07a6d833c5f4fcca8aa1381bcd0', name: "check-icon" }, h("nano-icon", { key: '65255f90b5df1858af89529b6d2df7b5a9264112', name: "light/check", "aria-hidden": "true" }))), h("div", { key: '952469135adf3b50d7a9c647edd861aee0b08c9b', part: "start", class: "option__start" }, h("slot", { key: 'e3b2ab153d5b45de84381e1804d93de64a0bbded', name: "start" })), h("div", { key: '178a8920687128fb0fa78bf5ce7f3f551cced273', part: "label", class: "option__label" }, h("slot", { key: '707a98e2da2413cd77bae52ccebb0004974ecb5e' }, this.label || this.value)), h("div", { key: '66a69defe2beb8f3bd8f68ab94019520fbd9ab21', part: "end", class: "option__end" }, h("slot", { key: '126ebcccc9ed46d2aea3aa6d37672570a8cae5a2', name: "end" })))));
+            } }, h("div", { key: '81424ff221aa45c36268315cea0a07a49d5bd092', part: "check-icon", class: "option__check" }, h("slot", { key: '331a405714047eb22fc7043d4e0bf3dbdf67ca55', name: "check-icon" }, h("nano-icon", { key: '0fc3ee15ccca0c3195bd9a5feb844060419f9ed2', name: "light/check", "aria-hidden": "true" }))), h("div", { key: 'e83acd281d86ea73e39566c718bef76781ab77ac', part: "start", class: "option__start" }, h("slot", { key: 'f971683c4b1ea04cd7bfdcaab55a9f4fce544ce8', name: "start" })), h("div", { key: '5e69f3f9cbe5358714802d3718ab154d3badc9e4', part: "label", class: "option__label" }, h("slot", { key: '3449b82ecd58edc5faf2bb713d63db9e975fdc96' }, this.label || this.value)), h("div", { key: 'a634d9bb9bb769ad94dc4141bfd938eb65dd78b2', part: "end", class: "option__end" }, h("slot", { key: '64de93cc1d913c4a842d27c622f8e0a45567677a', name: "end" })))));
     }
     static get watchers() { return {
         "value": ["valueChanged"],