@quartzds/core 1.0.0-beta.90 → 1.0.0-beta.91
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/components/{p-688c90f6.js → p-2bf0797c.js} +13 -8
- package/components/p-2bf0797c.js.map +1 -0
- package/components/{p-fac26e20.js → p-3baf75f4.js} +2 -2
- package/components/{p-fac26e20.js.map → p-3baf75f4.js.map} +1 -1
- package/components/{p-adefd438.js → p-d6e52d0b.js} +2 -2
- package/components/{p-adefd438.js.map → p-d6e52d0b.js.map} +1 -1
- package/components/qds-button.js +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-input.js +1 -1
- package/components/qds-list-item.js +3 -3
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +1 -1
- package/components/qds-tab.js +1 -1
- package/components/qds-tabbar.js +1 -1
- package/components/qds-title.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +11 -7
- package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +2 -2
- package/dist/cjs/qds-list-item.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-radio.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag_2.cjs.entry.js +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +20 -2
- package/dist/docs.json +30 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-button.entry.js +1 -1
- package/dist/esm/qds-checkbox.entry.js +11 -7
- package/dist/esm/qds-checkbox.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +2 -2
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-radio.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +1 -1
- package/dist/esm/qds-tag_2.entry.js +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +8 -1
- package/dist/types/components.d.ts +20 -4
- package/dist/vscode.html-custom-data.json +5 -1
- package/hydrate/index.js +18 -13
- package/hydrate/index.mjs +18 -13
- package/package.json +1 -1
- package/components/p-688c90f6.js.map +0 -1
|
@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, a as getElement } from './i
|
|
|
7
7
|
import { p as pickFocusEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
|
|
9
9
|
|
|
10
|
-
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:
|
|
10
|
+
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:c;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"c\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
|
|
11
11
|
const QdsCheckboxStyle0 = checkboxCss;
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -104,6 +104,10 @@ const Checkbox = class {
|
|
|
104
104
|
* @webnative
|
|
105
105
|
*/
|
|
106
106
|
this.willValidate = false;
|
|
107
|
+
/**
|
|
108
|
+
* Whether or not the text is displayed.
|
|
109
|
+
*/
|
|
110
|
+
this.checkboxOnly = false;
|
|
107
111
|
_Checkbox_inheritedAttributes.set(this, {});
|
|
108
112
|
this.checkValidity = () => this.internals.checkValidity();
|
|
109
113
|
this.reportValidity = () => this.internals.reportValidity();
|
|
@@ -164,18 +168,18 @@ const Checkbox = class {
|
|
|
164
168
|
render() {
|
|
165
169
|
return (
|
|
166
170
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
167
|
-
h("label", { key: '
|
|
171
|
+
h("label", { key: '77b24ee6bd6a133265604da842b0e9f045c503f2', "aria-disabled": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get) ? 'true' : undefined, class: {
|
|
168
172
|
'qds-inline': this.inline,
|
|
169
173
|
'qds-label': true,
|
|
170
|
-
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, h("div", { key: '
|
|
174
|
+
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, h("div", { key: '6169420d2b7084145047e63c9dd10fb9aa92ea3d', class: "qds-container" }, h("input", { key: 'f52ce61236b549acdc6cc7a13b0e185fabbb3d05',
|
|
171
175
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
172
|
-
autoFocus: this.host.autofocus, checked: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? false : this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), disabled: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get), indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _Checkbox_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Checkbox_onFocus, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", ...__classPrivateFieldGet(this, _Checkbox_inheritedAttributes, "f") }), h("qds-icon", { key: '
|
|
176
|
+
autoFocus: this.host.autofocus, checked: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? false : this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), disabled: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get), indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _Checkbox_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Checkbox_onFocus, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", "aria-label": this.checkboxOnly ? this.text : undefined, ...__classPrivateFieldGet(this, _Checkbox_inheritedAttributes, "f") }), h("qds-icon", { key: 'b80b741d7d982ab4155d72d5df5adb227f9ec02e', "aria-hidden": "true", class: {
|
|
173
177
|
'qds-icon': true,
|
|
174
178
|
'qds-checked': true,
|
|
175
|
-
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("div", { key: '
|
|
179
|
+
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("div", { key: 'cc97d644310d3abdb01d115dbfe6e9f2a7a1ba30', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }), h("qds-icon", { key: '23fa431abd3bee1a88be51e243d5c7518732825d', "aria-hidden": "true", class: {
|
|
176
180
|
'qds-icon': true,
|
|
177
181
|
'qds-indeterminate': true,
|
|
178
|
-
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: '
|
|
182
|
+
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: '2335dd53e9164bb6024a70cfa52137fc4998fbe0', required: this.required, size: this.size, text: this.text }))));
|
|
179
183
|
}
|
|
180
184
|
static get delegatesFocus() { return true; }
|
|
181
185
|
static get formAssociated() { return true; }
|
|
@@ -209,7 +213,7 @@ _Checkbox_inheritedAttributes = new WeakMap(), _Checkbox_onBlur = new WeakMap(),
|
|
|
209
213
|
// eslint-disable-next-line unicorn/no-null
|
|
210
214
|
return this.value == null ? null : this.value.toString();
|
|
211
215
|
}, _Checkbox_hasText_get = function _Checkbox_hasText_get() {
|
|
212
|
-
return (
|
|
216
|
+
return (this.text !== '' || this.required === true) && !this.checkboxOnly;
|
|
213
217
|
}, _Checkbox_defineGetter = function _Checkbox_defineGetter(p, get) {
|
|
214
218
|
Object.defineProperty(this.host, p, { enumerable: true, get });
|
|
215
219
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n grid-area: checkbox;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n}\n\n.qds-checkbox {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked ~ .qds-checked,\n &:indeterminate ~ .qds-indeterminate {\n display: block;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n tag: 'qds-checkbox',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n /**\n * Adds vertical margin to the checkbox for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The checkbox's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The checkbox's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Sets the checkbox's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the checkbox from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the checkbox with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-checkbox>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-checkbox>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Sets the checkbox to an indeterminate state. This is usually applied to\n * checkboxes that represent a \"select all/none\" behavior when associated\n * checkboxes have a mix of checked and unchecked states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The name of the checkbox, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * A value must be specified for the checkbox before the owning form can be\n * submitted.\n *\n * See\n * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n * and the\n * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n * for more information.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The error message that would be shown to the user if the `<qds-checkbox>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-checkbox>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the checkbox, submitted as a name/value pair with form data.\n *\n * @webnative\n */\n @Prop() public readonly value?: CheckboxValue = 'on'\n\n /**\n * True if `<qds-checkbox>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the checkbox gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): string | null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n get #hasText(): boolean {\n return (\n (this.text !== undefined && this.text !== '') || this.required === true\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n // eslint-disable-next-line unicorn/no-null\n else this.internals.setFormValue(null)\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.#computedIndeterminate ? false : this.checked}\n class=\"qds-checkbox\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-checked': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-indeterminate': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"indeterminate\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n required={this.required}\n size={this.size}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-checkbox.entry.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n grid-area: checkbox;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n}\n\n.qds-checkbox {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked ~ .qds-checked,\n &:indeterminate ~ .qds-indeterminate {\n display: block;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n tag: 'qds-checkbox',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n /**\n * Adds vertical margin to the checkbox for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The checkbox's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The checkbox's text.\n *\n * Its value will also be used as the `aria-label` value when the\n * `checkbox-only` attribute is specified.\n */\n @Prop() public readonly text!: string\n\n /**\n * Sets the checkbox's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the checkbox from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the checkbox with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-checkbox>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-checkbox>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Sets the checkbox to an indeterminate state. This is usually applied to\n * checkboxes that represent a \"select all/none\" behavior when associated\n * checkboxes have a mix of checked and unchecked states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The name of the checkbox, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * A value must be specified for the checkbox before the owning form can be\n * submitted.\n *\n * See\n * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n * and the\n * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n * for more information.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The error message that would be shown to the user if the `<qds-checkbox>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-checkbox>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the checkbox, submitted as a name/value pair with form data.\n *\n * @webnative\n */\n @Prop() public readonly value?: CheckboxValue = 'on'\n\n /**\n * True if `<qds-checkbox>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /**\n * Whether or not the text is displayed.\n */\n @Prop() public readonly checkboxOnly: boolean = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the checkbox gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): string | null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n get #hasText(): boolean {\n return (this.text !== '' || this.required === true) && !this.checkboxOnly\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n // eslint-disable-next-line unicorn/no-null\n else this.internals.setFormValue(null)\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.#computedIndeterminate ? false : this.checked}\n class=\"qds-checkbox\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n aria-label={this.checkboxOnly ? this.text : undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-checked': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-indeterminate': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"indeterminate\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n required={this.required}\n size={this.size}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
|
@@ -86,10 +86,10 @@ const ListItem = class {
|
|
|
86
86
|
'qds-checked': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedChecked_get),
|
|
87
87
|
}, "data-size": __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedSize_get), role: "listitem" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).
|
|
88
88
|
,
|
|
89
|
-
...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: '
|
|
89
|
+
...this.inheritedAttributes }, __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'multiselect' && (h("qds-checkbox", { key: 'e009fe7c14014db5e9b15a193b72c6f772a89211', checked: this.checked, class: "qds-list-action", indeterminate: this.indeterminate, size: this.size, tabIndex: -1, text: this.text, checkboxOnly: true })), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) === 'reorder' && (h("qds-icon", { key: '9067a11441139fe1f72f9c3e0eff6303e3075b94', "aria-hidden": "true", class: "qds-icon qds-list-action", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedListAction_get) })), h("div", { key: '509559713f04a4e512457c6e67f07726a9d8d71d', class: {
|
|
90
90
|
'qds-indented-content': true,
|
|
91
91
|
'qds-divider': __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDivider_get) === 'indent',
|
|
92
|
-
} }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '
|
|
92
|
+
} }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: 'df33c08dae14a2f1c96739f42f5a31a7102ff2d5', "aria-hidden": "true", class: "qds-icon qds-main-icon", library: this.iconLibrary, name: this.iconName })), h("label", { key: '89b9b7abd196959444aa9a90dbab084e8fd619cb', class: "qds-texts" }, h("input", { key: '8653a0496fc8cedd98ae0b136573ddf9735dfa36', checked: this.selected, class: "qds-input", disabled: this.disabled, indeterminate: this.indeterminate, onBlur: __classPrivateFieldGet(this, _ListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _ListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "checkbox" }), this.kicker !== undefined && this.kicker !== '' && (h("div", { key: '6551cfbecc9b5a7089a555f593ee00ea8bc5dd44', class: "qds-kicker" }, this.kicker)), h("div", { key: 'b3cf789a107852128c6e6d1b097c49f00b1c862c', class: "qds-title" }, this.text), this.subtitle !== undefined && this.subtitle !== '' && (h("div", { key: '7765860d7e5d3615dc27d9e454956734ec53ac06', class: "qds-subtitle" }, this.subtitle))), __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) !== undefined && (h("qds-icon", { key: '3d9a3f7b24f9629d09e2bd8cf0839c0f44f1aa38', "aria-hidden": "true", class: "qds-icon qds-destination", library: "core", name: __classPrivateFieldGet(this, _ListItem_instances, "a", _ListItem_computedDestination_get) }))))
|
|
93
93
|
/* eslint-enable jsx-a11y/label-has-associated-control */
|
|
94
94
|
);
|
|
95
95
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n}\n\n.qds-list-action {\n pointer-events: none;\n}\n\n.qds-indented-content {\n flex: 1 0;\n align-self: stretch;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-divider {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n}\n\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n}\n\n[data-size='small'] {\n &.qds-list-item {\n gap: var(--qds-list-item-small-gap-internal);\n padding-inline-start: var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline-end: var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n}\n\n[data-size='standard'] {\n &.qds-list-item {\n gap: var(--qds-list-item-standard-gap-internal);\n padding-inline-start: var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline-end: var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n}\n\n[data-size='large'] {\n &.qds-list-item {\n gap: var(--qds-list-item-large-gap-internal);\n padding-inline-start: var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline-end: var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n}\n\n.qds-list-item {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(input:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:host(:last-of-type) {\n .qds-divider {\n border-block-end: none;\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'reorder'\nexport type Divider = 'hide' | 'indent'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is visible and uses the full width of the list item.\n *\n * Use the `hide` value to hide the divider completely (useful with multiselect).\n *\n * Use the `indent` value to align the left end of the divider to the icon/text (useful on mobile).\n *\n * **Note**: the divider is automatically hidden on the last list item in the parent container.\n */\n @Prop() public readonly divider?: Divider\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction?: ListAction\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is checked when `list-action=\"multiselect\"`\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n private inheritedAttributes: Attributes = {}\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedDivider(): Divider | undefined {\n switch (this.divider) {\n case 'hide':\n case 'indent': {\n return this.divider\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction | undefined {\n switch (this.listAction) {\n case 'reorder':\n case 'multiselect': {\n return this.listAction\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.stopImmediatePropagation()\n return\n }\n\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\n\n if (this.listAction === 'multiselect') {\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n /* eslint-disable jsx-a11y/label-has-associated-control */\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-divider': this.#computedDivider === undefined,\n 'qds-multiselect': this.#computedListAction === 'multiselect',\n 'qds-selected': this.#computedSelected,\n 'qds-checked': this.#computedChecked,\n }}\n data-size={this.#computedSize}\n role=\"listitem\" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.checked}\n class=\"qds-list-action\"\n indeterminate={this.indeterminate}\n size={this.size}\n tabIndex={-1}\n />\n )}\n {this.#computedListAction === 'reorder' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-list-action\"\n library=\"core\"\n name={this.#computedListAction}\n />\n )}\n\n <div\n class={{\n 'qds-indented-content': true,\n 'qds-divider': this.#computedDivider === 'indent',\n }}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n\n <label class=\"qds-texts\">\n <input\n checked={this.selected}\n class=\"qds-input\"\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n tabIndex={this.disabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n />\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </label>\n {this.#computedDestination !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-destination\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n </li>\n /* eslint-enable jsx-a11y/label-has-associated-control */\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-list-item.entry.js","mappings":"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","names":[],"sources":["src/components/list-item/list-item.css?tag=qds-list-item&encapsulation=shadow","src/components/list-item/list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-list-item,\n.qds-indented-content {\n align-items: center;\n box-sizing: border-box;\n display: flex;\n}\n\n.qds-list-action {\n pointer-events: none;\n}\n\n.qds-indented-content {\n flex: 1 0;\n align-self: stretch;\n}\n\n.qds-destination {\n transform: scaleX(var(--qds-direction-factor, 1));\n}\n\n.qds-divider {\n border-block-end: var(--qds-list-border-width) solid\n var(--qds-theme-divider-standard);\n}\n\n.qds-icon {\n color: var(--qds-theme-text-standard);\n}\n\n.qds-texts {\n justify-items: center;\n display: flex;\n flex: 1 0;\n flex-direction: column;\n padding: 0;\n position: relative;\n}\n\n.qds-input {\n appearance: none;\n background: none;\n border: none;\n border-radius: var(--qds-control-border-radius);\n inset: 0;\n margin: 0;\n outline: none;\n position: absolute;\n}\n\n.qds-title {\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n}\n\n[data-size='small'] {\n &.qds-list-item {\n gap: var(--qds-list-item-small-gap-internal);\n padding-inline-start: var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-small-gap-internal);\n min-height: var(--qds-list-item-small-height);\n padding-block: var(--qds-list-item-small-padding-vertical);\n padding-inline-end: var(--qds-list-item-small-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-small-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-small-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-small-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-small-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-small-subtitle);\n }\n}\n\n[data-size='standard'] {\n &.qds-list-item {\n gap: var(--qds-list-item-standard-gap-internal);\n padding-inline-start: var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-standard-gap-internal);\n min-height: var(--qds-list-item-standard-height);\n padding-block: var(--qds-list-item-standard-padding-vertical);\n padding-inline-end: var(--qds-list-item-standard-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-standard-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-standard-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-standard-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-standard-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-standard-subtitle);\n }\n}\n\n[data-size='large'] {\n &.qds-list-item {\n gap: var(--qds-list-item-large-gap-internal);\n padding-inline-start: var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-indented-content {\n gap: var(--qds-list-item-large-gap-internal);\n min-height: var(--qds-list-item-large-height);\n padding-block: var(--qds-list-item-large-padding-vertical);\n padding-inline-end: var(--qds-list-item-large-padding-horizontal);\n }\n\n .qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n .qds-main-icon {\n font-size: var(--qds-list-item-large-icon-size);\n }\n\n .qds-texts {\n gap: var(--qds-list-item-large-titles-gap);\n }\n\n .qds-kicker {\n font: var(--qds-list-item-large-kicker);\n }\n\n .qds-title {\n font: var(--qds-list-item-large-title);\n }\n\n .qds-subtitle {\n font: var(--qds-list-item-large-subtitle);\n }\n}\n\n.qds-list-item {\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n\n &:has(input:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n}\n\n.qds-selected {\n &.qds-list-item {\n background-color: var(--qds-theme-interactive-background-selected);\n }\n\n &[data-size='small'] .qds-title {\n font: var(--qds-list-item-small-title-emphasized);\n }\n\n &[data-size='standard'] .qds-title {\n font: var(--qds-list-item-standard-title-emphasized);\n }\n\n &[data-size='large'] .qds-title {\n font: var(--qds-list-item-large-title-emphasized);\n }\n}\n\n:host(:last-of-type) {\n .qds-divider {\n border-block-end: none;\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport type { Size } from '../shared'\n\nexport type Destination = 'navigation'\nexport type ListAction = 'multiselect' | 'reorder'\nexport type Divider = 'hide' | 'indent'\n\n/**\n *\n *\n * @see https://quartz.se.com/build/components/list-item\n */\n@Component({\n tag: 'qds-list-item',\n shadow: { delegatesFocus: true },\n styleUrl: 'list-item.css',\n})\nexport class ListItem implements ComponentInterface {\n /**\n * The destination action that the list item denotes through its rightmost icon.\n */\n @Prop() public readonly destination?: Destination\n\n /**\n * Prevents the list item from being interacted with: it cannot be selected\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Control how to display the bottom divider line.\n *\n * By default, the divider is visible and uses the full width of the list item.\n *\n * Use the `hide` value to hide the divider completely (useful with multiselect).\n *\n * Use the `indent` value to align the left end of the divider to the icon/text (useful on mobile).\n *\n * **Note**: the divider is automatically hidden on the last list item in the parent container.\n */\n @Prop() public readonly divider?: Divider\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n /**\n * The type of list-level action that the list item supports\n */\n @Prop() public readonly listAction?: ListAction\n\n /**\n * The list items's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Whether or not the list item is checked when `list-action=\"multiselect\"`\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Whether or not the list item is selected.\n */\n @Prop({ mutable: true }) public selected?: boolean\n\n /**\n * Sets the list item to an indeterminate state, only when `list-action=\"indeterminate\"`.\n * This is usually applied to items that represent a \"select all/none\" behavior when associated\n * items have a mix of selected and unselected states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The primary text of the list item.\n */\n @Prop() public readonly text!: string\n\n /**\n * Text to display below the primary text.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * Emitted when the list item loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the list item gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n private inheritedAttributes: Attributes = {}\n\n get #computedDestination(): Destination | undefined {\n switch (this.destination) {\n case 'navigation': {\n return this.destination\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedDivider(): Divider | undefined {\n switch (this.divider) {\n case 'hide':\n case 'indent': {\n return this.divider\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedListAction(): ListAction | undefined {\n switch (this.listAction) {\n case 'reorder':\n case 'multiselect': {\n return this.listAction\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSelected(): boolean {\n return this.selected ?? false\n }\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) {\n event.stopImmediatePropagation()\n return\n }\n\n // Always prevent default behavior to avoid the internal `<input>`\n // to toggle `checked` state inappropriately.\n //\n // Note that this will need adjustments once we add the `item-action` slot.\n event.preventDefault()\n\n if (this.listAction === 'multiselect') {\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n /* eslint-disable jsx-a11y/label-has-associated-control */\n // eslint-disable-next-line jsx-a11y/no-redundant-roles\n <li\n class={{\n 'qds-list-item': true,\n 'qds-disabled': this.disabled,\n 'qds-divider': this.#computedDivider === undefined,\n 'qds-multiselect': this.#computedListAction === 'multiselect',\n 'qds-selected': this.#computedSelected,\n 'qds-checked': this.#computedChecked,\n }}\n data-size={this.#computedSize}\n role=\"listitem\" // Required because it can't be a direct child of a list element (<ul>, <ol>, or <menu>).\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n {this.#computedListAction === 'multiselect' && (\n <qds-checkbox\n checked={this.checked}\n class=\"qds-list-action\"\n indeterminate={this.indeterminate}\n size={this.size}\n tabIndex={-1}\n text={this.text}\n checkboxOnly\n />\n )}\n {this.#computedListAction === 'reorder' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-list-action\"\n library=\"core\"\n name={this.#computedListAction}\n />\n )}\n\n <div\n class={{\n 'qds-indented-content': true,\n 'qds-divider': this.#computedDivider === 'indent',\n }}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-main-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n\n <label class=\"qds-texts\">\n <input\n checked={this.selected}\n class=\"qds-input\"\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n tabIndex={this.disabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n />\n {this.kicker !== undefined && this.kicker !== '' && (\n <div class=\"qds-kicker\">{this.kicker}</div>\n )}\n <div class=\"qds-title\">{this.text}</div>\n {this.subtitle !== undefined && this.subtitle !== '' && (\n <div class=\"qds-subtitle\">{this.subtitle}</div>\n )}\n </label>\n {this.#computedDestination !== undefined && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon qds-destination\"\n library=\"core\"\n name={this.#computedDestination}\n />\n )}\n </div>\n </li>\n /* eslint-enable jsx-a11y/label-has-associated-control */\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-b1d6acd2.js';
|
|
7
7
|
import { p as pickFocusEventAttributes, c as invariant, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
|
|
8
8
|
|
|
9
|
-
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:
|
|
9
|
+
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:i;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"i\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
|
|
10
10
|
const QdsRadioStyle0 = radioCss;
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, a as getElement } from './i
|
|
|
7
7
|
import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, b as inheritAriaAttributes } from './helpers-2e4ca34d.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-a4768aaf.js';
|
|
9
9
|
|
|
10
|
-
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"
|
|
10
|
+
const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"d\"}.qds-container,.qds-select{width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:d}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal);text-overflow:ellipsis}.qds-select:not(:focus):user-invalid{border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n ));grid-area:d;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
|
|
11
11
|
const QdsSelectStyle0 = selectCss;
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -102,7 +102,7 @@ _Tag_inheritedAttributes = new WeakMap(), _Tag_instances = new WeakSet(), _Tag_c
|
|
|
102
102
|
};
|
|
103
103
|
Tag.style = QdsTagStyle0;
|
|
104
104
|
|
|
105
|
-
const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"
|
|
105
|
+
const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"e\"}.qds-titles.qds-has-kicker{grid-template-areas:\"f\" \"e\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"e\" \"g\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"f\" \"e\" \"g\"}.qds-has-icon{grid-template-areas:\"h e\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". f\" \"h e\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"h e\" \". g\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". f\" \"h e\" \". g\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:e}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:g}.qds-kicker{color:var(--qds-theme-kicker);grid-area:f}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:h}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
|
|
106
106
|
const QdsTitleStyle0 = titleCss;
|
|
107
107
|
|
|
108
108
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
package/dist/esm/qds.js
CHANGED
|
@@ -21,7 +21,7 @@ var patchBrowser = () => {
|
|
|
21
21
|
|
|
22
22
|
patchBrowser().then(async (options) => {
|
|
23
23
|
await globalScripts();
|
|
24
|
-
return bootstrapLazy(JSON.parse("[[\"qds-tab\",[[1,\"qds-tab\",{\"action\":[1],\"badge\":[8],\"badgeCounterImportance\":[1,\"badge-counter-importance\"],\"badgeDescription\":[1,\"badge-description\"],\"badgeIndicatorStatus\":[1,\"badge-indicator-status\"],\"disabled\":[4],\"iconLibrary\":[1,\"icon-library\"],\"iconName\":[1,\"icon-name\"],\"iconOnly\":[4,\"icon-only\"],\"importance\":[1],\"indicatorPosition\":[1,\"indicator-position\"],\"panel\":[1],\"tagIconDescription\":[1,\"tag-icon-description\"],\"tagIconName\":[1,\"tag-icon-name\"],\"tagIconLibrary\":[1,\"tag-icon-library\"],\"tagImportance\":[1,\"tag-importance\"],\"tagSize\":[1,\"tag-size\"],\"tagStatus\":[1,\"tag-status\"],\"tagText\":[1,\"tag-text\"],\"selected\":[4],\"size\":[1],\"subtitle\":[1],\"text\":[1],\"href\":[1],\"tabIndex\":[32],\"isIndicatorOnTop\":[32]},[[0,\"click\",\"onClick\"]],{\"panel\":[\"panelChanged\"],\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-tabbar\",[[17,\"qds-tabbar\",{\"layer\":[1],\"level\":[1],\"orientation\":[1],\"tablistDescription\":[1,\"tablist-description\"],\"disableEndArrow\":[32],\"disableStartArrow\":[32],\"activeTab\":[32]},[[9,\"resize\",\"windowResize\"]]]]],[\"qds-input\",[[81,\"qds-input\",{\"noIcon\":[4,\"no-icon\"],\"size\":[1],\"accept\":[1],\"autoComplete\":[1,\"autocomplete\"],\"capture\":[1],\"disabled\":[4],\"enterkeyhint\":[1],\"files\":[16],\"form\":[1],\"inputmode\":[1],\"labels\":[16],\"max\":[8],\"maxLength\":[2,\"maxlength\"],\"min\":[8],\"minLength\":[2,\"minlength\"],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"required\":[4],\"selectionDirection\":[1025,\"selection-direction\"],\"selectionEnd\":[1026,\"selection-end\"],\"selectionStart\":[1026,\"selection-start\"],\"step\":[8],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1032],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"onKeydown\"]],{\"disabled\":[\"disabledChanged\"],\"selectionDirection\":[\"selectionDirectionChanged\"],\"selectionEnd\":[\"selectionEndChanged\"],\"selectionStart\":[\"selectionStartChanged\"],\"tabindex\":[\"tabindexChanged\"],\"max\":[\"validationChanged\"],\"maxLength\":[\"validationChanged\"],\"min\":[\"validationChanged\"],\"minLength\":[\"validationChanged\"],\"pattern\":[\"validationChanged\"],\"required\":[\"validationChanged\"],\"step\":[\"validationChanged\"],\"type\":[\"validationChanged\"],\"value\":[\"validationChanged\",\"valueChanged\"]}]]],[\"qds-list-item\",[[17,\"qds-list-item\",{\"destination\":[1],\"disabled\":[4],\"divider\":[1],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"kicker\":[1],\"listAction\":[1,\"list-action\"],\"size\":[1],\"checked\":[1028],\"selected\":[1028],\"indeterminate\":[1028],\"text\":[1],\"subtitle\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-radio\",[[2,\"qds-radio\",{\"inline\":[4],\"size\":[1],\"text\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"name\":[1],\"required\":[4],\"value\":[1032],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-chip\",[[81,\"qds-chip\",{\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"size\":[1],\"type\":[1],\"text\":[1],\"checked\":[1028],\"form\":[1],\"disabled\":[4],\"name\":[1],\"value\":[8],\"isPressed\":[32],\"isSelected\":[32],\"tabIndex\":[32],\"tooltip\":[32]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-nav-list-item\",[[17,\"qds-nav-list-item\",{\"collapsed\":[4],\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"size\":[1],\"selected\":[4],\"subtext\":[1],\"text\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-breadcrumb-item\",[[17,\"qds-breadcrumb-item\",{\"text\":[1],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"tooltip\":[32]},null,{\"text\":[\"textChanged\"]}]]],[\"qds-form-message\",[[1,\"qds-form-message\",{\"inline\":[4],\"size\":[1],\"status\":[1],\"statusDescription\":[1,\"status-description\"],\"text\":[1]}]]],[\"qds-inline-link\",[[17,\"qds-inline-link\",{\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"linkIcon\":[32],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"href\":[\"hrefTargetChanged\"],\"target\":[\"hrefTargetChanged\"]}]]],[\"qds-loader\",[[65,\"qds-loader\",{\"size\":[1],\"status\":[1]},null,{\"status\":[\"statusChanged\"]}]]],[\"qds-select\",[[81,\"qds-select\",{\"size\":[1],\"autoComplete\":[1,\"autocomplete\"],\"disabled\":[4],\"form\":[1],\"length\":[2],\"multiple\":[4],\"name\":[1],\"options\":[16],\"required\":[4],\"selectedIndex\":[1026,\"selected-index\"],\"selectedOptions\":[16],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1025],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"selectedIndex\":[\"selectedIndexChanged\"],\"tabindex\":[\"tabindexChanged\"],\"required\":[\"validationChanged\"],\"value\":[\"validationChanged\"]}]]],[\"qds-standalone-link\",[[17,\"qds-standalone-link\",{\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"size\":[1],\"visitable\":[4],\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"linkIcon\":[32],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"href\":[\"hrefTargetChanged\"],\"target\":[\"hrefTargetChanged\"]}]]],[\"qds-dialog\",[[1,\"qds-dialog\",{\"open\":[1540]},null,{\"open\":[\"openChanged\"]}]]],[\"qds-dropdown\",[[1,\"qds-dropdown\",{\"autoUpdateOptions\":[16],\"disabled\":[4],\"flipOptions\":[16],\"noFlip\":[4,\"no-flip\"],\"noShift\":[4,\"no-shift\"],\"offsetOptions\":[16],\"placement\":[1],\"shiftOptions\":[16],\"strategy\":[1],\"target\":[1],\"hostAriaLabelledBy\":[32],\"hostDisplay\":[32],\"hostPosition\":[32],\"hostTransform\":[32],\"update\":[64]},[[4,\"click\",\"handleMouseDown\"]],{\"target\":[\"updateReferenceElement\"],\"flipOptions\":[\"updateMiddleware\"],\"noFlip\":[\"updateMiddleware\"],\"noShift\":[\"updateMiddleware\"],\"offsetOptions\":[\"updateMiddleware\"],\"shiftOptions\":[\"updateMiddleware\"],\"placement\":[\"updatePosition\"],\"strategy\":[\"updatePosition\"],\"autoUpdateOptions\":[\"startAutoUpdate\"]}]]],[\"qds-progress-bar\",[[65,\"qds-progress-bar\",{\"size\":[1],\"labels\":[16],\"max\":[8],\"position\":[2],\"value\":[8],\"width\":[32]},null,{\"max\":[\"maxChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-switch\",[[81,\"qds-switch\",{\"inline\":[4],\"size\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"labels\":[16],\"name\":[1],\"value\":[8],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32],\"inheritedAttributes\":[32]},[[0,\"click\",\"onClick\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-table\",[[1,\"qds-table\"]]],[\"qds-table-body\",[[1,\"qds-table-body\"]]],[\"qds-table-cell\",[[1,\"qds-table-cell\",{\"colSpan\":[2,\"colspan\"],\"rowSpan\":[2,\"rowspan\"]}]]],[\"qds-table-head\",[[1,\"qds-table-head\"]]],[\"qds-table-head-cell\",[[1,\"qds-table-head-cell\",{\"abbr\":[1],\"colSpan\":[2,\"colspan\"],\"rowSpan\":[2,\"rowspan\"],\"scope\":[1]}]]],[\"qds-table-row\",[[1,\"qds-table-row\"]]],[\"qds-textarea\",[[81,\"qds-textarea\",{\"size\":[1],\"autoComplete\":[1,\"autocomplete\"],\"cols\":[2],\"disabled\":[4],\"enterkeyhint\":[1],\"form\":[1],\"inputmode\":[1],\"labels\":[16],\"maxLength\":[2,\"maxlength\"],\"minLength\":[2,\"minlength\"],\"name\":[1],\"placeholder\":[1],\"required\":[4],\"rows\":[2],\"selectionDirection\":[1025,\"selection-direction\"],\"selectionEnd\":[1026,\"selection-end\"],\"selectionStart\":[1026,\"selection-start\"],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1032],\"willValidate\":[4,\"will-validate\"],\"wrap\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"selectionDirection\":[\"selectionDirectionChanged\"],\"selectionEnd\":[\"selectionEndChanged\"],\"selectionStart\":[\"selectionStartChanged\"],\"tabindex\":[\"tabindexChanged\"],\"maxLength\":[\"validationChanged\"],\"minLength\":[\"validationChanged\"],\"required\":[\"validationChanged\"],\"value\":[\"validationChanged\",\"valueChanged\"]}]]],[\"qds-checkbox\",[[81,\"qds-checkbox\",{\"inline\":[4],\"size\":[1],\"text\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"indeterminate\":[1028],\"name\":[1],\"required\":[4],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[8],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-divider\",[[1,\"qds-divider\",{\"importance\":[1],\"vertical\":[4]},null,{\"vertical\":[\"verticalChanged\"]}]]],[\"qds-badge-counter_2\",[[1,\"qds-badge-counter\",{\"description\":[1],\"importance\":[1],\"size\":[1],\"strokeRing\":[4,\"stroke-ring\"],\"value\":[8]}],[1,\"qds-badge-indicator\",{\"description\":[1],\"size\":[1],\"status\":[1],\"strokeRing\":[4,\"stroke-ring\"]}]]],[\"qds-tooltip\",[[1,\"qds-tooltip\",{\"autoUpdateOptions\":[16],\"disabled\":[4],\"flipOptions\":[16],\"noFlip\":[4,\"no-flip\"],\"noShift\":[4,\"no-shift\"],\"offsetOptions\":[16],\"placement\":[1],\"shiftOptions\":[16],\"strategy\":[1],\"target\":[1],\"trigger\":[1],\"hostPosition\":[32],\"hostTransform\":[32],\"open\":[32],\"middleware\":[32],\"side\":[32],\"aStyles\":[32],\"aShape\":[32],\"aViewbox\":[32],\"aHeight\":[32],\"aGap\":[32],\"show\":[64],\"close\":[64],\"updateArrow\":[64]},null,{\"aGap\":[\"updateMiddleware\"],\"aHeight\":[\"updateMiddleware\"],\"flipOptions\":[\"updateMiddleware\"],\"noFlip\":[\"updateMiddleware\"],\"noShift\":[\"updateMiddleware\"],\"offsetOptions\":[\"updateMiddleware\"],\"shiftOptions\":[\"updateMiddleware\"],\"role\":[\"updateAriaHasPopup\"],\"open\":[\"setAriaExpanded\"],\"target\":[\"updateReferenceElement\"],\"trigger\":[\"updateEventListeners\"],\"middleware\":[\"updatePosition\"],\"placement\":[\"updatePosition\"],\"strategy\":[\"updatePosition\"],\"autoUpdateOptions\":[\"startAutoUpdate\"]}]]],[\"qds-icon\",[[1,\"qds-icon\",{\"name\":[1],\"library\":[1],\"svg\":[32]},null,{\"name\":[\"setIcon\"],\"library\":[\"setIcon\"]}]]],[\"qds-button\",[[81,\"qds-button\",{\"action\":[1],\"badge\":[8],\"badgeDescription\":[1,\"badge-description\"],\"badgeIndicatorStatus\":[1,\"badge-indicator-status\"],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"size\":[1],\"text\":[1],\"iconOnly\":[4,\"icon-only\"],\"disabled\":[4],\"download\":[1],\"form\":[1],\"formAction\":[1,\"formaction\"],\"formMethod\":[1,\"formmethod\"],\"formNoValidate\":[4,\"formnovalidate\"],\"formTarget\":[1,\"formtarget\"],\"href\":[1],\"labels\":[16],\"rel\":[1],\"name\":[1],\"target\":[1],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32],\"tooltip\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"text\":[\"textChanged\"]}]]],[\"qds-tag_2\",[[1,\"qds-tag\",{\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"status\":[1],\"size\":[1],\"text\":[1],\"iconDescription\":[1,\"icon-description\"],\"badge\":[4],\"badgeDescription\":[1,\"badge-description\"]}],[1,\"qds-title\",{\"alignment\":[1],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"kicker\":[1],\"layer\":[1],\"level\":[1],\"subtitle\":[1],\"tag\":[1],\"variant\":[1]}]]],[\"qds-label\",[[1,\"qds-label\",{\"inline\":[4],\"required\":[4],\"size\":[1],\"text\":[1],\"tooltip\":[32]},null,{\"text\":[\"textChanged\"]}]]]]"), options);
|
|
24
|
+
return bootstrapLazy(JSON.parse("[[\"qds-tab\",[[1,\"qds-tab\",{\"action\":[1],\"badge\":[8],\"badgeCounterImportance\":[1,\"badge-counter-importance\"],\"badgeDescription\":[1,\"badge-description\"],\"badgeIndicatorStatus\":[1,\"badge-indicator-status\"],\"disabled\":[4],\"iconLibrary\":[1,\"icon-library\"],\"iconName\":[1,\"icon-name\"],\"iconOnly\":[4,\"icon-only\"],\"importance\":[1],\"indicatorPosition\":[1,\"indicator-position\"],\"panel\":[1],\"tagIconDescription\":[1,\"tag-icon-description\"],\"tagIconName\":[1,\"tag-icon-name\"],\"tagIconLibrary\":[1,\"tag-icon-library\"],\"tagImportance\":[1,\"tag-importance\"],\"tagSize\":[1,\"tag-size\"],\"tagStatus\":[1,\"tag-status\"],\"tagText\":[1,\"tag-text\"],\"selected\":[4],\"size\":[1],\"subtitle\":[1],\"text\":[1],\"href\":[1],\"tabIndex\":[32],\"isIndicatorOnTop\":[32]},[[0,\"click\",\"onClick\"]],{\"panel\":[\"panelChanged\"],\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-tabbar\",[[17,\"qds-tabbar\",{\"layer\":[1],\"level\":[1],\"orientation\":[1],\"tablistDescription\":[1,\"tablist-description\"],\"disableEndArrow\":[32],\"disableStartArrow\":[32],\"activeTab\":[32]},[[9,\"resize\",\"windowResize\"]]]]],[\"qds-input\",[[81,\"qds-input\",{\"noIcon\":[4,\"no-icon\"],\"size\":[1],\"accept\":[1],\"autoComplete\":[1,\"autocomplete\"],\"capture\":[1],\"disabled\":[4],\"enterkeyhint\":[1],\"files\":[16],\"form\":[1],\"inputmode\":[1],\"labels\":[16],\"max\":[8],\"maxLength\":[2,\"maxlength\"],\"min\":[8],\"minLength\":[2,\"minlength\"],\"multiple\":[4],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"required\":[4],\"selectionDirection\":[1025,\"selection-direction\"],\"selectionEnd\":[1026,\"selection-end\"],\"selectionStart\":[1026,\"selection-start\"],\"step\":[8],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1032],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"onKeydown\"]],{\"disabled\":[\"disabledChanged\"],\"selectionDirection\":[\"selectionDirectionChanged\"],\"selectionEnd\":[\"selectionEndChanged\"],\"selectionStart\":[\"selectionStartChanged\"],\"tabindex\":[\"tabindexChanged\"],\"max\":[\"validationChanged\"],\"maxLength\":[\"validationChanged\"],\"min\":[\"validationChanged\"],\"minLength\":[\"validationChanged\"],\"pattern\":[\"validationChanged\"],\"required\":[\"validationChanged\"],\"step\":[\"validationChanged\"],\"type\":[\"validationChanged\"],\"value\":[\"validationChanged\",\"valueChanged\"]}]]],[\"qds-list-item\",[[17,\"qds-list-item\",{\"destination\":[1],\"disabled\":[4],\"divider\":[1],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"kicker\":[1],\"listAction\":[1,\"list-action\"],\"size\":[1],\"checked\":[1028],\"selected\":[1028],\"indeterminate\":[1028],\"text\":[1],\"subtitle\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-radio\",[[2,\"qds-radio\",{\"inline\":[4],\"size\":[1],\"text\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"name\":[1],\"required\":[4],\"value\":[1032],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-chip\",[[81,\"qds-chip\",{\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"size\":[1],\"type\":[1],\"text\":[1],\"checked\":[1028],\"form\":[1],\"disabled\":[4],\"name\":[1],\"value\":[8],\"isPressed\":[32],\"isSelected\":[32],\"tabIndex\":[32],\"tooltip\":[32]},[[0,\"click\",\"onClick\"],[0,\"keydown\",\"handleKeyDown\"],[0,\"keyup\",\"handleKeyUp\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-nav-list-item\",[[17,\"qds-nav-list-item\",{\"collapsed\":[4],\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"size\":[1],\"selected\":[4],\"subtext\":[1],\"text\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"tabindex\":[\"tabindexChanged\"]}]]],[\"qds-breadcrumb-item\",[[17,\"qds-breadcrumb-item\",{\"text\":[1],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"tooltip\":[32]},null,{\"text\":[\"textChanged\"]}]]],[\"qds-form-message\",[[1,\"qds-form-message\",{\"inline\":[4],\"size\":[1],\"status\":[1],\"statusDescription\":[1,\"status-description\"],\"text\":[1]}]]],[\"qds-inline-link\",[[17,\"qds-inline-link\",{\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"linkIcon\":[32],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"href\":[\"hrefTargetChanged\"],\"target\":[\"hrefTargetChanged\"]}]]],[\"qds-loader\",[[65,\"qds-loader\",{\"size\":[1],\"status\":[1]},null,{\"status\":[\"statusChanged\"]}]]],[\"qds-select\",[[81,\"qds-select\",{\"size\":[1],\"autoComplete\":[1,\"autocomplete\"],\"disabled\":[4],\"form\":[1],\"length\":[2],\"multiple\":[4],\"name\":[1],\"options\":[16],\"required\":[4],\"selectedIndex\":[1026,\"selected-index\"],\"selectedOptions\":[16],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1025],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"selectedIndex\":[\"selectedIndexChanged\"],\"tabindex\":[\"tabindexChanged\"],\"required\":[\"validationChanged\"],\"value\":[\"validationChanged\"]}]]],[\"qds-standalone-link\",[[17,\"qds-standalone-link\",{\"disabled\":[4],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"size\":[1],\"visitable\":[4],\"download\":[8],\"href\":[1],\"hreflang\":[1],\"referrerPolicy\":[1,\"referrerpolicy\"],\"rel\":[1],\"target\":[1],\"linkIcon\":[32],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"href\":[\"hrefTargetChanged\"],\"target\":[\"hrefTargetChanged\"]}]]],[\"qds-dialog\",[[1,\"qds-dialog\",{\"open\":[1540]},null,{\"open\":[\"openChanged\"]}]]],[\"qds-dropdown\",[[1,\"qds-dropdown\",{\"autoUpdateOptions\":[16],\"disabled\":[4],\"flipOptions\":[16],\"noFlip\":[4,\"no-flip\"],\"noShift\":[4,\"no-shift\"],\"offsetOptions\":[16],\"placement\":[1],\"shiftOptions\":[16],\"strategy\":[1],\"target\":[1],\"hostAriaLabelledBy\":[32],\"hostDisplay\":[32],\"hostPosition\":[32],\"hostTransform\":[32],\"update\":[64]},[[4,\"click\",\"handleMouseDown\"]],{\"target\":[\"updateReferenceElement\"],\"flipOptions\":[\"updateMiddleware\"],\"noFlip\":[\"updateMiddleware\"],\"noShift\":[\"updateMiddleware\"],\"offsetOptions\":[\"updateMiddleware\"],\"shiftOptions\":[\"updateMiddleware\"],\"placement\":[\"updatePosition\"],\"strategy\":[\"updatePosition\"],\"autoUpdateOptions\":[\"startAutoUpdate\"]}]]],[\"qds-progress-bar\",[[65,\"qds-progress-bar\",{\"size\":[1],\"labels\":[16],\"max\":[8],\"position\":[2],\"value\":[8],\"width\":[32]},null,{\"max\":[\"maxChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-switch\",[[81,\"qds-switch\",{\"inline\":[4],\"size\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"labels\":[16],\"name\":[1],\"value\":[8],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32],\"inheritedAttributes\":[32]},[[0,\"click\",\"onClick\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-table\",[[1,\"qds-table\"]]],[\"qds-table-body\",[[1,\"qds-table-body\"]]],[\"qds-table-cell\",[[1,\"qds-table-cell\",{\"colSpan\":[2,\"colspan\"],\"rowSpan\":[2,\"rowspan\"]}]]],[\"qds-table-head\",[[1,\"qds-table-head\"]]],[\"qds-table-head-cell\",[[1,\"qds-table-head-cell\",{\"abbr\":[1],\"colSpan\":[2,\"colspan\"],\"rowSpan\":[2,\"rowspan\"],\"scope\":[1]}]]],[\"qds-table-row\",[[1,\"qds-table-row\"]]],[\"qds-textarea\",[[81,\"qds-textarea\",{\"size\":[1],\"autoComplete\":[1,\"autocomplete\"],\"cols\":[2],\"disabled\":[4],\"enterkeyhint\":[1],\"form\":[1],\"inputmode\":[1],\"labels\":[16],\"maxLength\":[2,\"maxlength\"],\"minLength\":[2,\"minlength\"],\"name\":[1],\"placeholder\":[1],\"required\":[4],\"rows\":[2],\"selectionDirection\":[1025,\"selection-direction\"],\"selectionEnd\":[1026,\"selection-end\"],\"selectionStart\":[1026,\"selection-start\"],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1032],\"willValidate\":[4,\"will-validate\"],\"wrap\":[1],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"selectionDirection\":[\"selectionDirectionChanged\"],\"selectionEnd\":[\"selectionEndChanged\"],\"selectionStart\":[\"selectionStartChanged\"],\"tabindex\":[\"tabindexChanged\"],\"maxLength\":[\"validationChanged\"],\"minLength\":[\"validationChanged\"],\"required\":[\"validationChanged\"],\"value\":[\"validationChanged\",\"valueChanged\"]}]]],[\"qds-checkbox\",[[81,\"qds-checkbox\",{\"inline\":[4],\"size\":[1],\"text\":[1],\"checked\":[1028],\"disabled\":[4],\"form\":[1],\"indeterminate\":[1028],\"name\":[1],\"required\":[4],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[8],\"willValidate\":[4,\"will-validate\"],\"checkboxOnly\":[4,\"checkbox-only\"],\"tabIndex\":[32]},[[0,\"click\",\"onClick\"]],{\"checked\":[\"checkedChanged\"],\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"value\":[\"valueChanged\"]}]]],[\"qds-divider\",[[1,\"qds-divider\",{\"importance\":[1],\"vertical\":[4]},null,{\"vertical\":[\"verticalChanged\"]}]]],[\"qds-badge-counter_2\",[[1,\"qds-badge-counter\",{\"description\":[1],\"importance\":[1],\"size\":[1],\"strokeRing\":[4,\"stroke-ring\"],\"value\":[8]}],[1,\"qds-badge-indicator\",{\"description\":[1],\"size\":[1],\"status\":[1],\"strokeRing\":[4,\"stroke-ring\"]}]]],[\"qds-tooltip\",[[1,\"qds-tooltip\",{\"autoUpdateOptions\":[16],\"disabled\":[4],\"flipOptions\":[16],\"noFlip\":[4,\"no-flip\"],\"noShift\":[4,\"no-shift\"],\"offsetOptions\":[16],\"placement\":[1],\"shiftOptions\":[16],\"strategy\":[1],\"target\":[1],\"trigger\":[1],\"hostPosition\":[32],\"hostTransform\":[32],\"open\":[32],\"middleware\":[32],\"side\":[32],\"aStyles\":[32],\"aShape\":[32],\"aViewbox\":[32],\"aHeight\":[32],\"aGap\":[32],\"show\":[64],\"close\":[64],\"updateArrow\":[64]},null,{\"aGap\":[\"updateMiddleware\"],\"aHeight\":[\"updateMiddleware\"],\"flipOptions\":[\"updateMiddleware\"],\"noFlip\":[\"updateMiddleware\"],\"noShift\":[\"updateMiddleware\"],\"offsetOptions\":[\"updateMiddleware\"],\"shiftOptions\":[\"updateMiddleware\"],\"role\":[\"updateAriaHasPopup\"],\"open\":[\"setAriaExpanded\"],\"target\":[\"updateReferenceElement\"],\"trigger\":[\"updateEventListeners\"],\"middleware\":[\"updatePosition\"],\"placement\":[\"updatePosition\"],\"strategy\":[\"updatePosition\"],\"autoUpdateOptions\":[\"startAutoUpdate\"]}]]],[\"qds-icon\",[[1,\"qds-icon\",{\"name\":[1],\"library\":[1],\"svg\":[32]},null,{\"name\":[\"setIcon\"],\"library\":[\"setIcon\"]}]]],[\"qds-button\",[[81,\"qds-button\",{\"action\":[1],\"badge\":[8],\"badgeDescription\":[1,\"badge-description\"],\"badgeIndicatorStatus\":[1,\"badge-indicator-status\"],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"size\":[1],\"text\":[1],\"iconOnly\":[4,\"icon-only\"],\"disabled\":[4],\"download\":[1],\"form\":[1],\"formAction\":[1,\"formaction\"],\"formMethod\":[1,\"formmethod\"],\"formNoValidate\":[4,\"formnovalidate\"],\"formTarget\":[1,\"formtarget\"],\"href\":[1],\"labels\":[16],\"rel\":[1],\"name\":[1],\"target\":[1],\"type\":[1],\"validationMessage\":[1,\"validation-message\"],\"validity\":[16],\"value\":[1],\"willValidate\":[4,\"will-validate\"],\"tabIndex\":[32],\"tooltip\":[32]},[[0,\"click\",\"onClick\"]],{\"disabled\":[\"disabledChanged\"],\"tabindex\":[\"tabindexChanged\"],\"text\":[\"textChanged\"]}]]],[\"qds-tag_2\",[[1,\"qds-tag\",{\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"importance\":[1],\"status\":[1],\"size\":[1],\"text\":[1],\"iconDescription\":[1,\"icon-description\"],\"badge\":[4],\"badgeDescription\":[1,\"badge-description\"]}],[1,\"qds-title\",{\"alignment\":[1],\"iconName\":[1,\"icon-name\"],\"iconLibrary\":[1,\"icon-library\"],\"kicker\":[1],\"layer\":[1],\"level\":[1],\"subtitle\":[1],\"tag\":[1],\"variant\":[1]}]]],[\"qds-label\",[[1,\"qds-label\",{\"inline\":[4],\"required\":[4],\"size\":[1],\"text\":[1],\"tooltip\":[32]},null,{\"text\":[\"textChanged\"]}]]]]"), options);
|
|
25
25
|
});
|
|
26
26
|
|
|
27
27
|
//# sourceMappingURL=qds.js.map
|
|
@@ -23,8 +23,11 @@ export declare class Checkbox implements ComponentInterface {
|
|
|
23
23
|
readonly size?: Size;
|
|
24
24
|
/**
|
|
25
25
|
* The checkbox's text.
|
|
26
|
+
*
|
|
27
|
+
* Its value will also be used as the `aria-label` value when the
|
|
28
|
+
* `checkbox-only` attribute is specified.
|
|
26
29
|
*/
|
|
27
|
-
readonly text
|
|
30
|
+
readonly text: string;
|
|
28
31
|
/**
|
|
29
32
|
* Sets the checkbox's state.
|
|
30
33
|
*
|
|
@@ -113,6 +116,10 @@ export declare class Checkbox implements ComponentInterface {
|
|
|
113
116
|
* @webnative
|
|
114
117
|
*/
|
|
115
118
|
readonly willValidate: ElementInternals['willValidate'];
|
|
119
|
+
/**
|
|
120
|
+
* Whether or not the text is displayed.
|
|
121
|
+
*/
|
|
122
|
+
readonly checkboxOnly: boolean;
|
|
116
123
|
private readonly internals;
|
|
117
124
|
/**
|
|
118
125
|
* Emitted when the checkbox loses focus.
|
|
@@ -349,6 +349,14 @@ export namespace Components {
|
|
|
349
349
|
* @see https://quartz.se.com/build/components/checkbox
|
|
350
350
|
*/
|
|
351
351
|
interface QdsCheckbox {
|
|
352
|
+
/**
|
|
353
|
+
* Whether or not the text is displayed.
|
|
354
|
+
*/
|
|
355
|
+
"checkboxOnly": boolean;
|
|
356
|
+
/**
|
|
357
|
+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
|
|
358
|
+
*/
|
|
359
|
+
"checkbox-only"?: boolean;
|
|
352
360
|
/**
|
|
353
361
|
* Sets the checkbox's state.
|
|
354
362
|
* @webnative
|
|
@@ -389,9 +397,9 @@ export namespace Components {
|
|
|
389
397
|
*/
|
|
390
398
|
"size"?: Size;
|
|
391
399
|
/**
|
|
392
|
-
* The checkbox's text.
|
|
400
|
+
* The checkbox's text. Its value will also be used as the `aria-label` value when the `checkbox-only` attribute is specified.
|
|
393
401
|
*/
|
|
394
|
-
"text"
|
|
402
|
+
"text": string;
|
|
395
403
|
/**
|
|
396
404
|
* The error message that would be shown to the user if the `<qds-checkbox>` was to be checked for validity.
|
|
397
405
|
* @readonly
|
|
@@ -3041,6 +3049,14 @@ declare namespace LocalJSX {
|
|
|
3041
3049
|
* @see https://quartz.se.com/build/components/checkbox
|
|
3042
3050
|
*/
|
|
3043
3051
|
interface QdsCheckbox {
|
|
3052
|
+
/**
|
|
3053
|
+
* Whether or not the text is displayed.
|
|
3054
|
+
*/
|
|
3055
|
+
"checkboxOnly"?: boolean;
|
|
3056
|
+
/**
|
|
3057
|
+
* @deprecated use camelCase instead. Support for dash-casing will be removed in Stencil v5.
|
|
3058
|
+
*/
|
|
3059
|
+
"checkbox-only"?: boolean;
|
|
3044
3060
|
/**
|
|
3045
3061
|
* Sets the checkbox's state.
|
|
3046
3062
|
* @webnative
|
|
@@ -3093,9 +3109,9 @@ declare namespace LocalJSX {
|
|
|
3093
3109
|
*/
|
|
3094
3110
|
"size"?: Size;
|
|
3095
3111
|
/**
|
|
3096
|
-
* The checkbox's text.
|
|
3112
|
+
* The checkbox's text. Its value will also be used as the `aria-label` value when the `checkbox-only` attribute is specified.
|
|
3097
3113
|
*/
|
|
3098
|
-
"text"
|
|
3114
|
+
"text": string;
|
|
3099
3115
|
/**
|
|
3100
3116
|
* The error message that would be shown to the user if the `<qds-checkbox>` was to be checked for validity.
|
|
3101
3117
|
* @readonly
|
|
@@ -415,6 +415,10 @@
|
|
|
415
415
|
"value": "`<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\nwhen activated, like you might see in an official government paper form. A\ncheckbox allows you to select single values for submission in a form (or not)."
|
|
416
416
|
},
|
|
417
417
|
"attributes": [
|
|
418
|
+
{
|
|
419
|
+
"name": "checkbox-only",
|
|
420
|
+
"description": "Whether or not the text is displayed."
|
|
421
|
+
},
|
|
418
422
|
{
|
|
419
423
|
"name": "checked",
|
|
420
424
|
"description": "Sets the checkbox's state."
|
|
@@ -460,7 +464,7 @@
|
|
|
460
464
|
},
|
|
461
465
|
{
|
|
462
466
|
"name": "text",
|
|
463
|
-
"description": "The checkbox's text."
|
|
467
|
+
"description": "The checkbox's text.\n\nIts value will also be used as the `aria-label` value when the\n`checkbox-only` attribute is specified."
|
|
464
468
|
},
|
|
465
469
|
{
|
|
466
470
|
"name": "validation-message",
|