@nanoporetech-digital/components 7.8.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-icon-button_2.cjs.entry.js +5 -5
- package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js +1 -1
- package/dist/cjs/nano-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/{nano-table-43fc3d23.js → nano-table-54523fe5.js} +2 -2
- package/dist/cjs/{nano-table-43fc3d23.js.map → nano-table-54523fe5.js.map} +1 -1
- package/dist/cjs/nano-table.cjs.entry.js +1 -1
- package/dist/cjs/{table.worker-ad250672.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/collection/components/icon/icon.js +3 -2
- package/dist/collection/components/icon/icon.js.map +1 -1
- package/dist/collection/components/icon-button/icon-button.js +2 -1
- package/dist/collection/components/icon-button/icon-button.js.map +1 -1
- package/dist/components/icon-button.js +2 -1
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/icon.js +1 -1
- package/dist/components/icon.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-icon-button_2.entry.js +4 -4
- package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
- package/dist/esm/nano-icon.entry.js +1 -1
- package/dist/esm/nano-icon.entry.js.map +1 -1
- package/dist/esm/{nano-table-4481d4e1.js → nano-table-3965ddd0.js} +2 -2
- package/dist/esm/{nano-table-4481d4e1.js.map → nano-table-3965ddd0.js.map} +1 -1
- package/dist/esm/nano-table.entry.js +1 -1
- package/dist/esm/{table.worker-1bc9c170.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-icon-button_2.entry.js +1 -1
- package/dist/nano-components/nano-icon-button_2.entry.js.map +1 -1
- package/dist/nano-components/nano-icon.entry.js +1 -1
- package/dist/nano-components/nano-icon.entry.js.map +1 -1
- package/dist/nano-components/{nano-table-4481d4e1.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/dist/types/components/icon/icon.d.ts +2 -1
- package/dist/types/components.d.ts +8 -4
- package/docs-json.json +2 -2
- package/docs-vscode.json +1 -1
- package/hydrate/index.js +15 -10
- package/hydrate/index.mjs +15 -10
- package/package.json +1 -1
- package/dist/cjs/table.worker-ad250672.js.map +0 -1
- package/dist/esm/table.worker-1bc9c170.js.map +0 -1
- package/dist/nano-components/table.worker-1bc9c170.js +0 -5
- /package/dist/nano-components/{nano-table-4481d4e1.js.map → nano-table-3965ddd0.js.map} +0 -0
- /package/dist/nano-components/{table.worker-1bc9c170.js.map → table.worker-8e04f768.js.map} +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/custom-element-doc-generator.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/generate-vue-component.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/index.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/output-vue.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/plugin.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/types.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/generators/vue/utils.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/stencil.config.prod.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 6SyqsxUA}/0/Digital/nano-components/packages/components/.stencil/testing/mocks/intersection-observer.d.ts +0 -0
- /package/dist/types/builds/{Te2fj7s- → 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"]}
|
|
@@ -7,7 +7,8 @@ import { createColorClasses } from "../../utils/theme";
|
|
|
7
7
|
import { getSvgContent, iconContent } from "./request";
|
|
8
8
|
import { getName, getUrl } from "./utils";
|
|
9
9
|
/**
|
|
10
|
-
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
|
10
|
+
* An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).
|
|
11
|
+
* Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.
|
|
11
12
|
*/
|
|
12
13
|
export class Icon {
|
|
13
14
|
io;
|
|
@@ -162,7 +163,7 @@ export class Icon {
|
|
|
162
163
|
this.name.indexOf('chevron') > -1) &&
|
|
163
164
|
this.isRtl() &&
|
|
164
165
|
this.flipRtl !== false);
|
|
165
|
-
return (h(Host, { key: '
|
|
166
|
+
return (h(Host, { key: 'bcb65502c19151978a0035c5493e1cfe37019c4a', class: {
|
|
166
167
|
...createColorClasses(this.color),
|
|
167
168
|
loading: this.isLoading,
|
|
168
169
|
[`icon-${this.size}`]: !!this.size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n */\n @Prop({ mutable: true, reflect: true }) role: string;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role || this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n }\n }\n } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.udpateRole();\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n this.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n 'nano-icon': true,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../src/components/icon/icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\n * Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n */\n @Prop({ mutable: true, reflect: true }) role: string;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role || this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n }\n }\n } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.udpateRole();\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n this.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n 'nano-icon': true,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { Host, } from "@stencil/core";
|
|
5
|
+
import { h } from "../../utils/renderer";
|
|
5
6
|
import { focusVisible } from "../../utils/focus-visible";
|
|
6
7
|
/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
|
7
8
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,
|
|
1
|
+
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n ComponentInterface,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n @Element() host: HTMLNanoIconButtonElement;\n\n /** The name of the icon to draw. */\n @Prop() iconName?: string;\n\n /** An external URL of an SVG file. */\n @Prop() iconSrc?: string;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n @Prop({ reflect: true }) name?: string;\n\n /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n @Prop({ reflect: true }) value?: string;\n\n /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. */\n @Prop() label!: string;\n\n /** display the label as a `<nano-tooltip />` */\n @Prop() showTooltip: boolean = false;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. */\n @Prop() href: string | undefined;\n\n /** Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n @Prop() rel: string | undefined;\n\n /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string | undefined;\n\n /** The HTML form element or form element id.\n * Used to submit a form when the button is not a child of the form. */\n @Prop() form: HTMLFormElement | string;\n\n /** Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /**\n * Finds the form element based on the provided `form` selector\n * or element reference provided.\n * @returns the found form element (if found)\n */\n private findForm(): HTMLFormElement | null {\n const { form, host } = this;\n if (!form) return host.closest('form');\n\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n if (this.type === 'button') return;\n const formEl = this.findForm();\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n };\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n return (\n <TagType\n onClick={this.handleClick}\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n name={this.name}\n value={this.value}\n href={this.href || undefined}\n target={this.href && this.target ? this.target : undefined}\n rel={this.rel || undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <span class=\"icon-button__label\">{this.label}</span>\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n </Host>\n );\n }\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.content()}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Web Components for Nanopore digital Web Apps
|
|
3
3
|
*/
|
|
4
|
-
import { proxyCustomElement, HTMLElement,
|
|
4
|
+
import { proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
|
|
5
|
+
import { h } from './renderer.js';
|
|
5
6
|
import { f as focusVisible } from './focus-visible.js';
|
|
6
7
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
7
8
|
import { d as defineCustomElement$1 } from './tooltip.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"icon-button.js","mappings":"
|
|
1
|
+
{"file":"icon-button.js","mappings":"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","names":[],"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n /**\n * @prop --color: defaults to #{map.get(tokens.$colors, palegrey)};\n * @prop --active-color: defaults to #{map.get(tokens.$colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get(tokens.$colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{tokens.$spacing-small};\n * @prop --box-shadow: defaults to none;\n */\n\n --border-radius: #{tokens.$border-radius-medium};\n --active-color: #{map.get(tokens.$colors, darkblue--faded)};\n --hover-color: #{map.get(tokens.$colors, blue)};\n --nano-color-base: var(--color, #{map.get(tokens.$colors, mediumgrey)});\n --background: transparent;\n --padding: #{tokens.$spacing-small};\n --box-shadow: none;\n --button-bg: var(--background);\n\n border-radius: var(--border-radius);\n display: inline-block;\n}\n\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: inherit;\n background: var(--button-bg);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n transition: box-shadow #{tokens.$transition-xfast} ease-in-out;\n box-shadow: var(--box-shadow);\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button__label {\n @include mx.visually-hide();\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{tokens.$control-focus-style};\n}\n","import {\n Component,\n Prop,\n ComponentInterface,\n Method,\n Element,\n Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n @Element() host: HTMLNanoIconButtonElement;\n\n /** The name of the icon to draw. */\n @Prop() iconName?: string;\n\n /** An external URL of an SVG file. */\n @Prop() iconSrc?: string;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n @Prop({ reflect: true }) name?: string;\n\n /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n @Prop({ reflect: true }) value?: string;\n\n /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. */\n @Prop() label!: string;\n\n /** display the label as a `<nano-tooltip />` */\n @Prop() showTooltip: boolean = false;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. */\n @Prop() href: string | undefined;\n\n /** Specifies the relationship of the target object to the link object.\n * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n @Prop() rel: string | undefined;\n\n /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n @Prop() target: string | undefined;\n\n /** The HTML form element or form element id.\n * Used to submit a form when the button is not a child of the form. */\n @Prop() form: HTMLFormElement | string;\n\n /** Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n /**\n * Finds the form element based on the provided `form` selector\n * or element reference provided.\n * @returns the found form element (if found)\n */\n private findForm(): HTMLFormElement | null {\n const { form, host } = this;\n if (!form) return host.closest('form');\n\n if (form instanceof HTMLFormElement) {\n return form;\n }\n if (typeof form === 'string') {\n const el = document.getElementById(form);\n if (el instanceof HTMLFormElement) {\n return el;\n }\n }\n return null;\n }\n\n private handleClick = (ev: Event) => {\n if (this.type === 'button') return;\n const formEl = this.findForm();\n\n if (formEl) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n formEl.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n };\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n return (\n <TagType\n onClick={this.handleClick}\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n name={this.name}\n value={this.value}\n href={this.href || undefined}\n target={this.href && this.target ? this.target : undefined}\n rel={this.rel || undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <span class=\"icon-button__label\">{this.label}</span>\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n </Host>\n );\n }\n return (\n <Host\n class=\"nano-icon-button\"\n aria-disabled={this.disabled ? 'true' : null}\n >\n {this.content()}\n </Host>\n );\n }\n}\n"],"version":3}
|
package/dist/components/icon.js
CHANGED
|
@@ -296,7 +296,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
|
|
|
296
296
|
this.name.indexOf('chevron') > -1) &&
|
|
297
297
|
this.isRtl() &&
|
|
298
298
|
this.flipRtl !== false);
|
|
299
|
-
return (h(Host, { key: '
|
|
299
|
+
return (h(Host, { key: 'bcb65502c19151978a0035c5493e1cfe37019c4a', class: {
|
|
300
300
|
...createColorClasses(this.color),
|
|
301
301
|
loading: this.isLoading,
|
|
302
302
|
[`icon-${this.size}`]: !!this.size,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path). Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n */\n @Prop({ mutable: true, reflect: true }) role: string;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role || this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n }\n }\n } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.udpateRole();\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n this.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n 'nano-icon': true,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"icon.js","mappings":"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","names":[],"sources":["src/components/icon/utils.ts","src/components/icon/validate.ts","src/components/icon/request.ts","src/components/icon/icon.scss?tag=nano-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["import { getAssetPath } from '@stencil/core';\nimport { Icon } from './icon';\n\nlet CACHED_MAP: Map<string, string>;\n\nexport const getIconMap = (): Map<string, string> => {\n if (!CACHED_MAP) {\n const win = window as any;\n win.Nanoicons = win.Nanoicons || {};\n CACHED_MAP = win.Nanoicons.map = win.Nanoicons.map || new Map();\n }\n return CACHED_MAP;\n};\n\nexport const addIcons = (icons: { [name: string]: string }) => {\n const map = getIconMap();\n Object.keys(icons).forEach((name) => map.set(name, icons[name]));\n};\n\nexport const getUrl = (i: Icon) => {\n let url = getSrc(i.src);\n if (url) {\n return url;\n }\n\n url = getName(i.name, i.icon);\n if (url) {\n return getNamedUrl(url);\n }\n\n if (i.icon) {\n url = getSrc(i.icon);\n if (url) {\n return url;\n }\n }\n return null;\n};\n\nconst getNamedUrl = (iconName: string) => {\n const url = getIconMap().get(iconName);\n if (url) {\n return url;\n }\n return getAssetPath(`../nano-assets/fontawesome-pro/svgs/${iconName}.svg`);\n};\n\nexport const getName = (\n iconName: string | undefined,\n icon: string | undefined\n) => {\n if (!iconName && icon && !isSrc(icon)) {\n iconName = icon;\n }\n if (isStr(iconName)) {\n iconName = toLower(iconName);\n }\n\n if (!isStr(iconName) || iconName.trim() === '') {\n return null;\n }\n\n // only allow alpha characters and dash\n const invalidChars = iconName.replace(/[a-z]|-|\\/|\\d/gi, '');\n if (invalidChars !== '') {\n console.warn('invalid characters in icon name ' + iconName);\n return null;\n }\n return iconName;\n};\n\nexport const getSrc = (src: string | undefined) => {\n if (isStr(src)) {\n src = src.trim();\n if (isSrc(src)) {\n return src;\n }\n }\n return null;\n};\n\nexport const isSrc = (str: string) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val: any): val is string => typeof val === 'string';\nexport const toLower = (val: string) => val.toLowerCase();\n","import { isStr } from './utils';\n\nexport const validateContent = (svgContent: string | null) => {\n if (svgContent) {\n const div = document.createElement('div');\n div.innerHTML = svgContent;\n\n // setup this way to ensure it works on our buddy IE\n for (let i = div.childNodes.length - 1; i >= 0; i--) {\n if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n div.removeChild(div.childNodes[i]);\n }\n }\n\n // must only have 1 root element\n const svgElm = div.firstElementChild;\n if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n const svgClass = svgElm.getAttribute('class') || '';\n svgElm.setAttribute(\n 'class',\n (svgClass + ' sc-nano-icon s-nano-icon svg').trim()\n );\n\n // root element must be an svg\n // lets double check we've got valid elements\n // do not allow scripts\n if (isValid(svgElm as any)) {\n return div.innerHTML;\n }\n }\n }\n return '';\n};\n\nexport const isValid = (elm: HTMLElement) => {\n if (elm.nodeType === 1) {\n if (elm.nodeName.toLowerCase() === 'script') {\n return false;\n }\n\n for (let i = 0; i < elm.attributes.length; i++) {\n const val = elm.attributes[i].value;\n if (isStr(val) && val.toLowerCase().indexOf('on') === 0) {\n return false;\n }\n }\n\n for (let i = 0; i < elm.childNodes.length; i++) {\n if (!isValid(elm.childNodes[i] as any)) {\n return false;\n }\n }\n }\n return true;\n};\n","import { validateContent } from './validate';\nexport const iconContent = new Map<string, string>();\nconst requests = new Map<string, Promise<any>>();\n\nexport const getSvgContent = (url: string) => {\n // see if we already have a request for this url\n let req = requests.get(url);\n if (!req) {\n // we don't already have a request\n req = fetch(url).then((rsp) => {\n if (rsp.ok) {\n return rsp.text().then((svgContent) => {\n iconContent.set(url, validateContent(svgContent));\n });\n }\n iconContent.set(url, '');\n });\n\n // cache for the same requests\n requests.set(url, req);\n }\n return req;\n};\n","@import '../../global/style/utilities/globals';\n\n:host {\n /**\n * @prop --color: defaults to current context color\n * @prop --primary-color: used for duotone icons to set the primary color\n * @prop --secondary-color: used for duotone icons to set the secondary color\n * @prop --primary-opacity: used for duotone icons to set the primary opacity\n * @prop --secondary-opacity: used for duotone icons to set the secondary opacity\n * @prop --stroke-width: 32px default stroke width\n */\n\n --color: var(--nano-color-base, currentcolor);\n --primary-color: var(--nano-color-tint, currentcolor);\n --secondary-color: var(--nano-color-shade, currentcolor);\n --stroke-width: 32px;\n --primary-opacity: 0.8;\n --secondary-opacity: 1;\n --icon-size: var(--nano-icon-size, 1em);\n --icon-margin-top: var(--nano-icon-margin-top, 0);\n --icon-margin-end: var(--nano-icon-margin-end, 0);\n --icon-margin-bottom: var(--nano-icon-margin-bottom, 0);\n --icon-margin-start: var(--nano-icon-margin-start, 0);\n\n display: inline-block;\n inline-size: var(--icon-size);\n block-size: var(--icon-size);\n min-inline-size: var(--icon-size);\n min-block-size: var(--icon-size);\n contain: strict;\n fill: currentcolor;\n box-sizing: content-box !important;\n transition: opacity 0.3s ease;\n color: var(--color);\n margin-inline: var(--icon-margin-start) var(--icon-margin-end);\n margin-block: var(--icon-margin-top) var(--icon-margin-bottom);\n}\n\n:host .nanoicon {\n stroke: currentcolor;\n}\n\n.nanoicon-fill-none {\n fill: none;\n}\n\n.nanoicon-stroke-width {\n stroke-width: 32px;\n stroke-width: var(--stroke-width);\n}\n\n.icon-inner,\n.nanoicon,\nsvg,\n.svg {\n display: block;\n block-size: 100%;\n inline-size: 100%;\n overflow: visible;\n}\n\n:host(.loading) {\n opacity: 0;\n}\n\n.fa-primary {\n color: var(--primary-color);\n opacity: var(--primary-opacity, 1);\n}\n\n.fa-secondary {\n color: var(--secondary-color);\n opacity: var(--secondary-opacity) !important;\n}\n\n/* Icon RTL\n * -----------------------------------------------------------\n */\n:host(.flip-rtl) .icon-inner {\n transform: scaleX(-1);\n}\n\n/* Icon Sizes\n * -----------------------------------------------------------\n */\n:host(.icon-small) {\n font-size: 18px !important;\n}\n\n:host(.icon-large) {\n font-size: 32px !important;\n}\n","import {\n Build,\n Component,\n Element,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { createColorClasses } from '../../utils/theme';\nimport { getSvgContent, iconContent } from './request';\nimport { getName, getUrl } from './utils';\nimport type { Color } from '../../types/shared';\n\n/**\n * An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\n * Lazily loads SVG for each icon, so will only request the icons that you're using and that are visible.\n */\n@Component({\n tag: 'nano-icon',\n styleUrl: 'icon.scss',\n shadow: true,\n})\nexport class Icon {\n private io?: IntersectionObserver;\n\n @Element() el!: HTMLNanoIconElement;\n\n @State() svgContent?: string;\n @State() isVisible = false;\n @State() isLoading = true;\n\n /**\n * Color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\n */\n @Prop() color?: Color;\n\n /**\n * Specifies the role to use for accessibility. Defaults to 'presentation' (invisible to screen-readers)\n */\n @Prop({ mutable: true, reflect: true }) role: string;\n\n /**\n * Specifies the label to use for accessibility. Defaults to the icon name.\n */\n @Prop({ mutable: true, reflect: true }) ariaLabel: string;\n\n /**\n * Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\n */\n @Prop() flipRtl?: boolean;\n\n /**\n * Specifies which icon to use from the built-in set of icons.\n */\n @Prop() name?: string;\n\n /**\n * Specifies the exact `src` of an SVG file to use.\n */\n @Prop() src?: string;\n\n /**\n * A combination of both `name` and `src`. If a `src` url is detected\n * it will set the `src` property. Otherwise it assumes it's a built-in named\n * SVG and set the `name` property.\n */\n @Prop() icon?: any;\n\n /**\n * The size of the icon.\n * Available options are: `\"small\"` and `\"large\"`.\n */\n @Prop() size?: 'small' | 'large';\n\n /**\n * If enabled, nano-icon will be loaded lazily when it's visible in the viewport.\n * Default, `true`.\n */\n @Prop() lazy = true;\n\n @Watch('ariaLabel')\n udpateRole() {\n // force the role to be 'img' if the aria-label is explicitly set\n if (this.ariaLabel) this.role = 'img';\n else if (!this.ariaLabel) this.role = 'presentation';\n }\n\n @Watch('role')\n setAriaLabel() {\n if (!this.ariaLabel && !this.el.ariaLabel) {\n if (!this.role || this.role !== 'presentation') {\n // if the role is not 'presentation' and the user did not explicitly set a role,\n // let's try and derive one from the icon name\n\n const label = getName(this.name, this.icon);\n // user did not provide a label\n // come up with the label based on the icon name\n if (label) {\n this.ariaLabel = label.split('/').slice(-1)[0].replace(/-/g, ' ');\n }\n }\n } else if (this.role === 'presentation') {\n this.ariaLabel = undefined;\n }\n }\n\n connectedCallback() {\n // purposely do not return the promise here because loading\n // the svg file should not hold up loading the app\n // only load the svg if it's visible\n this.waitUntilVisible(this.el, '50px', () => {\n this.isVisible = true;\n this.loadIcon();\n });\n }\n\n disconnectedCallback() {\n if (this.io) {\n this.io.disconnect();\n this.io = undefined;\n }\n }\n\n componentWillLoad() {\n this.udpateRole();\n this.setAriaLabel();\n }\n\n private waitUntilVisible(\n el: HTMLElement,\n rootMargin: string,\n cb: () => void\n ) {\n if (\n Build.isBrowser &&\n this.lazy &&\n typeof window !== 'undefined' &&\n (window as any).IntersectionObserver\n ) {\n const io = (this.io = new (window as any).IntersectionObserver(\n (data: IntersectionObserverEntry[]) => {\n if (data[0].isIntersecting || (data[1] && data[1].isIntersecting)) {\n io.disconnect();\n this.io = undefined;\n cb();\n }\n },\n { rootMargin }\n ));\n\n io.observe(el);\n } else {\n // not a browser env (e.g. node)\n // or we're not loading lazily\n // or env doesn't support IntersectionObserver (testing?)\n // - immediately fetch icon\n cb();\n }\n }\n\n @Watch('name')\n @Watch('src')\n @Watch('icon')\n loadIcon() {\n if (Build.isBrowser && this.isVisible) {\n const url = getUrl(this);\n if (url) {\n if (iconContent.has(url)) {\n // sync if it's already loaded\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n } else {\n // async if it hasn't been loaded\n getSvgContent(url).then(() => {\n this.svgContent = iconContent.get(url);\n requestAnimationFrame(() => (this.isLoading = false));\n this.setAriaLabel();\n });\n }\n }\n }\n }\n\n private isRtl() {\n // doc is in rtl\n if (this.el.ownerDocument?.dir === 'rtl') return true;\n // html element is in rtl element\n if (this.el.closest('[dir=\"rtl\"]')) return true;\n\n // nested in a shadow dom - see if that host element is contained in an rtl element\n const rootNode = this.el.getRootNode() as ShadowRoot;\n const ownerHost = rootNode.host;\n if (ownerHost && ownerHost.closest('[dir=\"rtl\"]')) return true;\n\n return false;\n }\n\n render() {\n const flipRtl =\n this.flipRtl ||\n (this.name &&\n (this.name.indexOf('arrow') > -1 ||\n this.name.indexOf('chevron') > -1) &&\n this.isRtl() &&\n this.flipRtl !== false);\n\n return (\n <Host\n class={{\n ...createColorClasses(this.color),\n loading: this.isLoading,\n [`icon-${this.size}`]: !!this.size,\n 'flip-rtl': !!flipRtl,\n 'nano-icon': true,\n }}\n >\n {Build.isBrowser && this.svgContent ? (\n <div class=\"icon-inner\" innerHTML={this.svgContent}></div>\n ) : (\n <div class=\"icon-inner\"></div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -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/Te2fj7s-/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"],
|