@nanoporetech-digital/components 7.9.0 → 7.9.1
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.
- package/dist/cjs/app-globals-3e14cb71.js.map +1 -1
- package/dist/cjs/nano-checkbox.cjs.entry.js +8 -4
- package/dist/cjs/nano-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-132f2056.js → nano-table-54523fe5.js} +2 -2
- package/dist/cjs/{nano-table-132f2056.js.map → nano-table-54523fe5.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-1a4b9015.js → table.worker-99f69a43.js} +2 -2
- package/dist/cjs/table.worker-99f69a43.js.map +1 -0
- package/dist/collection/components/checkbox/checkbox.js +8 -4
- package/dist/collection/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/nano-checkbox.js +8 -4
- package/dist/components/nano-checkbox.js.map +1 -1
- package/dist/esm/app-globals-f0120bbe.js.map +1 -1
- package/dist/esm/nano-checkbox.entry.js +8 -4
- package/dist/esm/nano-checkbox.entry.js.map +1 -1
- package/dist/esm/{nano-table-5eaf3a0c.js → nano-table-3965ddd0.js} +2 -2
- package/dist/esm/{nano-table-5eaf3a0c.js.map → nano-table-3965ddd0.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-94b9c69e.js → table.worker-8e04f768.js} +2 -2
- package/dist/esm/table.worker-8e04f768.js.map +1 -0
- package/dist/nano-components/app-globals-f0120bbe.js.map +1 -1
- package/dist/nano-components/nano-checkbox.entry.js +1 -1
- package/dist/nano-components/nano-checkbox.entry.js.map +1 -1
- package/dist/nano-components/{nano-table-5eaf3a0c.js → nano-table-3965ddd0.js} +2 -2
- package/dist/nano-components/nano-table.entry.js +1 -1
- package/dist/nano-components/table.worker-8e04f768.js +5 -0
- package/docs-json.json +1 -1
- package/hydrate/index.js +8 -4
- package/hydrate/index.mjs +8 -4
- package/package.json +1 -1
- package/dist/cjs/table.worker-1a4b9015.js.map +0 -1
- package/dist/esm/table.worker-94b9c69e.js.map +0 -1
- package/dist/nano-components/table.worker-94b9c69e.js +0 -5
- /package/dist/nano-components/{nano-table-5eaf3a0c.js.map → nano-table-3965ddd0.js.map} +0 -0
- /package/dist/nano-components/{table.worker-94b9c69e.js.map → table.worker-8e04f768.js.map} +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/custom-element-doc-generator.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/index.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/output-vue.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/plugin.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/types.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/utils.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{WUhA-BsM → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/wdio.conf.d.ts +0 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
|
-
const nanoTable_entry = require('./nano-table-
|
|
8
|
+
const nanoTable_entry = require('./nano-table-54523fe5.js');
|
|
9
9
|
require('./index-615cdb64.js');
|
|
10
10
|
require('./renderer-cd8b6098.js');
|
|
11
11
|
require('./math-ea9cdc71.js');
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
|
-
const nanoTable_entry = require('./nano-table-
|
|
6
|
+
const nanoTable_entry = require('./nano-table-54523fe5.js');
|
|
7
7
|
require('./index-615cdb64.js');
|
|
8
8
|
require('./renderer-cd8b6098.js');
|
|
9
9
|
require('./math-ea9cdc71.js');
|
|
@@ -30,4 +30,4 @@ exports.workerMsgId = workerMsgId;
|
|
|
30
30
|
exports.workerName = workerName;
|
|
31
31
|
exports.workerPath = workerPath;
|
|
32
32
|
|
|
33
|
-
//# sourceMappingURL=table.worker-
|
|
33
|
+
//# sourceMappingURL=table.worker-99f69a43.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"table.worker-99f69a43.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
|
|
@@ -28,14 +28,18 @@ export class Checkbox {
|
|
|
28
28
|
if (!this.input)
|
|
29
29
|
return;
|
|
30
30
|
this.input.checked = this.checked;
|
|
31
|
-
if (this.inputType === 'radio' &&
|
|
31
|
+
if (this.inputType === 'radio' &&
|
|
32
|
+
this.name &&
|
|
33
|
+
this.checked &&
|
|
34
|
+
this.host.isConnected) {
|
|
32
35
|
const form = this.host.closest('form');
|
|
36
|
+
const root = this.host.getRootNode();
|
|
33
37
|
let ctrls;
|
|
34
38
|
if (form) {
|
|
35
39
|
ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
|
|
36
40
|
}
|
|
37
41
|
else {
|
|
38
|
-
ctrls = Array.from(
|
|
42
|
+
ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
|
|
39
43
|
}
|
|
40
44
|
ctrls.map((el) => {
|
|
41
45
|
if (el !== this.host)
|
|
@@ -214,14 +218,14 @@ export class Checkbox {
|
|
|
214
218
|
}
|
|
215
219
|
render() {
|
|
216
220
|
const labelId = this.inputId + '-lbl';
|
|
217
|
-
return (h(Host, { key: '
|
|
221
|
+
return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
|
|
218
222
|
nanocb: true,
|
|
219
223
|
'nanocb--checked': this.checked,
|
|
220
224
|
'nanocb--invalid': this.invalid,
|
|
221
225
|
'nanocb--disabled': this.disabled,
|
|
222
226
|
'nanocb--focused': this.hasFocus,
|
|
223
227
|
'nanocb--indeterminate': this.indeterminate,
|
|
224
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
|
228
|
+
}, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', 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: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
|
|
225
229
|
}
|
|
226
230
|
static get is() { return "nano-checkbox"; }
|
|
227
231
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
|
|
1
|
+
{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../src/components/checkbox/checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Event,\n EventEmitter,\n ComponentInterface,\n State,\n Watch,\n Method,\n Element,\n Host,\n Listen,\n} from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { createColorClasses } from '../../utils/theme';\nimport { transformTag, h } from '../../utils/renderer';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport type { ControlValidity, Color } from '../../types/shared';\n\nlet checkboxIds = 0;\n\n/**\n * `nano-checkbox` is used to let a user choose one or more options from a limited number of options.\n * They appear as checked when activated.\n * They can be checked by mouse, keyboard, touch or programmatically by setting the checked property.\n *\n * @slot - if you do not set a label attribute, you can use this slot for more complex markup\n */\n@Component({\n tag: 'nano-checkbox',\n styleUrl: 'checkbox.scss',\n scoped: true,\n})\nexport class Checkbox implements ComponentInterface {\n private inputId = `nano-cb-${checkboxIds++}`;\n private input: HTMLInputElement;\n\n @Element() private host: HTMLNanoCheckboxElement;\n @State() inputType: 'checkbox' | 'radio' = 'checkbox';\n\n /** @internal */\n @Prop({ mutable: true, reflect: true }) hasFocus = false;\n\n /**\n * checked property that can be used to get/set the value. accepts only boolean values\n */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n @Watch('checked')\n async handleCheckedChange() {\n if (!this.input) return;\n\n this.input.checked = this.checked;\n\n if (\n this.inputType === 'radio' &&\n this.name &&\n this.checked &&\n this.host.isConnected\n ) {\n const form = this.host.closest('form');\n const root = this.host.getRootNode() as ShadowRoot | Document;\n let ctrls: Element[];\n\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n root.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n )?.filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'switch'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n * @returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"index.js","mappings":"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","names":[],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals","src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts","src/index.ts"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/WUhA-BsM/0/Digital/nano-components/packages/components/src/global/script/global.ts';\nexport const globalScripts = appGlobalScript;\n","import { transformTag } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' | 'tl' | 'bl' | 'br';\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon || 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n requestAnimationFrame(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string | undefined = 'light/circle-info',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon || 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n","import { transformTag } from '../../utils/renderer';\n\ninterface ImperativeDialogOptions {\n noUserDismiss: boolean;\n noHeader?: boolean;\n noFooter?: boolean;\n label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n body: string,\n buttons: { classes: string; content: string; handler: () => void }[] = [],\n dialogOptions?: ImperativeDialogOptions\n) {\n const opts: ImperativeDialogOptions = {\n noUserDismiss: false,\n label: 'Dialog',\n ...dialogOptions,\n };\n const dialog: HTMLNanoDialogElement = Object.assign(\n document.createElement(\n transformTag('nano-dialog')\n ) as HTMLNanoDialogElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n ${body}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`,\n }\n );\n\n if (buttons.length) {\n Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n\n document.body.appendChild(dialog);\n return dialog;\n}\n","// import { setPlatformHelpers } from '@stencil/core';\n// @ts-expect-error - NAMESPACE isn't officially exported\nimport { NAMESPACE } from '@stencil/core';\nimport { setTagPrefix } from './utils/renderer';\n\nexport * from './components/alert/alert.helpers';\nexport * from './components/dialog/dialog.helpers';\nexport {\n debounce as nanoDebounce,\n throttle as nanoThrottle,\n} from './utils/throttle';\nexport { getTabbableElements as nanoGetTabElements } from './utils/tabbable';\n\nexport function componentPrefix(prefix: string) {\n if (!window || !document) return;\n\n const tagTransform = setTagPrefix(prefix);\n\n const autoLoaderScript = document.querySelector(\n `script[src$=\"/${NAMESPACE}.esm.js\"]`\n );\n if (autoLoaderScript) {\n autoLoaderScript['data-opts'] = {\n transformTagName: tagTransform,\n };\n }\n return tagTransform;\n}\n\nexport { getTagPrefix, transformTag } from './utils/renderer';\n\nexport const initialize = (\n helpers: { _ael?: any; _ce?: any; _rel?: any } = {}\n) => {\n if (typeof (window as any) === 'undefined') {\n return;\n }\n const platformHelpers: any = {};\n if (helpers._ael) {\n platformHelpers.ael = helpers._ael;\n }\n if (helpers._rel) {\n platformHelpers.rel = helpers._rel;\n }\n if (helpers._ce) {\n platformHelpers.ce = helpers._ce;\n }\n // setPlatformHelpers(platformHelpers);\n};\n\nexport * from './components';\n"],"version":3}
|
|
1
|
+
{"file":"index.js","mappings":"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","names":[],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals","src/components/alert/alert.helpers.ts","src/components/dialog/dialog.helpers.ts","src/index.ts"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/6SyqsxUA/0/Digital/nano-components/packages/components/src/global/script/global.ts';\nexport const globalScripts = appGlobalScript;\n","import { transformTag } from '../../utils/renderer';\nimport type { Color } from '../../types/shared';\n\ninterface ImperativeAlertOptions {\n color?: Color;\n duration?: number;\n closable?: boolean;\n}\n\ninterface ImperativeAlertButton {\n classes: string;\n content: string;\n handler?: (e: MouseEvent) => void;\n}\n\nexport type AlertToastPosition = 'tr' | 'tl' | 'bl' | 'br';\n\nconst alertContent = (\n message: string,\n buttons: ImperativeAlertButton[] = []\n) => {\n return `${message}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`;\n};\n\nconst addBtnHandlers = (\n alert: HTMLNanoAlertElement,\n buttons: ImperativeAlertButton[] = []\n) => {\n if (buttons.length) {\n Array.from(alert.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n};\n\n/**\n * `nano-alert` helper to create toast notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param position - the position of the toast. Options are 'tr', 'tl', 'bl' & 'br'\n * @param icon - name for the `nano-icon`\n * @param alertOptions - { color: Color, duration: number, closable: boolean }\n * @returns `Promise<void>`\n */\nexport async function nanoShowToast(\n message: string,\n position: AlertToastPosition = 'tr',\n icon?: string,\n alertOptions?: ImperativeAlertOptions,\n buttons: ImperativeAlertButton[] = []\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: 3000,\n closable: true,\n ...alertOptions,\n };\n icon = icon || 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n <nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n requestAnimationFrame(async (_) => {\n await alert.toast(position);\n resolve(alert);\n });\n });\n}\n\n/**\n * `nano-alert` helper to create alert notifications imperatively.\n * @param message - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons\n * @param label - descriptive label for assitive technology\n * @param icon - name for the `nano-icon`\n * @param alertOptions\n * @returns `Promise<void>`\n */\nexport function nanoShowAlert(\n message: string,\n buttons: ImperativeAlertButton[] = [],\n label: string,\n icon: string | undefined = 'light/circle-info',\n alertOptions: ImperativeAlertOptions = {}\n) {\n const opts: ImperativeAlertOptions = {\n color: 'primary',\n duration: Infinity,\n closable: false,\n ...alertOptions,\n };\n icon = icon || 'light/circle-info';\n const alert: HTMLNanoAlertElement = Object.assign(\n document.createElement(transformTag('nano-alert')) as HTMLNanoAlertElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n ${icon ? `<nano-icon name=\"${icon}\" slot=\"icon\"></nano-icon>` : ''}\n ${alertContent(message, buttons)}\n `,\n }\n );\n addBtnHandlers(alert, buttons);\n\n document.body.appendChild(alert);\n return new Promise<HTMLNanoAlertElement>((resolve) => {\n setTimeout(async (_) => {\n await alert.alert(label);\n resolve(alert);\n }, 100);\n });\n}\n","import { transformTag } from '../../utils/renderer';\n\ninterface ImperativeDialogOptions {\n noUserDismiss: boolean;\n noHeader?: boolean;\n noFooter?: boolean;\n label: string;\n}\n/**\n * `nano-dialog` helper to create dialog modals imperatively.\n * @param body - a JS template string e.g. `<h4>Hello</h4> ${aVariable}`\n * @param buttons - { classes: string; content: string; handler: () => {} }[]\n * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }\n * @returns `Promise<void>`\n */\nexport function nanoCreateDialog(\n body: string,\n buttons: { classes: string; content: string; handler: () => void }[] = [],\n dialogOptions?: ImperativeDialogOptions\n) {\n const opts: ImperativeDialogOptions = {\n noUserDismiss: false,\n label: 'Dialog',\n ...dialogOptions,\n };\n const dialog: HTMLNanoDialogElement = Object.assign(\n document.createElement(\n transformTag('nano-dialog')\n ) as HTMLNanoDialogElement,\n {\n ...opts,\n open: false,\n innerHTML: `\n ${body}\n ${\n buttons.length\n ? buttons\n .map(\n (btn, i) =>\n `<button data-btn=\"${i}\" class=\"button ${btn.classes}\" slot=\"footer\">${btn.content}</button>`\n )\n .join('')\n : ''\n }`,\n }\n );\n\n if (buttons.length) {\n Array.from(dialog.querySelectorAll('button[slot=\"footer\"]')).map(\n (btn: HTMLElement) => {\n const foundBtn = buttons.find(\n (_fb, i) => btn.dataset.btn === i.toString()\n );\n if (foundBtn && foundBtn.handler) {\n btn.addEventListener('click', foundBtn.handler);\n }\n }\n );\n }\n\n document.body.appendChild(dialog);\n return dialog;\n}\n","// import { setPlatformHelpers } from '@stencil/core';\n// @ts-expect-error - NAMESPACE isn't officially exported\nimport { NAMESPACE } from '@stencil/core';\nimport { setTagPrefix } from './utils/renderer';\n\nexport * from './components/alert/alert.helpers';\nexport * from './components/dialog/dialog.helpers';\nexport {\n debounce as nanoDebounce,\n throttle as nanoThrottle,\n} from './utils/throttle';\nexport { getTabbableElements as nanoGetTabElements } from './utils/tabbable';\n\nexport function componentPrefix(prefix: string) {\n if (!window || !document) return;\n\n const tagTransform = setTagPrefix(prefix);\n\n const autoLoaderScript = document.querySelector(\n `script[src$=\"/${NAMESPACE}.esm.js\"]`\n );\n if (autoLoaderScript) {\n autoLoaderScript['data-opts'] = {\n transformTagName: tagTransform,\n };\n }\n return tagTransform;\n}\n\nexport { getTagPrefix, transformTag } from './utils/renderer';\n\nexport const initialize = (\n helpers: { _ael?: any; _ce?: any; _rel?: any } = {}\n) => {\n if (typeof (window as any) === 'undefined') {\n return;\n }\n const platformHelpers: any = {};\n if (helpers._ael) {\n platformHelpers.ael = helpers._ael;\n }\n if (helpers._rel) {\n platformHelpers.rel = helpers._rel;\n }\n if (helpers._ce) {\n platformHelpers.ce = helpers._ce;\n }\n // setPlatformHelpers(platformHelpers);\n};\n\nexport * from './components';\n"],"version":3}
|
|
@@ -32,14 +32,18 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
32
32
|
if (!this.input)
|
|
33
33
|
return;
|
|
34
34
|
this.input.checked = this.checked;
|
|
35
|
-
if (this.inputType === 'radio' &&
|
|
35
|
+
if (this.inputType === 'radio' &&
|
|
36
|
+
this.name &&
|
|
37
|
+
this.checked &&
|
|
38
|
+
this.host.isConnected) {
|
|
36
39
|
const form = this.host.closest('form');
|
|
40
|
+
const root = this.host.getRootNode();
|
|
37
41
|
let ctrls;
|
|
38
42
|
if (form) {
|
|
39
43
|
ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
|
|
40
44
|
}
|
|
41
45
|
else {
|
|
42
|
-
ctrls = Array.from(
|
|
46
|
+
ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
|
|
43
47
|
}
|
|
44
48
|
ctrls.map((el) => {
|
|
45
49
|
if (el !== this.host)
|
|
@@ -218,14 +222,14 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
|
|
|
218
222
|
}
|
|
219
223
|
render() {
|
|
220
224
|
const labelId = this.inputId + '-lbl';
|
|
221
|
-
return (h(Host, { key: '
|
|
225
|
+
return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
|
|
222
226
|
nanocb: true,
|
|
223
227
|
'nanocb--checked': this.checked,
|
|
224
228
|
'nanocb--invalid': this.invalid,
|
|
225
229
|
'nanocb--disabled': this.disabled,
|
|
226
230
|
'nanocb--focused': this.hasFocus,
|
|
227
231
|
'nanocb--indeterminate': this.indeterminate,
|
|
228
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
|
232
|
+
}, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', 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: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
|
|
229
233
|
}
|
|
230
234
|
static get watchers() { return {
|
|
231
235
|
"checked": ["handleCheckedChange"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nano-checkbox.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}
|
|
1
|
+
{"file":"nano-checkbox.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 (\n this.inputType === 'radio' &&\n this.name &&\n this.checked &&\n this.host.isConnected\n ) {\n const form = this.host.closest('form');\n const root = this.host.getRootNode() as ShadowRoot | Document;\n let ctrls: Element[];\n\n if (form) {\n ctrls = Array.from(\n form.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n );\n } else {\n ctrls = Array.from(\n root.querySelectorAll(\n `${transformTag('nano-checkbox')}[name=\"${this.name}\"]`\n )\n )?.filter((radio) => !radio.closest('form'));\n }\n ctrls.map((el: HTMLNanoCheckboxElement) => {\n if (el !== this.host) el.checked = false;\n });\n }\n this.nanoChange.emit({ value: this.value, checked: this.checked });\n }\n\n /**\n * If `true`, the user cannot interact with the checkbox.\n */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * The value of a checkbox is analogous to the value of an `<input type='checkbox'>`,\n * it's only present when `checked` is true.\n */\n @Prop({ reflect: true }) value: string = 'on';\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop({ reflect: true }) name: string;\n\n /**\n * Set to true to make the field required.\n */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Controls the underlying field type and style.\n */\n @Prop({ reflect: true }) type:\n | 'radio'\n | 'checkbox'\n | 'tag'\n | 'segment'\n | 'switch'\n | 'segment-pill' = 'checkbox';\n\n @Watch('type')\n typeChange() {\n if (['checkbox', 'switch', 'tag'].includes(this.type))\n this.inputType = 'checkbox';\n else this.inputType = 'radio';\n }\n\n /**\n * label property that can be used to set the label text. Alternatively you may use a label slot.\n */\n @Prop() label?: string;\n\n /**\n * If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")\n */\n @Prop({ mutable: true, reflect: true }) indeterminate: boolean = false;\n\n @Watch('indeterminate')\n handleIndeterminateChange() {\n this.checked = false;\n this.input.indeterminate = this.indeterminate;\n }\n\n /**\n * This will be true when the control is in an invalid state.\n * Validity is determined by the `required` prop. Or if custom validity message is set. @readonly\n */\n @Prop({ reflect: true })\n get invalid() {\n return this._invalid;\n }\n @State() _invalid = false;\n\n /**\n * Current validation message - if any. @readonly\n */\n @Prop()\n get validityMessage() {\n if (!this.input) return '';\n return this.input.validationMessage;\n }\n\n /**\n * Color to use from your application's color palette.\n */\n @Prop() color?: Color;\n\n /**\n * The form element to associate the input with (its form owner). Must be the id of a form.\n */\n @Prop() form?: string | null;\n\n /**\n * Emited when the checkbox is toggled\n */\n @Event() nanoChange: EventEmitter<CheckboxChangeEventDetail>;\n\n /**\n * Emited when the checkbox is focused\n */\n @Event() nanoFocus: EventEmitter;\n\n /**\n * Emited when the checkbox is blurred\n */\n @Event() nanoBlur: EventEmitter;\n\n // public methods\n\n /**\n * Returns the native input control\n * @returns the native input control\n */\n @Method()\n async getInputElement() {\n if (this.input) return this.input;\n }\n\n /**\n * Get the current state of the control.\n * @param validateFirst - perform validation first before reporting\n * @returns `Promise<{ isValid: boolean, errorMessage: string }>`\n */\n @Method()\n async reportValidity(\n validateFirst: boolean = false\n ): Promise<ControlValidity> {\n if (validateFirst) this.input.reportValidity();\n this._invalid = !this.input.validity.valid;\n\n return {\n isValid: !this.invalid,\n errorMessage: this.input.validationMessage,\n };\n }\n\n /**\n * Sets a custom validation message.\n * If `message` is not empty, the field will be considered invalid. Use in conjunction with `nano-checkbox-group`\n */\n @Method()\n async setError(message: string, updateStatus = true) {\n if (!this.input) return;\n if (updateStatus) this._invalid = !!message.length;\n this.input.setCustomValidity(message);\n }\n\n /**\n * Sets focus on the checkbox.\n */\n @Method()\n async setFocus() {\n if (this.input) {\n this.input.focus();\n focusVisible.force(this.input);\n }\n }\n\n /**\n * Removes focus from the checkbox.\n */\n @Method()\n async removeFocus() {\n if (this.input) {\n this.input.blur();\n focusVisible.force(this.input, false);\n }\n }\n\n @Listen('reset', { target: 'body' })\n onReset(e) {\n const form = this.form\n ? document.querySelector('#' + this.form)\n : this.host.closest('form');\n if (!form || e.target !== this.host.closest('form')) return;\n\n this.checked = false;\n }\n\n // private handlers\n\n private handleInvalid = (ev: Event) => {\n this._invalid = !(ev.target as HTMLInputElement).validity.valid;\n };\n\n private handleChange = (ev: InputEvent) => {\n this.checked = (ev.target as HTMLInputElement).checked;\n this.indeterminate = false;\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.nanoFocus.emit();\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.nanoBlur.emit();\n };\n\n /* Although many radio components can be 'checked',\n the underlying control may not be. Check */\n private isRadioChecked() {\n requestAnimationFrame(() => (this.checked = this.input.checked));\n }\n\n // Stencil hooks\n\n componentWillLoad() {\n this.typeChange();\n }\n\n componentDidLoad() {\n this.input.indeterminate = this.indeterminate;\n this.isRadioChecked();\n focusVisible.observe(this.input);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.input);\n }\n\n render() {\n const labelId = this.inputId + '-lbl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color), 'nano-checkbox': true }}\n >\n <label\n class={{\n nanocb: true,\n 'nanocb--checked': this.checked,\n 'nanocb--invalid': this.invalid,\n 'nanocb--disabled': this.disabled,\n 'nanocb--focused': this.hasFocus,\n 'nanocb--indeterminate': this.indeterminate,\n }}\n htmlFor={this.inputId}\n >\n <input\n type={this.inputType}\n name={this.name}\n form={this.form}\n required={this.required}\n checked={this.checked}\n disabled={this.disabled}\n value={this.value}\n aria-labelledby={labelId}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onChange={this.handleChange}\n ref={(input) => (this.input = input)}\n id={this.inputId}\n onInvalid={this.handleInvalid}\n />\n <span class={'nanocb__input nanocb__input--' + this.type}></span>\n\n <div id={labelId} class={'nanocb__label nanocb__label--' + this.type}>\n {this.label && !!this.label.length && <span>{this.label}</span>}\n <span hidden={this.label && !!this.label.length}>\n <slot />\n </span>\n </div>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"app-globals-f0120bbe.js","mappings":";;;AAAA,wBAAe;IACb,IACE,UAAU,CAAC,MAAM;QACjB,kBAAkB,IAAI,UAAU,CAAC,MAAM;QACvC,UAAU,CAAC,UAAU,CAAC,EACtB;;QAGA,MAAM,MAAM,GAAG,QAAQ,CAAC,eAAe;QAEvC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE;YACjC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;SACjC,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAAE,OAAO,KAAK;YACxD,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,CAAC,CAAC;YAC5D,OAAO,IAAI;SACZ;QAED,IAAI,CAAC,UAAU,EAAE,EAAE;YACjB,IAAI,SAAS,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC;gBACrC,IAAI,CAAC,UAAU,EAAE;oBAAE;gBAEnB,SAAS,CAAC,UAAU,EAAE;gBACtB,SAAS,GAAG,IAAI;aACjB,CAAC;YAEF,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE;gBACxB,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,IAAI;aACjB,CAAC;;;AAGR,CAAC;;AClCW,MAAC,aAAa,GAAG;;;;","names":[],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/
|
|
1
|
+
{"file":"app-globals-f0120bbe.js","mappings":";;;AAAA,wBAAe;IACb,IACE,UAAU,CAAC,MAAM;QACjB,kBAAkB,IAAI,UAAU,CAAC,MAAM;QACvC,UAAU,CAAC,UAAU,CAAC,EACtB;;QAGA,MAAM,MAAM,GAAG,QAAQ,CAAC,eAAe;QAEvC,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE;YACjC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;SACjC,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAAE,OAAO,KAAK;YACxD,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,qBAAqB,CAAC,CAAC;YAC5D,OAAO,IAAI;SACZ;QAED,IAAI,CAAC,UAAU,EAAE,EAAE;YACjB,IAAI,SAAS,GAAG,IAAI,gBAAgB,CAAC,CAAC,CAAC;gBACrC,IAAI,CAAC,UAAU,EAAE;oBAAE;gBAEnB,SAAS,CAAC,UAAU,EAAE;gBACtB,SAAS,GAAG,IAAI;aACjB,CAAC;YAEF,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE;gBACxB,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,KAAK;gBACd,UAAU,EAAE,IAAI;aACjB,CAAC;;;AAGR,CAAC;;AClCW,MAAC,aAAa,GAAG;;;;","names":[],"sources":["src/global/script/global.ts","@stencil/core/internal/app-globals"],"sourcesContent":["export default async () => {\n if (\n globalThis.window &&\n 'MutationObserver' in globalThis.window &&\n globalThis['document']\n ) {\n // fire global 'ready' event when everything is hydrated\n\n const docEle = document.documentElement;\n\n window.addEventListener('appload', () => {\n docEle.classList.add('hydrated');\n });\n\n const docIsReady = () => {\n if (!docEle.classList.contains('hydrated')) return false;\n docEle.dispatchEvent(new CustomEvent('nanoComponentsReady'));\n return true;\n };\n\n if (!docIsReady()) {\n let mutationO = new MutationObserver((_) => {\n if (!docIsReady()) return;\n\n mutationO.disconnect();\n mutationO = null;\n });\n\n mutationO.observe(docEle, {\n childList: false,\n subtree: false,\n attributes: true,\n });\n }\n }\n};\n","import appGlobalScript from '/builds/6SyqsxUA/0/Digital/nano-components/packages/components/src/global/script/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
|
|
@@ -31,14 +31,18 @@ const Checkbox = class {
|
|
|
31
31
|
if (!this.input)
|
|
32
32
|
return;
|
|
33
33
|
this.input.checked = this.checked;
|
|
34
|
-
if (this.inputType === 'radio' &&
|
|
34
|
+
if (this.inputType === 'radio' &&
|
|
35
|
+
this.name &&
|
|
36
|
+
this.checked &&
|
|
37
|
+
this.host.isConnected) {
|
|
35
38
|
const form = this.host.closest('form');
|
|
39
|
+
const root = this.host.getRootNode();
|
|
36
40
|
let ctrls;
|
|
37
41
|
if (form) {
|
|
38
42
|
ctrls = Array.from(form.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`));
|
|
39
43
|
}
|
|
40
44
|
else {
|
|
41
|
-
ctrls = Array.from(
|
|
45
|
+
ctrls = Array.from(root.querySelectorAll(`${transformTag('nano-checkbox')}[name="${this.name}"]`))?.filter((radio) => !radio.closest('form'));
|
|
42
46
|
}
|
|
43
47
|
ctrls.map((el) => {
|
|
44
48
|
if (el !== this.host)
|
|
@@ -217,14 +221,14 @@ const Checkbox = class {
|
|
|
217
221
|
}
|
|
218
222
|
render() {
|
|
219
223
|
const labelId = this.inputId + '-lbl';
|
|
220
|
-
return (h(Host, { key: '
|
|
224
|
+
return (h(Host, { key: '92eaee0287da5164176c1893add5d48ff518153a', class: { ...createColorClasses(this.color), 'nano-checkbox': true } }, h("label", { key: '5082a3b8114162d5b52e9f24abe031f8796665e2', class: {
|
|
221
225
|
nanocb: true,
|
|
222
226
|
'nanocb--checked': this.checked,
|
|
223
227
|
'nanocb--invalid': this.invalid,
|
|
224
228
|
'nanocb--disabled': this.disabled,
|
|
225
229
|
'nanocb--focused': this.hasFocus,
|
|
226
230
|
'nanocb--indeterminate': this.indeterminate,
|
|
227
|
-
}, htmlFor: this.inputId }, h("input", { key: '
|
|
231
|
+
}, htmlFor: this.inputId }, h("input", { key: '2b91ea2ac18ac260710202040db3f7a4574a1922', 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: '0594a16034577181d4f3b1801b08d1761bd4cfe8', class: 'nanocb__input nanocb__input--' + this.type }), h("div", { key: '051e89cbd5aeabad7f6e70369a3f9316f86eb8f8', id: labelId, class: 'nanocb__label nanocb__label--' + this.type }, this.label && !!this.label.length && h("span", { key: 'ddb4067806f185c0d564a0a54c7642a57313e482' }, this.label), h("span", { key: '745cbff6863337008827893a7b451c4a31fb1e91', hidden: this.label && !!this.label.length }, h("slot", { key: '023db905814a76b115e2779d717932125c0bff4a' }))))));
|
|
228
232
|
}
|
|
229
233
|
static get watchers() { return {
|
|
230
234
|
"checked": ["handleCheckedChange"],
|