@quartzds/core 1.0.0-beta.123 → 1.0.0-beta.125
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 +43 -0
- package/components/index.js +1 -1
- package/components/{p-BvRd7jA2.js → p-2tdMcXmA.js} +5 -5
- package/components/{p-BvRd7jA2.js.map → p-2tdMcXmA.js.map} +1 -1
- package/components/{p-CVuTVnQo.js → p-B6ToH-uM.js} +4 -4
- package/components/p-B6ToH-uM.js.map +1 -0
- package/components/{p-C93kOEAe.js → p-BRpaYGSM.js} +5 -5
- package/components/{p-C93kOEAe.js.map → p-BRpaYGSM.js.map} +1 -1
- package/components/{p-CbY4T0d2.js → p-B_CYrw-t.js} +3 -3
- package/components/{p-CbY4T0d2.js.map → p-B_CYrw-t.js.map} +1 -1
- package/components/{p-BoSYRCNp.js → p-BceRDckL.js} +4 -4
- package/components/{p-BoSYRCNp.js.map → p-BceRDckL.js.map} +1 -1
- package/components/{p-BZlKeCFb.js → p-BuCcV5P1.js} +9 -9
- package/components/p-BuCcV5P1.js.map +1 -0
- package/components/{p-B7s906mS.js → p-CG_jPYOl.js} +5 -5
- package/components/{p-B7s906mS.js.map → p-CG_jPYOl.js.map} +1 -1
- package/components/p-CaibVX_2.js +3539 -0
- package/components/p-CaibVX_2.js.map +1 -0
- package/components/{p-CowZ-pDD.js → p-CgQQYnEy.js} +75 -39
- package/components/p-CgQQYnEy.js.map +1 -0
- package/components/{p-yb0Kv4Y6.js → p-DTMrBXCl.js} +24 -9
- package/components/p-DTMrBXCl.js.map +1 -0
- package/components/{p-C9R8N06B.js → p-EjoVBa5a.js} +3 -3
- package/components/{p-C9R8N06B.js.map → p-EjoVBa5a.js.map} +1 -1
- package/components/{p-CKp062X8.js → p-ox2syNht.js} +6 -6
- package/components/{p-CKp062X8.js.map → p-ox2syNht.js.map} +1 -1
- package/components/qds-action-item.js +3 -3
- package/components/qds-avatar-media.js +1 -1
- package/components/qds-breadcrumb-item.js +11 -6
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +9 -9
- package/components/qds-button.js.map +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +5 -5
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +5 -5
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +1 -1
- package/components/qds-form-message.js +23 -17
- package/components/qds-form-message.js.map +1 -1
- package/components/qds-icon-button.js +1 -1
- package/components/qds-icon-tab.js +4 -4
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +5 -5
- package/components/qds-inline-link.js.map +1 -1
- package/components/qds-input.js +3 -3
- package/components/qds-label.js +2 -2
- package/components/qds-list-item.js +16 -13
- package/components/qds-list-item.js.map +1 -1
- package/components/qds-loader.js +1 -1
- package/components/qds-menu-item.js +38 -12
- 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 +3 -3
- package/components/qds-standalone-link.js +4 -4
- package/components/qds-switch.js +6 -6
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +7 -7
- package/components/qds-tabbar.js +59 -38
- package/components/qds-tabbar.js.map +1 -1
- 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-DjUgyTKn.js +3559 -0
- package/dist/cjs/helpers-DjUgyTKn.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qds-action-item.cjs.entry.js +1 -1
- package/dist/cjs/qds-avatar-media.qds-checkbox.qds-radio.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-avatar-media_3.cjs.entry.js +72 -36
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +9 -4
- package/dist/cjs/qds-breadcrumb-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +7 -7
- package/dist/cjs/qds-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +2 -2
- package/dist/cjs/qds-chip.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +2 -2
- package/dist/cjs/qds-dialog.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider.qds-icon-button.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-divider_2.cjs.entry.js +3 -3
- package/dist/cjs/qds-dropdown.cjs.entry.js +20 -6
- package/dist/cjs/qds-dropdown.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-form-message.cjs.entry.js +26 -16
- package/dist/cjs/qds-form-message.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-icon-tab.cjs.entry.js +1 -1
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +4 -4
- package/dist/cjs/qds-inline-link.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-input.cjs.entry.js +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +8 -5
- package/dist/cjs/qds-list-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-menu-item.cjs.entry.js +34 -8
- package/dist/cjs/qds-menu-item.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-mini-button.cjs.entry.js +2 -2
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-select.cjs.entry.js +2 -2
- package/dist/cjs/qds-standalone-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-switch.cjs.entry.js +5 -5
- package/dist/cjs/qds-switch.entry.cjs.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +4 -4
- package/dist/cjs/qds-tabbar.cjs.entry.js +57 -33
- package/dist/cjs/qds-tabbar.entry.cjs.js.map +1 -1
- 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.cjs.entry.js +3 -3
- package/dist/cjs/qds-textarea.cjs.entry.js +3 -3
- package/dist/cjs/qds-title.cjs.entry.js +2 -2
- package/dist/cjs/qds-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/qds.cjs.js +1 -1
- package/dist/custom-elements.json +224 -70
- package/dist/docs.json +48 -6
- package/dist/esm/helpers-mPQzhx-O.js +3539 -0
- package/dist/esm/helpers-mPQzhx-O.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qds-action-item.entry.js +1 -1
- package/dist/esm/qds-avatar-media.qds-checkbox.qds-radio.entry.js.map +1 -1
- package/dist/esm/qds-avatar-media_3.entry.js +72 -36
- package/dist/esm/qds-breadcrumb-item.entry.js +9 -4
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +7 -7
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +2 -2
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +2 -2
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.qds-icon-button.entry.js.map +1 -1
- package/dist/esm/qds-divider_2.entry.js +3 -3
- package/dist/esm/qds-dropdown.entry.js +20 -6
- package/dist/esm/qds-dropdown.entry.js.map +1 -1
- package/dist/esm/qds-form-message.entry.js +26 -16
- package/dist/esm/qds-form-message.entry.js.map +1 -1
- package/dist/esm/qds-icon-tab.entry.js +1 -1
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +4 -4
- package/dist/esm/qds-inline-link.entry.js.map +1 -1
- package/dist/esm/qds-input.entry.js +1 -1
- package/dist/esm/qds-label.entry.js +1 -1
- package/dist/esm/qds-list-item.entry.js +8 -5
- package/dist/esm/qds-list-item.entry.js.map +1 -1
- package/dist/esm/qds-menu-item.entry.js +34 -8
- package/dist/esm/qds-menu-item.entry.js.map +1 -1
- package/dist/esm/qds-mini-button.entry.js +2 -2
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-select.entry.js +2 -2
- package/dist/esm/qds-standalone-link.entry.js +3 -3
- package/dist/esm/qds-switch.entry.js +5 -5
- package/dist/esm/qds-switch.entry.js.map +1 -1
- package/dist/esm/qds-tab.entry.js +4 -4
- package/dist/esm/qds-tabbar.entry.js +57 -33
- package/dist/esm/qds-tabbar.entry.js.map +1 -1
- 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.entry.js +3 -3
- package/dist/esm/qds-textarea.entry.js +3 -3
- package/dist/esm/qds-title.entry.js +2 -2
- package/dist/esm/qds-tooltip.entry.js +1 -1
- package/dist/esm/qds.js +1 -1
- package/dist/types/components/checkbox/checkbox.d.ts +9 -9
- package/dist/types/components/dropdown/dropdown.d.ts +1 -0
- package/dist/types/components/form-message/form-message.d.ts +2 -0
- package/dist/types/components/menu-item/menu-item.d.ts +1 -0
- package/dist/types/components/tabbar/tabbar.d.ts +2 -0
- package/dist/types/components.d.ts +3 -2
- package/dist/types/helpers.d.ts +6 -1
- package/dist/vscode.html-custom-data.json +1 -1
- package/hydrate/index.js +3560 -193
- package/hydrate/index.mjs +3560 -193
- package/package.json +2 -1
- package/components/p-BZlKeCFb.js.map +0 -1
- package/components/p-BalM52S_.js +0 -291
- package/components/p-BalM52S_.js.map +0 -1
- package/components/p-CVuTVnQo.js.map +0 -1
- package/components/p-CowZ-pDD.js.map +0 -1
- package/components/p-yb0Kv4Y6.js.map +0 -1
- package/dist/cjs/helpers-Qs3cpKiI.js +0 -308
- package/dist/cjs/helpers-Qs3cpKiI.js.map +0 -1
- package/dist/esm/helpers-Fe2AA6uo.js +0 -291
- package/dist/esm/helpers-Fe2AA6uo.js.map +0 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-DjUgyTKn.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
12
|
const avatarMediaCss = ":host([hidden]){display:none!important}:host{display:block}.qds-container{align-items:center;align-self:stretch;background:var(--qds-theme-display-background);border:var(--qds-display-border-width) solid var(--qds-theme-display-background-contrast);border-radius:var(--qds-display-rounded-border-radius);display:flex;height:inherit;justify-content:center;width:inherit}.qds-picture{border-radius:inherit;flex-shrink:0;height:100%;object-fit:cover;width:100%}.qds-icon,.qds-text{color:var(--qds-theme-display-background-contrast)}.qds-text{font:var(--qds-display-standard);text-align:center}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}";
|
|
@@ -89,7 +89,7 @@ const AvatarMedia = class {
|
|
|
89
89
|
this.roleChanged();
|
|
90
90
|
}
|
|
91
91
|
render() {
|
|
92
|
-
return index.h("div", { key: '
|
|
92
|
+
return index.h("div", { key: 'e5f7d19fb53b1ff0ecd5255ee80092917e65948f', class: "qds-container" }, __classPrivateFieldGet$2(this, _AvatarMedia_renderContent, "f").call(this));
|
|
93
93
|
}
|
|
94
94
|
static get watchers() { return {
|
|
95
95
|
"text": ["textChanged", "roleChanged"],
|
|
@@ -100,7 +100,7 @@ const AvatarMedia = class {
|
|
|
100
100
|
_AvatarMedia_renderContent = new WeakMap(), _AvatarMedia_handleImageError = new WeakMap(), _AvatarMedia_handleImageLoad = new WeakMap();
|
|
101
101
|
AvatarMedia.style = avatarMediaCss;
|
|
102
102
|
|
|
103
|
-
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-checkbox,.qds-icon{grid-area:
|
|
103
|
+
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0;outline:none}.qds-checkbox,.qds-icon{grid-area:a;place-self:center}.qds-icon{color:var(--qds-theme-signature-color-contrast);display:none;pointer-events:none}.qds-container{display:grid;grid-template-areas:\"a\"}.qds-label{align-items:flex-start;background-color:var(--qds-theme-interactive-background-default);border-radius:var(--qds-control-border-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;width:inherit}.qds-label:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-label:active{background-color:var(--qds-theme-interactive-background-pressed)}:host(:focus-visible) .qds-label{box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-label-inner{color:var(--qds-theme-control-text-standard);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}.qds-tooltip{line-height:normal}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-interactive-background-default);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:none}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-control-background-default-contrast);border-color:#0000}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{border-radius:var(--qds-control-toggle-small-knob-border-radius);height:var(--qds-control-toggle-small-box-size);width:var(--qds-control-toggle-small-box-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-toggle-small-box-size)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related);min-height:var(--qds-control-toggle-small-height);min-width:var(--qds-control-toggle-small-width);padding-block:var(--qds-control-no-inline-small-padding-vertical)}.qds-label-inner[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{min-height:var(--qds-control-small-height);padding:var(--qds-control-small-padding-auto-height) var(--qds-control-toggle-small-padding-horizontal)}.qds-checkbox[data-size=standard]{border-radius:var(--qds-control-toggle-standard-knob-border-radius);height:var(--qds-control-toggle-standard-box-size);width:var(--qds-control-toggle-standard-box-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-toggle-standard-box-size)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-control-toggle-standard-height);min-width:var(--qds-control-toggle-standard-width);padding-block:var(--qds-control-no-inline-standard-padding-vertical)}.qds-label-inner[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{min-height:var(--qds-control-standard-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}.qds-checkbox[data-size=large]{border-radius:var(--qds-control-toggle-large-knob-border-radius);height:var(--qds-control-toggle-large-box-size);width:var(--qds-control-toggle-large-box-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-toggle-large-box-size)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related);min-height:var(--qds-control-toggle-large-height);min-width:var(--qds-control-toggle-large-width);padding-block:var(--qds-control-no-inline-large-padding-vertical)}.qds-label-inner[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{min-height:var(--qds-control-large-height);padding:var(--qds-control-large-padding-auto-height) var(--qds-control-toggle-large-padding-horizontal)}";
|
|
104
104
|
|
|
105
105
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
106
106
|
//
|
|
@@ -121,7 +121,7 @@ var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) |
|
|
|
121
121
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
122
122
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
123
123
|
};
|
|
124
|
-
var _Checkbox_instances,
|
|
124
|
+
var _Checkbox_instances, _Checkbox_ro, _Checkbox_savedTabIndex, _Checkbox_span, _Checkbox_tooltip, _Checkbox_computedChecked_get, _Checkbox_computedDisabled_get, _Checkbox_computedIndeterminate_get, _Checkbox_computedSize_get, _Checkbox_computedValue_get, _Checkbox_hasText_get, _Checkbox_spanRef, _Checkbox_tooltipRef, _Checkbox_defineGetter;
|
|
125
125
|
const Checkbox = class {
|
|
126
126
|
constructor(hostRef) {
|
|
127
127
|
index.registerInstance(this, hostRef);
|
|
@@ -136,6 +136,10 @@ const Checkbox = class {
|
|
|
136
136
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
137
137
|
}
|
|
138
138
|
_Checkbox_instances.add(this);
|
|
139
|
+
/**
|
|
140
|
+
* Whether or not the text is displayed.
|
|
141
|
+
*/
|
|
142
|
+
this.checkboxOnly = false;
|
|
139
143
|
/**
|
|
140
144
|
* Adds vertical margin to the checkbox for alignment.
|
|
141
145
|
*
|
|
@@ -196,13 +200,9 @@ const Checkbox = class {
|
|
|
196
200
|
* @webnative
|
|
197
201
|
*/
|
|
198
202
|
this.willValidate = false;
|
|
199
|
-
/**
|
|
200
|
-
* Whether or not the text is displayed.
|
|
201
|
-
*/
|
|
202
|
-
this.checkboxOnly = false;
|
|
203
203
|
this.tooltip = false;
|
|
204
|
-
_Checkbox_inheritedAttributes.set(this, {});
|
|
205
204
|
_Checkbox_ro.set(this, void 0);
|
|
205
|
+
_Checkbox_savedTabIndex.set(this, 0);
|
|
206
206
|
_Checkbox_span.set(this, void 0);
|
|
207
207
|
_Checkbox_tooltip.set(this, void 0);
|
|
208
208
|
this.checkValidity = () => this.internals.checkValidity();
|
|
@@ -213,16 +213,6 @@ const Checkbox = class {
|
|
|
213
213
|
else
|
|
214
214
|
this.internals.setValidity(controls.NO_ERROR_FLAGS);
|
|
215
215
|
};
|
|
216
|
-
_Checkbox_onBlur.set(this, (event) => {
|
|
217
|
-
this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
218
|
-
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
219
|
-
helpers.ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").close());
|
|
220
|
-
});
|
|
221
|
-
_Checkbox_onFocus.set(this, (event) => {
|
|
222
|
-
this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
223
|
-
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
224
|
-
helpers.ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").show());
|
|
225
|
-
});
|
|
226
216
|
_Checkbox_spanRef.set(this, (span) => {
|
|
227
217
|
__classPrivateFieldSet$1(this, _Checkbox_span, span, "f");
|
|
228
218
|
});
|
|
@@ -234,6 +224,16 @@ const Checkbox = class {
|
|
|
234
224
|
}
|
|
235
225
|
});
|
|
236
226
|
}
|
|
227
|
+
onBlur(event) {
|
|
228
|
+
this.blurEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
229
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
230
|
+
helpers.ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").close());
|
|
231
|
+
}
|
|
232
|
+
onFocus(event) {
|
|
233
|
+
this.focusEmitter.emit(helpers.pickFocusEventAttributes(event));
|
|
234
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
235
|
+
helpers.ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").show());
|
|
236
|
+
}
|
|
237
237
|
onClick(event) {
|
|
238
238
|
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)) {
|
|
239
239
|
event.stopImmediatePropagation();
|
|
@@ -241,28 +241,60 @@ const Checkbox = class {
|
|
|
241
241
|
}
|
|
242
242
|
event.preventDefault();
|
|
243
243
|
this.checked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? true : !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get);
|
|
244
|
+
this.internals.ariaChecked = this.checked.toString();
|
|
244
245
|
this.changeEmitter.emit();
|
|
245
246
|
this.indeterminate = false;
|
|
246
247
|
}
|
|
248
|
+
onKeyup(event) {
|
|
249
|
+
if (event.key === ' ') {
|
|
250
|
+
this.host.click();
|
|
251
|
+
event.preventDefault();
|
|
252
|
+
}
|
|
253
|
+
}
|
|
247
254
|
checkedChanged() {
|
|
255
|
+
this.internals.ariaChecked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get).toString();
|
|
248
256
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get) && !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)
|
|
249
257
|
? __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get)
|
|
250
258
|
: // eslint-disable-next-line unicorn/no-null
|
|
251
259
|
null);
|
|
252
260
|
}
|
|
253
261
|
disabledChanged() {
|
|
262
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)) {
|
|
263
|
+
this.internals.ariaDisabled = 'true';
|
|
264
|
+
this.host.removeAttribute('tabindex');
|
|
265
|
+
// eslint-disable-next-line unicorn/no-null
|
|
266
|
+
this.internals.setFormValue(null);
|
|
267
|
+
}
|
|
268
|
+
else {
|
|
269
|
+
this.internals.ariaDisabled = 'false';
|
|
270
|
+
this.host.tabIndex = __classPrivateFieldGet$1(this, _Checkbox_savedTabIndex, "f");
|
|
271
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get))
|
|
272
|
+
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
273
|
+
}
|
|
254
274
|
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get) && !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get))
|
|
255
275
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
256
276
|
// eslint-disable-next-line unicorn/no-null
|
|
257
277
|
else
|
|
258
278
|
this.internals.setFormValue(null);
|
|
259
279
|
}
|
|
280
|
+
indeterminateChanged() {
|
|
281
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get))
|
|
282
|
+
this.internals.ariaChecked = 'mixed';
|
|
283
|
+
}
|
|
260
284
|
tabindexChanged(newValue) {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
285
|
+
if (newValue !== null) {
|
|
286
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
287
|
+
__classPrivateFieldSet$1(this, _Checkbox_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
|
|
288
|
+
? 0
|
|
289
|
+
: parsedValue, "f");
|
|
290
|
+
}
|
|
291
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get))
|
|
292
|
+
this.host.removeAttribute('tabindex');
|
|
293
|
+
else
|
|
294
|
+
this.host.tabIndex = __classPrivateFieldGet$1(this, _Checkbox_savedTabIndex, "f");
|
|
264
295
|
}
|
|
265
296
|
textChanged() {
|
|
297
|
+
this.internals.ariaLabel = this.text;
|
|
266
298
|
if (__classPrivateFieldGet$1(this, _Checkbox_ro, "f"))
|
|
267
299
|
__classPrivateFieldGet$1(this, _Checkbox_ro, "f").disconnect();
|
|
268
300
|
if (!__classPrivateFieldGet$1(this, _Checkbox_span, "f"))
|
|
@@ -281,12 +313,17 @@ const Checkbox = class {
|
|
|
281
313
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
282
314
|
}
|
|
283
315
|
componentWillLoad() {
|
|
316
|
+
this.internals.role = 'checkbox';
|
|
317
|
+
this.internals.ariaChecked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get)
|
|
318
|
+
? 'mixed'
|
|
319
|
+
: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get).toString();
|
|
320
|
+
this.internals.ariaDisabled = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get).toString();
|
|
321
|
+
this.internals.ariaLabel = this.text;
|
|
284
322
|
this.valueChanged();
|
|
285
323
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'form', () => this.internals.form);
|
|
286
324
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
|
|
287
325
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'validity', () => this.internals.validity);
|
|
288
326
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
|
|
289
|
-
__classPrivateFieldSet$1(this, _Checkbox_inheritedAttributes, helpers.inheritAriaAttributes(this.host), "f");
|
|
290
327
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
291
328
|
}
|
|
292
329
|
componentDidLoad() {
|
|
@@ -297,33 +334,32 @@ const Checkbox = class {
|
|
|
297
334
|
__classPrivateFieldGet$1(this, _Checkbox_ro, "f").disconnect();
|
|
298
335
|
}
|
|
299
336
|
render() {
|
|
300
|
-
return (
|
|
301
|
-
|
|
302
|
-
index.h("label", { key: 'ff46801768016168ffb89acd3148a796dd94765f', "aria-disabled": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get) ? 'true' : undefined, class: {
|
|
337
|
+
return (index.h("div", { key: '55579e21112535dbaee5c474c2eef661d208767c', "aria-hidden": "true", class: {
|
|
338
|
+
'qds-disabled': __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get),
|
|
303
339
|
'qds-inline': this.inline,
|
|
304
340
|
'qds-label': true,
|
|
305
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, index.h("div", { key: '
|
|
341
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, index.h("div", { key: '6d857b1109e4111d32d2d2de316bc1a1377f5d23', class: "qds-container" }, index.h("input", { key: '8a9567b8b796112b7959cf29cd80aa51df051136',
|
|
306
342
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
307
|
-
autoFocus: this.host.autofocus, checked: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? false : this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), disabled: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get), indeterminate: this.indeterminate,
|
|
343
|
+
autoFocus: this.host.autofocus, checked: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? false : this.checked, class: "qds-checkbox", "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), disabled: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get), indeterminate: this.indeterminate, required: this.required, type: "checkbox", tabIndex: -1 }), index.h("qds-icon", { key: 'ade28f729ca2e02d9db5c6e6c5f99f49cc6d7d10', class: {
|
|
308
344
|
'qds-icon': true,
|
|
309
345
|
'qds-checked': true,
|
|
310
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), index.h("qds-icon", { key: '
|
|
346
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), index.h("qds-icon", { key: 'c0dfa142dd90dd7d3adf6e57c71becfe949f43e9', class: {
|
|
311
347
|
'qds-icon': true,
|
|
312
348
|
'qds-indeterminate': true,
|
|
313
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (index.h("span", { key: '
|
|
349
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (index.h("span", { key: '7918b3d9fe502c90ff7c8d10104952403078d3b9', class: "qds-label-inner", "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), ref: __classPrivateFieldGet$1(this, _Checkbox_spanRef, "f") }, this.required === true && index.h("span", { key: '5f0969933396eb3f271040c6140d81c13df47210', class: "qds-required" }, "*"), this.text)), this.tooltip && (index.h("qds-tooltip", { key: '77d853746163e94cf682aed525d1b1819e4cd383', class: "qds-tooltip", ref: __classPrivateFieldGet$1(this, _Checkbox_tooltipRef, "f") }, this.text))));
|
|
314
350
|
}
|
|
315
|
-
static get delegatesFocus() { return true; }
|
|
316
351
|
static get formAssociated() { return true; }
|
|
317
352
|
get host() { return index.getElement(this); }
|
|
318
353
|
static get watchers() { return {
|
|
319
354
|
"checked": ["checkedChanged"],
|
|
320
355
|
"disabled": ["disabledChanged"],
|
|
356
|
+
"indeterminate": ["indeterminateChanged"],
|
|
321
357
|
"tabindex": ["tabindexChanged"],
|
|
322
358
|
"text": ["textChanged"],
|
|
323
359
|
"value": ["valueChanged"]
|
|
324
360
|
}; }
|
|
325
361
|
};
|
|
326
|
-
|
|
362
|
+
_Checkbox_ro = new WeakMap(), _Checkbox_savedTabIndex = new WeakMap(), _Checkbox_span = new WeakMap(), _Checkbox_tooltip = new WeakMap(), _Checkbox_spanRef = new WeakMap(), _Checkbox_tooltipRef = new WeakMap(), _Checkbox_instances = new WeakSet(), _Checkbox_computedChecked_get = function _Checkbox_computedChecked_get() {
|
|
327
363
|
return this.checked ?? false;
|
|
328
364
|
}, _Checkbox_computedDisabled_get = function _Checkbox_computedDisabled_get() {
|
|
329
365
|
return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
|
|
@@ -351,7 +387,7 @@ _Checkbox_inheritedAttributes = new WeakMap(), _Checkbox_ro = new WeakMap(), _Ch
|
|
|
351
387
|
};
|
|
352
388
|
Checkbox.style = checkboxCss;
|
|
353
389
|
|
|
354
|
-
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:f;place-self:center}.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-container.sc-qds-radio{display:grid;grid-template-areas:\"f\"}.qds-label.sc-qds-radio{align-items:flex-start;background-color:var(--qds-theme-interactive-background-default);border-radius:var(--qds-control-border-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;width:inherit}.qds-label.sc-qds-radio:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-label.sc-qds-radio:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-label.sc-qds-radio:has(.qds-radio:focus-visible){box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-label-inner.sc-qds-radio{color:var(--qds-theme-control-text-standard);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%}.qds-required.sc-qds-radio{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}.qds-tooltip.sc-qds-radio{line-height:normal}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-interactive-background-default);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;padding:var(--qds-control-toggle-padding);-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:none}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{color:var(--qds-theme-control-background-contrast);display:block}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-small-box-size);width:var(--qds-control-toggle-small-box-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-toggle-small-box-size)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related);min-height:var(--qds-control-toggle-small-height);min-width:var(--qds-control-toggle-small-width);padding-block:var(--qds-control-no-inline-small-padding-vertical)}.qds-label-inner[data-size=small].sc-qds-radio{font:var(--qds-control-small-text)}.qds-inline[data-size=small].sc-qds-radio{min-height:var(--qds-control-small-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-standard-box-size);width:var(--qds-control-toggle-standard-box-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-toggle-standard-box-size)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-control-toggle-standard-height);min-width:var(--qds-control-toggle-standard-width);padding-block:var(--qds-control-no-inline-standard-padding-vertical)}.qds-label-inner[data-size=standard].sc-qds-radio{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard].sc-qds-radio{min-height:var(--qds-control-standard-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-large-box-size);width:var(--qds-control-toggle-large-box-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-toggle-large-box-size)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related);min-height:var(--qds-control-toggle-large-height);min-width:var(--qds-control-toggle-large-width);padding-block:var(--qds-control-no-inline-large-padding-vertical)}.qds-label-inner[data-size=large].sc-qds-radio{font:var(--qds-control-large-text)}.qds-inline[data-size=large].sc-qds-radio{min-height:var(--qds-control-large-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}";
|
|
390
|
+
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:f;place-self:center}.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-container.sc-qds-radio{display:grid;grid-template-areas:\"f\"}.qds-label.sc-qds-radio{align-items:flex-start;background-color:var(--qds-theme-interactive-background-default);border-radius:var(--qds-control-border-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;width:inherit}.qds-label.sc-qds-radio:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-label.sc-qds-radio:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-label.sc-qds-radio:has(.qds-radio:focus-visible){box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}.qds-label-inner.sc-qds-radio{color:var(--qds-theme-control-text-standard);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%}.qds-required.sc-qds-radio{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}.qds-tooltip.sc-qds-radio{line-height:normal}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-interactive-background-default);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;padding:var(--qds-control-toggle-padding);-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:none}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{color:var(--qds-theme-control-background-default-contrast);display:block}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-small-box-size);width:var(--qds-control-toggle-small-box-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-toggle-small-box-size)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related);min-height:var(--qds-control-toggle-small-height);min-width:var(--qds-control-toggle-small-width);padding-block:var(--qds-control-no-inline-small-padding-vertical)}.qds-label-inner[data-size=small].sc-qds-radio{font:var(--qds-control-small-text)}.qds-inline[data-size=small].sc-qds-radio{min-height:var(--qds-control-small-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-standard-box-size);width:var(--qds-control-toggle-standard-box-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-toggle-standard-box-size)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-control-toggle-standard-height);min-width:var(--qds-control-toggle-standard-width);padding-block:var(--qds-control-no-inline-standard-padding-vertical)}.qds-label-inner[data-size=standard].sc-qds-radio{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard].sc-qds-radio{min-height:var(--qds-control-standard-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-large-box-size);width:var(--qds-control-toggle-large-box-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-toggle-large-box-size)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related);min-height:var(--qds-control-toggle-large-height);min-width:var(--qds-control-toggle-large-width);padding-block:var(--qds-control-no-inline-large-padding-vertical)}.qds-label-inner[data-size=large].sc-qds-radio{font:var(--qds-control-large-text)}.qds-inline[data-size=large].sc-qds-radio{min-height:var(--qds-control-large-height);padding:var(--qds-control-standard-padding-auto-height) var(--qds-control-toggle-standard-padding-horizontal)}";
|
|
355
391
|
|
|
356
392
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
357
393
|
//
|
|
@@ -465,12 +501,12 @@ const Radio = class {
|
|
|
465
501
|
render() {
|
|
466
502
|
return (
|
|
467
503
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
468
|
-
index.h("label", { key: '
|
|
504
|
+
index.h("label", { key: '05091a4307f0b719717fda2c9473a934989156d3', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
|
|
469
505
|
'qds-inline': this.inline,
|
|
470
506
|
'qds-label': true,
|
|
471
|
-
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: '
|
|
507
|
+
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: '860a270e9f16e5dc8b8b1523fdbeb24680626d45', class: "qds-container" }, index.h("input", { key: 'b5638e9a92346848ea1c0b434214825b4ebc3323',
|
|
472
508
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
473
|
-
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("qds-icon", { key: '
|
|
509
|
+
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("qds-icon", { key: 'd74e6d6ffa6b3846c403fe58928a083e8d5aee9a', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked-radio" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (index.h("span", { key: '9b140db5f97aeabb34f89affa10379767155ea9f', class: "qds-label-inner", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), ref: __classPrivateFieldGet(this, _Radio_spanRef, "f") }, this.required === true && index.h("span", { key: 'd6885c32b7bad9cb74cb243cf58524ccce57373a', class: "qds-required" }, "*"), this.text)), this.tooltip && (index.h("qds-tooltip", { key: '734bbf31d2684af4271b07ebaef5d554c9c17a9c', "aria-hidden": "true", class: "qds-tooltip", ref: __classPrivateFieldGet(this, _Radio_tooltipRef, "f") }, this.text))));
|
|
474
510
|
}
|
|
475
511
|
get host() { return index.getElement(this); }
|
|
476
512
|
static get watchers() { return {
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-DjUgyTKn.js');
|
|
10
10
|
|
|
11
11
|
const breadcrumbItemCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-breadcrumb-item{align-items:center;display:inline-flex;font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-siblings-related);min-height:var(--qds-control-standard-height);width:inherit}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-icon{flex-shrink:0;height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-divider{margin-inline:auto}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-anchor{font:var(--qds-control-standard-link)}.qds-anchor,.qds-breadcrumb-item{color:var(--qds-theme-control-text-standard)}.qds-anchor:focus-visible,.qds-breadcrumb-item:focus-visible{border-radius:var(--qds-control-border-radius);box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0}";
|
|
12
12
|
|
|
@@ -89,6 +89,11 @@ const QdsBreadcrumbItem = class {
|
|
|
89
89
|
}
|
|
90
90
|
componentWillLoad() {
|
|
91
91
|
this.internals.role = 'listitem';
|
|
92
|
+
this.internals.ariaLabel = this.text;
|
|
93
|
+
// If the breadcrumb item doesn't have an `href`, it's the current page.
|
|
94
|
+
// Note: Chrome is not reflecting the aria-current property in the accessibility tool.
|
|
95
|
+
// eslint-disable-next-line unicorn/no-null
|
|
96
|
+
this.internals.ariaCurrent = this.href === undefined ? 'page' : null;
|
|
92
97
|
this.disabledChanged();
|
|
93
98
|
}
|
|
94
99
|
componentDidLoad() {
|
|
@@ -99,12 +104,12 @@ const QdsBreadcrumbItem = class {
|
|
|
99
104
|
__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
|
|
100
105
|
}
|
|
101
106
|
render() {
|
|
102
|
-
return (index.h("div", { key: '
|
|
107
|
+
return (index.h("div", { key: '9d1917bb3ef33e1c3d11e75373bf5bfc383a09e5', class: {
|
|
103
108
|
'qds-breadcrumb-item': true,
|
|
104
109
|
'qds-disabled': __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "a", _QdsBreadcrumbItem_computedDisabled_get),
|
|
105
|
-
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '
|
|
110
|
+
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '0dc2c60d1acefc4fa6bee3a883e1ef1681e731c8', class: "qds-icon", library: this.iconLibrary, name: this.iconName })), this.href === undefined || __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "a", _QdsBreadcrumbItem_isCurrentPage_get)
|
|
106
111
|
? __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderText).call(this)
|
|
107
|
-
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (index.h("qds-tooltip", { key: '
|
|
112
|
+
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (index.h("qds-tooltip", { key: '08b0db3040f0140592ba7a570fbcc7a241c399ff', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_tooltipRef, "f") }, this.text))));
|
|
108
113
|
}
|
|
109
114
|
static get delegatesFocus() { return true; }
|
|
110
115
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-breadcrumb-item {\n align-items: center;\n display: inline-flex;\n font: var(--qds-control-standard-text);\n gap: var(--qds-control-standard-gap-siblings-related);\n min-height: var(--qds-control-standard-height);\n width: inherit;\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 height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n}\n\n.qds-divider {\n margin-inline: auto;\n}\n\n.qds-overflow {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.qds-anchor {\n font: var(--qds-control-standard-link);\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n color: var(--qds-theme-control-text-standard);\n\n &:focus-visible {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Fragment,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport { isCurrentPage, isEllipsisActive } from '../../helpers'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * The `<qds-breadcrumb-item>` element is used as a navigational aid that is\n * typically placed between a site's header and the main content, displaying\n * either a hierarchy of the current page in relation to the site's structure,\n * from top level to current page, or a list of the links the user followed to\n * get to the current page, in the order visited.\n *\n * @see https://quartz.se.com/build/components/breadcrumb\n */\n@Component({\n tag: 'qds-breadcrumb-item',\n styleUrl: 'breadcrumb-item.css',\n shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem implements ComponentInterface {\n /**\n * The breadcrumb item's text.\n */\n @Prop() public readonly text!: string\n\n /**\n * Prevents the breadcrumb item from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() 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 URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\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<BreadcrumbTarget, string>\n\n @State() private tooltip = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #breadcrumbItem?: HTMLAnchorElement | HTMLDivElement\n\n #ro?: ResizeObserver\n\n #span?: HTMLSpanElement\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n get #isCurrentPage(): boolean {\n if (this.href === undefined) return false\n return isCurrentPage(this.href)\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#ro) this.#ro.disconnect()\n\n if (!this.#span) return\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isEllipsisActive(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'listitem'\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-breadcrumb-item': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n ref={this.href === undefined ? this.#breadcrumbItemRef : undefined}\n tabIndex={this.tooltip && this.href === undefined ? 0 : undefined}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.href === undefined || this.#isCurrentPage\n ? this.#renderText()\n : this.#renderAnchor()}\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </div>\n )\n }\n\n #renderAnchor(): JSX.Element {\n return (\n <>\n <span class=\"qds-overflow\" ref={this.#spanRef}>\n <a\n class=\"qds-anchor\"\n href={this.href}\n hrefLang={this.hreflang}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n ref={this.href === undefined ? undefined : this.#breadcrumbItemRef}\n target={this.target}\n >\n {this.text}\n </a>\n </span>\n <span aria-hidden=\"true\" class=\"qds-divider\">\n /\n </span>\n </>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <span class=\"qds-overflow\" ref={this.#spanRef}>\n {this.text}\n </span>\n )\n }\n\n readonly #breadcrumbItemRef = (\n breadcrumbItem?: HTMLAnchorElement | HTMLDivElement,\n ): void => {\n this.#breadcrumbItem = breadcrumbItem\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#breadcrumbItem\n }\n}\n"],"names":["readTask","isEllipsisActive","h","isCurrentPage","Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-breadcrumb-item.entry.cjs.js","sources":["src/components/breadcrumb-item/breadcrumb-item.css?tag=qds-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-breadcrumb-item {\n align-items: center;\n display: inline-flex;\n font: var(--qds-control-standard-text);\n gap: var(--qds-control-standard-gap-siblings-related);\n min-height: var(--qds-control-standard-height);\n width: inherit;\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 height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n}\n\n.qds-divider {\n margin-inline: auto;\n}\n\n.qds-overflow {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.qds-anchor {\n font: var(--qds-control-standard-link);\n}\n\n.qds-anchor,\n.qds-breadcrumb-item {\n color: var(--qds-theme-control-text-standard);\n\n &:focus-visible {\n /* inner ring */\n outline: var(--qds-theme-focus-border-contrast) solid\n var(--qds-focus-light-border-width);\n outline-offset: 0;\n\n /* outer ring */\n box-shadow: 0 0 0 var(--qds-focus-heavy-border-width)\n var(--qds-theme-focus-border);\n border-radius: var(--qds-control-border-radius);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, JSX } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Fragment,\n h,\n Listen,\n Prop,\n readTask,\n State,\n Watch,\n} from '@stencil/core'\nimport type { LiteralUnion } from 'type-fest'\n\nimport { isCurrentPage, isEllipsisActive } from '../../helpers'\n\nexport type BreadcrumbTarget = '_blank' | '_parent' | '_self' | '_top'\n\n/**\n * The `<qds-breadcrumb-item>` element is used as a navigational aid that is\n * typically placed between a site's header and the main content, displaying\n * either a hierarchy of the current page in relation to the site's structure,\n * from top level to current page, or a list of the links the user followed to\n * get to the current page, in the order visited.\n *\n * @see https://quartz.se.com/build/components/breadcrumb\n */\n@Component({\n tag: 'qds-breadcrumb-item',\n styleUrl: 'breadcrumb-item.css',\n shadow: { delegatesFocus: true },\n})\nexport class QdsBreadcrumbItem implements ComponentInterface {\n /**\n * The breadcrumb item's text.\n */\n @Prop() public readonly text!: string\n\n /**\n * Prevents the breadcrumb item from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() 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 URL that the inline link points to. Inline links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the inline link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\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<BreadcrumbTarget, string>\n\n @State() private tooltip = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n #breadcrumbItem?: HTMLAnchorElement | HTMLDivElement\n\n #ro?: ResizeObserver\n\n #span?: HTMLSpanElement\n\n get #computedDisabled(): boolean {\n return this.disabled\n }\n\n get #isCurrentPage(): boolean {\n if (this.href === undefined) return false\n return isCurrentPage(this.href)\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#ro) this.#ro.disconnect()\n\n if (!this.#span) return\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isEllipsisActive(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isEllipsisActive(spanEntry.target as HTMLSpanElement)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentWillLoad(): void {\n this.internals.role = 'listitem'\n this.internals.ariaLabel = this.text\n // If the breadcrumb item doesn't have an `href`, it's the current page.\n // Note: Chrome is not reflecting the aria-current property in the accessibility tool.\n // eslint-disable-next-line unicorn/no-null\n this.internals.ariaCurrent = this.href === undefined ? 'page' : null\n this.disabledChanged()\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-breadcrumb-item': true,\n 'qds-disabled': this.#computedDisabled,\n }}\n ref={this.href === undefined ? this.#breadcrumbItemRef : undefined}\n tabIndex={this.tooltip && this.href === undefined ? 0 : undefined}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n {this.href === undefined || this.#isCurrentPage\n ? this.#renderText()\n : this.#renderAnchor()}\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </div>\n )\n }\n\n #renderAnchor(): JSX.Element {\n return (\n <>\n <span class=\"qds-overflow\" ref={this.#spanRef}>\n <a\n class=\"qds-anchor\"\n href={this.href}\n hrefLang={this.hreflang}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n ref={this.href === undefined ? undefined : this.#breadcrumbItemRef}\n target={this.target}\n >\n {this.text}\n </a>\n </span>\n <span aria-hidden=\"true\" class=\"qds-divider\">\n /\n </span>\n </>\n )\n }\n\n #renderText(): JSX.Element {\n return (\n <span class=\"qds-overflow\" ref={this.#spanRef}>\n {this.text}\n </span>\n )\n }\n\n readonly #breadcrumbItemRef = (\n breadcrumbItem?: HTMLAnchorElement | HTMLDivElement,\n ): void => {\n this.#breadcrumbItem = breadcrumbItem\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#breadcrumbItem\n }\n}\n"],"names":["readTask","isEllipsisActive","h","isCurrentPage","Fragment"],"mappings":";;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,69BAA69B;;ACAv/B;AACA;AACA;;;;;;;;;;;;;;;;;;MAkCa,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;;;;;AAWE;;;AAGG;AACqB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AASjD;;AAEG;AACqB,QAAA,IAAW,CAAA,WAAA,GAAW,SAAS;AA8ItC,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;QAIhC,iCAAoD,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAEpD,qBAAoB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAEpB,uBAAuB,CAAA,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;QAmHd,oCAAqB,CAAA,GAAA,CAAA,IAAA,EAAA,CAC5B,cAAmD,KAC3C;YACR,sBAAA,CAAA,IAAI,EAAA,iCAAA,EAAmB,cAAc,EAAA,GAAA,CAAA;AACvC,SAAC,CAAA;QAEQ,0BAAW,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,IAAsB,KAAU;YACnD,sBAAA,CAAA,IAAI,EAAA,uBAAA,EAAS,IAAI,EAAA,GAAA,CAAA;AACnB,SAAC,CAAA;QAEQ,6BAAc,CAAA,GAAA,CAAA,IAAA,EAAA,CAAC,OAA+B,KAAU;AAC/D,YAAA,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,sBAAA,CAAA,IAAI,yCAAgB;AACzC,SAAC,CAAA;AACF;AAtHW,IAAA,OAAO,CAAC,KAAiB,EAAA;QACjC,IAAI,sBAAA,CAAA,IAAI,EAAkB,4BAAA,EAAA,GAAA,EAAA,uCAAA,CAAA;YAAE,KAAK,CAAC,wBAAwB,EAAE;;IAIpD,eAAe,GAAA;QACvB,IAAI,CAAC,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE;;IAI9C,WAAW,GAAA;AACnB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAI,qBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,CAAI,CAAC,UAAU,EAAE;QAEnC,IAAI,CAAC,sBAAA,CAAA,IAAI,EAAM,uBAAA,EAAA,GAAA,CAAA;YAAE;QAEjB,MAAM,IAAI,GAAG,sBAAA,CAAA,IAAI,+BAAM;QACvBA,cAAQ,CAAC,MAAK;AACZ,YAAA,IAAI,CAAC,OAAO,GAAGC,wBAAgB,CAAC,IAAI,CAAC;AACvC,SAAC,CAAC;AACF,QAAA,sBAAA,CAAA,IAAI,EAAO,qBAAA,EAAA,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,KAAI;YAC5C,IAAI,CAAC,OAAO,GAAGA,wBAAgB,CAAC,SAAS,CAAC,MAAyB,CAAC;AACtE,SAAC,CAAC,MAAA;AACF,QAAA,sBAAA,CAAA,IAAI,6BAAI,CAAC,OAAO,CAAC,sBAAA,CAAA,IAAI,EAAM,uBAAA,EAAA,GAAA,CAAA,CAAC;;IAGvB,iBAAiB,GAAA;AACtB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,UAAU;QAChC,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI;;;;AAIpC,QAAA,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,MAAM,GAAG,IAAI;QACpE,IAAI,CAAC,eAAe,EAAE;;IAGjB,gBAAgB,GAAA;QACrB,IAAI,CAAC,WAAW,EAAE;;IAGb,oBAAoB,GAAA;AACzB,QAAA,IAAI,sBAAA,CAAA,IAAI,EAAI,qBAAA,EAAA,GAAA,CAAA;YAAE,sBAAA,CAAA,IAAI,EAAA,qBAAA,EAAA,GAAA,CAAI,CAAC,UAAU,EAAE;;IAG9B,MAAM,GAAA;QACX,QACEC,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,qBAAqB,EAAE,IAAI;gBAC3B,cAAc,EAAE,sBAAA,CAAA,IAAI,EAAkB,4BAAA,EAAA,GAAA,EAAA,uCAAA,CAAA;aACvC,EACD,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,uBAAA,IAAI,EAAA,oCAAA,EAAA,GAAA,CAAmB,GAAG,SAAS,EAClE,QAAQ,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,CAAC,GAAG,SAAS,EAAA,EAEhE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClDA,OACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACH,EACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,sBAAA,CAAA,IAAI,EAAe,4BAAA,EAAA,GAAA,EAAA,oCAAA;AAC7C,cAAE,sBAAA,CAAA,IAAI,EAAY,4BAAA,EAAA,GAAA,EAAA,6BAAA,CAAA,CAAA,IAAA,CAAhB,IAAI;cACJ,sBAAA,CAAA,IAAI,EAAc,4BAAA,EAAA,GAAA,EAAA,+BAAA,CAAA,CAAA,IAAA,CAAlB,IAAI,CAAgB,EACvB,IAAI,CAAC,OAAO,KACXA,yFAAyB,MAAM,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAY,6BAAA,EAAA,GAAA,CAAA,EAAA,EAClD,IAAI,CAAC,IAAI,CACE,CACf,CACG;;;;;;;;;IA7ER,OAAO,IAAI,CAAC,QAAQ;AACtB,CAAC,EAAA,oCAAA,GAAA,SAAA,oCAAA,GAAA;AAGC,IAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,KAAK;AACzC,IAAA,OAAOC,qBAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AACjC,CAAC,EAAA,+BAAA,GAAA,SAAA,+BAAA,GAAA;IA4EC,QACED,OAAA,CAAAE,cAAA,EAAA,IAAA,EACEF,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,EAAS,0BAAA,EAAA,GAAA,CAAA,EAAA,EAC3CA,OACE,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG,sBAAA,CAAA,IAAI,EAAmB,oCAAA,EAAA,GAAA,CAAA,EAClE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EAElB,IAAI,CAAC,IAAI,CACR,CACC,EACPA,OAAkB,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,MAAM,EAAC,KAAK,EAAC,aAAa,EAErC,EAAA,GAAA,CAAA,CACN;AAEP,CAAC,EAAA,6BAAA,GAAA,SAAA,6BAAA,GAAA;IAGC,QACEA,OAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,cAAc,EAAC,GAAG,EAAE,sBAAA,CAAA,IAAI,kCAAS,EAC1C,EAAA,IAAI,CAAC,IAAI,CACL;AAEX,CAAC;;;;;"}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
'use strict';
|
|
7
7
|
|
|
8
8
|
var index = require('./index-DIY7gpXM.js');
|
|
9
|
-
var helpers = require('./helpers-
|
|
9
|
+
var helpers = require('./helpers-DjUgyTKn.js');
|
|
10
10
|
var controls = require('./controls-DKGeNyr5.js');
|
|
11
11
|
|
|
12
|
-
const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"
|
|
12
|
+
const buttonCss = ":host([hidden]){display:none!important}:host{display:inline-block;outline:none}.qds-button:disabled,.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.qds-overflow[data-size=hero]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal}.qds-action{transform:scaleX(var(--qds-direction-factor,1))}.qds-container{display:grid;grid-template-areas:\"b\"}.qds-focus-ring{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n ));box-shadow:0 0 0 var(--qds-focus-heavy-border-width) var(--qds-theme-focus-border);grid-area:b;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width));isolation:isolate;outline:var(--qds-theme-focus-border-contrast) solid var(--qds-focus-light-border-width);outline-offset:0;pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-form-input-border-width-inline-end,\n var(--qds-control-border-width)\n ))}:host(:focus-visible) .qds-focus-ring{visibility:visible}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background-color:initial;border:none;border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-border-radius)\n );box-sizing:border-box;cursor:pointer;display:inline-flex;grid-area:b;justify-content:center;min-width:0;outline:none;padding-block:0;position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact;text-align:center;-webkit-user-select:none;user-select:none}.qds-button:any-link{-webkit-text-decoration:none;text-decoration:none}.qds-icon{flex-shrink:0}.qds-indicator{position:absolute;transform:translate(50%,-50%)}[data-size=small]{font:var(--qds-control-small-text)}.qds-button[data-size=small]{gap:var(--qds-control-small-gap-internal);min-height:var(--qds-control-small-height);padding-inline:var(--qds-control-button-small-padding-horizontal)}.qds-icon-only[data-size=small]{width:var(--qds-control-small-height)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}[data-size=small] .qds-indicator{inset-block-start:var(--qds-control-button-small-badge-padding-top);inset-inline-end:var(--qds-control-button-small-badge-padding-end)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-button[data-size=standard]{gap:var(--qds-control-standard-gap-internal);min-height:var(--qds-control-standard-height);padding-inline:var(--qds-control-button-standard-padding-horizontal)}.qds-icon-only[data-size=standard]{width:var(--qds-control-standard-height)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-indicator{inset-block-start:var(--qds-control-button-standard-badge-padding-top);inset-inline-end:var(--qds-control-button-standard-badge-padding-end)}[data-size=large]{font:var(--qds-control-large-text)}.qds-button[data-size=large]{gap:var(--qds-control-large-gap-internal);min-height:var(--qds-control-large-height);padding-inline:var(--qds-control-button-large-padding-horizontal)}.qds-icon-only[data-size=large]{width:var(--qds-control-large-height)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}[data-size=large] .qds-indicator{inset-block-start:var(--qds-control-button-large-badge-padding-top);inset-inline-end:var(--qds-control-button-large-badge-padding-end)}[data-size=large],[data-size=small],[data-size=standard]{line-height:normal}.qds-button.qds-icon-only[data-size=large],.qds-button.qds-icon-only[data-size=small],.qds-button.qds-icon-only[data-size=standard]{padding-inline:0}[data-size=hero]{font:var(--qds-control-hero-text)}.qds-button[data-size=hero]{border-radius:var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n ) var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n );gap:var(--qds-control-hero-gap-internal);padding-block:var(--qds-control-hero-padding-auto-height);padding-inline:var(--qds-control-button-hero-padding-horizontal)}.qds-button.qds-icon-only[data-size=hero]{min-height:var(--qds-control-hero-height);padding-inline:0;width:var(--qds-control-hero-height)}.qds-button[data-size=hero] .qds-indicator{inset-block-start:var(--qds-control-button-hero-badge-padding-top);inset-inline-end:var(--qds-control-button-hero-badge-padding-end)}.qds-focus-ring[data-size=hero]{border-radius:max(1px,var(\n --qds-form-input-border-radius-top-left,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-top-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-right,var(--qds-control-hero-border-radius)\n )) max(1px,var(\n --qds-form-input-border-radius-bottom-left,var(--qds-control-hero-border-radius)\n ))}.qds-icon[data-size=hero]{height:var(--qds-control-hero-icon-size);width:var(--qds-control-hero-icon-size)}[data-importance=subdued]{border-radius:0;color:var(--qds-theme-link-standard-default)}.qds-button[data-importance=subdued]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-hover);color:var(--qds-theme-link-standard-hover)}.qds-button[data-importance=subdued]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-link-standard-pressed);color:var(--qds-theme-link-standard-pressed)}.qds-button[data-importance=subdued]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued]{border:none;color:var(--qds-theme-control-text-standard)}.qds-button.qds-icon-only[data-importance=subdued]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button.qds-icon-only[data-importance=subdued]:active{background-color:var(--qds-theme-interactive-background-pressed)}[data-importance=standard]{color:var(--qds-theme-control-text-standard)}.qds-button[data-importance=standard]{border-color:var(--qds-theme-control-border);border-style:solid;border-width:var(--qds-control-border-width)}.qds-button[data-importance=standard]:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button[data-importance=standard]:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-button[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-default);color:var(--qds-theme-signature-color-contrast)}.qds-button[data-importance=emphasized]:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-button[data-importance=emphasized]:active{background-color:var(--qds-theme-signature-color-pressed)}.qds-button[data-importance=destructive]{background-color:var(--qds-theme-feedback-action-destructive-default);color:var(--qds-theme-feedback-action-destructive-contrast)}.qds-button[data-importance=destructive]:hover{background-color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=destructive]:active{background-color:var(--qds-theme-feedback-action-destructive-pressed)}[data-importance=subdued-destructive]{border-radius:0;color:var(--qds-theme-feedback-action-destructive-default)}.qds-button[data-importance=subdued-destructive]{border-block-end:var(--qds-control-border-width) solid #0000;padding-inline:0}.qds-button[data-importance=subdued-destructive]:hover{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-hover);color:var(--qds-theme-feedback-action-destructive-hover)}.qds-button[data-importance=subdued-destructive]:active{border-block-end:var(--qds-control-border-width) solid var(--qds-theme-feedback-action-destructive-pressed);color:var(--qds-theme-feedback-action-destructive-pressed)}.qds-button[data-importance=subdued-destructive]:not(.qds-icon-only){border-radius:0}.qds-button.qds-icon-only[data-importance=subdued-destructive]{border:none}.qds-button.qds-icon-only[data-importance=subdued-destructive]:hover{background-color:var(--qds-theme-interactive-background-hover);color:var(--qds-theme-feedback-action-destructive-default)}.qds-button.qds-icon-only[data-importance=subdued-destructive]:active{background-color:var(--qds-theme-interactive-background-pressed);color:var(--qds-theme-feedback-action-destructive-default)}[data-action=dropdown-close] .qds-action{transform:rotate(-180deg)}:is([data-action=dropdown],[data-action=dropdown-close]) .qds-action{transition-duration:.3s;transition-property:transform}:is([data-action=dropdown],[data-action=dropdown-close]):not(:has(qds-badge-counter)) .qds-action{margin-inline-start:auto}:is([data-action=dropdown],[data-action=dropdown-close]) qds-badge-counter{margin-inline-start:auto}[data-importance]:is([data-action=dropdown],[data-action=dropdown-close]){padding-inline:var(--qds-control-input-padding-horizontal)}";
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
15
15
|
//
|
|
@@ -299,21 +299,21 @@ const Button = class {
|
|
|
299
299
|
}
|
|
300
300
|
render() {
|
|
301
301
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
302
|
-
return (index.h("div", { key: '
|
|
302
|
+
return (index.h("div", { key: '468af508e68e4fa3664d2d3c69d4bcd01f0fdbe9', class: "qds-container", onClick: __classPrivateFieldGet(this, _Button_onClick, "f"), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, "aria-hidden": "true" }, index.h(Tag, { key: 'a09d6ee8c00b9dce98799786e589ab86f45f6005', class: {
|
|
303
303
|
'qds-button': true,
|
|
304
304
|
'qds-disabled': Tag === 'a' ? __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) : false,
|
|
305
305
|
/* DEPRECATED: will be removed by september 2026 */
|
|
306
306
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
307
|
-
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), "data-action": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get), disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, formAction: this.formAction, formMethod: this.formMethod, formNoValidate: this.formNoValidate, formTarget: this.formTarget, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, tabIndex: -1, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '
|
|
307
|
+
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), "data-action": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedAction_get), disabled: Tag === 'a' ? undefined : this.disabled, download: Tag === 'a' ? this.download : undefined, formAction: this.formAction, formMethod: this.formMethod, formNoValidate: this.formNoValidate, formTarget: this.formTarget, href: Tag === 'a' ? this.href : undefined, name: Tag === 'a' ? undefined : this.name, ref: __classPrivateFieldGet(this, _Button_buttonRef, "f"), rel: Tag === 'a' ? this.rel : undefined, tabIndex: -1, target: Tag === 'a' ? this.target : undefined, type: Tag === 'a' ? undefined : __classPrivateFieldGet(this, _Button_instances, "a", _Button_buttonType_get), value: Tag === 'a' ? undefined : this.value }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '8a591cef73f857b922022278138ebb56fec0737d', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get) && (
|
|
308
308
|
/* DEPRECATED: will be removed by september 2026 */
|
|
309
|
-
index.h("span", { key: '
|
|
309
|
+
index.h("span", { key: 'c4960d8987fc9bdddc1b8607b8eff5eb337d2f2e', class: "qds-overflow", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), ref: __classPrivateFieldGet(this, _Button_spanRef, "f") }, this.text)), isIndicator(this.badge) && (index.h("qds-badge-indicator", { key: 'e9526d7f6c206cc881b569dbb78c788a2fd3a4a9', class: "qds-indicator", status: this.badgeIndicatorStatus, description: this.badgeDescription, size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true })), isCounter(this.badge) && (index.h("qds-badge-counter", { key: '4dcf7b9b616f911c97a5ed64ee4b791769173853', class: {
|
|
310
310
|
/* DEPRECATED: will be removed by september 2026 */
|
|
311
311
|
'qds-indicator': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
312
|
-
}, description: this.badgeDescription, importance: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) !== undefined && (index.h("qds-icon", { key: '
|
|
312
|
+
}, description: this.badgeDescription, importance: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), size: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), strokeRing: true, value: this.badge })), __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) !== undefined && (index.h("qds-icon", { key: 'cc268922f89aaa19f22a151f394f0812ba05eeaf', class: "qds-icon qds-action", "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get), library: "core", name: __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedActionIcon_get) }))), index.h("div", { key: '073d1d89252e4a53bdf0c15e4cfc1cd0c374d70f', class: {
|
|
313
313
|
'qds-focus-ring': true,
|
|
314
314
|
/* DEPRECATED: will be removed by september 2026 */
|
|
315
315
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
316
|
-
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (index.h("qds-tooltip", { key: '
|
|
316
|
+
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (index.h("qds-tooltip", { key: '08150e1bd0c6730999d1c76e9e3fb07504bdd3b7', ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f"), placement: this.tooltipPlacement }, this.text))));
|
|
317
317
|
}
|
|
318
318
|
static get formAssociated() { return true; }
|
|
319
319
|
get host() { return index.getElement(this); }
|