@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
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, F as Fragment, a as readTask, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes,
|
|
7
|
+
import { p as pickFocusEventAttributes, k as ignorePromise, a as isEllipsisActive, i as invariant, c as inheritAriaAttributes } from './helpers-mPQzhx-O.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
10
|
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}";
|
|
@@ -87,7 +87,7 @@ const AvatarMedia = class {
|
|
|
87
87
|
this.roleChanged();
|
|
88
88
|
}
|
|
89
89
|
render() {
|
|
90
|
-
return h("div", { key: '
|
|
90
|
+
return h("div", { key: 'e5f7d19fb53b1ff0ecd5255ee80092917e65948f', class: "qds-container" }, __classPrivateFieldGet$2(this, _AvatarMedia_renderContent, "f").call(this));
|
|
91
91
|
}
|
|
92
92
|
static get watchers() { return {
|
|
93
93
|
"text": ["textChanged", "roleChanged"],
|
|
@@ -98,7 +98,7 @@ const AvatarMedia = class {
|
|
|
98
98
|
_AvatarMedia_renderContent = new WeakMap(), _AvatarMedia_handleImageError = new WeakMap(), _AvatarMedia_handleImageLoad = new WeakMap();
|
|
99
99
|
AvatarMedia.style = avatarMediaCss;
|
|
100
100
|
|
|
101
|
-
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-checkbox,.qds-icon{grid-area:
|
|
101
|
+
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)}";
|
|
102
102
|
|
|
103
103
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
104
104
|
//
|
|
@@ -119,7 +119,7 @@ var __classPrivateFieldSet$1 = (undefined && undefined.__classPrivateFieldSet) |
|
|
|
119
119
|
throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
120
120
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
121
121
|
};
|
|
122
|
-
var _Checkbox_instances,
|
|
122
|
+
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;
|
|
123
123
|
const Checkbox = class {
|
|
124
124
|
constructor(hostRef) {
|
|
125
125
|
registerInstance(this, hostRef);
|
|
@@ -134,6 +134,10 @@ const Checkbox = class {
|
|
|
134
134
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
135
135
|
}
|
|
136
136
|
_Checkbox_instances.add(this);
|
|
137
|
+
/**
|
|
138
|
+
* Whether or not the text is displayed.
|
|
139
|
+
*/
|
|
140
|
+
this.checkboxOnly = false;
|
|
137
141
|
/**
|
|
138
142
|
* Adds vertical margin to the checkbox for alignment.
|
|
139
143
|
*
|
|
@@ -194,13 +198,9 @@ const Checkbox = class {
|
|
|
194
198
|
* @webnative
|
|
195
199
|
*/
|
|
196
200
|
this.willValidate = false;
|
|
197
|
-
/**
|
|
198
|
-
* Whether or not the text is displayed.
|
|
199
|
-
*/
|
|
200
|
-
this.checkboxOnly = false;
|
|
201
201
|
this.tooltip = false;
|
|
202
|
-
_Checkbox_inheritedAttributes.set(this, {});
|
|
203
202
|
_Checkbox_ro.set(this, void 0);
|
|
203
|
+
_Checkbox_savedTabIndex.set(this, 0);
|
|
204
204
|
_Checkbox_span.set(this, void 0);
|
|
205
205
|
_Checkbox_tooltip.set(this, void 0);
|
|
206
206
|
this.checkValidity = () => this.internals.checkValidity();
|
|
@@ -211,16 +211,6 @@ const Checkbox = class {
|
|
|
211
211
|
else
|
|
212
212
|
this.internals.setValidity(NO_ERROR_FLAGS);
|
|
213
213
|
};
|
|
214
|
-
_Checkbox_onBlur.set(this, (event) => {
|
|
215
|
-
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
216
|
-
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
217
|
-
ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").close());
|
|
218
|
-
});
|
|
219
|
-
_Checkbox_onFocus.set(this, (event) => {
|
|
220
|
-
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
221
|
-
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
222
|
-
ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").show());
|
|
223
|
-
});
|
|
224
214
|
_Checkbox_spanRef.set(this, (span) => {
|
|
225
215
|
__classPrivateFieldSet$1(this, _Checkbox_span, span, "f");
|
|
226
216
|
});
|
|
@@ -232,6 +222,16 @@ const Checkbox = class {
|
|
|
232
222
|
}
|
|
233
223
|
});
|
|
234
224
|
}
|
|
225
|
+
onBlur(event) {
|
|
226
|
+
this.blurEmitter.emit(pickFocusEventAttributes(event));
|
|
227
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
228
|
+
ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").close());
|
|
229
|
+
}
|
|
230
|
+
onFocus(event) {
|
|
231
|
+
this.focusEmitter.emit(pickFocusEventAttributes(event));
|
|
232
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f"))
|
|
233
|
+
ignorePromise(__classPrivateFieldGet$1(this, _Checkbox_tooltip, "f").show());
|
|
234
|
+
}
|
|
235
235
|
onClick(event) {
|
|
236
236
|
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)) {
|
|
237
237
|
event.stopImmediatePropagation();
|
|
@@ -239,28 +239,60 @@ const Checkbox = class {
|
|
|
239
239
|
}
|
|
240
240
|
event.preventDefault();
|
|
241
241
|
this.checked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get) ? true : !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get);
|
|
242
|
+
this.internals.ariaChecked = this.checked.toString();
|
|
242
243
|
this.changeEmitter.emit();
|
|
243
244
|
this.indeterminate = false;
|
|
244
245
|
}
|
|
246
|
+
onKeyup(event) {
|
|
247
|
+
if (event.key === ' ') {
|
|
248
|
+
this.host.click();
|
|
249
|
+
event.preventDefault();
|
|
250
|
+
}
|
|
251
|
+
}
|
|
245
252
|
checkedChanged() {
|
|
253
|
+
this.internals.ariaChecked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get).toString();
|
|
246
254
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get) && !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)
|
|
247
255
|
? __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get)
|
|
248
256
|
: // eslint-disable-next-line unicorn/no-null
|
|
249
257
|
null);
|
|
250
258
|
}
|
|
251
259
|
disabledChanged() {
|
|
260
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get)) {
|
|
261
|
+
this.internals.ariaDisabled = 'true';
|
|
262
|
+
this.host.removeAttribute('tabindex');
|
|
263
|
+
// eslint-disable-next-line unicorn/no-null
|
|
264
|
+
this.internals.setFormValue(null);
|
|
265
|
+
}
|
|
266
|
+
else {
|
|
267
|
+
this.internals.ariaDisabled = 'false';
|
|
268
|
+
this.host.tabIndex = __classPrivateFieldGet$1(this, _Checkbox_savedTabIndex, "f");
|
|
269
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get))
|
|
270
|
+
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
271
|
+
}
|
|
252
272
|
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get) && !__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get))
|
|
253
273
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
254
274
|
// eslint-disable-next-line unicorn/no-null
|
|
255
275
|
else
|
|
256
276
|
this.internals.setFormValue(null);
|
|
257
277
|
}
|
|
278
|
+
indeterminateChanged() {
|
|
279
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get))
|
|
280
|
+
this.internals.ariaChecked = 'mixed';
|
|
281
|
+
}
|
|
258
282
|
tabindexChanged(newValue) {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
283
|
+
if (newValue !== null) {
|
|
284
|
+
const parsedValue = Number.parseInt(newValue, 10);
|
|
285
|
+
__classPrivateFieldSet$1(this, _Checkbox_savedTabIndex, Number.isNaN(parsedValue) || !Number.isFinite(parsedValue)
|
|
286
|
+
? 0
|
|
287
|
+
: parsedValue, "f");
|
|
288
|
+
}
|
|
289
|
+
if (__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get))
|
|
290
|
+
this.host.removeAttribute('tabindex');
|
|
291
|
+
else
|
|
292
|
+
this.host.tabIndex = __classPrivateFieldGet$1(this, _Checkbox_savedTabIndex, "f");
|
|
262
293
|
}
|
|
263
294
|
textChanged() {
|
|
295
|
+
this.internals.ariaLabel = this.text;
|
|
264
296
|
if (__classPrivateFieldGet$1(this, _Checkbox_ro, "f"))
|
|
265
297
|
__classPrivateFieldGet$1(this, _Checkbox_ro, "f").disconnect();
|
|
266
298
|
if (!__classPrivateFieldGet$1(this, _Checkbox_span, "f"))
|
|
@@ -279,12 +311,17 @@ const Checkbox = class {
|
|
|
279
311
|
this.internals.setFormValue(__classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedValue_get));
|
|
280
312
|
}
|
|
281
313
|
componentWillLoad() {
|
|
314
|
+
this.internals.role = 'checkbox';
|
|
315
|
+
this.internals.ariaChecked = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedIndeterminate_get)
|
|
316
|
+
? 'mixed'
|
|
317
|
+
: __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedChecked_get).toString();
|
|
318
|
+
this.internals.ariaDisabled = __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get).toString();
|
|
319
|
+
this.internals.ariaLabel = this.text;
|
|
282
320
|
this.valueChanged();
|
|
283
321
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'form', () => this.internals.form);
|
|
284
322
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'willValidate', () => this.internals.willValidate);
|
|
285
323
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'validity', () => this.internals.validity);
|
|
286
324
|
__classPrivateFieldGet$1(this, _Checkbox_instances, "m", _Checkbox_defineGetter).call(this, 'validationMessage', () => this.internals.validationMessage);
|
|
287
|
-
__classPrivateFieldSet$1(this, _Checkbox_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
288
325
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
289
326
|
}
|
|
290
327
|
componentDidLoad() {
|
|
@@ -295,33 +332,32 @@ const Checkbox = class {
|
|
|
295
332
|
__classPrivateFieldGet$1(this, _Checkbox_ro, "f").disconnect();
|
|
296
333
|
}
|
|
297
334
|
render() {
|
|
298
|
-
return (
|
|
299
|
-
|
|
300
|
-
h("label", { key: 'ff46801768016168ffb89acd3148a796dd94765f', "aria-disabled": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get) ? 'true' : undefined, class: {
|
|
335
|
+
return (h("div", { key: '55579e21112535dbaee5c474c2eef661d208767c', "aria-hidden": "true", class: {
|
|
336
|
+
'qds-disabled': __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedDisabled_get),
|
|
301
337
|
'qds-inline': this.inline,
|
|
302
338
|
'qds-label': true,
|
|
303
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, h("div", { key: '
|
|
339
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }, h("div", { key: '6d857b1109e4111d32d2d2de316bc1a1377f5d23', class: "qds-container" }, h("input", { key: '8a9567b8b796112b7959cf29cd80aa51df051136',
|
|
304
340
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
305
|
-
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,
|
|
341
|
+
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 }), h("qds-icon", { key: 'ade28f729ca2e02d9db5c6e6c5f99f49cc6d7d10', class: {
|
|
306
342
|
'qds-icon': true,
|
|
307
343
|
'qds-checked': true,
|
|
308
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("qds-icon", { key: '
|
|
344
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("qds-icon", { key: 'c0dfa142dd90dd7d3adf6e57c71becfe949f43e9', class: {
|
|
309
345
|
'qds-icon': true,
|
|
310
346
|
'qds-indeterminate': true,
|
|
311
|
-
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("span", { key: '
|
|
347
|
+
}, "data-size": __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet$1(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (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 && h("span", { key: '5f0969933396eb3f271040c6140d81c13df47210', class: "qds-required" }, "*"), this.text)), this.tooltip && (h("qds-tooltip", { key: '77d853746163e94cf682aed525d1b1819e4cd383', class: "qds-tooltip", ref: __classPrivateFieldGet$1(this, _Checkbox_tooltipRef, "f") }, this.text))));
|
|
312
348
|
}
|
|
313
|
-
static get delegatesFocus() { return true; }
|
|
314
349
|
static get formAssociated() { return true; }
|
|
315
350
|
get host() { return getElement(this); }
|
|
316
351
|
static get watchers() { return {
|
|
317
352
|
"checked": ["checkedChanged"],
|
|
318
353
|
"disabled": ["disabledChanged"],
|
|
354
|
+
"indeterminate": ["indeterminateChanged"],
|
|
319
355
|
"tabindex": ["tabindexChanged"],
|
|
320
356
|
"text": ["textChanged"],
|
|
321
357
|
"value": ["valueChanged"]
|
|
322
358
|
}; }
|
|
323
359
|
};
|
|
324
|
-
|
|
360
|
+
_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() {
|
|
325
361
|
return this.checked ?? false;
|
|
326
362
|
}, _Checkbox_computedDisabled_get = function _Checkbox_computedDisabled_get() {
|
|
327
363
|
return ((this.host.matches(':disabled') || (this.disabled ?? false)) &&
|
|
@@ -349,7 +385,7 @@ _Checkbox_inheritedAttributes = new WeakMap(), _Checkbox_ro = new WeakMap(), _Ch
|
|
|
349
385
|
};
|
|
350
386
|
Checkbox.style = checkboxCss;
|
|
351
387
|
|
|
352
|
-
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)}";
|
|
388
|
+
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)}";
|
|
353
389
|
|
|
354
390
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
355
391
|
//
|
|
@@ -463,12 +499,12 @@ const Radio = class {
|
|
|
463
499
|
render() {
|
|
464
500
|
return (
|
|
465
501
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
466
|
-
h("label", { key: '
|
|
502
|
+
h("label", { key: '05091a4307f0b719717fda2c9473a934989156d3', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
|
|
467
503
|
'qds-inline': this.inline,
|
|
468
504
|
'qds-label': true,
|
|
469
|
-
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: '
|
|
505
|
+
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: '860a270e9f16e5dc8b8b1523fdbeb24680626d45', class: "qds-container" }, h("input", { key: 'b5638e9a92346848ea1c0b434214825b4ebc3323',
|
|
470
506
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
471
|
-
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") }), h("qds-icon", { key: '
|
|
507
|
+
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") }), 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) && (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 && h("span", { key: 'd6885c32b7bad9cb74cb243cf58524ccce57373a', class: "qds-required" }, "*"), this.text)), this.tooltip && (h("qds-tooltip", { key: '734bbf31d2684af4271b07ebaef5d554c9c17a9c', "aria-hidden": "true", class: "qds-tooltip", ref: __classPrivateFieldGet(this, _Radio_tooltipRef, "f") }, this.text))));
|
|
472
508
|
}
|
|
473
509
|
get host() { return getElement(this); }
|
|
474
510
|
static get watchers() { return {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, a as readTask, h, F as Fragment } from './index-Hg1Liloy.js';
|
|
7
|
-
import { a as isEllipsisActive, b as isCurrentPage } from './helpers-
|
|
7
|
+
import { a as isEllipsisActive, b as isCurrentPage } from './helpers-mPQzhx-O.js';
|
|
8
8
|
|
|
9
9
|
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}";
|
|
10
10
|
|
|
@@ -87,6 +87,11 @@ const QdsBreadcrumbItem = class {
|
|
|
87
87
|
}
|
|
88
88
|
componentWillLoad() {
|
|
89
89
|
this.internals.role = 'listitem';
|
|
90
|
+
this.internals.ariaLabel = this.text;
|
|
91
|
+
// If the breadcrumb item doesn't have an `href`, it's the current page.
|
|
92
|
+
// Note: Chrome is not reflecting the aria-current property in the accessibility tool.
|
|
93
|
+
// eslint-disable-next-line unicorn/no-null
|
|
94
|
+
this.internals.ariaCurrent = this.href === undefined ? 'page' : null;
|
|
90
95
|
this.disabledChanged();
|
|
91
96
|
}
|
|
92
97
|
componentDidLoad() {
|
|
@@ -97,12 +102,12 @@ const QdsBreadcrumbItem = class {
|
|
|
97
102
|
__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
|
|
98
103
|
}
|
|
99
104
|
render() {
|
|
100
|
-
return (h("div", { key: '
|
|
105
|
+
return (h("div", { key: '9d1917bb3ef33e1c3d11e75373bf5bfc383a09e5', class: {
|
|
101
106
|
'qds-breadcrumb-item': true,
|
|
102
107
|
'qds-disabled': __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "a", _QdsBreadcrumbItem_computedDisabled_get),
|
|
103
|
-
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '
|
|
108
|
+
}, ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.iconName !== undefined && this.iconName !== '' && (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)
|
|
104
109
|
? __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderText).call(this)
|
|
105
|
-
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (h("qds-tooltip", { key: '
|
|
110
|
+
: __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (h("qds-tooltip", { key: '08b0db3040f0140592ba7a570fbcc7a241c399ff', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_tooltipRef, "f") }, this.text))));
|
|
106
111
|
}
|
|
107
112
|
static get delegatesFocus() { return true; }
|
|
108
113
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qds-breadcrumb-item.entry.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":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"qds-breadcrumb-item.entry.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":[],"mappings":"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"}
|
|
@@ -4,10 +4,10 @@
|
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
6
|
import { r as registerInstance, c as createEvent, a as readTask, h, g as getElement } from './index-Hg1Liloy.js';
|
|
7
|
-
import { p as pickFocusEventAttributes, a as isEllipsisActive } from './helpers-
|
|
7
|
+
import { p as pickFocusEventAttributes, a as isEllipsisActive } from './helpers-mPQzhx-O.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './controls-CZRW1LV_.js';
|
|
9
9
|
|
|
10
|
-
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:\"
|
|
10
|
+
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)}";
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
13
13
|
//
|
|
@@ -297,21 +297,21 @@ const Button = class {
|
|
|
297
297
|
}
|
|
298
298
|
render() {
|
|
299
299
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
300
|
-
return (h("div", { key: '
|
|
300
|
+
return (h("div", { key: '468af508e68e4fa3664d2d3c69d4bcd01f0fdbe9', class: "qds-container", onClick: __classPrivateFieldGet(this, _Button_onClick, "f"), onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, "aria-hidden": "true" }, h(Tag, { key: 'a09d6ee8c00b9dce98799786e589ab86f45f6005', class: {
|
|
301
301
|
'qds-button': true,
|
|
302
302
|
'qds-disabled': Tag === 'a' ? __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedDisabled_get) : false,
|
|
303
303
|
/* DEPRECATED: will be removed by september 2026 */
|
|
304
304
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
305
|
-
}, "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 !== '' && (h("qds-icon", { key: '
|
|
305
|
+
}, "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 !== '' && (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) && (
|
|
306
306
|
/* DEPRECATED: will be removed by september 2026 */
|
|
307
|
-
h("span", { key: '
|
|
307
|
+
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) && (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) && (h("qds-badge-counter", { key: '4dcf7b9b616f911c97a5ed64ee4b791769173853', class: {
|
|
308
308
|
/* DEPRECATED: will be removed by september 2026 */
|
|
309
309
|
'qds-indicator': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
310
|
-
}, 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 && (h("qds-icon", { key: '
|
|
310
|
+
}, 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 && (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) }))), h("div", { key: '073d1d89252e4a53bdf0c15e4cfc1cd0c374d70f', class: {
|
|
311
311
|
'qds-focus-ring': true,
|
|
312
312
|
/* DEPRECATED: will be removed by september 2026 */
|
|
313
313
|
'qds-icon-only': __classPrivateFieldGet(this, _Button_instances, "a", _Button_iconOnly_get),
|
|
314
|
-
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (h("qds-tooltip", { key: '
|
|
314
|
+
}, "data-importance": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Button_instances, "a", _Button_computedSize_get) }), this.tooltip && (h("qds-tooltip", { key: '08150e1bd0c6730999d1c76e9e3fb07504bdd3b7', ref: __classPrivateFieldGet(this, _Button_tooltipRef, "f"), placement: this.tooltipPlacement }, this.text))));
|
|
315
315
|
}
|
|
316
316
|
static get formAssociated() { return true; }
|
|
317
317
|
get host() { return getElement(this); }
|