@quartzds/core 1.0.0-beta.39 → 1.0.0-beta.40
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/icon.js +1 -1
- package/components/label.js +1 -1
- package/components/qds-button.js +6 -3
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +4 -4
- package/components/qds-dialog.js +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +2 -2
- package/components/qds-form-message.js +2 -2
- package/components/qds-inline-link.js +1 -1
- package/components/qds-input.js +14 -4
- package/components/qds-input.js.map +1 -1
- package/components/qds-list-item.js +3 -3
- package/components/qds-nav-list-item.js +2 -2
- package/components/qds-radio.js +2 -2
- package/components/qds-select.js +4 -4
- package/components/qds-select.js.map +1 -1
- package/components/qds-standalone-link.js +1 -1
- package/components/qds-switch.js +3 -3
- package/components/qds-table-body.js +1 -1
- package/components/qds-table-cell.js +1 -1
- package/components/qds-table-head-cell.js +1 -1
- package/components/qds-table-head.js +1 -1
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-textarea.js +2 -2
- package/components/qds-title.js +2 -2
- package/components/tooltip.js +3 -3
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +6 -3
- package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +4 -4
- package/dist/cjs/qds-dialog.cjs.entry.js +1 -1
- package/dist/cjs/qds-divider.cjs.entry.js +1 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +13 -3
- package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +2 -2
- package/dist/cjs/qds-radio.cjs.entry.js +2 -2
- package/dist/cjs/qds-select.cjs.entry.js +4 -4
- package/dist/cjs/qds-select.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-standalone-link.cjs.entry.js +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +3 -3
- package/dist/cjs/qds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-textarea.cjs.entry.js +2 -2
- package/dist/cjs/qds-title.cjs.entry.js +2 -2
- package/dist/cjs/qds-tooltip.cjs.entry.js +3 -3
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +18 -0
- package/dist/docs.json +6 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-button.entry.js +6 -3
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.entry.js +4 -4
- package/dist/esm/qds-dialog.entry.js +1 -1
- package/dist/esm/qds-divider.entry.js +1 -1
- package/dist/esm/qds-dropdown.entry.js +2 -2
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +1 -1
- package/dist/esm/qds-input.entry.js +13 -3
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +1 -1
- package/dist/esm/qds-list-item.entry.js +3 -3
- package/dist/esm/qds-nav-list-item.entry.js +2 -2
- package/dist/esm/qds-radio.entry.js +2 -2
- package/dist/esm/qds-select.entry.js +4 -4
- package/dist/esm/qds-select.entry.js.map +1 -1
- package/dist/esm/qds-standalone-link.entry.js +1 -1
- package/dist/esm/qds-switch.entry.js +3 -3
- package/dist/esm/qds-table-body.entry.js +1 -1
- package/dist/esm/qds-table-cell.entry.js +1 -1
- package/dist/esm/qds-table-head-cell.entry.js +1 -1
- package/dist/esm/qds-table-head.entry.js +1 -1
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-textarea.entry.js +2 -2
- package/dist/esm/qds-title.entry.js +2 -2
- package/dist/esm/qds-tooltip.entry.js +3 -3
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/input/input.d.ts +1 -0
- package/hydrate/index.js +61 -48
- package/package.json +1 -1
- package/styles/core.css +61 -2
|
@@ -67,15 +67,15 @@ const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLEle
|
|
|
67
67
|
this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h("li", { key: '
|
|
70
|
+
return (h("li", { key: '9d3c541a6aeff5a7b010d59ba3605b0026bf08b5', class: {
|
|
71
71
|
'qds-list-item': true,
|
|
72
72
|
'qds-disabled': this.disabled,
|
|
73
73
|
'qds-selected': this.selected,
|
|
74
|
-
}, ...this.inheritedAttributes }, h("button", { key: '
|
|
74
|
+
}, ...this.inheritedAttributes }, h("button", { key: '7525e76011e15eb76f488db43243ae11ab3ad3d3', class: {
|
|
75
75
|
'qds-button': true,
|
|
76
76
|
'qds-draggable': this.draggable,
|
|
77
77
|
'qds-selected': this.selected,
|
|
78
|
-
}, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.draggable && (h("div", { class: "qds-draggable" }, h("qds-icon", { class: "qds-control-icon", library: "core", name: "draggable" }))), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("div", { key: '
|
|
78
|
+
}, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.draggable && (h("div", { class: "qds-draggable" }, h("qds-icon", { class: "qds-control-icon", library: "core", name: "draggable" }))), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), h("div", { key: '776d18c9d66f82b39e0946988200d8030f659681', class: "qds-texts" }, h("div", { key: '0f9ec37b67564218f56ee5051d07b28084a0e68b', class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext)), this.kicker !== undefined && this.kicker !== '' && (h("div", { class: "qds-kicker" }, this.kicker))), this.navigation && (h("qds-icon", { class: "qds-control-icon qds-navigation", library: "core", name: "navigation" })))));
|
|
79
79
|
}
|
|
80
80
|
static get delegatesFocus() { return true; }
|
|
81
81
|
get element() { return this; }
|
|
@@ -73,11 +73,11 @@ const NavListItem = /*@__PURE__*/ proxyCustomElement(class NavListItem extends H
|
|
|
73
73
|
this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue;
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: 'b43c94585fb8093ad6917b476552cc00e85fb349' }, h("li", { key: '91b1b6a25e70fe0dd7b65aa2390e5695c45ab8f7', class: {
|
|
77
77
|
'qds-nav-list-item': true,
|
|
78
78
|
'qds-disabled': this.disabled,
|
|
79
79
|
'qds-selected': this.selected,
|
|
80
|
-
}, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '
|
|
80
|
+
}, ref: this.liRef, ...this.inheritedAttributes }, h("button", { key: '244832cbca7a042da3b7703e3121548dd521134e', class: {
|
|
81
81
|
'qds-button': true,
|
|
82
82
|
'qds-selected': this.selected,
|
|
83
83
|
}, "data-size": this.computedSize, disabled: this.disabled, onBlur: this.onBlur, onFocus: this.onFocus, tabIndex: this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !this.shouldCollapse && this.text && this.renderText())), this.shouldCollapse && this.text && (h("qds-tooltip", { placement: "right", ref: this.tooltipRef }, this.renderText()))));
|
package/components/qds-radio.js
CHANGED
|
@@ -76,10 +76,10 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
|
|
|
76
76
|
render() {
|
|
77
77
|
return (
|
|
78
78
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
79
|
-
h("label", { key: '
|
|
79
|
+
h("label", { key: '242c28a22045b6dac35a3745449fe27ac285b44e', "aria-disabled": this.computedDisabled.toString(), class: {
|
|
80
80
|
'qds-inline': this.inline,
|
|
81
81
|
'qds-label': true,
|
|
82
|
-
}, "data-size": this.computedSize }, h("div", { key: '
|
|
82
|
+
}, "data-size": this.computedSize }, h("div", { key: '472452c4762e1c88a1f37eefd74aab1a8ed17b90', class: "qds-container" }, h("input", { key: '6ee053d9457ad52285e2bfc207a05e3fc676df89', checked: this.checked, class: "qds-radio", "data-size": this.computedSize, disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, ref: this.ref, required: this.required, type: "radio", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '2f74b20d564ab61bdf780f7305ee80459576127f', class: "qds-box", "data-size": this.computedSize }), h("qds-icon", { key: 'f1b546ee3d13db838405c1ba2d74c778d774aa35', "aria-hidden": "true", class: "qds-icon", "data-size": this.computedSize, library: "core", name: "checked" })), this.hasText && (h("qds-label", { size: this.computedSize, text: this.text }))));
|
|
83
83
|
}
|
|
84
84
|
get element() { return this; }
|
|
85
85
|
static get style() { return QdsRadioStyle0; }
|
package/components/qds-select.js
CHANGED
|
@@ -8,7 +8,7 @@ import { p as pickFocusEventAttributes, c as invariant, e as pickInputEventAttri
|
|
|
8
8
|
import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './controls.js';
|
|
9
9
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
10
10
|
|
|
11
|
-
const selectCss = "[hidden].sc-qds-select-h{display:none !important}.sc-qds-select-h{display:inline-block}.qds-container.sc-qds-select
|
|
11
|
+
const selectCss = "[hidden].sc-qds-select-h{display:none !important}.sc-qds-select-h{display:inline-block}.qds-container.sc-qds-select{box-sizing:border-box;display:grid;grid-template-areas:'select';width:inherit}.qds-icon.sc-qds-select,.qds-select.sc-qds-select,.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{color:var(--qds-theme-control-text-standard)}.qds-icon.sc-qds-select,.qds-select.sc-qds-select{grid-area:select}.qds-icon.sc-qds-select{margin-inline-end:calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );place-self:center end;pointer-events:none}.qds-select.sc-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,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );border-style:solid;border-width:var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid='true'].sc-qds-select:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select.sc-qds-select:disabled,.qds-select.sc-qds-select:disabled+.qds-icon.sc-qds-select{opacity:var(--qds-theme-disabled)}:is(.sc-qds-select-s>optgroup,.sc-qds-select-s>optgroup:not(:disabled)>option,.sc-qds-select-s>option):disabled{opacity:var(--qds-theme-disabled)}.sc-qds-select-s>optgroup{font:var(--qds-accessory-section-title)}.sc-qds-select-s>optgroup>option,.sc-qds-select-s>option{font:var(--qds-list-item-label-main)}.qds-select[data-size='small'].sc-qds-select{font:var(--qds-control-small-text)}.qds-select[data-size='small'].sc-qds-select:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n )}.qds-icon[data-size='small'].sc-qds-select{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size='standard'].sc-qds-select{font:var(--qds-control-standard-text)}.qds-select[data-size='standard'].sc-qds-select:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n )}.qds-icon[data-size='standard'].sc-qds-select{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size='large'].sc-qds-select{font:var(--qds-control-large-text)}.qds-select[data-size='large'].sc-qds-select:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n )}.qds-icon[data-size='large'].sc-qds-select{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring.sc-qds-select{border-radius:max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );grid-area:select;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(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );height:calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n )}.qds-select.sc-qds-select:focus-visible~.qds-focus-ring.sc-qds-select{visibility:visible}";
|
|
12
12
|
const QdsSelectStyle0 = selectCss;
|
|
13
13
|
|
|
14
14
|
const throwError = () => {
|
|
@@ -197,12 +197,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
|
|
|
197
197
|
this.selectedIndex = this.select.selectedIndex;
|
|
198
198
|
}
|
|
199
199
|
render() {
|
|
200
|
-
return (h("div", { key: '
|
|
200
|
+
return (h("div", { key: '785922c3e555015809198864a21d73f294ce262d', class: {
|
|
201
201
|
'qds-container': true,
|
|
202
202
|
'qds-multiple': this.multiple ?? false,
|
|
203
|
-
}, "data-size": this.computedSize }, h("select", { key: '
|
|
203
|
+
}, "data-size": this.computedSize }, h("select", { key: '9338d5d68b76e81ad44c145660f9295cf91149d0', "aria-invalid": this.element.matches(':invalid').toString(), autoComplete: this.autoComplete,
|
|
204
204
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
205
|
-
autoFocus: this.autoFocus, class: "qds-select", "data-size": this.computedSize, disabled: this.computedDisabled, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, ref: this.ref, required: this.required, ...this.inheritedAttributes }, h("slot", { key: '
|
|
205
|
+
autoFocus: this.autoFocus, class: "qds-select", "data-size": this.computedSize, disabled: this.computedDisabled, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, ref: this.ref, required: this.required, ...this.inheritedAttributes }, h("slot", { key: '48164f56c3cb0bf5d7cbaea9d819baffaa28018e' })), this.multiple !== true && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: "core", name: "dropdown" })), h("div", { key: 'f2c1634f00719303ce7e54f9f7901c1d0f7277ad', class: "qds-focus-ring" })));
|
|
206
206
|
}
|
|
207
207
|
defineGetter(p, get) {
|
|
208
208
|
Object.defineProperty(this.element, p, { enumerable: true, get });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=scoped","src/components/select/select.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}\n\n.qds-container,\n.qds-select {\n height: 100%;\n}\n\n.qds-container {\n align-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n\n &.qds-multiple {\n align-content: initial;\n }\n}\n\n.qds-icon,\n.qds-select,\n::slotted(optgroup),\n::slotted(optgroup > option),\n::slotted(option) {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-select {\n grid-area: select;\n}\n\n.qds-icon {\n justify-self: end;\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n pointer-events: none;\n}\n\n.qds-select {\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 margin: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\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 &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\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 {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n // FIXME: Should be `shadow: { delegatesFocus: true }` instead.\n scoped: true,\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Specify whether the select should have focus when the page loads.\n *\n * @webnative\n */\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /**\n * Prevents the select 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 select 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-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 select.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly element!: HTMLQdsSelectElement\n\n @State() private inheritedAttributes: Attributes = {}\n\n private savedTabindex?: string\n\n private select?: HTMLSelectElement\n\n private get computedDisabled(): boolean {\n return (\n (this.element.matches(':disabled') || (this.disabled ?? false)) &&\n this.element.getAttribute('disabled') !== 'false'\n )\n }\n\n private get computedOptions(): HTMLSelectElement['options'] {\n invariant(this.select)\n\n return this.select.options\n }\n\n private 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 private get computedType(): HTMLSelectElement['type'] {\n invariant(this.select)\n\n return this.select.type\n }\n\n private get computedValue(): string {\n return this.value ?? ''\n }\n\n private get computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.select)\n\n return this.select.selectedOptions\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedDisabled) {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n } else {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n }\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.select)\n\n this.select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(value: string): void {\n if (this.computedDisabled) this.savedTabindex = value\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: value,\n }\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.select)\n\n this.select.required = this.required ?? false\n\n if (this.select.validity.valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.select)\n else\n this.internals.setValidity(\n this.select.validity,\n this.select.validationMessage,\n this.select,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n invariant(this.select)\n\n this.select.value = this.computedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) event.stopImmediatePropagation()\n }\n\n public componentWillLoad(): void {\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 this.defineGetter('checkValidity', () => this.checkValidity)\n this.defineGetter('reportValidity', () => this.reportValidity)\n this.defineGetter('setCustomValidity', () => this.setCustomValidity)\n\n this.defineGetter('type', () => this.computedType)\n this.defineGetter('options', () => this.computedOptions)\n this.defineGetter('length', () => this.computedOptions.length)\n this.defineGetter('addItem', () => this.addItem)\n this.defineGetter('removeItem', () => this.removeItem)\n this.defineGetter('item', () => this.item)\n this.defineGetter('namedItem', () => this.namedItem)\n this.defineGetter('selectedOptions', () => this.computedSelectedOptions)\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public componentDidLoad(): void {\n invariant(this.select)\n\n this.validationChanged()\n this.selectedIndex = this.select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.computedSize}\n >\n <select\n aria-invalid={this.element.matches(':invalid').toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n ref={this.ref}\n required={this.required}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <slot />\n </select>\n {this.multiple !== true && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n </div>\n )\n }\n\n private readonly ref = (select?: HTMLSelectElement): void => {\n this.select = select\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onInput = (event: InputEvent): void => {\n invariant(this.select)\n\n this.value = this.select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n private defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.element, p, { enumerable: true, get })\n }\n\n private readonly checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n private readonly reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n private readonly setCustomValidity: HTMLInputElement['setCustomValidity'] = (\n error,\n ) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n private readonly addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.select)\n\n this.select.add(element, before)\n }\n\n private readonly removeItem = (index: number): void => {\n invariant(this.select)\n\n this.select.remove(index)\n }\n\n private readonly item: HTMLSelectElement['item'] = (index) => {\n invariant(this.select)\n\n return this.select.item(index)\n }\n\n private readonly namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.select)\n\n return this.select.namedItem(name)\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=scoped","src/components/select/select.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}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select,\n::slotted(optgroup),\n::slotted(optgroup > option),\n::slotted(option) {\n color: var(--qds-theme-control-text-standard);\n}\n\n.qds-icon,\n.qds-select {\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\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 {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n inheritAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n // FIXME: Should be `shadow: { delegatesFocus: true }` instead.\n scoped: true,\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Specify whether the select should have focus when the page loads.\n *\n * @webnative\n */\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /**\n * Prevents the select 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 select 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-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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 select.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly element!: HTMLQdsSelectElement\n\n @State() private inheritedAttributes: Attributes = {}\n\n private savedTabindex?: string\n\n private select?: HTMLSelectElement\n\n private get computedDisabled(): boolean {\n return (\n (this.element.matches(':disabled') || (this.disabled ?? false)) &&\n this.element.getAttribute('disabled') !== 'false'\n )\n }\n\n private get computedOptions(): HTMLSelectElement['options'] {\n invariant(this.select)\n\n return this.select.options\n }\n\n private 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 private get computedType(): HTMLSelectElement['type'] {\n invariant(this.select)\n\n return this.select.type\n }\n\n private get computedValue(): string {\n return this.value ?? ''\n }\n\n private get computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.select)\n\n return this.select.selectedOptions\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.computedDisabled) {\n this.savedTabindex = this.inheritedAttributes.tabindex\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: undefined,\n }\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n } else {\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: this.savedTabindex,\n }\n this.internals.setFormValue(this.computedValue)\n }\n }\n\n @Watch('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.select)\n\n this.select.selectedIndex = this.selectedIndex\n }\n\n @Watch('tabindex')\n protected tabindexChanged(value: string): void {\n if (this.computedDisabled) this.savedTabindex = value\n else\n this.inheritedAttributes = {\n ...this.inheritedAttributes,\n tabindex: value,\n }\n }\n\n @Watch('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.select)\n\n this.select.required = this.required ?? false\n\n if (this.select.validity.valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.select)\n else\n this.internals.setValidity(\n this.select.validity,\n this.select.validationMessage,\n this.select,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n invariant(this.select)\n\n this.select.value = this.computedValue\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.computedDisabled) event.stopImmediatePropagation()\n }\n\n public componentWillLoad(): void {\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 this.defineGetter('checkValidity', () => this.checkValidity)\n this.defineGetter('reportValidity', () => this.reportValidity)\n this.defineGetter('setCustomValidity', () => this.setCustomValidity)\n\n this.defineGetter('type', () => this.computedType)\n this.defineGetter('options', () => this.computedOptions)\n this.defineGetter('length', () => this.computedOptions.length)\n this.defineGetter('addItem', () => this.addItem)\n this.defineGetter('removeItem', () => this.removeItem)\n this.defineGetter('item', () => this.item)\n this.defineGetter('namedItem', () => this.namedItem)\n this.defineGetter('selectedOptions', () => this.computedSelectedOptions)\n\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.element),\n ...inheritAttributes(this.element, ['tabindex']),\n }\n }\n\n public componentDidLoad(): void {\n invariant(this.select)\n\n this.validationChanged()\n this.selectedIndex = this.select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.computedSize}\n >\n <select\n aria-invalid={this.element.matches(':invalid').toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.computedSize}\n disabled={this.computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n ref={this.ref}\n required={this.required}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <slot />\n </select>\n {this.multiple !== true && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <div class=\"qds-focus-ring\" />\n </div>\n )\n }\n\n private readonly ref = (select?: HTMLSelectElement): void => {\n this.select = select\n }\n\n private readonly onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n private readonly onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n private readonly onInput = (event: InputEvent): void => {\n invariant(this.select)\n\n this.value = this.select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n private defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.element, p, { enumerable: true, get })\n }\n\n private readonly checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n private readonly reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n private readonly setCustomValidity: HTMLInputElement['setCustomValidity'] = (\n error,\n ) => {\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n private readonly addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.select)\n\n this.select.add(element, before)\n }\n\n private readonly removeItem = (index: number): void => {\n invariant(this.select)\n\n this.select.remove(index)\n }\n\n private readonly item: HTMLSelectElement['item'] = (index) => {\n invariant(this.select)\n\n return this.select.item(index)\n }\n\n private readonly namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.select)\n\n return this.select.namedItem(name)\n }\n}\n"],"version":3}
|
|
@@ -74,7 +74,7 @@ const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink ext
|
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
render() {
|
|
77
|
-
return (h("a", { key: '
|
|
77
|
+
return (h("a", { key: 'f13594720d495caef56116db11e99666f274bfbf', "aria-disabled": this.disabled.toString(), class: "qds-standalone-link", "data-importance": this.computedImportance, "data-size": this.computedSize, download: this.download, href: this.href, hrefLang: this.hreflang, onBlur: this.onBlur, onFocus: this.onFocus, referrerPolicy: this.referrerPolicy, rel: this.rel, target: this.target, ...this.inheritedAttributes, tabIndex: this.disabled ? -1 : this.computedTabIndex }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), h("div", { key: '38edc8d9bbce9b5b5268b13385f4300885ce9287' }, h("slot", { key: 'af07e90ba70786f6145132eecf3dda44b2c47973' })), h("qds-icon", { key: 'dcce83d739b36e680d0c481988022ca57c3c2c03', class: "qds-icon qds-external", library: "core", name: "external-link" }), this.importance === 'emphasized' && (h("qds-icon", { class: "qds-icon qds-chevron", library: "core", name: "next" }))));
|
|
78
78
|
}
|
|
79
79
|
static get delegatesFocus() { return true; }
|
|
80
80
|
get element() { return this; }
|
package/components/qds-switch.js
CHANGED
|
@@ -75,13 +75,13 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
|
|
|
75
75
|
render() {
|
|
76
76
|
return (
|
|
77
77
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
78
|
-
h("label", { key: '
|
|
78
|
+
h("label", { key: 'a4d64938ddb71916ae33269fe282475ed904473c', "aria-disabled": this.computedDisabled.toString(), class: {
|
|
79
79
|
'qds-inline': this.inline,
|
|
80
80
|
'qds-label': true,
|
|
81
81
|
}, "data-size": this.computedSize }, this.textUnchecked !== undefined && this.textUnchecked !== '' && (h("qds-label", { class: "qds-unchecked-text", size: this.size, text: this.textUnchecked })), this.iconUncheckedName !== undefined &&
|
|
82
|
-
this.iconUncheckedName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconUncheckedLibrary, name: this.iconUncheckedName })), h("input", { key: '
|
|
82
|
+
this.iconUncheckedName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconUncheckedLibrary, name: this.iconUncheckedName })), h("input", { key: '50d37d9fbdf7b78b07ca5575d8a49e329c869624',
|
|
83
83
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
84
|
-
autoFocus: this.autoFocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '
|
|
84
|
+
autoFocus: this.autoFocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, form: this.form, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '91a4ead355ee418d347791ea6faffa622d13f52e', class: "qds-track", "data-size": this.computedSize }, h("div", { key: 'a0e41941aa3b102f7599bf6775f9b2dfb99b006e', class: "qds-knob", "data-size": this.computedSize })), this.iconCheckedName !== undefined && this.iconCheckedName !== '' && (h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconCheckedLibrary, name: this.iconCheckedName })), this.textChecked !== undefined && this.textChecked !== '' && (h("qds-label", { size: this.size, text: this.textChecked }))));
|
|
85
85
|
}
|
|
86
86
|
get element() { return this; }
|
|
87
87
|
static get style() { return QdsSwitchStyle0; }
|
|
@@ -20,7 +20,7 @@ const TableBody = /*@__PURE__*/ proxyCustomElement(class TableBody extends HTMLE
|
|
|
20
20
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h("tbody", { key: '
|
|
23
|
+
return (h("tbody", { key: '41b3e864c385ffcd3b294a36dcde5ce78c65dae7', class: "qds-table-body", ...this.inheritedAttributes }, h("slot", { key: 'bd110976292d4e36ea3b256b8f0dd291201f5f8f' })));
|
|
24
24
|
}
|
|
25
25
|
get element() { return this; }
|
|
26
26
|
static get style() { return QdsTableBodyStyle0; }
|
|
@@ -22,7 +22,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
|
|
|
22
22
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h("td", { key: '
|
|
25
|
+
return (h("td", { key: '6040a3347055aa8ade729aeb8e4717d3e569e744', class: "qds-table-cell", colSpan: this.colSpan, rowSpan: this.rowSpan, ...this.inheritedAttributes }, h("slot", { key: '9f715087f957dba7ec810eadd3147ac8a531f1a0' })));
|
|
26
26
|
}
|
|
27
27
|
get element() { return this; }
|
|
28
28
|
static get style() { return QdsTableCellStyle0; }
|
|
@@ -24,7 +24,7 @@ const TableHeadCell = /*@__PURE__*/ proxyCustomElement(class TableHeadCell exten
|
|
|
24
24
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return (h("th", { key: '
|
|
27
|
+
return (h("th", { key: '443eafdb04e649feeb82e53c769195124a6dc98e', class: "qds-table-head-cell", abbr: this.abbr, colSpan: this.colSpan, rowSpan: this.rowSpan, scope: this.scope, ...this.inheritedAttributes }, h("slot", { key: '7eaab134c2d00f4dd22e045ffeac8e8df8a62953' })));
|
|
28
28
|
}
|
|
29
29
|
get element() { return this; }
|
|
30
30
|
static get style() { return QdsTableHeadCellStyle0; }
|
|
@@ -20,7 +20,7 @@ const TableHead = /*@__PURE__*/ proxyCustomElement(class TableHead extends HTMLE
|
|
|
20
20
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h("thead", { key: '
|
|
23
|
+
return (h("thead", { key: '88107b5dfc49da9c1986f9a0d120cb06c4b66731', class: "qds-table-head", ...this.inheritedAttributes }, h("slot", { key: 'ad45a5a9889702c2e5cd0921b64a74225846c595' })));
|
|
24
24
|
}
|
|
25
25
|
get element() { return this; }
|
|
26
26
|
static get style() { return QdsTableHeadStyle0; }
|
|
@@ -20,7 +20,7 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
|
|
|
20
20
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h("tr", { key: '
|
|
23
|
+
return (h("tr", { key: 'a38446043aa6cc79e46311593ddebebe0de08dc3', class: "qds-table-row", ...this.inheritedAttributes }, h("slot", { key: '6a813819e3ea4e172b7ffaf243c365e8045f5065' })));
|
|
24
24
|
}
|
|
25
25
|
get element() { return this; }
|
|
26
26
|
static get style() { return QdsTableRowStyle0; }
|
package/components/qds-table.js
CHANGED
|
@@ -20,7 +20,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
|
|
|
20
20
|
this.inheritedAttributes = inheritAriaAttributes(this.element);
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return (h("table", { key: '
|
|
23
|
+
return (h("table", { key: 'd62a61d5222bbe0a2388b4c70ac78dbd9276ad1b', class: "qds-table", ...this.inheritedAttributes }, h("slot", { key: 'f9f230fe08a3ee5603ab0cde6d30dffdcf28183e' })));
|
|
24
24
|
}
|
|
25
25
|
get element() { return this; }
|
|
26
26
|
static get style() { return QdsTableStyle0; }
|
|
@@ -192,9 +192,9 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends HTMLEle
|
|
|
192
192
|
this.selectionEnd = this.textarea.selectionEnd;
|
|
193
193
|
}
|
|
194
194
|
render() {
|
|
195
|
-
return (h("textarea", { key: '
|
|
195
|
+
return (h("textarea", { key: '4a327f9c61562610a3b2bc3c30fa4a8f9388831f', "aria-invalid": this.element.matches(':invalid').toString(), autoCapitalize: this.autoCapitalize, autoComplete: this.autoComplete,
|
|
196
196
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
197
|
-
autoFocus: this.autoFocus, class: "qds-textarea", cols: this.cols, "data-size": this.size ?? 'standard', disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, rows: this.rows, spellcheck: this.spellCheck, wrap: this.wrap, ...this.inheritedAttributes }, h("slot", { key: '
|
|
197
|
+
autoFocus: this.autoFocus, class: "qds-textarea", cols: this.cols, "data-size": this.size ?? 'standard', disabled: this.disabled, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: this.ref, rows: this.rows, spellcheck: this.spellCheck, wrap: this.wrap, ...this.inheritedAttributes }, h("slot", { key: '5a9743f735ea6b80c598f435611c63665dd98fc9' })));
|
|
198
198
|
}
|
|
199
199
|
defineGetter(p, get) {
|
|
200
200
|
Object.defineProperty(this.element, p, { enumerable: true, get });
|
package/components/qds-title.js
CHANGED
|
@@ -36,12 +36,12 @@ const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
|
|
|
36
36
|
render() {
|
|
37
37
|
const layer = `qds-${this.layer}`;
|
|
38
38
|
const level = `qds-${this.level ?? 'root'}`;
|
|
39
|
-
return (h("hgroup", { key: '
|
|
39
|
+
return (h("hgroup", { key: 'a52c3931d4e8b7a1f6b9dae2909456f1fc8c3bfb', class: {
|
|
40
40
|
[layer]: true,
|
|
41
41
|
[level]: true,
|
|
42
42
|
'qds-titles': true,
|
|
43
43
|
'qds-has-icon': this.iconName !== undefined && this.iconName !== '',
|
|
44
|
-
}, ...this.inheritedAttributes }, h(this.tag, { key: '
|
|
44
|
+
}, ...this.inheritedAttributes }, h(this.tag, { key: 'f3f8f4b80070361739e7c0606f8563fe453ed162', class: "qds-title" }, h("slot", { key: '5772557e6e0b982d408309aff12a725c1ec2a71d' })), this.hasSubtitle && h("p", { class: "qds-subtitle" }, this.subtitle), this.hasKicker && h("p", { class: "qds-kicker" }, this.kicker), this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { class: "qds-icon", name: this.iconName, library: this.iconLibrary }))));
|
|
45
45
|
}
|
|
46
46
|
get element() { return this; }
|
|
47
47
|
static get style() { return QdsTitleStyle0; }
|
package/components/tooltip.js
CHANGED
|
@@ -210,14 +210,14 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
210
210
|
this.disconnectReferenceElement();
|
|
211
211
|
}
|
|
212
212
|
render() {
|
|
213
|
-
return (h(Host, { key: '
|
|
213
|
+
return (h(Host, { key: 'a404b6b930dc2d2096f38494dd04462dbeef0604', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
214
214
|
position: this.hostPosition,
|
|
215
215
|
transform: this.hostTransform,
|
|
216
|
-
} }, h("slot", { key: '
|
|
216
|
+
} }, h("slot", { key: 'cc0f4702e3870a1de8cee52ba9441993616d594d' }), h("svg", { key: 'd842a47e290ae21a1f157d029bcf144d61ddd38d', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
217
217
|
left: this.aX,
|
|
218
218
|
top: this.aY,
|
|
219
219
|
display: this.aDisplay,
|
|
220
|
-
} }, h("path", { key: '
|
|
220
|
+
} }, h("path", { key: '1c91e0f1b15ad2e45a145d102797201a65412c31', class: "qds-arrow", d: this.aShape }))));
|
|
221
221
|
}
|
|
222
222
|
async handleFocus() {
|
|
223
223
|
if (!this.disabled)
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -11,7 +11,7 @@ const index = require('./index-584d4de9.js');
|
|
|
11
11
|
|
|
12
12
|
const defineCustomElements = (win, options) => {
|
|
13
13
|
if (typeof window === 'undefined') return undefined;
|
|
14
|
-
return index.bootstrapLazy([["qds-checkbox.cjs",[[81,"qds-checkbox",{"inline":[4],"size":[1],"text":[1],"autoFocus":[4,"autofocus"],"checked":[1028],"disabled":[4],"form":[1],"indeterminate":[1028],"name":[1],"required":[4],"validationMessage":[1,"validation-message"],"validity":[16],"value":[8],"willValidate":[4,"will-validate"],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"checked":["checkedChanged"],"disabled":["disabledChanged"],"tabindex":["tabindexChanged"],"value":["valueChanged"]}]]],["qds-nav-list-item.cjs",[[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-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[1],"text":[1],"checked":[1028],"disabled":[4],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[1,"icon-checked-name"],"iconCheckedLibrary":[1,"icon-checked-library"],"iconUncheckedName":[1,"icon-unchecked-name"],"iconUncheckedLibrary":[1,"icon-unchecked-library"],"size":[1],"textChecked":[1,"text-checked"],"textUnchecked":[1,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1028],"disabled":[4],"form":[1],"name":[1],"value":[8]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"action":[1],"badge":[1],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"importance":[1],"size":[1],"text":[1],"variant":[1],"disabled":[4],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]},[[0,"click","onClick"]]]]],["qds-form-message.cjs",[[1,"qds-form-message",{"inline":[4],"size":[1],"status":[1],"text":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[4],"importance":[1],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-list-item.cjs",[[17,"qds-list-item",{"disabled":[4],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"navigation":[4],"kicker":[1],"size":[1],"selected":[4],"subtext":[1],"text":[1],"draggable":[32],"tabIndex":[32]},[[0,"click","onClick"]],{"draggable":["draggableChanged"],"tabindex":["tabindexChanged"]}]]],["qds-select.cjs",[[70,"qds-select",{"size":[1],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"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"],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"disabled":["disabledChanged"],"selectedIndex":["selectedIndexChanged"],"tabindex":["tabindexChanged"],"required":["validationChanged"],"value":["validationChanged","valueChanged"]}]]],["qds-standalone-link.cjs",[[17,"qds-standalone-link",{"disabled":[4],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"importance":[1],"size":[1],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dialog.cjs",[[1,"qds-dialog",{"open":[1540],"show":[64],"close":[64]},null,{"open":["openChanged"]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[1]}]]],["qds-dropdown.cjs",[[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],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]],{"target":["updateReferenceElement"],"flipOptions":["updateMiddleware"],"noFlip":["updateMiddleware"],"noShift":["updateMiddleware"],"offsetOptions":["updateMiddleware"],"shiftOptions":["updateMiddleware"],"placement":["updatePosition"],"strategy":["updatePosition"],"autoUpdateOptions":["startAutoUpdate"]}]]],["qds-input.cjs",[[81,"qds-input",{"size":[1],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[4],"enterkeyhint":[1],"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"],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"validationMessage":[1,"validation-message"],"validity":[16],"value":[1032],"willValidate":[4,"will-validate"],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"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-table.cjs",[[1,"qds-table"]]],["qds-table-body.cjs",[[1,"qds-table-body"]]],["qds-table-cell.cjs",[[1,"qds-table-cell",{"colSpan":[2,"colspan"],"rowSpan":[2,"rowspan"]}]]],["qds-table-head.cjs",[[1,"qds-table-head"]]],["qds-table-head-cell.cjs",[[1,"qds-table-head-cell",{"abbr":[1],"colSpan":[2,"colspan"],"rowSpan":[2,"rowspan"],"scope":[1]}]]],["qds-table-row.cjs",[[1,"qds-table-row"]]],["qds-textarea.cjs",[[70,"qds-textarea",{"size":[1],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"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"],"spellCheck":[4,"spellcheck"],"validationMessage":[1,"validation-message"],"validity":[16],"value":[1032],"willValidate":[4,"will-validate"],"wrap":[1],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"disabled":["disabledChanged"],"selectionDirection":["selectionDirectionChanged"],"selectionEnd":["selectionEndChanged"],"selectionStart":["selectionStartChanged"],"tabindex":["tabindexChanged"],"maxLength":["validationChanged"],"minLength":["validationChanged"],"required":["validationChanged"],"value":["validationChanged","valueChanged"]}]]],["qds-tooltip.cjs",[[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],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]],{"aGap":["updateMiddleware"],"aHeight":["updateMiddleware"],"flipOptions":["updateMiddleware"],"noFlip":["updateMiddleware"],"noShift":["updateMiddleware"],"offsetOptions":["updateMiddleware"],"shiftOptions":["updateMiddleware"],"target":["updateReferenceElement"],"middleware":["updatePosition"],"placement":["updatePosition"],"strategy":["updatePosition"],"autoUpdateOptions":["startAutoUpdate"]}]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[1],"text":[1]}]]],["qds-icon.cjs",[[1,"qds-icon",{"name":[1],"library":[1],"svg":[32]},null,{"name":["setIcon"],"library":["setIcon"]}]]]], options);
|
|
14
|
+
return index.bootstrapLazy([["qds-checkbox.cjs",[[81,"qds-checkbox",{"inline":[4],"size":[1],"text":[1],"autoFocus":[4,"autofocus"],"checked":[1028],"disabled":[4],"form":[1],"indeterminate":[1028],"name":[1],"required":[4],"validationMessage":[1,"validation-message"],"validity":[16],"value":[8],"willValidate":[4,"will-validate"],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"checked":["checkedChanged"],"disabled":["disabledChanged"],"tabindex":["tabindexChanged"],"value":["valueChanged"]}]]],["qds-nav-list-item.cjs",[[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-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[1],"text":[1],"checked":[1028],"disabled":[4],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[1,"icon-checked-name"],"iconCheckedLibrary":[1,"icon-checked-library"],"iconUncheckedName":[1,"icon-unchecked-name"],"iconUncheckedLibrary":[1,"icon-unchecked-library"],"size":[1],"textChecked":[1,"text-checked"],"textUnchecked":[1,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1028],"disabled":[4],"form":[1],"name":[1],"value":[8]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"action":[1],"badge":[1],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"importance":[1],"size":[1],"text":[1],"variant":[1],"disabled":[4],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]},[[0,"click","onClick"]]]]],["qds-form-message.cjs",[[1,"qds-form-message",{"inline":[4],"size":[1],"status":[1],"text":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[4],"importance":[1],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-list-item.cjs",[[17,"qds-list-item",{"disabled":[4],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"navigation":[4],"kicker":[1],"size":[1],"selected":[4],"subtext":[1],"text":[1],"draggable":[32],"tabIndex":[32]},[[0,"click","onClick"]],{"draggable":["draggableChanged"],"tabindex":["tabindexChanged"]}]]],["qds-select.cjs",[[70,"qds-select",{"size":[1],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"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"],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"disabled":["disabledChanged"],"selectedIndex":["selectedIndexChanged"],"tabindex":["tabindexChanged"],"required":["validationChanged"],"value":["validationChanged","valueChanged"]}]]],["qds-standalone-link.cjs",[[17,"qds-standalone-link",{"disabled":[4],"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"importance":[1],"size":[1],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[1,"icon-name"],"iconLibrary":[1,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dialog.cjs",[[1,"qds-dialog",{"open":[1540],"show":[64],"close":[64]},null,{"open":["openChanged"]}]]],["qds-divider.cjs",[[1,"qds-divider",{"importance":[1]}]]],["qds-dropdown.cjs",[[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],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]],{"target":["updateReferenceElement"],"flipOptions":["updateMiddleware"],"noFlip":["updateMiddleware"],"noShift":["updateMiddleware"],"offsetOptions":["updateMiddleware"],"shiftOptions":["updateMiddleware"],"placement":["updatePosition"],"strategy":["updatePosition"],"autoUpdateOptions":["startAutoUpdate"]}]]],["qds-input.cjs",[[81,"qds-input",{"size":[1],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[4],"enterkeyhint":[1],"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"],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"validationMessage":[1,"validation-message"],"validity":[16],"value":[1032],"willValidate":[4,"will-validate"],"inheritedAttributes":[32]},[[0,"click","onClick"],[0,"keydown","handleKeyDown"]],{"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-table.cjs",[[1,"qds-table"]]],["qds-table-body.cjs",[[1,"qds-table-body"]]],["qds-table-cell.cjs",[[1,"qds-table-cell",{"colSpan":[2,"colspan"],"rowSpan":[2,"rowspan"]}]]],["qds-table-head.cjs",[[1,"qds-table-head"]]],["qds-table-head-cell.cjs",[[1,"qds-table-head-cell",{"abbr":[1],"colSpan":[2,"colspan"],"rowSpan":[2,"rowspan"],"scope":[1]}]]],["qds-table-row.cjs",[[1,"qds-table-row"]]],["qds-textarea.cjs",[[70,"qds-textarea",{"size":[1],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"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"],"spellCheck":[4,"spellcheck"],"validationMessage":[1,"validation-message"],"validity":[16],"value":[1032],"willValidate":[4,"will-validate"],"wrap":[1],"inheritedAttributes":[32]},[[0,"click","onClick"]],{"disabled":["disabledChanged"],"selectionDirection":["selectionDirectionChanged"],"selectionEnd":["selectionEndChanged"],"selectionStart":["selectionStartChanged"],"tabindex":["tabindexChanged"],"maxLength":["validationChanged"],"minLength":["validationChanged"],"required":["validationChanged"],"value":["validationChanged","valueChanged"]}]]],["qds-tooltip.cjs",[[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],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]],{"aGap":["updateMiddleware"],"aHeight":["updateMiddleware"],"flipOptions":["updateMiddleware"],"noFlip":["updateMiddleware"],"noShift":["updateMiddleware"],"offsetOptions":["updateMiddleware"],"shiftOptions":["updateMiddleware"],"target":["updateReferenceElement"],"middleware":["updatePosition"],"placement":["updatePosition"],"strategy":["updatePosition"],"autoUpdateOptions":["startAutoUpdate"]}]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[1],"text":[1]}]]],["qds-icon.cjs",[[1,"qds-icon",{"name":[1],"library":[1],"svg":[32]},null,{"name":["setIcon"],"library":["setIcon"]}]]]], options);
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
exports.setNonce = index.setNonce;
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
10
10
|
const index = require('./index-584d4de9.js');
|
|
11
11
|
const helpers = require('./helpers-cc2fda81.js');
|
|
12
12
|
|
|
13
|
-
const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:var(--qds-internal-white-space-property, nowrap);width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-
|
|
13
|
+
const buttonCss = ":host([hidden]){display:none !important}:host{display:inline-block}.qds-action{transform:scaleX(var(--qds-direction-factor, 1))}.qds-container{display:grid;grid-template-areas:'button'}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:button;justify-content:center;outline:none;padding-block:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-user-select:none;user-select:none;white-space:var(--qds-internal-white-space-property, nowrap);width:100%}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-focus-ring{border-radius:max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );grid-area:button;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(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );height:calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n )}.qds-badge{border-radius:var(--qds-control-rounded-border-radius);font:var(--qds-badge-text);height:var(--qds-badge-height);padding-inline:var(--qds-badge-padding-horizontal)}.qds-icon{flex-shrink:0}[aria-disabled='true']{opacity:var(--qds-theme-disabled);pointer-events:none}[data-size='small']{font:var(--qds-control-small-text)}.qds-button[data-size='small']{gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-button.qds-icon-only[data-size='small']{padding-inline:0;width:var(--qds-control-small-height)}.qds-icon[data-size='small']{font-size:var(--qds-control-small-icon-size)}[data-size='standard']{font:var(--qds-control-standard-text)}.qds-button[data-size='standard']{gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-button.qds-icon-only[data-size='standard']{padding-inline:0;width:var(--qds-control-standard-height)}.qds-icon[data-size='standard']{font-size:var(--qds-control-standard-icon-size)}[data-size='large']{font:var(--qds-control-large-text)}.qds-button[data-size='large']{gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-button.qds-icon-only[data-size='large']{padding-inline:0;width:var(--qds-control-large-height)}.qds-icon[data-size='large']{font-size:var(--qds-control-large-icon-size)}[data-importance='subdued']{color:var(--qds-theme-link-standard-default)}.qds-badge[data-importance='subdued']{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-button[data-importance='subdued']{border-block-end:var(--qds-control-border-width) solid transparent;padding-inline:0}.qds-button[data-importance='subdued']:hover{border-block-end:var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:hover .qds-badge{background-color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance='subdued']:active{border-block-end:var(--qds-control-border-width) solid\n var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:active .qds-badge{background-color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance='subdued']:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance='subdued']{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance='subdued']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance='subdued']:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance='standard']{color:var(--qds-theme-control-text-standard)}.qds-badge[data-importance='standard']{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-button[data-importance='standard']{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width)}.qds-button[data-importance='standard']:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:hover .qds-badge{color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance='standard']:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance='standard']:active .qds-badge{color:var(--qds-theme-interactive-background-pressed)}.qds-badge[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-button[data-importance='emphasized']{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance='emphasized']:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:hover .qds-badge{color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance='emphasized']:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance='emphasized']:active .qds-badge{color:var(--qds-theme-signature-color-pressed)}.qds-badge[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-contrast);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-variant='destructive']{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-variant='destructive']:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:hover .qds-badge{color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-variant='destructive']:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='destructive']:active .qds-badge{color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-variant='hero']{border-radius:var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n );font:var(--qds-control-hero-text);gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);white-space:normal}.qds-button[data-variant='hero'][data-importance='standard']{padding-block:calc(\n var(--qds-control-hero-padding-auto-height) -\n var(\n --qds-control-border-width-block-start,\n var(--qds-control-border-width)\n )\n )\n calc(\n var(--qds-control-hero-padding-auto-height) -\n var(\n --qds-control-border-width-block-end,\n var(--qds-control-border-width)\n )\n )}.qds-button[data-variant='hero']:not([data-importance='subdued']){padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-variant='hero']{height:var(--qds-control-hero-height);padding:0;width:var(--qds-control-hero-height)}.qds-focus-ring[data-variant='hero']{border-radius:max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-hero-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-hero-border-radius)\n )\n )}.qds-icon[data-variant='hero']{font-size:var(--qds-control-hero-icon-size)}.qds-button:focus-visible~.qds-focus-ring{visibility:visible}";
|
|
14
14
|
const QdsButtonStyle0 = buttonCss;
|
|
15
15
|
|
|
16
16
|
const Button = class {
|
|
@@ -137,10 +137,13 @@ const Button = class {
|
|
|
137
137
|
}
|
|
138
138
|
render() {
|
|
139
139
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
140
|
-
return (index.h(Tag, { key: '
|
|
140
|
+
return (index.h("div", { key: 'a4e21a38ce15a8447c131548ed138e12aeaadc7a', class: "qds-container" }, index.h(Tag, { key: '87128f1a0c778c0bda43aab708707425a74f715f', "aria-disabled": this.computedDisabled.toString(), class: {
|
|
141
141
|
'qds-button': true,
|
|
142
142
|
'qds-icon-only': this.iconOnly,
|
|
143
|
-
}, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { class: "qds-icon", "data-size": this.computedSize,
|
|
143
|
+
}, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant, disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, onBlur: this.onBlur, onFocus: this.onFocus, rel: Tag === 'a' ? 'noreferrer noopener' : undefined, role: Tag === 'a' ? 'button' : undefined, tabIndex: this.computedDisabled ? -1 : this.computedTabIndex, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : this.buttonType, value: Tag === 'a' ? undefined : this.value, ...this.inheritedAttributes }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { class: "qds-icon", "data-size": this.computedSize, library: this.iconLibrary, name: this.iconName })), this.text, this.badge !== undefined && this.badge !== '' && (index.h("div", { class: "qds-badge", "data-importance": this.computedImportance, "data-variant": this.variant }, this.badge)), this.computedAction !== undefined && (index.h("qds-icon", { class: "qds-icon qds-action", library: "core", name: this.computedAction }))), index.h("div", { key: '54277f5f5c4cfa4c52e85a34fe80791b8464167d', class: {
|
|
144
|
+
'qds-focus-ring': true,
|
|
145
|
+
'qds-icon-only': this.iconOnly,
|
|
146
|
+
}, "data-importance": this.computedImportance, "data-size": this.computedSize, "data-variant": this.variant })));
|
|
144
147
|
}
|
|
145
148
|
static get delegatesFocus() { return true; }
|
|
146
149
|
get element() { return index.getElement(this); }
|