@quartzds/core 1.0.0-beta.113 → 1.0.0-beta.115
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/CHANGELOG.md +50 -0
- package/components/index.d.ts +2 -2
- package/components/index.js +2 -2
- package/components/{p-CB1GgGmx.js → p--vOFwWP9.js} +4 -4
- package/components/{p-CB1GgGmx.js.map → p--vOFwWP9.js.map} +1 -1
- package/{dist/esm/helpers-CDZIefsI.js → components/p-Bs-thw7N.js} +24 -8
- package/components/{p-CzJQDr3N.js.map → p-Bs-thw7N.js.map} +1 -1
- package/components/{p-9fm05BrQ.js → p-D6kEwmWw.js} +16 -9
- package/components/p-D6kEwmWw.js.map +1 -0
- package/components/{p-jzP-octC.js → p-DG13nyez.js} +13 -13
- package/components/p-DG13nyez.js.map +1 -0
- package/components/{p-oYV2Vg_F.js → p-DHsQa63F.js} +6 -6
- package/components/{p-oYV2Vg_F.js.map → p-DHsQa63F.js.map} +1 -1
- package/components/{p-GGIVf4ry.js → p-DQ0iArwG.js} +12 -12
- package/components/p-DQ0iArwG.js.map +1 -0
- package/components/{p-Cin_uEzc.js → p-DRvYbv4e.js} +6 -6
- package/components/{p-Cin_uEzc.js.map → p-DRvYbv4e.js.map} +1 -1
- package/components/p-DabDNFFa.js +112 -0
- package/components/p-DabDNFFa.js.map +1 -0
- package/components/{p-CPvTGxdE.js → p-DeLdhUte.js} +9 -9
- package/components/p-DeLdhUte.js.map +1 -0
- package/components/{p-CK_Yxg3A.js → p-Df4zqimN.js} +11 -9
- package/components/p-Df4zqimN.js.map +1 -0
- package/components/{p-Dqnx5weA.js → p-Dmky30vp.js} +3 -3
- package/components/{p-Dqnx5weA.js.map → p-Dmky30vp.js.map} +1 -1
- package/components/{p-CSR3ZAEX.js → p-I5PkZmy8.js} +4 -4
- package/components/{p-CSR3ZAEX.js.map → p-I5PkZmy8.js.map} +1 -1
- package/components/qds-action-item.js +7 -7
- package/components/qds-action-item.js.map +1 -1
- package/components/{qds-nav-list-item.d.ts → qds-avatar-media.d.ts} +4 -4
- package/components/qds-avatar-media.js +14 -0
- package/components/qds-avatar-media.js.map +1 -0
- package/components/qds-breadcrumb-item.js +7 -7
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +11 -11
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +26 -7
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +5 -5
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +10 -8
- package/components/qds-icon-button.js.map +1 -1
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +43 -13
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +6 -6
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +22 -16
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +3 -3
- package/components/qds-loader.js.map +1 -1
- package/components/qds-menu-item.js +9 -9
- package/components/qds-menu-item.js.map +1 -1
- package/components/qds-mini-button.js +1 -1
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +1 -1
- package/components/qds-select.js +5 -5
- package/components/qds-standalone-link.js +43 -13
- package/components/qds-standalone-link.js.map +1 -1
- package/components/qds-switch.js +5 -5
- package/components/qds-tab.js +11 -11
- package/components/qds-tab.js.map +1 -1
- package/components/qds-tabbar.js +8 -8
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +2 -2
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +3 -3
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/{helpers-D--0PcCT.js → helpers-BH_NFaV-.js} +24 -8
- package/dist/cjs/helpers-BH_NFaV-.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/{library-CF8K3bIq.js → library-C_NJJiFI.js} +15 -8
- package/dist/cjs/library-C_NJJiFI.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +5 -5
- package/dist/cjs/qds-action-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -0
- package/dist/cjs/{qds-checkbox_2.cjs.entry.js → qds-avatar-media_3.cjs.entry.js} +79 -8
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +5 -5
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +8 -8
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +8 -8
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +23 -4
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +4 -4
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-button.cjs.entry.js +8 -6
- package/dist/cjs/qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +2 -2
- package/dist/cjs/qds-inline-link.cjs.entry.js +39 -8
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +4 -4
- package/dist/cjs/qds-label.cjs.entry.js +9 -9
- package/dist/cjs/qds-label.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +10 -10
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-loader.cjs.entry.js +2 -2
- package/dist/cjs/qds-loader.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +6 -6
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +4 -4
- package/dist/cjs/qds-standalone-link.cjs.entry.js +39 -8
- package/dist/cjs/qds-standalone-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-switch.cjs.entry.js +4 -4
- package/dist/cjs/qds-tab.cjs.entry.js +7 -7
- package/dist/cjs/qds-tab.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +5 -5
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -2
- 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-tag_2.cjs.entry.js +6 -6
- package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +311 -367
- package/dist/docs.json +223 -331
- package/{components/p-CzJQDr3N.js → dist/esm/helpers-t9FQ7Vl_.js} +24 -8
- package/dist/esm/helpers-t9FQ7Vl_.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/{library-B2PJ_ZJB.js → library-C7n28y3j.js} +15 -8
- package/dist/esm/library-C7n28y3j.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +5 -5
- package/dist/esm/qds-action-item.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -0
- package/dist/esm/{qds-checkbox_2.entry.js → qds-avatar-media_3.entry.js} +79 -9
- package/dist/esm/qds-breadcrumb-item.entry.js +5 -5
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +8 -8
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +8 -8
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +23 -4
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-dropdown.entry.js +1 -1
- package/dist/esm/qds-form-message.entry.js +4 -4
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-button.entry.js +8 -6
- package/dist/esm/qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-icon.entry.js +2 -2
- package/dist/esm/qds-inline-link.entry.js +39 -8
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +4 -4
- package/dist/esm/qds-label.entry.js +9 -9
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +10 -10
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-loader.entry.js +2 -2
- package/dist/esm/qds-loader.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +6 -6
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +1 -1
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +4 -4
- package/dist/esm/qds-standalone-link.entry.js +39 -8
- package/dist/esm/qds-standalone-link.entry.js.map +1 -1
- package/dist/esm/qds-switch.entry.js +4 -4
- package/dist/esm/qds-tab.entry.js +7 -7
- package/dist/esm/qds-tab.entry.js.map +1 -1
- package/dist/esm/qds-tabbar.entry.js +5 -5
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag_2.entry.js +6 -6
- package/dist/esm/qds-textarea.entry.js +3 -3
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/avatar-media/avatar-media.d.ts +39 -0
- package/dist/types/components/icon-button/icon-button.d.ts +1 -1
- package/dist/types/components/inline-link/inline-link.d.ts +1 -1
- package/dist/types/components/label/label.d.ts +1 -1
- package/dist/types/components/standalone-link/standalone-link.d.ts +1 -1
- package/dist/types/components.d.ts +94 -125
- package/dist/types/helpers.d.ts +3 -3
- package/dist/vscode.html-custom-data.json +29 -52
- package/hydrate/index.js +694 -632
- package/hydrate/index.mjs +694 -632
- package/package.json +1 -1
- package/components/p-9fm05BrQ.js.map +0 -1
- package/components/p-CK_Yxg3A.js.map +0 -1
- package/components/p-CPvTGxdE.js.map +0 -1
- package/components/p-GGIVf4ry.js.map +0 -1
- package/components/p-jzP-octC.js.map +0 -1
- package/components/qds-nav-list-item.js +0 -164
- package/components/qds-nav-list-item.js.map +0 -1
- package/dist/cjs/helpers-D--0PcCT.js.map +0 -1
- package/dist/cjs/library-CF8K3bIq.js.map +0 -1
- package/dist/cjs/qds-checkbox.qds-radio.entry.cjs.js.map +0 -1
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +0 -120
- package/dist/cjs/qds-nav-list-item.entry.cjs.js.map +0 -1
- package/dist/esm/helpers-CDZIefsI.js.map +0 -1
- package/dist/esm/library-B2PJ_ZJB.js.map +0 -1
- package/dist/esm/qds-checkbox.qds-radio.entry.js.map +0 -1
- package/dist/esm/qds-nav-list-item.entry.js +0 -118
- package/dist/esm/qds-nav-list-item.entry.js.map +0 -1
- package/dist/types/components/nav-list-item/nav-list-item.d.ts +0 -67
package/components/qds-dialog.js
CHANGED
|
@@ -4,12 +4,12 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h, e as Host } from './p-BEWDu8_P.js';
|
|
7
|
-
import { i as invariant, b as inheritAriaAttributes } from './p-
|
|
7
|
+
import { i as invariant, b as inheritAriaAttributes } from './p-Bs-thw7N.js';
|
|
8
8
|
import { d as defineCustomElement$6 } from './p-BfIOTt4N.js';
|
|
9
9
|
import { d as defineCustomElement$5 } from './p-CAjMAg1t.js';
|
|
10
|
-
import { d as defineCustomElement$4 } from './p-
|
|
11
|
-
import { d as defineCustomElement$3 } from './p-
|
|
12
|
-
import { d as defineCustomElement$2 } from './p
|
|
10
|
+
import { d as defineCustomElement$4 } from './p-DQ0iArwG.js';
|
|
11
|
+
import { d as defineCustomElement$3 } from './p-D6kEwmWw.js';
|
|
12
|
+
import { d as defineCustomElement$2 } from './p--vOFwWP9.js';
|
|
13
13
|
|
|
14
14
|
const dialogCss = ":host([hidden]){display:none!important}:host{display:none;height:-moz-fit-content;height:fit-content;inset:0;position:fixed;width:-moz-fit-content;width:fit-content}:host([open]){display:block}.qds-dialog{background-color:var(--qds-theme-popup-background);border:var(--qds-popup-border-width) solid var(--qds-theme-popup-border);border-radius:var(--qds-popup-border-radius);box-shadow:var(--qds-popup-elevation);height:inherit;padding:0;width:inherit}.qds-dialog::backdrop{background:initial}.qds-dialog[open]~.qds-backdrop{backdrop-filter:blur(var(--qds-theme-popup-overlay-blur));background-color:var(--qds-theme-popup-overlay-background);inset:0;opacity:var(--qds-theme-popup-overlay-opacity);position:fixed}.qds-heading{align-items:center;display:flex;padding:var(--qds-popup-padding-top) var(--qds-popup-padding-end) var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start)}.qds-close-button{margin-left:auto}.qds-footer{padding:var(--qds-popup-section-padding-top) var(--qds-popup-padding-end) var(--qds-popup-padding-bottom) var(--qds-popup-padding-start)}.qds-content{align-items:flex-start;display:flex;flex-direction:column;gap:var(--qds-popup-gap-children-related);height:calc(100% - var(--qds-popup-padding)*2);padding:var(--qds-popup-section-padding-top) var(--qds-popup-padding-end) var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start)}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}";
|
|
15
15
|
|
|
@@ -32,7 +32,7 @@ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) ||
|
|
|
32
32
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
33
33
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
34
34
|
};
|
|
35
|
-
var _Dialog_inheritedAttributes, _Dialog_dialog, _Dialog_titleId, _Dialog_ref, _Dialog_onCancel, _Dialog_onClose, _Dialog_handleCloseClick, _Dialog_onSubmit;
|
|
35
|
+
var _Dialog_inheritedAttributes, _Dialog_dialog, _Dialog_titleId, _Dialog_closeButton, _Dialog_ref, _Dialog_onCancel, _Dialog_onClose, _Dialog_handleCloseClick, _Dialog_onSubmit, _Dialog_closeButtonRef, _Dialog_handleFocus;
|
|
36
36
|
let autoIncrementingId = 0;
|
|
37
37
|
const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
|
|
38
38
|
constructor(registerHost) {
|
|
@@ -54,6 +54,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
|
|
|
54
54
|
_Dialog_inheritedAttributes.set(this, {});
|
|
55
55
|
_Dialog_dialog.set(this, void 0);
|
|
56
56
|
_Dialog_titleId.set(this, void 0);
|
|
57
|
+
_Dialog_closeButton.set(this, void 0);
|
|
57
58
|
_Dialog_ref.set(this, (dialog) => {
|
|
58
59
|
__classPrivateFieldSet(this, _Dialog_dialog, dialog, "f");
|
|
59
60
|
});
|
|
@@ -80,6 +81,21 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
|
|
|
80
81
|
this.close();
|
|
81
82
|
}
|
|
82
83
|
});
|
|
84
|
+
_Dialog_closeButtonRef.set(this, (button) => {
|
|
85
|
+
__classPrivateFieldSet(this, _Dialog_closeButton, button, "f");
|
|
86
|
+
});
|
|
87
|
+
_Dialog_handleFocus.set(this, () => {
|
|
88
|
+
if (!this.open)
|
|
89
|
+
return;
|
|
90
|
+
const autofocusTarget = this.host.querySelector('[autofocus]');
|
|
91
|
+
if (autofocusTarget instanceof H) {
|
|
92
|
+
autofocusTarget.focus();
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
if (this.closable === true && __classPrivateFieldGet(this, _Dialog_closeButton, "f")) {
|
|
96
|
+
__classPrivateFieldGet(this, _Dialog_closeButton, "f").focus();
|
|
97
|
+
}
|
|
98
|
+
});
|
|
83
99
|
}
|
|
84
100
|
openChanged() {
|
|
85
101
|
if (this.open)
|
|
@@ -102,12 +118,15 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
|
|
|
102
118
|
}
|
|
103
119
|
render() {
|
|
104
120
|
const hasHeading = this.hasTitleSlot || this.closable === true;
|
|
105
|
-
return (h(Host, { key: '
|
|
121
|
+
return (h(Host, { key: '9978a3ffce96dea301d5b3666fb86d73c2b7136f' }, h("dialog", { key: '03baec04e0367143c96b4358dc80dc768b92b9c4', class: "qds-dialog", ref: __classPrivateFieldGet(this, _Dialog_ref, "f"), onCancel: __classPrivateFieldGet(this, _Dialog_onCancel, "f"), onClose: __classPrivateFieldGet(this, _Dialog_onClose, "f"), onSubmit: __classPrivateFieldGet(this, _Dialog_onSubmit, "f"), ...__classPrivateFieldGet(this, _Dialog_inheritedAttributes, "f"), "aria-labelledby": this.hasTitleSlot ? __classPrivateFieldGet(this, _Dialog_titleId, "f") : undefined }, hasHeading && (h("div", { key: 'd9c878ad4163aff94bb04160d8b1369118e40354', class: "qds-heading" }, this.hasTitleSlot && (h("div", { key: '64a121e44c52d8d6510b222c0866e3c691afdb1f', id: __classPrivateFieldGet(this, _Dialog_titleId, "f") }, h("slot", { key: '22f3ba985747c5c1b413f2bcfb0e0fd19cd92526', name: "title" }))), this.closable === true && (h("qds-button", { key: '403a2acf83585ced5d8d2289a6cd86f1a451246a', class: "qds-close-button", text: "close dialog", importance: "subdued", "icon-name": "close", "icon-library": "core", onClick: __classPrivateFieldGet(this, _Dialog_handleCloseClick, "f"), ref: __classPrivateFieldGet(this, _Dialog_closeButtonRef, "f"), iconOnly: true })))), h("div", { key: '7bc25fdc4f140300875526f3d4ed08dc0f6bd8f5', class: "qds-content" }, h("slot", { key: 'df1c51a37043c09b72a49f407a63c3341b35a259' })), this.hasFooterSlot && (h("div", { key: '1944252aed52c93c92c6856490c15c45b3fa8ef9', class: "qds-footer" }, h("slot", { key: 'e5951c26c196b59bfdb4e0aecdebd2c30c743a83', name: "footer" })))), h("div", { key: '81e6d5b1d9a9a242c2a177e3c279991d82816681', class: "qds-backdrop" })));
|
|
106
122
|
}
|
|
107
123
|
show() {
|
|
108
124
|
invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));
|
|
109
125
|
__classPrivateFieldGet(this, _Dialog_dialog, "f").showModal();
|
|
110
126
|
this.open = __classPrivateFieldGet(this, _Dialog_dialog, "f").open;
|
|
127
|
+
requestAnimationFrame(() => {
|
|
128
|
+
__classPrivateFieldGet(this, _Dialog_handleFocus, "f").call(this);
|
|
129
|
+
});
|
|
111
130
|
}
|
|
112
131
|
close() {
|
|
113
132
|
invariant(__classPrivateFieldGet(this, _Dialog_dialog, "f"));
|
|
@@ -126,7 +145,7 @@ const Dialog = /*@__PURE__*/ proxyCustomElement(class Dialog extends H {
|
|
|
126
145
|
}, undefined, {
|
|
127
146
|
"open": ["openChanged"]
|
|
128
147
|
}]);
|
|
129
|
-
_Dialog_inheritedAttributes = new WeakMap(), _Dialog_dialog = new WeakMap(), _Dialog_titleId = new WeakMap(), _Dialog_ref = new WeakMap(), _Dialog_onCancel = new WeakMap(), _Dialog_onClose = new WeakMap(), _Dialog_handleCloseClick = new WeakMap(), _Dialog_onSubmit = new WeakMap();
|
|
148
|
+
_Dialog_inheritedAttributes = new WeakMap(), _Dialog_dialog = new WeakMap(), _Dialog_titleId = new WeakMap(), _Dialog_closeButton = new WeakMap(), _Dialog_ref = new WeakMap(), _Dialog_onCancel = new WeakMap(), _Dialog_onClose = new WeakMap(), _Dialog_handleCloseClick = new WeakMap(), _Dialog_onSubmit = new WeakMap(), _Dialog_closeButtonRef = new WeakMap(), _Dialog_handleFocus = new WeakMap();
|
|
130
149
|
function defineCustomElement$1() {
|
|
131
150
|
if (typeof customElements === "undefined") {
|
|
132
151
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-dialog.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.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: none;\n position: fixed;\n inset: 0;\n width: fit-content;\n height: fit-content;\n}\n\n:host([open]) {\n display: block;\n}\n\n.qds-dialog {\n background-color: var(--qds-theme-popup-background);\n border-radius: var(--qds-popup-border-radius);\n border: var(--qds-popup-border-width) solid var(--qds-theme-popup-border);\n box-shadow: var(--qds-popup-elevation);\n height: inherit;\n padding: 0;\n width: inherit;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .qds-backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.qds-heading {\n display: flex;\n align-items: center;\n padding: var(--qds-popup-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-close-button {\n margin-left: auto;\n}\n\n.qds-footer {\n padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-content {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n height: calc(100% - 2 * var(--qds-popup-padding));\n padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\n\nlet autoIncrementingId = 0\n\n/**\n * The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n *\n * @see https://quartz.se.com/build/components/dialog\n */\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /**\n * Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `close()`\n * methods and this attribute will reflect the dialog’s open state.\n */\n @Prop({ mutable: true, reflect: true }) public open = false\n\n /**\n * Adds a close button to the dialog.\n */\n @Prop() public closable?: boolean\n\n @Element() private readonly host!: HTMLElement\n\n /**\n * Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n *\n * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n */\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /** Emitted when the dialog has been closed. */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @State() private hasTitleSlot = false\n\n @State() private hasFooterSlot = false\n\n #inheritedAttributes: Attributes = {}\n\n #dialog?: HTMLDialogElement\n\n #titleId?: string\n\n @Watch('open')\n protected openChanged(): void {\n if (this.open) this.show()\n else this.close()\n }\n\n public componentWillRender(): void {\n this.hasTitleSlot = !!this.host.querySelector('[slot=\"title\"]')\n this.hasFooterSlot = !!this.host.querySelector('[slot=\"footer\"]')\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n\n autoIncrementingId += 1\n this.#titleId = `qds-dialog-title-${autoIncrementingId}`\n }\n\n public componentDidLoad(): void {\n if (this.open) this.show()\n }\n\n public render() {\n const hasHeading = this.hasTitleSlot || this.closable === true\n return (\n <Host>\n <dialog\n class=\"qds-dialog\"\n ref={this.#ref}\n onCancel={this.#onCancel}\n onClose={this.#onClose}\n onSubmit={this.#onSubmit}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n aria-labelledby={this.hasTitleSlot ? this.#titleId : undefined}\n >\n {hasHeading && (\n <div class=\"qds-heading\">\n {this.hasTitleSlot && (\n <div id={this.#titleId}>\n <slot name=\"title\" />\n </div>\n )}\n {this.closable === true && (\n <qds-button\n class=\"qds-close-button\"\n text=\"close dialog\"\n importance=\"subdued\"\n icon-name=\"close\"\n icon-library=\"core\"\n onClick={this.#handleCloseClick}\n iconOnly\n />\n )}\n </div>\n )}\n\n <div class=\"qds-content\">\n <slot />\n </div>\n\n {this.hasFooterSlot && (\n <div class=\"qds-footer\">\n <slot name=\"footer\" />\n </div>\n )}\n </dialog>\n <div class=\"qds-backdrop\" />\n </Host>\n )\n }\n\n public show(): void {\n invariant(this.#dialog)\n\n this.#dialog.showModal()\n this.open = this.#dialog.open\n }\n\n public close(): void {\n invariant(this.#dialog)\n\n this.#dialog.close()\n }\n\n readonly #ref = (dialog?: HTMLDialogElement): void => {\n this.#dialog = dialog\n }\n\n readonly #onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n readonly #onClose = (): void => {\n invariant(this.#dialog)\n\n this.closeEmitter.emit()\n this.open = this.#dialog.open\n }\n\n readonly #handleCloseClick = (): void => {\n this.close()\n }\n\n readonly #onSubmit = (event: Event): void => {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement ||\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) ||\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n this.close()\n }\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-dialog.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dialog/dialog.css?tag=qds-dialog&encapsulation=shadow","src/components/dialog/dialog.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: none;\n position: fixed;\n inset: 0;\n width: fit-content;\n height: fit-content;\n}\n\n:host([open]) {\n display: block;\n}\n\n.qds-dialog {\n background-color: var(--qds-theme-popup-background);\n border-radius: var(--qds-popup-border-radius);\n border: var(--qds-popup-border-width) solid var(--qds-theme-popup-border);\n box-shadow: var(--qds-popup-elevation);\n height: inherit;\n padding: 0;\n width: inherit;\n\n &::backdrop {\n background: initial;\n }\n\n &[open] ~ .qds-backdrop {\n backdrop-filter: blur(var(--qds-theme-popup-overlay-blur));\n background-color: var(--qds-theme-popup-overlay-background);\n inset: 0;\n opacity: var(--qds-theme-popup-overlay-opacity);\n position: fixed;\n }\n}\n\n.qds-heading {\n display: flex;\n align-items: center;\n padding: var(--qds-popup-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-close-button {\n margin-left: auto;\n}\n\n.qds-footer {\n padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-padding-bottom) var(--qds-popup-padding-start);\n}\n\n.qds-content {\n align-items: flex-start;\n display: flex;\n flex-direction: column;\n gap: var(--qds-popup-gap-children-related);\n height: calc(100% - 2 * var(--qds-popup-padding));\n padding: var(--qds-popup-section-padding-top) var(--qds-popup-padding-end)\n var(--qds-popup-section-padding-bottom) var(--qds-popup-padding-start);\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes, invariant } from '../../helpers'\n\nlet autoIncrementingId = 0\n\n/**\n * The `<qds-dialog>` element represent a dialog box or other interactive\n * component, such as a dismissible alert, inspector, or subwindow.\n *\n * @see https://quartz.se.com/build/components/dialog\n */\n@Component({\n tag: 'qds-dialog',\n shadow: true,\n styleUrl: 'dialog.css',\n})\nexport class Dialog implements ComponentInterface {\n /**\n * Indicates whether or not the dialog is open. You can toggle this attribute\n * to show and hide the dialog, or you can use the `show()` and `close()`\n * methods and this attribute will reflect the dialog’s open state.\n */\n @Prop({ mutable: true, reflect: true }) public open = false\n\n /**\n * Adds a close button to the dialog.\n */\n @Prop() public closable?: boolean\n\n @Element() private readonly host!: HTMLElement\n\n /**\n * Emitted when the user instructs the browser that they wish to dismiss the\n * currently open dialog. The browser fires this event when the user presses\n * the `Esc` key.\n *\n * When a dialog is dismissed with the `Esc` key, both the `qdsCancel` and\n * `qdsClose` events are fired.\n */\n @Event({ eventName: 'qdsCancel', bubbles: false, composed: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /** Emitted when the dialog has been closed. */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @State() private hasTitleSlot = false\n\n @State() private hasFooterSlot = false\n\n #inheritedAttributes: Attributes = {}\n\n #dialog?: HTMLDialogElement\n\n #titleId?: string\n\n #closeButton?: HTMLQdsButtonElement\n\n @Watch('open')\n protected openChanged(): void {\n if (this.open) this.show()\n else this.close()\n }\n\n public componentWillRender(): void {\n this.hasTitleSlot = !!this.host.querySelector('[slot=\"title\"]')\n this.hasFooterSlot = !!this.host.querySelector('[slot=\"footer\"]')\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n\n autoIncrementingId += 1\n this.#titleId = `qds-dialog-title-${autoIncrementingId}`\n }\n\n public componentDidLoad(): void {\n if (this.open) this.show()\n }\n\n public render() {\n const hasHeading = this.hasTitleSlot || this.closable === true\n return (\n <Host>\n <dialog\n class=\"qds-dialog\"\n ref={this.#ref}\n onCancel={this.#onCancel}\n onClose={this.#onClose}\n onSubmit={this.#onSubmit}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n aria-labelledby={this.hasTitleSlot ? this.#titleId : undefined}\n >\n {hasHeading && (\n <div class=\"qds-heading\">\n {this.hasTitleSlot && (\n <div id={this.#titleId}>\n <slot name=\"title\" />\n </div>\n )}\n {this.closable === true && (\n <qds-button\n class=\"qds-close-button\"\n text=\"close dialog\"\n importance=\"subdued\"\n icon-name=\"close\"\n icon-library=\"core\"\n onClick={this.#handleCloseClick}\n ref={this.#closeButtonRef}\n iconOnly\n />\n )}\n </div>\n )}\n\n <div class=\"qds-content\">\n <slot />\n </div>\n\n {this.hasFooterSlot && (\n <div class=\"qds-footer\">\n <slot name=\"footer\" />\n </div>\n )}\n </dialog>\n <div class=\"qds-backdrop\" />\n </Host>\n )\n }\n\n public show(): void {\n invariant(this.#dialog)\n\n this.#dialog.showModal()\n this.open = this.#dialog.open\n requestAnimationFrame(() => {\n this.#handleFocus()\n })\n }\n\n public close(): void {\n invariant(this.#dialog)\n\n this.#dialog.close()\n }\n\n readonly #ref = (dialog?: HTMLDialogElement): void => {\n this.#dialog = dialog\n }\n\n readonly #onCancel = (event: Event): void => {\n if (this.cancelEmitter.emit().defaultPrevented) event.preventDefault()\n }\n\n readonly #onClose = (): void => {\n invariant(this.#dialog)\n\n this.closeEmitter.emit()\n this.open = this.#dialog.open\n }\n\n readonly #handleCloseClick = (): void => {\n this.close()\n }\n\n readonly #onSubmit = (event: Event): void => {\n if (\n (event instanceof SubmitEvent &&\n (event.submitter instanceof HTMLButtonElement ||\n (event.submitter instanceof HTMLInputElement &&\n event.submitter.formMethod === 'dialog'))) ||\n (event.target instanceof HTMLFormElement &&\n event.target.method === 'dialog')\n ) {\n event.preventDefault()\n this.close()\n }\n }\n\n readonly #closeButtonRef = (button?: HTMLQdsButtonElement): void => {\n this.#closeButton = button\n }\n\n readonly #handleFocus = (): void => {\n if (!this.open) return\n\n const autofocusTarget = this.host.querySelector('[autofocus]')\n if (autofocusTarget instanceof HTMLElement) {\n autofocusTarget.focus()\n return\n }\n if (this.closable === true && this.#closeButton) {\n this.#closeButton.focus()\n }\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { D as Dropdown, d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { D as Dropdown, d as defineCustomElement$1 } from './p-Dmky30vp.js';
|
|
7
7
|
|
|
8
8
|
const QdsDropdown = Dropdown;
|
|
9
9
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, h } from './p-BEWDu8_P.js';
|
|
7
|
-
import { b as inheritAriaAttributes } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { b as inheritAriaAttributes } from './p-Bs-thw7N.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-D6kEwmWw.js';
|
|
9
9
|
|
|
10
|
-
const formMessageCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-form-message{color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-icon-background,.qds-icon-container{align-items:center;display:flex}.qds-icon-background{
|
|
10
|
+
const formMessageCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-form-message{color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-icon-background,.qds-icon-container{align-items:center;display:flex}.qds-icon-background{background-color:var(--qds-theme-feedback-action-destructive-contrast);border-radius:var(--qds-control-rounded-border-radius)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-size=small]{font:var(--qds-form-small-text)}.qds-icon-container[data-size=small]{height:var(--qds-control-small-icon-crop-height)}.qds-icon[data-size=small]{height:var(--qds-form-small-icon-size);width:var(--qds-form-small-icon-size)}.qds-inline[data-size=small]{min-height:var(--qds-form-input-small-height)}[data-size=standard]{font:var(--qds-form-standard-text)}.qds-icon-container[data-size=standard]{height:var(--qds-control-standard-icon-crop-height)}.qds-icon[data-size=standard]{height:var(--qds-form-standard-icon-size);width:var(--qds-form-standard-icon-size)}.qds-inline[data-size=standard]{min-height:var(--qds-form-input-standard-height)}[data-size=large]{font:var(--qds-form-large-text)}.qds-icon-container[data-size=large]{height:var(--qds-control-large-icon-crop-height)}.qds-icon[data-size=large]{height:var(--qds-form-large-icon-size);width:var(--qds-form-large-icon-size)}.qds-inline[data-size=large]{min-height:var(--qds-form-input-large-height)}.qds-icon[data-status=error],.qds-text[data-status=error]{color:var(--qds-theme-feedback-result-failure)}[data-status=info].qds-icon{color:var(--qds-theme-feedback-message-informational)}.qds-icon[data-status=success],.qds-text[data-status=success]{color:var(--qds-theme-feedback-result-success)}[data-status=warning].qds-icon{color:var(--qds-theme-feedback-result-partial-success)}[data-status=neutral]{color:var(--qds-theme-text-subdued)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -58,10 +58,10 @@ const FormMessage = /*@__PURE__*/ proxyCustomElement(class FormMessage extends H
|
|
|
58
58
|
__classPrivateFieldSet(this, _FormMessage_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h("span", { key: '
|
|
61
|
+
return (h("span", { key: '0a8cbc3d4d61b9dbf49f33e3d68b789bc549c9f7', class: {
|
|
62
62
|
'qds-form-message': true,
|
|
63
63
|
'qds-inline': this.inline,
|
|
64
|
-
}, "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), ...__classPrivateFieldGet(this, _FormMessage_inheritedAttributes, "f") }, this.status !== 'neutral' && (h("div", { key: '
|
|
64
|
+
}, "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), ...__classPrivateFieldGet(this, _FormMessage_inheritedAttributes, "f") }, this.status !== 'neutral' && (h("div", { key: '02884cdb957599f46d249bb98801f3c160250937', class: "qds-icon-container", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get) }, h("div", { key: '0a644f9370c393343e13e540fdff08d00173aa38', class: "qds-icon-background", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), "data-status": this.status }, h("qds-icon", { key: '9e5155876baa893f97c1c075ac45c7456cf14a7c', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedSize_get), "data-status": this.status, name: `status-${this.status}-solid`, library: "core" }), h("span", { key: '39ed92c28a4fabb5d88e1e3994ce2223fce3c152', class: "qds-sr-only" }, this.statusDescription)))), h("span", { key: 'b9a972b25f786706b6b080599e1249cc8d7f6b4a', class: "qds-text", "data-status": __classPrivateFieldGet(this, _FormMessage_instances, "a", _FormMessage_computedStatus_get) }, this.text)));
|
|
65
65
|
}
|
|
66
66
|
get host() { return this; }
|
|
67
67
|
static get style() { return formMessageCss; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-form-message.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,
|
|
1
|
+
{"file":"qds-form-message.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,k6DAAk6D;;ACAz7D;AACA;AACA;;;;;;;;;;;;;;;;;;MAsBa,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAME;;;;;AAKG;AACqB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAE/C;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAU,UAAU;AAEhD;;AAEG;AACqB,QAAA,IAAM,CAAA,MAAA,GAAuB,OAAO;AAkB5D,QAAA,gCAAA,CAAA,GAAA,CAAA,IAAA,EAAmC,EAAE,CAAA;AA2DtC;IAxCQ,iBAAiB,GAAA;AACtB,QAAA,sBAAA,CAAA,IAAI,oCAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,GAAA,CAAA;;IAGvD,MAAM,GAAA;QACX,QACE,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;gBACxB,YAAY,EAAE,IAAI,CAAC,MAAM;aAC1B,EAAA,WAAA,EACU,uBAAA,IAAI,EAAA,sBAAA,EAAA,GAAA,EAAA,6BAAA,CAAc,EAEzB,GAAA,sBAAA,CAAA,IAAI,EAAqB,gCAAA,EAAA,GAAA,CAAA,EAAA,EAE5B,IAAI,CAAC,MAAM,KAAK,SAAS,KACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAY,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,EAAA,EAC3D,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAChB,WAAA,EAAA,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,EAAA,aAAA,EAChB,IAAI,CAAC,MAAM,EAAA,EAExB,CACc,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAA,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,sBAAA,CAAA,IAAI,EAAc,sBAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,EAAA,aAAA,EAChB,IAAI,CAAC,MAAM,EACxB,IAAI,EAAE,UAAU,IAAI,CAAC,MAAM,CAAQ,MAAA,CAAA,EACnC,OAAO,EAAC,MAAM,EACd,CAAA,EACF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAE,EAAA,IAAI,CAAC,iBAAiB,CAAQ,CACrD,CACF,CACP,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,UAAU,EAAA,aAAA,EAAc,uBAAA,IAAI,EAAA,sBAAA,EAAA,GAAA,EAAA,+BAAA,CAAgB,EACrD,EAAA,IAAI,CAAC,IAAI,CACL,CACF;;;;;;;;;;;;AArDT,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,UAAU;AACf,QAAA,KAAK,OAAO;QACZ,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,+BAAA,GAAA,SAAA,+BAAA,GAAA;AAGC,IAAA,OAAO,IAAI,CAAC,MAAM,IAAI,OAAO;AAC/B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/form-message/form-message.css?tag=qds-form-message&encapsulation=shadow","src/components/form-message/form-message.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-form-message {\n color: var(--qds-theme-control-text-standard);\n display: inline-flex;\n gap: var(--qds-text-icon-gap);\n}\n\n.qds-icon-container,\n.qds-icon-background {\n display: flex;\n align-items: center;\n}\n\n.qds-icon-background {\n border-radius: var(--qds-control-rounded-border-radius);\n background-color: var(--qds-theme-feedback-action-destructive-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-size='small'] {\n font: var(--qds-form-small-text);\n\n &.qds-icon-container {\n height: var(--qds-control-small-icon-crop-height);\n }\n\n &.qds-icon {\n width: var(--qds-form-small-icon-size);\n height: var(--qds-form-small-icon-size);\n }\n\n &.qds-inline {\n min-height: var(--qds-form-input-small-height);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-form-standard-text);\n\n &.qds-icon-container {\n height: var(--qds-control-standard-icon-crop-height);\n }\n\n &.qds-icon {\n width: var(--qds-form-standard-icon-size);\n height: var(--qds-form-standard-icon-size);\n }\n\n &.qds-inline {\n min-height: var(--qds-form-input-standard-height);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-form-large-text);\n\n &.qds-icon-container {\n height: var(--qds-control-large-icon-crop-height);\n }\n\n &.qds-icon {\n width: var(--qds-form-large-icon-size);\n height: var(--qds-form-large-icon-size);\n }\n\n &.qds-inline {\n min-height: var(--qds-form-input-large-height);\n }\n}\n\n[data-status='error'] {\n &.qds-icon {\n color: var(--qds-theme-feedback-result-failure);\n }\n\n &.qds-text {\n color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n[data-status='info'].qds-icon {\n color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='success'] {\n &.qds-icon {\n color: var(--qds-theme-feedback-result-success);\n }\n\n &.qds-text {\n color: var(--qds-theme-feedback-result-success);\n }\n}\n\n[data-status='warning'].qds-icon {\n color: var(--qds-theme-feedback-result-partial-success);\n}\n\n[data-status='neutral'] {\n color: var(--qds-theme-text-subdued);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Size, Status } from '../shared'\n\nexport type FormMessageStatus = Status | 'neutral'\n\n/**\n * `<qds-form-message>` elements represent messages for a form field in a user\n * interface.\n *\n * @see https://quartz.se.com/build/components/form-message\n */\n@Component({\n tag: 'qds-form-message',\n shadow: true,\n styleUrl: 'form-message.css',\n})\nexport class FormMessage implements ComponentInterface {\n /**\n * Adds vertical margin to the form message for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The form message's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The form message's status.\n */\n @Prop() public readonly status?: FormMessageStatus = 'error'\n\n /**\n * Adds accessible text to the icon's form message that will be used by screen readers.\n *\n * @example\n * <qds-form-message status-description=\"Error\" text=\"Password is required.\"></qds-form-message>\n * // This form message will be read by screen readers as \"Error Password is required.\"\n */\n @Prop() public readonly statusDescription?: string\n\n /**\n * The form message's text.\n */\n @Prop() public readonly text?: string\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): FormMessageStatus {\n return this.status ?? 'error'\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-form-message': true,\n 'qds-inline': this.inline,\n }}\n data-size={this.#computedSize}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n {this.status !== 'neutral' && (\n <div class=\"qds-icon-container\" data-size={this.#computedSize}>\n <div\n class=\"qds-icon-background\"\n data-size={this.#computedSize}\n data-status={this.status}\n >\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n data-status={this.status}\n name={`status-${this.status}-solid`}\n library=\"core\"\n />\n <span class=\"qds-sr-only\">{this.statusDescription}</span>\n </div>\n </div>\n )}\n <span class=\"qds-text\" data-status={this.#computedStatus}>\n {this.text}\n </span>\n </span>\n )\n }\n}\n"],"version":3}
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-BEWDu8_P.js';
|
|
7
|
-
import { p as pickFocusEventAttributes } from './p-
|
|
7
|
+
import { p as pickFocusEventAttributes } from './p-Bs-thw7N.js';
|
|
8
8
|
import { d as defineCustomElement$5 } from './p-BfIOTt4N.js';
|
|
9
9
|
import { d as defineCustomElement$4 } from './p-CAjMAg1t.js';
|
|
10
|
-
import { d as defineCustomElement$3 } from './p-
|
|
11
|
-
import { d as defineCustomElement$2 } from './p
|
|
10
|
+
import { d as defineCustomElement$3 } from './p-D6kEwmWw.js';
|
|
11
|
+
import { d as defineCustomElement$2 } from './p--vOFwWP9.js';
|
|
12
12
|
|
|
13
|
-
const iconButtonCss = ":host{display:block}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-icon-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(--qds-control-border-radius);box-sizing:border-box;color:var(--qds-theme-control-text-standard);cursor:pointer;display:flex;justify-content:center;line-height:normal;min-width:0;padding-inline:0;position:relative;-webkit-user-select:none;user-select:none}.qds-icon-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-icon-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}[data-size=small]{min-height:var(--qds-control-small-height);width:var(--qds-control-small-height)}.qds-icon[data-size=small]{
|
|
13
|
+
const iconButtonCss = ":host{display:block}:host(:focus-visible){border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-icon-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(--qds-control-border-radius);box-sizing:border-box;color:var(--qds-theme-control-text-standard);cursor:pointer;display:flex;justify-content:center;line-height:normal;min-width:0;padding-inline:0;position:relative;-webkit-user-select:none;user-select:none}.qds-icon-button:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-icon-button:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{flex-shrink:0}.qds-indicator{inset-block-start:0;inset-inline-end:0;position:absolute;transform:translate(50%,-50%)}[data-size=small]{min-height:var(--qds-control-small-height);width:var(--qds-control-small-height)}.qds-icon[data-size=small]{min-height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=standard]{min-height:var(--qds-control-standard-height);width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{min-height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=large]{min-height:var(--qds-control-large-height);width:var(--qds-control-large-height)}.qds-icon[data-size=large]{min-height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=hero]{border-radius:var(--qds-control-hero-border-radius);min-height:var(--qds-control-hero-height);width:var(--qds-control-hero-height)}.qds-icon[data-size=hero]{min-height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{color:var(--qds-theme-control-text-standard)}[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{border:var(--qds-control-border-width) solid var(--qds-theme-control-border);color:var(--qds-theme-control-text-standard)}[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border:none;color:var(--qds-theme-feedback-action-destructive-default)}[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}";
|
|
14
14
|
|
|
15
15
|
// SPDX-FileCopyrightText: © 2025 Schneider Electric
|
|
16
16
|
//
|
|
@@ -31,7 +31,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
|
|
|
31
31
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
32
32
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
33
33
|
};
|
|
34
|
-
var _IconButton_instances, _IconButton_savedTabIndex, _IconButton_button, _IconButton_tooltip, _IconButton_computedSize_get, _IconButton_computedImportance_get, _IconButton_computedDisabled_get, _IconButton_updateAriaLabel, _IconButton_ref, _IconButton_tooltipRef;
|
|
34
|
+
var _IconButton_instances, _IconButton_savedTabIndex, _IconButton_button, _IconButton_tooltip, _IconButton_computedSize_get, _IconButton_computedImportance_get, _IconButton_computedDisabled_get, _IconButton_hasText_get, _IconButton_updateAriaLabel, _IconButton_ref, _IconButton_tooltipRef;
|
|
35
35
|
const isCounter = (value) => typeof value === 'string'
|
|
36
36
|
? !Number.isNaN(Number.parseFloat(value))
|
|
37
37
|
: typeof value === 'number';
|
|
@@ -150,10 +150,10 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
|
|
|
150
150
|
}
|
|
151
151
|
render() {
|
|
152
152
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
153
|
-
return (h("div", { key: '
|
|
153
|
+
return (h("div", { key: 'f887464f7354fb81f4910422d97542feabc9f61b' }, h(Tag, { key: 'de3fc7375ca2165c93ef889f0d80a475d712befa', type: Tag === 'a' ? undefined : 'button', class: {
|
|
154
154
|
'qds-icon-button': true,
|
|
155
155
|
'qds-disabled': __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedDisabled_get),
|
|
156
|
-
}, href: Tag === 'a' ? this.href : undefined, rel: Tag === 'a' ? this.rel : undefined, ref: __classPrivateFieldGet(this, _IconButton_ref, "f"), disabled: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedDisabled_get), download: Tag === 'a' ? this.download : undefined, "aria-hidden": "true", "data-size": __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedSize_get), "data-importance": __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedImportance_get), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, tabIndex: -1 }, h("qds-icon", { key: '
|
|
156
|
+
}, href: Tag === 'a' ? this.href : undefined, rel: Tag === 'a' ? this.rel : undefined, ref: __classPrivateFieldGet(this, _IconButton_ref, "f"), disabled: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedDisabled_get), download: Tag === 'a' ? this.download : undefined, "aria-hidden": "true", "data-size": __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedSize_get), "data-importance": __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedImportance_get), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, tabIndex: -1 }, h("qds-icon", { key: 'e0f8ec1005afb570848847a679574721dfa8985a', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedSize_get), library: this.iconLibrary, name: this.iconName }), isIndicator(this.badge) && (h("qds-badge-indicator", { key: '2ef9b5e34e55ab5d80365e943672cbcab08a7b19', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedSize_get), strokeRing: true })), isCounter(this.badge) && (h("qds-badge-counter", { key: '486d743e6e949715d8ab7611de6af7175f01f1fa', class: "qds-indicator", description: this.badgeDescription, importance: __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedImportance_get), size: __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_computedSize_get), strokeRing: true, value: this.badge }))), __classPrivateFieldGet(this, _IconButton_instances, "a", _IconButton_hasText_get) && (h("qds-tooltip", { key: 'a23e25841c3b91d9529294ea6d69fd28e1c9daf6', ref: __classPrivateFieldGet(this, _IconButton_tooltipRef, "f") }, this.text))));
|
|
157
157
|
}
|
|
158
158
|
static get formAssociated() { return true; }
|
|
159
159
|
get host() { return this; }
|
|
@@ -209,6 +209,8 @@ _IconButton_savedTabIndex = new WeakMap(), _IconButton_button = new WeakMap(), _
|
|
|
209
209
|
}
|
|
210
210
|
}, _IconButton_computedDisabled_get = function _IconButton_computedDisabled_get() {
|
|
211
211
|
return this.disabled;
|
|
212
|
+
}, _IconButton_hasText_get = function _IconButton_hasText_get() {
|
|
213
|
+
return this.text !== undefined && this.text !== '';
|
|
212
214
|
}, _IconButton_updateAriaLabel = function _IconButton_updateAriaLabel() {
|
|
213
215
|
if (this.badge !== undefined && this.badgeDescription !== undefined) {
|
|
214
216
|
this.internals.ariaLabel = `${this.text} ${isIndicator(this.badge) ? '' : this.badge} ${this.badgeDescription}`;
|
|
@@ -220,7 +222,7 @@ _IconButton_savedTabIndex = new WeakMap(), _IconButton_button = new WeakMap(), _
|
|
|
220
222
|
this.internals.ariaLabel = `${this.text} Opens in a new tab`;
|
|
221
223
|
return;
|
|
222
224
|
}
|
|
223
|
-
this.internals.ariaLabel = this.text;
|
|
225
|
+
this.internals.ariaLabel = this.text ?? '';
|
|
224
226
|
};
|
|
225
227
|
function defineCustomElement$1() {
|
|
226
228
|
if (typeof customElements === "undefined") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-icon-button.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.css?tag=qds-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n border-radius: var(--qds-focus-border-radius);\n}\n\n.qds-icon-button {\n display: flex;\n position: relative;\n\n /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n min-width: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--qds-control-border-radius);\n border: none;\n appearance: none;\n user-select: none;\n cursor: pointer;\n box-sizing: border-box;\n background-color: initial;\n color: var(--qds-theme-control-text-standard);\n padding-inline: 0;\n line-height: normal;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n min-height: var(--qds-control-small-height);\n width: var(--qds-control-small-height);\n\n &.qds-icon {\n min-height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n font-size: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n min-height: var(--qds-control-standard-height);\n width: var(--qds-control-standard-height);\n\n &.qds-icon {\n min-height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n font-size: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n min-height: var(--qds-control-large-height);\n width: var(--qds-control-large-height);\n\n &.qds-icon {\n min-height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n font-size: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='hero'] {\n min-height: var(--qds-control-hero-height);\n width: var(--qds-control-hero-height);\n border-radius: var(--qds-control-hero-border-radius);\n\n &.qds-icon {\n font-size: var(--qds-control-hero-icon-size);\n min-height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n}\n\n[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n}\n","// SPDX-FileCopyrightText: © 2025 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 Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { ButtonTarget } from '../button/button'\nimport type { Importance, Size } from '../shared'\n\nexport type IconButtonSize = Size | 'hero'\nexport type IconButtonImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n value === '' || value === true\n\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n event.preventDefault()\n}\n/**\n * The `<qds-icon-button>` is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/icon-button\n */\n@Component({\n tag: 'qds-icon-button',\n formAssociated: true,\n styleUrl: 'icon-button.css',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n /**\n * Prevents the icon button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The icon button's size.\n */\n @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n /**\n * The icon button's importance.\n */\n @Prop() public readonly importance?: IconButtonImportance = 'standard'\n\n /**\n * Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string | true\n\n /**\n * The indicator or counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string = 'noopener'\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The icon button's accessible name.\n */\n @Prop() public readonly text!: string\n\n /**\n * Emitted when the icon button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the icon button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #button?: HTMLAnchorElement | HTMLButtonElement\n\n #tooltip?: HTMLQdsTooltipElement\n\n get #computedSize(): IconButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): IconButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('href')\n protected hrefChanged(): void {\n this.internals.role = this.href === undefined ? 'button' : 'link'\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string | null): void {\n if (newValue !== null) {\n const parsedValue = Number.parseInt(newValue, 10)\n this.#savedTabIndex =\n Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n ? 0\n : parsedValue\n }\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('text')\n protected textChanged(): void {\n this.#updateAriaLabel()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('blur')\n protected async onBlur(event: FocusEvent): Promise<void> {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.close()\n }\n }\n\n @Listen('focus')\n protected async onFocus(event: FocusEvent): Promise<void> {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.show()\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') this.host.click()\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n public componentWillLoad(): void {\n this.hrefChanged()\n this.textChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.disabledChanged()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n return (\n <div>\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={{\n 'qds-icon-button': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n href={Tag === 'a' ? this.href : undefined}\n rel={Tag === 'a' ? this.rel : undefined}\n ref={this.#ref}\n disabled={Tag === 'a' ? undefined : this.#computedDisabled}\n download={Tag === 'a' ? this.download : undefined}\n aria-hidden=\"true\"\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n onKeyDown={preventDefault}\n onKeyUp={preventDefault}\n onKeyPress={preventDefault}\n tabIndex={-1}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n class=\"qds-indicator\"\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n </Tag>\n {this.text && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n #updateAriaLabel(): void {\n if (this.badge !== undefined && this.badgeDescription !== undefined) {\n this.internals.ariaLabel = `${this.text} ${\n isIndicator(this.badge) ? '' : this.badge\n } ${this.badgeDescription}`\n return\n }\n\n if (\n this.target !== undefined &&\n this.target === '_blank' &&\n this.href !== undefined\n ) {\n this.internals.ariaLabel = `${this.text} Opens in a new tab`\n return\n }\n\n this.internals.ariaLabel = this.text\n }\n\n readonly #ref = (button?: HTMLAnchorElement | HTMLButtonElement): void => {\n this.#button = button\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip) {\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n this.#tooltip = tooltip\n }\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-icon-button.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,uiHAAuiH;;ACA7jH;AACA;AACA;;;;;;;;;;;;;;;;;;AA0BA,MAAM,SAAS,GAAG,CAAC,KAAc,KAC/B,OAAO,KAAK,KAAK;AACf,MAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACxC,MAAE,OAAO,KAAK,KAAK,QAAQ;AAE/B,MAAM,WAAW,GAAG,CAAC,KAAc,KACjC,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,IAAI;AAEhC,MAAM,cAAc,GAAG,CAAC,KAAiC,KAAU;IACjE,KAAK,CAAC,cAAc,EAAE;AACxB,CAAC;MAgBY,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AANvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;AAOE;;;;;AAKG;AAEa,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AASzC;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AAEvD;;AAEG;AACqB,QAAA,IAAI,CAAA,IAAA,GAAmB,UAAU;AAEzD;;AAEG;AACqB,QAAA,IAAU,CAAA,UAAA,GAA0B,UAAU;AAgBtE;;AAEG;AAEa,QAAA,IAAoB,CAAA,oBAAA,GAClC,SAAS;AA4BX;;;;AAIG;AACqB,QAAA,IAAG,CAAA,GAAA,GAAY,UAAU;AA+BjD,QAAA,yBAAA,CAAA,GAAA,CAAA,IAAA,EAAiB,CAAC,CAAA;QAElB,kBAA+C,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAE/C,mBAAgC,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAoLvB,eAAO,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,MAA8C,KAAU;YACvE,sBAAA,CAAA,IAAI,EAAA,kBAAA,EAAW,MAAM,EAAA,GAAA,CAAA;AACvB,SAAC,CAAA;QAEQ,sBAAc,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,OAA+B,KAAU;YAC/D,IAAI,OAAO,EAAE;;gBAEX,OAAO,CAAC,MAAM,GAAG,sBAAA,CAAA,IAAI,0BAAQ;gBAC7B,sBAAA,CAAA,IAAI,EAAA,mBAAA,EAAY,OAAO,EAAA,GAAA,CAAA;;AAE3B,SAAC,CAAA;AACF;IAzJW,eAAe,GAAA;AACvB,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,sBAAA,CAAA,IAAI,EAAkB,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA,CAAC,QAAQ,EAAE;QAC/D,IAAI,sBAAA,CAAA,IAAI,EAAkB,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,sBAAA,CAAA,IAAI,iCAAe;;IAIrC,WAAW,GAAA;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,MAAM;;AAIzD,IAAA,eAAe,CAAC,QAAuB,EAAA;AAC/C,QAAA,IAAI,QAAQ,KAAK,IAAI,EAAE;YACrB,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;AACjD,YAAA,sBAAA,CAAA,IAAI,EAAA,yBAAA,EACF,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW;AACvD,kBAAE;AACF,kBAAE,WAAW,EAAA,GAAA,CAAA;;QAEnB,IAAI,sBAAA,CAAA,IAAI,EAAkB,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC;;AAC5D,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,sBAAA,CAAA,IAAI,iCAAe;;IAIrC,WAAW,GAAA;AACnB,QAAA,sBAAA,CAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,EAAA,2BAAA,CAAiB,CAArB,IAAA,CAAA,IAAI,CAAmB;;AAIf,IAAA,OAAO,CAAC,KAAiB,EAAA;QACjC,IAAI,sBAAA,CAAA,IAAI,EAAkB,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA;YAAE,KAAK,CAAC,wBAAwB,EAAE;;IAIpD,MAAM,MAAM,CAAC,KAAiB,EAAA;QACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACtD,IAAI,sBAAA,CAAA,IAAI,EAAS,mBAAA,EAAA,GAAA,CAAA,EAAE;YACjB,MAAM,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,CAAS,CAAC,KAAK,EAAE;;;IAKrB,MAAM,OAAO,CAAC,KAAiB,EAAA;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;QACvD,IAAI,sBAAA,CAAA,IAAI,EAAS,mBAAA,EAAA,GAAA,CAAA,EAAE;YACjB,MAAM,uBAAA,IAAI,EAAA,mBAAA,EAAA,GAAA,CAAS,CAAC,IAAI,EAAE;;;AAKpB,IAAA,SAAS,CAAC,KAAoB,EAAA;AACtC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;AAIpC,IAAA,OAAO,CAAC,KAAoB,EAAA;AACpC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG;AAAE,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;;IAGnC,iBAAiB,GAAA;QACtB,IAAI,CAAC,WAAW,EAAE;QAClB,IAAI,CAAC,WAAW,EAAE;AAClB,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC;QAC/D,IAAI,CAAC,eAAe,EAAE;;IAGjB,MAAM,GAAA;AACX,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG;AACpD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAC,GAAG,EACF,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,QAAQ,EACxC,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,cAAc,EAAE,sBAAA,CAAA,IAAI,EAAkB,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAA;AACvC,aAAA,EACD,IAAI,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACzC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,EACvC,GAAG,EAAE,uBAAA,IAAI,EAAA,eAAA,EAAA,GAAA,CAAK,EACd,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,SAAS,GAAG,uBAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,EAAA,gCAAA,CAAkB,EAC1D,QAAQ,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,SAAS,EAAA,aAAA,EACrC,MAAM,EAAA,WAAA,EACP,uBAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,EAAA,4BAAA,CAAc,qBACZ,sBAAA,CAAA,IAAI,iEAAoB,EACzC,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,cAAc,EACvB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,EAAE,EAAA,EAEZ,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,UAAU,eACL,sBAAA,CAAA,IAAI,2DAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,CAAA,EACD,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KACtB,CACE,CAAA,qBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EACrB,MAAM,EAAE,IAAI,CAAC,oBAAoB,EACjC,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,EAAA,4BAAA,CAAc,EACxB,UAAU,SACV,CACH,EACA,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KACpB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,eAAe,EACrB,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,UAAU,EAAE,sBAAA,CAAA,IAAI,EAAoB,qBAAA,EAAA,GAAA,EAAA,kCAAA,CAAA,EACpC,IAAI,EAAE,sBAAA,CAAA,IAAI,EAAc,qBAAA,EAAA,GAAA,EAAA,4BAAA,CAAA,EACxB,UAAU,EAAA,IAAA,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,CACjB,CACH,CACG,EACL,sBAAA,CAAA,IAAI,EAAS,qBAAA,EAAA,GAAA,EAAA,uBAAA,CAAA,KACZ,CAAa,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAY,sBAAA,EAAA,GAAA,CAAA,EAAA,EAAG,IAAI,CAAC,IAAI,CAAe,CAC9D,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1JR,IAAA,QAAQ,IAAI,CAAC,IAAI;AACf,QAAA,KAAK,OAAO;AACZ,QAAA,KAAK,OAAO;QACZ,KAAK,MAAM,EAAE;YACX,OAAO,IAAI,CAAC,IAAI;;QAElB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,kCAAA,GAAA,SAAA,kCAAA,GAAA;AAGC,IAAA,QAAQ,IAAI,CAAC,UAAU;AACrB,QAAA,KAAK,YAAY;AACjB,QAAA,KAAK,SAAS;AACd,QAAA,KAAK,aAAa;QAClB,KAAK,qBAAqB,EAAE;YAC1B,OAAO,IAAI,CAAC,UAAU;;QAExB,SAAS;AACP,YAAA,OAAO,UAAU;;;AAGvB,CAAC,EAAA,gCAAA,GAAA,SAAA,gCAAA,GAAA;IAGC,OAAO,IAAI,CAAC,QAAQ;AACtB,CAAC,EAAA,uBAAA,GAAA,SAAA,uBAAA,GAAA;IAGC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE;AACpD,CAAC,EAAA,2BAAA,GAAA,SAAA,2BAAA,GAAA;AA+HC,IAAA,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS,EAAE;AACnE,QAAA,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,CAAA,EAAG,IAAI,CAAC,IAAI,CAAA,CAAA,EACrC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KACtC,CAAI,CAAA,EAAA,IAAI,CAAC,gBAAgB,EAAE;QAC3B;;AAGF,IAAA,IACE,IAAI,CAAC,MAAM,KAAK,SAAS;QACzB,IAAI,CAAC,MAAM,KAAK,QAAQ;AACxB,QAAA,IAAI,CAAC,IAAI,KAAK,SAAS,EACvB;QACA,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,IAAI,CAAA,mBAAA,CAAqB;QAC5D;;IAEF,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;AAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.css?tag=qds-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2025 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n:host {\n display: block;\n}\n\n:host(:focus-visible) {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n border-radius: var(--qds-focus-border-radius);\n}\n\n.qds-icon-button {\n display: flex;\n position: relative;\n\n /* Avoid automatic minimum size on flex element: https://www.w3.org/TR/css-flexbox-1/#min-size-auto */\n min-width: 0;\n align-items: center;\n justify-content: center;\n border-radius: var(--qds-control-border-radius);\n border: none;\n appearance: none;\n user-select: none;\n cursor: pointer;\n box-sizing: border-box;\n background-color: initial;\n color: var(--qds-theme-control-text-standard);\n padding-inline: 0;\n line-height: normal;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-indicator {\n position: absolute;\n inset-block-start: 0;\n inset-inline-end: 0;\n transform: translate(50%, -50%);\n}\n\n[data-size='small'] {\n min-height: var(--qds-control-small-height);\n width: var(--qds-control-small-height);\n\n &.qds-icon {\n min-height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n min-height: var(--qds-control-standard-height);\n width: var(--qds-control-standard-height);\n\n &.qds-icon {\n min-height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n min-height: var(--qds-control-large-height);\n width: var(--qds-control-large-height);\n\n &.qds-icon {\n min-height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\n }\n}\n\n[data-size='hero'] {\n min-height: var(--qds-control-hero-height);\n width: var(--qds-control-hero-height);\n border-radius: var(--qds-control-hero-border-radius);\n\n &.qds-icon {\n min-height: var(--qds-control-hero-icon-size);\n width: var(--qds-control-hero-icon-size);\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-control-text-standard);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-default);\n color: var(--qds-theme-signature-color-contrast);\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n}\n\n[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-action-destructive-default);\n color: var(--qds-theme-feedback-action-destructive-contrast);\n\n &:hover {\n background-color: var(--qds-theme-feedback-action-destructive-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-feedback-action-destructive-pressed);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-action-destructive-default);\n border: none;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n color: var(--qds-theme-feedback-action-destructive-default);\n }\n}\n","// SPDX-FileCopyrightText: © 2025 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 Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport { pickFocusEventAttributes } from '../../helpers'\nimport type { ButtonTarget } from '../button/button'\nimport type { Importance, Size } from '../shared'\n\nexport type IconButtonSize = Size | 'hero'\nexport type IconButtonImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\n\nconst isCounter = (value: unknown): value is number =>\n typeof value === 'string'\n ? !Number.isNaN(Number.parseFloat(value))\n : typeof value === 'number'\n\nconst isIndicator = (value: unknown): value is '' | true =>\n value === '' || value === true\n\nconst preventDefault = (event: KeyboardEvent | MouseEvent): void => {\n event.preventDefault()\n}\n/**\n * The `<qds-icon-button>` is an interactive element activated by a user\n * with a mouse, keyboard, finger, voice command, or other assistive technology.\n * Once activated, it performs a programmable action, such as submitting a\n * [form](https://developer.mozilla.org/docs/Learn/Forms)\n * or opening a dialog.\n *\n * @see https://quartz.se.com/build/components/icon-button\n */\n@Component({\n tag: 'qds-icon-button',\n formAssociated: true,\n styleUrl: 'icon-button.css',\n shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n /**\n * Prevents the icon button from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop()\n public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName!: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The icon button's size.\n */\n @Prop() public readonly size?: Size | 'hero' = 'standard'\n\n /**\n * The icon button's importance.\n */\n @Prop() public readonly importance?: IconButtonImportance = 'standard'\n\n /**\n * Displays an indicator if `true` or the empty string. Otherwise, displays a\n * counter badge if a number or string representing a number is used.\n *\n * @webnative\n */\n @Prop() public readonly badge?: number | string | true\n\n /**\n * The indicator or counter badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n /**\n * The indicator's status.\n */\n @Prop()\n public readonly badgeIndicatorStatus?: HTMLQdsBadgeIndicatorElement['status'] =\n 'neutral'\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<ButtonTarget, string>\n\n /**\n * When set, the underlying button will be rendered as an `<a>` with this\n * `href` instead of a `<button>`.\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * When href is define and the button act as a link (`<a>`), the `rel` will be added to the element.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string = 'noopener'\n\n /**\n * Tells the browser to download the linked file as this filename. Only used\n * when `href` is set.\n *\n * @webnative\n */\n @Prop() public readonly download?: string\n\n /**\n * The icon button's accessible name.\n */\n @Prop() public readonly text?: string\n\n /**\n * Emitted when the icon button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the icon button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #savedTabIndex = 0\n\n #button?: HTMLAnchorElement | HTMLButtonElement\n\n #tooltip?: HTMLQdsTooltipElement\n\n get #computedSize(): IconButtonSize {\n switch (this.size) {\n case 'small':\n case 'large':\n case 'hero': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedImportance(): IconButtonImportance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n get #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.#computedDisabled.toString()\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('href')\n protected hrefChanged(): void {\n this.internals.role = this.href === undefined ? 'button' : 'link'\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string | null): void {\n if (newValue !== null) {\n const parsedValue = Number.parseInt(newValue, 10)\n this.#savedTabIndex =\n Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)\n ? 0\n : parsedValue\n }\n if (this.#computedDisabled) this.host.removeAttribute('tabindex')\n else this.host.tabIndex = this.#savedTabIndex\n }\n\n @Watch('text')\n protected textChanged(): void {\n this.#updateAriaLabel()\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('blur')\n protected async onBlur(event: FocusEvent): Promise<void> {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.close()\n }\n }\n\n @Listen('focus')\n protected async onFocus(event: FocusEvent): Promise<void> {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n if (this.#tooltip) {\n await this.#tooltip.show()\n }\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (event.key === 'Enter') this.host.click()\n }\n\n @Listen('keyup')\n protected onKeyup(event: KeyboardEvent): void {\n if (event.key === ' ') this.host.click()\n }\n\n public componentWillLoad(): void {\n this.hrefChanged()\n this.textChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n this.disabledChanged()\n }\n\n public render() {\n const Tag = this.href === undefined ? 'button' : 'a'\n return (\n <div>\n <Tag\n type={Tag === 'a' ? undefined : 'button'}\n class={{\n 'qds-icon-button': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n href={Tag === 'a' ? this.href : undefined}\n rel={Tag === 'a' ? this.rel : undefined}\n ref={this.#ref}\n disabled={Tag === 'a' ? undefined : this.#computedDisabled}\n download={Tag === 'a' ? this.download : undefined}\n aria-hidden=\"true\"\n data-size={this.#computedSize}\n data-importance={this.#computedImportance}\n onKeyDown={preventDefault}\n onKeyUp={preventDefault}\n onKeyPress={preventDefault}\n tabIndex={-1}\n >\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n {isIndicator(this.badge) && (\n <qds-badge-indicator\n class=\"qds-indicator\"\n status={this.badgeIndicatorStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )}\n {isCounter(this.badge) && (\n <qds-badge-counter\n class=\"qds-indicator\"\n description={this.badgeDescription}\n importance={this.#computedImportance}\n size={this.#computedSize}\n strokeRing\n value={this.badge}\n />\n )}\n </Tag>\n {this.#hasText && (\n <qds-tooltip ref={this.#tooltipRef}>{this.text}</qds-tooltip>\n )}\n </div>\n )\n }\n\n #updateAriaLabel(): void {\n if (this.badge !== undefined && this.badgeDescription !== undefined) {\n this.internals.ariaLabel = `${this.text} ${\n isIndicator(this.badge) ? '' : this.badge\n } ${this.badgeDescription}`\n return\n }\n\n if (\n this.target !== undefined &&\n this.target === '_blank' &&\n this.href !== undefined\n ) {\n this.internals.ariaLabel = `${this.text} Opens in a new tab`\n return\n }\n this.internals.ariaLabel = this.text ?? ''\n }\n\n readonly #ref = (button?: HTMLAnchorElement | HTMLButtonElement): void => {\n this.#button = button\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip) {\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#button\n this.#tooltip = tooltip\n }\n }\n}\n"],"version":3}
|
package/components/qds-icon.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { I as Icon, d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { I as Icon, d as defineCustomElement$1 } from './p-D6kEwmWw.js';
|
|
7
7
|
|
|
8
8
|
const QdsIcon = Icon;
|
|
9
9
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { p as proxyCustomElement, H, c as createEvent, h } from './p-BEWDu8_P.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, d as determineLinkIcon } from './p-
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
7
|
+
import { p as pickFocusEventAttributes, i as invariant, d as determineLinkIcon } from './p-Bs-thw7N.js';
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-D6kEwmWw.js';
|
|
9
9
|
|
|
10
|
-
const inlineLinkCss = ":host([hidden]){display:none!important}:host{
|
|
10
|
+
const inlineLinkCss = ":host([hidden]){display:none!important}:host{border-radius:var(--qds-focus-border-radius);display:inline-block}:host(:focus-visible){outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-icon{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}.qds-inline-link{align-items:center;display:flex;gap:var(--qds-text-icon-gap)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -19,7 +19,16 @@ var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) ||
|
|
|
19
19
|
throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
20
20
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
21
21
|
};
|
|
22
|
-
var
|
|
22
|
+
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
23
|
+
if (kind === "m")
|
|
24
|
+
throw new TypeError("Private method is not writable");
|
|
25
|
+
if (kind === "a" && !f)
|
|
26
|
+
throw new TypeError("Private accessor was defined without a setter");
|
|
27
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
|
|
28
|
+
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
29
|
+
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
30
|
+
};
|
|
31
|
+
var _InlineLink_instances, _InlineLink_savedTabIndex, _InlineLink_link, _InlineLink_computedImportance_get, _InlineLink_openInNewTab_get, _InlineLink_linkRef, _InlineLink_onBlur, _InlineLink_onFocus, _InlineLink_updateAriaLabelElements, _InlineLink_onSlotchange;
|
|
23
32
|
const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
24
33
|
constructor(registerHost) {
|
|
25
34
|
super();
|
|
@@ -44,6 +53,11 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
|
44
53
|
* The inline link's importance.
|
|
45
54
|
*/
|
|
46
55
|
this.importance = 'standard';
|
|
56
|
+
_InlineLink_savedTabIndex.set(this, 0);
|
|
57
|
+
_InlineLink_link.set(this, void 0);
|
|
58
|
+
_InlineLink_linkRef.set(this, (link) => {
|
|
59
|
+
__classPrivateFieldSet(this, _InlineLink_link, link, "f");
|
|
60
|
+
});
|
|
47
61
|
_InlineLink_onBlur.set(this, (event) => {
|
|
48
62
|
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
49
63
|
});
|
|
@@ -58,18 +72,36 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
|
58
72
|
});
|
|
59
73
|
}
|
|
60
74
|
onClick(event) {
|
|
75
|
+
invariant(__classPrivateFieldGet(this, _InlineLink_link, "f"));
|
|
61
76
|
if (this.disabled)
|
|
62
77
|
event.stopImmediatePropagation();
|
|
78
|
+
else
|
|
79
|
+
__classPrivateFieldGet(this, _InlineLink_link, "f").click();
|
|
80
|
+
}
|
|
81
|
+
onKeydown(event) {
|
|
82
|
+
invariant(__classPrivateFieldGet(this, _InlineLink_link, "f"));
|
|
83
|
+
if (this.disabled)
|
|
84
|
+
return;
|
|
85
|
+
if (event.key === 'Enter')
|
|
86
|
+
__classPrivateFieldGet(this, _InlineLink_link, "f").click();
|
|
63
87
|
}
|
|
64
88
|
disabledChanged() {
|
|
65
89
|
this.internals.ariaDisabled = this.disabled.toString();
|
|
90
|
+
if (this.disabled)
|
|
91
|
+
this.host.removeAttribute('tabindex');
|
|
92
|
+
else
|
|
93
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _InlineLink_savedTabIndex, "f");
|
|
66
94
|
}
|
|
67
95
|
tabindexChanged(newValue) {
|
|
68
96
|
const parsedValue = Number.parseInt(newValue, 10);
|
|
69
97
|
// FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests
|
|
70
98
|
// to fail, but it's not clear why this is the case since it works for
|
|
71
99
|
// other components.
|
|
72
|
-
this
|
|
100
|
+
__classPrivateFieldSet(this, _InlineLink_savedTabIndex, Number.isNaN(parsedValue) ? 0 : parsedValue, "f");
|
|
101
|
+
if (this.disabled)
|
|
102
|
+
this.host.removeAttribute('tabindex');
|
|
103
|
+
else
|
|
104
|
+
this.host.tabIndex = __classPrivateFieldGet(this, _InlineLink_savedTabIndex, "f");
|
|
73
105
|
}
|
|
74
106
|
hrefTargetChanged() {
|
|
75
107
|
this.linkIcon = determineLinkIcon(this.target, this.rel);
|
|
@@ -85,12 +117,11 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
|
85
117
|
__classPrivateFieldGet(this, _InlineLink_updateAriaLabelElements, "f").call(this);
|
|
86
118
|
}
|
|
87
119
|
render() {
|
|
88
|
-
return (h("a", { key: '
|
|
120
|
+
return (h("a", { key: '672a1dba75b5d541748a335f988f9419262d5160', "aria-hidden": "true", class: {
|
|
89
121
|
'qds-inline-link': true,
|
|
90
122
|
'qds-disabled': this.disabled,
|
|
91
|
-
}, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex:
|
|
123
|
+
}, "data-importance": __classPrivateFieldGet(this, _InlineLink_instances, "a", _InlineLink_computedImportance_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _InlineLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _InlineLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: -1, target: this.target, ref: __classPrivateFieldGet(this, _InlineLink_linkRef, "f") }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '72fd0b235cf06199dec6dadb0456022e6235d00c', class: "qds-icon", "aria-hidden": "true", library: this.iconLibrary, name: this.iconName })), h("slot", { key: '13422afd67807a27d4fa46529501e95a3aa58090', onSlotchange: __classPrivateFieldGet(this, _InlineLink_onSlotchange, "f") }), this.linkIcon && (h("qds-icon", { key: '84ddddd854369f3f32088b39e867fc6491c36cd4', "aria-hidden": "true", class: "qds-icon", library: "core", name: this.linkIcon }))));
|
|
92
124
|
}
|
|
93
|
-
static get delegatesFocus() { return true; }
|
|
94
125
|
get host() { return this; }
|
|
95
126
|
static get watchers() { return {
|
|
96
127
|
"disabled": ["disabledChanged"],
|
|
@@ -99,7 +130,7 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
|
99
130
|
"target": ["hrefTargetChanged"]
|
|
100
131
|
}; }
|
|
101
132
|
static get style() { return inlineLinkCss; }
|
|
102
|
-
}, [
|
|
133
|
+
}, [257, "qds-inline-link", {
|
|
103
134
|
"disabled": [4],
|
|
104
135
|
"iconName": [1, "icon-name"],
|
|
105
136
|
"iconLibrary": [1, "icon-library"],
|
|
@@ -110,15 +141,14 @@ const InlineLink = /*@__PURE__*/ proxyCustomElement(class InlineLink extends H {
|
|
|
110
141
|
"referrerPolicy": [1, "referrerpolicy"],
|
|
111
142
|
"rel": [1],
|
|
112
143
|
"target": [1],
|
|
113
|
-
"linkIcon": [32]
|
|
114
|
-
|
|
115
|
-
}, [[0, "click", "onClick"]], {
|
|
144
|
+
"linkIcon": [32]
|
|
145
|
+
}, [[0, "click", "onClick"], [0, "keydown", "onKeydown"]], {
|
|
116
146
|
"disabled": ["disabledChanged"],
|
|
117
147
|
"tabindex": ["tabindexChanged"],
|
|
118
148
|
"rel": ["hrefTargetChanged"],
|
|
119
149
|
"target": ["hrefTargetChanged"]
|
|
120
150
|
}]);
|
|
121
|
-
_InlineLink_onBlur = new WeakMap(), _InlineLink_onFocus = new WeakMap(), _InlineLink_updateAriaLabelElements = new WeakMap(), _InlineLink_onSlotchange = new WeakMap(), _InlineLink_instances = new WeakSet(), _InlineLink_computedImportance_get = function _InlineLink_computedImportance_get() {
|
|
151
|
+
_InlineLink_savedTabIndex = new WeakMap(), _InlineLink_link = new WeakMap(), _InlineLink_linkRef = new WeakMap(), _InlineLink_onBlur = new WeakMap(), _InlineLink_onFocus = new WeakMap(), _InlineLink_updateAriaLabelElements = new WeakMap(), _InlineLink_onSlotchange = new WeakMap(), _InlineLink_instances = new WeakSet(), _InlineLink_computedImportance_get = function _InlineLink_computedImportance_get() {
|
|
122
152
|
switch (this.importance) {
|
|
123
153
|
case 'subdued':
|
|
124
154
|
case 'emphasized': {
|