@quartzds/core 1.0.0-beta.91 → 1.0.0-beta.93
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index.js +2 -2
- package/components/{p-2806fee1.js → p-50f85f75.js} +6 -30
- package/components/p-50f85f75.js.map +1 -0
- package/components/{p-fed0d11f.js → p-5570cc30.js} +2 -2
- package/components/{p-fed0d11f.js.map → p-5570cc30.js.map} +1 -1
- package/components/{p-c80f112a.js → p-70d12c72.js} +7 -24
- package/components/p-70d12c72.js.map +1 -0
- package/components/{p-ba880369.js → p-72c09714.js} +9 -3
- package/components/p-72c09714.js.map +1 -0
- package/components/{p-d6e52d0b.js → p-80d5edc6.js} +22 -14
- package/components/p-80d5edc6.js.map +1 -0
- package/components/{p-2bf0797c.js → p-8a540ec4.js} +7 -7
- package/components/p-8a540ec4.js.map +1 -0
- package/components/{p-a020ece3.js → p-b5608061.js} +10 -7
- package/components/p-b5608061.js.map +1 -0
- package/components/{p-a6310886.js → p-ba860c62.js} +10 -7
- package/components/p-ba860c62.js.map +1 -0
- package/components/{p-3c48ff53.js → p-e22dd76d.js} +2 -2
- package/components/{p-3c48ff53.js.map → p-e22dd76d.js.map} +1 -1
- package/components/{p-b4c302d4.js → p-e2a9e441.js} +3 -3
- package/components/{p-b4c302d4.js.map → p-e2a9e441.js.map} +1 -1
- package/components/{p-3baf75f4.js → p-fc31384f.js} +4 -4
- package/components/{p-3baf75f4.js.map → p-fc31384f.js.map} +1 -1
- package/components/qds-badge-counter.js +1 -1
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +7 -4
- package/components/qds-breadcrumb-item.js.map +1 -1
- package/components/qds-button.js +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +12 -9
- package/components/qds-chip.js.map +1 -1
- package/components/qds-dialog.js +3 -3
- package/components/qds-dialog.js.map +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +3 -3
- package/components/qds-form-message.js +4 -4
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +4 -4
- package/components/qds-input.js +51 -19
- package/components/qds-input.js.map +1 -1
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +5 -5
- package/components/qds-loader.js +2 -2
- package/components/qds-nav-list-item.js +6 -6
- package/components/qds-progress-bar.js +2 -2
- package/components/qds-radio.js +7 -7
- package/components/qds-radio.js.map +1 -1
- package/components/qds-select.js +3 -3
- package/components/qds-standalone-link.js +4 -4
- package/components/qds-switch.js +5 -5
- package/components/qds-switch.js.map +1 -1
- package/components/qds-tab.js +7 -7
- package/components/qds-tabbar.js +7 -7
- package/components/qds-table-body.js +2 -2
- package/components/qds-table-cell.js +2 -2
- package/components/qds-table-head-cell.js +1 -1
- package/components/qds-table-head.js +2 -2
- package/components/qds-table-row.js +2 -2
- package/components/qds-table.js +2 -2
- package/components/qds-tag.js +1 -1
- package/components/qds-textarea.js +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/{index-523dd2e0.js → index-dbcccf98.js} +6 -29
- package/dist/cjs/index-dbcccf98.js.map +1 -0
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/{library-41b19b9e.js → library-23467d99.js} +8 -2
- package/dist/cjs/library-23467d99.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +1 -1
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +6 -3
- package/dist/cjs/qds-breadcrumb-item.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +17 -9
- package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-chip.cjs.entry.js +10 -7
- package/dist/cjs/qds-chip.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +3 -3
- package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-divider.cjs.entry.js +2 -2
- package/dist/cjs/qds-dropdown.cjs.entry.js +3 -3
- package/dist/cjs/qds-form-message.cjs.entry.js +3 -3
- package/dist/cjs/qds-icon.cjs.entry.js +3 -3
- package/dist/cjs/qds-inline-link.cjs.entry.js +3 -3
- package/dist/cjs/qds-input.cjs.entry.js +44 -13
- package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-label.cjs.entry.js +8 -5
- package/dist/cjs/qds-label.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-list-item.cjs.entry.js +1 -1
- package/dist/cjs/qds-loader.cjs.entry.js +1 -1
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +4 -4
- package/dist/cjs/qds-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/qds-radio.cjs.entry.js +4 -4
- package/dist/cjs/qds-radio.cjs.entry.js.map +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.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-tab.cjs.entry.js +1 -1
- package/dist/cjs/qds-tabbar.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-body.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-head-cell.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-head.cjs.entry.js +2 -2
- package/dist/cjs/qds-table-row.cjs.entry.js +2 -2
- package/dist/cjs/qds-table.cjs.entry.js +2 -2
- package/dist/cjs/qds-tag_2.cjs.entry.js +8 -5
- package/dist/cjs/qds-tag_2.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-textarea.cjs.entry.js +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +6 -21
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/qds.cjs.js +2 -2
- package/dist/custom-elements.json +60 -20
- package/dist/docs.json +1 -1
- package/dist/esm/{index-b1d6acd2.js → index-bc9462c1.js} +6 -30
- package/dist/esm/index-bc9462c1.js.map +1 -0
- package/dist/esm/index.js +2 -2
- package/dist/esm/{library-2e5458af.js → library-52ae166a.js} +8 -2
- package/dist/esm/library-52ae166a.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/qds-badge-counter_2.entry.js +1 -1
- package/dist/esm/qds-breadcrumb-item.entry.js +6 -3
- package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +17 -9
- package/dist/esm/qds-button.entry.js.map +1 -1
- package/dist/esm/qds-checkbox.entry.js +3 -3
- package/dist/esm/qds-checkbox.entry.js.map +1 -1
- package/dist/esm/qds-chip.entry.js +10 -7
- package/dist/esm/qds-chip.entry.js.map +1 -1
- package/dist/esm/qds-dialog.entry.js +3 -3
- package/dist/esm/qds-dialog.entry.js.map +1 -1
- package/dist/esm/qds-divider.entry.js +2 -2
- package/dist/esm/qds-dropdown.entry.js +3 -3
- package/dist/esm/qds-form-message.entry.js +3 -3
- package/dist/esm/qds-icon.entry.js +3 -3
- package/dist/esm/qds-inline-link.entry.js +3 -3
- package/dist/esm/qds-input.entry.js +44 -13
- package/dist/esm/qds-input.entry.js.map +1 -1
- package/dist/esm/qds-label.entry.js +8 -5
- package/dist/esm/qds-label.entry.js.map +1 -1
- package/dist/esm/qds-list-item.entry.js +1 -1
- package/dist/esm/qds-loader.entry.js +1 -1
- package/dist/esm/qds-nav-list-item.entry.js +4 -4
- package/dist/esm/qds-progress-bar.entry.js +2 -2
- package/dist/esm/qds-radio.entry.js +4 -4
- package/dist/esm/qds-radio.entry.js.map +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 +1 -1
- package/dist/esm/qds-tabbar.entry.js +1 -1
- package/dist/esm/qds-table-body.entry.js +2 -2
- package/dist/esm/qds-table-cell.entry.js +2 -2
- package/dist/esm/qds-table-head-cell.entry.js +1 -1
- package/dist/esm/qds-table-head.entry.js +2 -2
- package/dist/esm/qds-table-row.entry.js +2 -2
- package/dist/esm/qds-table.entry.js +2 -2
- package/dist/esm/qds-tag_2.entry.js +8 -5
- package/dist/esm/qds-tag_2.entry.js.map +1 -1
- package/dist/esm/qds-textarea.entry.js +1 -1
- package/dist/esm/qds-tooltip.entry.js +6 -21
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/dist/esm/qds.js +3 -3
- package/dist/types/components/input/input.d.ts +1 -0
- package/dist/types/components/tooltip/tooltip.d.ts +0 -2
- package/hydrate/index.js +143 -118
- package/hydrate/index.mjs +143 -118
- package/package.json +1 -1
- package/components/p-2806fee1.js.map +0 -1
- package/components/p-2bf0797c.js.map +0 -1
- package/components/p-a020ece3.js.map +0 -1
- package/components/p-a6310886.js.map +0 -1
- package/components/p-ba880369.js.map +0 -1
- package/components/p-c80f112a.js.map +0 -1
- package/components/p-d6e52d0b.js.map +0 -1
- package/dist/cjs/index-523dd2e0.js.map +0 -1
- package/dist/cjs/library-41b19b9e.js.map +0 -1
- package/dist/esm/index-b1d6acd2.js.map +0 -1
- package/dist/esm/library-2e5458af.js.map +0 -1
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, c as createEvent, h } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, c as createEvent, h } from './p-50f85f75.js';
|
|
7
7
|
import { p as pickFocusEventAttributes, i as inheritAriaAttributes } from './p-8abba29b.js';
|
|
8
8
|
import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
|
|
9
|
-
import { d as defineCustomElement$3 } from './p-
|
|
10
|
-
import { d as defineCustomElement$2 } from './p-
|
|
11
|
-
import { d as defineCustomElement$1 } from './p-
|
|
9
|
+
import { d as defineCustomElement$3 } from './p-72c09714.js';
|
|
10
|
+
import { d as defineCustomElement$2 } from './p-b5608061.js';
|
|
11
|
+
import { d as defineCustomElement$1 } from './p-70d12c72.js';
|
|
12
12
|
|
|
13
|
-
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:
|
|
13
|
+
const checkboxCss = ":host([hidden]){display:none!important}:host{display:inline-block;line-height:0}.qds-box,.qds-checkbox,.qds-icon{grid-area:e;place-self:center}.qds-box,.qds-icon{display:none;pointer-events:none}.qds-box{border-radius:var(--qds-control-toggle-indicator-border-radius)}.qds-container{align-self:flex-start;display:grid;grid-template-areas:\"e\"}.qds-icon{color:var(--qds-theme-signature-color-contrast)}.qds-label{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner{flex:1 1 auto;min-width:0}.qds-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-checkbox:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-checkbox:active~.qds-box,.qds-checkbox:hover~.qds-box{display:block}.qds-checkbox:hover~.qds-box{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:active~.qds-box{background-color:var(--qds-theme-signature-color-pressed)}.qds-checkbox:checked~.qds-checked,.qds-checkbox:indeterminate~.qds-indeterminate{display:block}.qds-checkbox:checked,.qds-checkbox:indeterminate{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-checkbox:checked:hover,.qds-checkbox:indeterminate:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-checkbox:checked:active,.qds-checkbox:indeterminate:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true]{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-checkbox[data-size=small]{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small]{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small]{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small]{gap:var(--qds-control-small-gap-siblings-related)}.qds-checkbox[data-size=standard]{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard]{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard]{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard]{gap:var(--qds-control-standard-gap-siblings-related)}.qds-checkbox[data-size=large]{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large]{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large]{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large]{gap:var(--qds-control-large-gap-siblings-related)}";
|
|
14
14
|
const QdsCheckboxStyle0 = checkboxCss;
|
|
15
15
|
|
|
16
16
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -178,7 +178,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
|
|
|
178
178
|
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "checked" }), h("div", { key: 'cc97d644310d3abdb01d115dbfe6e9f2a7a1ba30', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get) }), h("qds-icon", { key: '23fa431abd3bee1a88be51e243d5c7518732825d', "aria-hidden": "true", class: {
|
|
179
179
|
'qds-icon': true,
|
|
180
180
|
'qds-indeterminate': true,
|
|
181
|
-
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: '
|
|
181
|
+
}, "data-size": __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_computedSize_get), library: "core", name: "indeterminate" })), __classPrivateFieldGet(this, _Checkbox_instances, "a", _Checkbox_hasText_get) && (h("qds-label", { key: 'c412f04c3558b1e1513c67cc314d624ab83f2b15', class: "qds-label-inner", required: this.required, size: this.size, text: this.text }))));
|
|
182
182
|
}
|
|
183
183
|
static get delegatesFocus() { return true; }
|
|
184
184
|
static get formAssociated() { return true; }
|
|
@@ -269,4 +269,4 @@ function defineCustomElement() {
|
|
|
269
269
|
|
|
270
270
|
export { Checkbox as C, defineCustomElement as d };
|
|
271
271
|
|
|
272
|
-
//# sourceMappingURL=p-
|
|
272
|
+
//# sourceMappingURL=p-8a540ec4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-8a540ec4.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,ktGAAktG,CAAC;AACvuG,0BAAe,WAAW;;ACD1B;AACA;AACA;;;;;;;;;;;;;;;;;;MAmCa,QAAQ;IANrB;;;;;;;;;;;;;;;QAa0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,SAAI,GAAU,UAAU,CAAA;;;;;;;;;;;;;;;;;;QA0CxB,SAAI,GAAsC,IAAI,CAAA;;;;;;;;QAwCtD,sBAAiB,GAA0C,EAAE,CAAA;;;;;;;;;QAUrD,aAAQ,GAAiC,WAAW,CAAA;;;;;;QAOpD,UAAK,GAAmB,IAAI,CAAA;;;;;;;;QAS5B,iBAAY,GAAqC,KAAK,CAAA;;;;QAKtD,iBAAY,GAAY,KAAK,CAAA;QA0BrD,wCAAmC,EAAE,EAAA;QAkK9B,kBAAa,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEzB,mBAAc,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAE1B,sBAAiB,GAA0C,CAAC,KAAK;YACtE,IAAI,KAAK;gBAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;;gBACtE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;SAChD,CAAA;QAEQ,2BAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,4BAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;KAKF;IAhJW,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,2DAAkB,EAAE;YAC1B,KAAK,CAAC,wBAAwB,EAAE,CAAA;YAChC,OAAM;SACP;QAED,KAAK,CAAC,cAAc,EAAE,CAAA;QAEtB,IAAI,CAAC,OAAO,GAAG,uBAAA,IAAI,gEAAuB,GAAG,IAAI,GAAG,CAAC,uBAAA,IAAI,0DAAiB,CAAA;QAC1E,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;QACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAA;KAC3B;IAGS,cAAc;QACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CACzB,uBAAA,IAAI,0DAAiB,IAAI,CAAC,uBAAA,IAAI,2DAAkB;cAC5C,uBAAA,IAAI,wDAAe;;gBAEnB,IAAI,CACT,CAAA;KACF;IAGS,eAAe;QACvB,IAAI,uBAAA,IAAI,0DAAiB,IAAI,CAAC,uBAAA,IAAI,2DAAkB;YAClD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,wDAAe,CAAC,CAAA;;;YAE7C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;KACvC;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ;YACX,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW,CAAA;KAC3E;IAGS,YAAY;QACpB,IAAI,uBAAA,IAAI,0DAAiB,IAAI,CAAC,uBAAA,IAAI,2DAAkB;YAClD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,wDAAe,CAAC,CAAA;KACnD;IAEM,iBAAiB;QACtB,IAAI,CAAC,YAAY,EAAE,CAAA;QAEnB,uBAAA,IAAI,mDAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACrD,uBAAA,IAAI,mDAAc,MAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACrE,uBAAA,IAAI,mDAAc,MAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC7D,uBAAA,IAAI,mDAAc,MAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QAED,uBAAA,IAAI,iCAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;QAC5D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAA;KAChE;IAEM,MAAM;QACX;;QAEE,+EACiB,uBAAA,IAAI,2DAAkB,GAAG,MAAM,GAAG,SAAS,EAC1D,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,uDAAc,IAE7B,4DAAK,KAAK,EAAC,eAAe,IACxB;;YAEE,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAC9B,OAAO,EAAE,uBAAA,IAAI,gEAAuB,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,EAC3D,KAAK,EAAC,cAAc,eACT,uBAAA,IAAI,uDAAc,EAC7B,QAAQ,EAAE,uBAAA,IAAI,2DAAkB,EAChC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,MAAM,EAAE,uBAAA,IAAI,wBAAQ,EACpB,OAAO,EAAE,uBAAA,IAAI,yBAAS,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,uBAAA,IAAI,2DAAkB,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5D,IAAI,EAAC,UAAU,gBACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,KAEjD,uBAAA,IAAI,qCAAqB,GAC7B,EACF,gFACc,MAAM,EAClB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,aAAa,EAAE,IAAI;aACpB,eACU,uBAAA,IAAI,uDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,GACd,EACF,4DAAK,KAAK,EAAC,SAAS,eAAY,uBAAA,IAAI,uDAAc,GAAI,EACtD,gFACc,MAAM,EAClB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,mBAAmB,EAAE,IAAI;aAC1B,eACU,uBAAA,IAAI,uDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,eAAe,GACpB,CACE,EACL,uBAAA,IAAI,kDAAS,KACZ,kEACE,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACH,CACK,EACT;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA7JC,OAAO,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;AAC9B,CAAC;IAGC,QACE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO,EAC/C;AACH,CAAC;IAGC,OAAO,IAAI,CAAC,aAAa,IAAI,KAAK,CAAA;AACpC,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;IAIC,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;AAC1D,CAAC;IAGC,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,EAAE,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAA;AAC3E,CAAC,2DAgJa,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/checkbox/checkbox.css?tag=qds-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-checkbox,\n.qds-box,\n.qds-icon {\n grid-area: checkbox;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-toggle-indicator-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'checkbox';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n width: inherit;\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.qds-checkbox {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked ~ .qds-checked,\n &:indeterminate ~ .qds-indeterminate {\n display: block;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-checkbox {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport { inheritAriaAttributes, pickFocusEventAttributes } from '../../helpers'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type CheckboxValue = number | string | null\n\n/**\n * `<qds-checkbox>` elements are rendered as boxes that are checked (ticked)\n * when activated, like you might see in an official government paper form. A\n * checkbox allows you to select single values for submission in a form (or not).\n *\n * @see https://quartz.se.com/build/components/checkbox\n */\n@Component({\n tag: 'qds-checkbox',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'checkbox.css',\n})\nexport class Checkbox implements ComponentInterface {\n /**\n * Adds vertical margin to the checkbox for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The checkbox's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The checkbox's text.\n *\n * Its value will also be used as the `aria-label` value when the\n * `checkbox-only` attribute is specified.\n */\n @Prop() public readonly text!: string\n\n /**\n * Sets the checkbox's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the checkbox from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the checkbox with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-checkbox>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-checkbox>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Sets the checkbox to an indeterminate state. This is usually applied to\n * checkboxes that represent a \"select all/none\" behavior when associated\n * checkboxes have a mix of checked and unchecked states.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public indeterminate?: boolean\n\n /**\n * The name of the checkbox, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * A value must be specified for the checkbox before the owning form can be\n * submitted.\n *\n * See\n * [Client-side validation](https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation)\n * and the\n * [HTML attribute: `required`](https://developer.mozilla.org/docs/Web/HTML/Attributes/required)\n * for more information.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The error message that would be shown to the user if the `<qds-checkbox>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-checkbox>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the checkbox, submitted as a name/value pair with form data.\n *\n * @webnative\n */\n @Prop() public readonly value?: CheckboxValue = 'on'\n\n /**\n * True if `<qds-checkbox>` will be validated when the form is submitted;\n * false otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n /**\n * Whether or not the text is displayed.\n */\n @Prop() public readonly checkboxOnly: boolean = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the checkbox loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when a change to the checkbox's state is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the checkbox gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n get #computedChecked(): boolean {\n return this.checked ?? false\n }\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedIndeterminate(): boolean {\n return this.indeterminate ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): string | null {\n // eslint-disable-next-line unicorn/no-null\n return this.value == null ? null : this.value.toString()\n }\n\n get #hasText(): boolean {\n return (this.text !== '' || this.required === true) && !this.checkboxOnly\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n event.preventDefault()\n\n this.checked = this.#computedIndeterminate ? true : !this.#computedChecked\n this.changeEmitter.emit()\n this.indeterminate = false\n }\n\n @Watch('checked')\n protected checkedChanged(): void {\n this.internals.setFormValue(\n this.#computedChecked && !this.#computedDisabled\n ? this.#computedValue\n : // eslint-disable-next-line unicorn/no-null\n null,\n )\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n // eslint-disable-next-line unicorn/no-null\n else this.internals.setFormValue(null)\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (this.#computedChecked && !this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.valueChanged()\n\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n checked={this.#computedIndeterminate ? false : this.checked}\n class=\"qds-checkbox\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n indeterminate={this.indeterminate}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"checkbox\"\n aria-label={this.checkboxOnly ? this.text : undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-checked': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class={{\n 'qds-icon': true,\n 'qds-indeterminate': true,\n }}\n data-size={this.#computedSize}\n library=\"core\"\n name=\"indeterminate\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n required={this.required}\n size={this.size}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n if (error) this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.host)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, r as readTask, h } from './p-50f85f75.js';
|
|
7
7
|
import { b as isOverflowing } from './p-8abba29b.js';
|
|
8
|
-
import { d as defineCustomElement$1 } from './p-
|
|
8
|
+
import { d as defineCustomElement$1 } from './p-70d12c72.js';
|
|
9
9
|
|
|
10
|
-
const labelCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-label:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}";
|
|
10
|
+
const labelCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap);width:100%}.qds-label:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}";
|
|
11
11
|
const QdsLabelStyle0 = labelCss;
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -72,7 +72,10 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
|
|
|
72
72
|
__classPrivateFieldGet(this, _Label_ro, "f").disconnect();
|
|
73
73
|
if (!__classPrivateFieldGet(this, _Label_span, "f"))
|
|
74
74
|
return;
|
|
75
|
-
|
|
75
|
+
const span = __classPrivateFieldGet(this, _Label_span, "f");
|
|
76
|
+
readTask(() => {
|
|
77
|
+
this.tooltip = isOverflowing(span);
|
|
78
|
+
});
|
|
76
79
|
__classPrivateFieldSet(this, _Label_ro, new ResizeObserver(([spanEntry]) => {
|
|
77
80
|
this.tooltip = isOverflowing(spanEntry.target);
|
|
78
81
|
}), "f");
|
|
@@ -86,12 +89,12 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends H {
|
|
|
86
89
|
__classPrivateFieldGet(this, _Label_ro, "f").disconnect();
|
|
87
90
|
}
|
|
88
91
|
render() {
|
|
89
|
-
return (h("span", { key: '
|
|
92
|
+
return (h("span", { key: 'bd56de0869e706f0b028e0fb03e0cc946cbbf1fd', class: {
|
|
90
93
|
'qds-inline': this.inline,
|
|
91
94
|
'qds-label': true,
|
|
92
95
|
}, "data-size": __classPrivateFieldGet(this, _Label_instances, "a", _Label_computedSize_get), ref: __classPrivateFieldGet(this, _Label_labelRef, "f"),
|
|
93
96
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
94
|
-
tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '
|
|
97
|
+
tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '9df743ea0b47028f9ae6951d88d2d353fd813a4b', class: "qds-required" }, "*"), h("span", { key: '680c6840424a63e6533230e249ec3b10ac5b0ab7', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (h("qds-tooltip", { key: '6ec7e5624a50e5d9084580dcd40359fb88d9b8ff', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
|
|
95
98
|
}
|
|
96
99
|
static get watchers() { return {
|
|
97
100
|
"text": ["textChanged"]
|
|
@@ -139,4 +142,4 @@ function defineCustomElement() {
|
|
|
139
142
|
|
|
140
143
|
export { Label as L, defineCustomElement as d };
|
|
141
144
|
|
|
142
|
-
//# sourceMappingURL=p-
|
|
145
|
+
//# sourceMappingURL=p-b5608061.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-b5608061.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,kgCAAkgC,CAAC;AACphC,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAkBa,KAAK;IALlB;;;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,aAAQ,GAAY,KAAK,CAAA;;;;QAKzB,SAAI,GAAU,UAAU,CAAA;QAO/B,YAAO,GAAG,KAAK,CAAA;QAEhC,+BAAwB;QAExB,4BAAoB;QAEpB,8BAAuB;QAgEd,0BAAY,CAAC,KAAuB;YAC3C,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,yBAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,eAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,4BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,oBAAO,CAAA;SAC/B,EAAA;KACF;IA7DW,WAAW;QACnB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,mBAAM;YAAE,OAAM;QAEvB,MAAM,IAAI,GAAG,uBAAA,IAAI,mBAAM,CAAA;QACvB,QAAQ,CAAC;YACP,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,CAAA;SACnC,CAAC,CAAA;QACF,uBAAA,IAAI,aAAO,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;SAC/C,CAAC,MAAA,CAAA;QACF,uBAAA,IAAI,iBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;KAC7B;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAU;;YAEnB,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,IAErC,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,cAAc,QAAS,EACrD,6DAAM,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,uBAAA,IAAI,sBAAS,IACtC,IAAI,CAAC,IAAI,CACL,EACN,IAAI,CAAC,OAAO,KACX,mFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,yBAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACI,EACR;KACF;;;;;;;;;;;;;;;IA3DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.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-label {\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n display: inline-flex;\n gap: var(--qds-text-icon-gap);\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n outline-offset: var(--qds-focus-border-offset);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-required {\n color: var(--qds-theme-feedback-field-required);\n user-select: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, readTask, State, Watch } from '@stencil/core'\n\nimport { isOverflowing } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n tag: 'qds-label',\n shadow: true,\n styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n /**\n * Adds vertical margin to the label for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * Specify the labelled item as required by appending a red asterisk (*).\n */\n @Prop() public readonly required: boolean = false\n\n /**\n * The label's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The label's text.\n */\n @Prop() public readonly text?: string\n\n @State() private tooltip = false\n\n #label?: HTMLSpanElement\n\n #ro?: ResizeObserver\n\n #span?: HTMLSpanElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @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 = isOverflowing(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isOverflowing(spanEntry.target)\n })\n this.#ro.observe(this.#span)\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 <span\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n ref={this.#labelRef}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={this.tooltip ? 0 : undefined}\n >\n {this.required && <span class=\"qds-required\">*</span>}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </span>\n )\n }\n\n readonly #labelRef = (label?: HTMLSpanElement): void => {\n this.#label = label\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.#label\n }\n}\n"],"version":3}
|
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h, F as Fragment } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, h, F as Fragment } from './p-50f85f75.js';
|
|
7
7
|
import { i as inheritAriaAttributes } from './p-8abba29b.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
9
|
-
import { d as defineCustomElement$1 } from './p-
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-5570cc30.js';
|
|
9
|
+
import { d as defineCustomElement$1 } from './p-72c09714.js';
|
|
10
10
|
|
|
11
|
-
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{text-overflow:ellipsis}.qds-sr-only,.qds-text{overflow:hidden;white-space:nowrap}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-message-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-control-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-message-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-message-success);color:var(--qds-theme-feedback-message-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{font:var(--qds-control-small-text);gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height)
|
|
11
|
+
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;max-width:inherit;min-width:inherit;width:inherit}.qds-text{text-overflow:ellipsis}.qds-sr-only,.qds-text{overflow:hidden;white-space:nowrap}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;padding:0;position:absolute;width:1px}.qds-icon{flex-shrink:0}[data-status=error]{color:var(--qds-theme-feedback-message-critical)}[data-status=success]{color:var(--qds-theme-feedback-message-success)}[data-status=warning]{color:var(--qds-theme-feedback-message-important)}[data-status=info]{color:var(--qds-theme-feedback-message-informational)}[data-status=neutral]{color:var(--qds-theme-feedback-message-neutral)}[data-importance=subdued] .qds-text{color:var(--qds-theme-control-text-standard)}[data-importance=standard][data-status=error]{background-color:var(--qds-theme-feedback-message-critical-dimmed)}[data-importance=standard][data-status=success]{background-color:var(--qds-theme-feedback-message-success-dimmed)}[data-importance=standard][data-status=warning]{background-color:var(--qds-theme-feedback-message-important-dimmed)}[data-importance=standard][data-status=info]{background-color:var(--qds-theme-feedback-message-informational-dimmed)}[data-importance=standard][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral-dimmed)}[data-importance=emphasized][data-status=error]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}[data-importance=emphasized][data-status=success]{background-color:var(--qds-theme-feedback-message-success);color:var(--qds-theme-feedback-message-success-contrast)}[data-importance=emphasized][data-status=warning]{background-color:var(--qds-theme-feedback-message-important);color:var(--qds-theme-feedback-message-important-contrast)}[data-importance=emphasized][data-status=info]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=emphasized][data-status=neutral]{background-color:var(--qds-theme-feedback-message-neutral);color:var(--qds-theme-feedback-message-neutral-contrast)}.qds-tag[data-size=small]{font:var(--qds-control-small-text);gap:var(--qds-control-small-gap-internal);height:var(--qds-control-small-height)}.qds-padding[data-size=small]{padding-inline:var(--qds-control-chip-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-tag[data-size=standard]{font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-internal);height:var(--qds-control-standard-height)}.qds-padding[data-size=standard]{padding-inline:var(--qds-control-chip-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-tag[data-size=large]{font:var(--qds-control-large-text);gap:var(--qds-control-large-gap-internal);height:var(--qds-control-large-height)}.qds-padding[data-size=large]{padding-inline:var(--qds-control-chip-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
|
|
12
12
|
const QdsTagStyle0 = tagCss;
|
|
13
13
|
|
|
14
14
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -63,8 +63,11 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
|
|
|
63
63
|
__classPrivateFieldSet(this, _Tag_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
64
64
|
}
|
|
65
65
|
render() {
|
|
66
|
-
return (h("span", { key: '
|
|
67
|
-
|
|
66
|
+
return (h("span", { key: '60e2278d0dc1a67f55b56269a88030efc10d8b7c', class: {
|
|
67
|
+
'qds-tag': true,
|
|
68
|
+
'qds-padding': this.importance !== 'subdued',
|
|
69
|
+
}, "data-importance": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedImportance_get), "data-size": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), "data-status": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedStatus_get), ...__classPrivateFieldGet(this, _Tag_inheritedAttributes, "f") }, this.iconName !== undefined && this.iconName !== '' ? (h(Fragment, null, this.iconDescription !== undefined &&
|
|
70
|
+
this.iconDescription !== '' && (h("span", { class: "qds-sr-only" }, this.iconDescription)), h("qds-icon", { "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), library: this.iconLibrary, name: this.iconName }))) : (__classPrivateFieldGet(this, _Tag_instances, "a", _Tag_hasBadge_get) && (h("qds-badge-indicator", { status: __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedStatus_get), description: this.badgeDescription, size: __classPrivateFieldGet(this, _Tag_instances, "a", _Tag_computedSize_get), strokeRing: true }))), h("span", { key: 'fc666a3f4dcfeb01c5309d3f54d41ce6c1a8f532', class: "qds-text" }, this.text)));
|
|
68
71
|
}
|
|
69
72
|
get host() { return this; }
|
|
70
73
|
static get style() { return QdsTagStyle0; }
|
|
@@ -141,4 +144,4 @@ function defineCustomElement() {
|
|
|
141
144
|
|
|
142
145
|
export { Tag as T, defineCustomElement as d };
|
|
143
146
|
|
|
144
|
-
//# sourceMappingURL=p-
|
|
147
|
+
//# sourceMappingURL=p-ba860c62.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"p-ba860c62.js","mappings":";;;;;;;;;;AAAA,MAAM,MAAM,GAAG,+zGAA+zG,CAAC;AAC/0G,qBAAe,MAAM;;ACDrB;AACA;AACA;;;;;;;;;;;;;;;;;;MAsBa,GAAG;IALhB;;;;;;;;QAgB0B,gBAAW,GAAW,SAAS,CAAA;;;;QAK/B,eAAU,GAAgB,UAAU,CAAA;;;;QAKpC,WAAM,GAAe,SAAS,CAAA;;;;QAK9B,SAAI,GAAU,UAAU,CAAA;;;;QAexB,UAAK,GAAa,KAAK,CAAA;QAU/C,mCAAmC,EAAE,EAAA;KA0FtC;IA7CQ,iBAAiB;QACtB,uBAAA,IAAI,4BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI;gBACf,aAAa,EAAE,IAAI,CAAC,UAAU,KAAK,SAAS;aAC7C,qBACgB,uBAAA,IAAI,mDAAoB,eAC9B,uBAAA,IAAI,6CAAc,iBAChB,uBAAA,IAAI,+CAAgB,KAE7B,uBAAA,IAAI,gCAAqB,IAE5B,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,IAClD,kBACG,IAAI,CAAC,eAAe,KAAK,SAAS;YACjC,IAAI,CAAC,eAAe,KAAK,EAAE,KACzB,YAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,eAAe,CAAQ,CACxD,EACH,+BACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,6CAAc,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,GACnB,CACD,KAEH,uBAAA,IAAI,yCAAU,KACZ,2BACE,MAAM,EAAE,uBAAA,IAAI,+CAAgB,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,IAAI,EAAE,uBAAA,IAAI,6CAAc,EACxB,UAAU,SACV,CACH,CACF,EACD,6DAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CACpC,EACR;KACF;;;;;;;;;;;;;;;IAtFC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,SAAS,CAAC;QACf,KAAK,YAAY,EAAE;YACjB,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,MAAM;QACjB,KAAK,OAAO,CAAC;QACb,KAAK,MAAM,CAAC;QACZ,KAAK,SAAS,CAAC;QACf,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QACD,SAAS;YACP,OAAO,SAAS,CAAA;SACjB;KACF;AACH,CAAC;IAGC,OAAO,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,UAAU,KAAK,YAAY,CAAA;AAClE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.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-tag {\n align-items: center;\n border-radius: var(--qds-control-rounded-border-radius);\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n max-width: inherit;\n min-width: inherit;\n width: inherit;\n}\n\n.qds-text {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n[data-status='error'] {\n color: var(--qds-theme-feedback-message-critical);\n}\n\n[data-status='success'] {\n color: var(--qds-theme-feedback-message-success);\n}\n\n[data-status='warning'] {\n color: var(--qds-theme-feedback-message-important);\n}\n\n[data-status='info'] {\n color: var(--qds-theme-feedback-message-informational);\n}\n\n[data-status='neutral'] {\n color: var(--qds-theme-feedback-message-neutral);\n}\n\n[data-importance='subdued'] .qds-text {\n color: var(--qds-theme-control-text-standard);\n}\n\n[data-importance='standard'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical-dimmed);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success-dimmed);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important-dimmed);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational-dimmed);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral-dimmed);\n }\n}\n\n[data-importance='emphasized'] {\n &[data-status='error'] {\n background-color: var(--qds-theme-feedback-message-critical);\n color: var(--qds-theme-feedback-message-critical-contrast);\n }\n\n &[data-status='success'] {\n background-color: var(--qds-theme-feedback-message-success);\n color: var(--qds-theme-feedback-message-success-contrast);\n }\n\n &[data-status='warning'] {\n background-color: var(--qds-theme-feedback-message-important);\n color: var(--qds-theme-feedback-message-important-contrast);\n }\n\n &[data-status='info'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n }\n\n &[data-status='neutral'] {\n background-color: var(--qds-theme-feedback-message-neutral);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n }\n}\n\n[data-size='small'] {\n &.qds-tag {\n font: var(--qds-control-small-text);\n gap: var(--qds-control-small-gap-internal);\n height: var(--qds-control-small-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-control-chip-small-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-control-small-icon-size);\n height: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tag {\n font: var(--qds-control-standard-text);\n gap: var(--qds-control-standard-gap-internal);\n height: var(--qds-control-standard-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-control-chip-standard-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tag {\n font: var(--qds-control-large-text);\n gap: var(--qds-control-large-gap-internal);\n height: var(--qds-control-large-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-control-chip-large-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, Fragment, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\nimport type { Importance, Size, Status } from '../shared'\n\nexport type TagStatus = Status | 'neutral'\n\n/**\n * The `<qds-tag>` element is a static descriptor used for items that need to\n * be labeled, categorized, or organized using keywords that describe them.\n *\n * @see https://quartz.se.com/build/components/tag\n */\n@Component({\n tag: 'qds-tag',\n shadow: true,\n styleUrl: 'tag.css',\n})\nexport class Tag implements ComponentInterface {\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 tag's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The tag's status.\n */\n @Prop() public readonly status?: TagStatus = 'neutral'\n\n /**\n * The tag's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The tag's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Provides a text description of the icon for screen readers.\n */\n @Prop() public readonly iconDescription?: string\n\n /**\n * Displays an indicator if `true`.\n */\n @Prop() public readonly badge?: boolean = false\n\n /**\n * The indicator badge's accessible text that will be used by\n * screen readers.\n */\n @Prop() public readonly badgeDescription?: string\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedStatus(): TagStatus {\n switch (this.status) {\n case 'error':\n case 'info':\n case 'success':\n case 'warning': {\n return this.status\n }\n default: {\n return 'neutral'\n }\n }\n }\n\n get #hasBadge(): boolean {\n return (this.badge ?? false) && this.importance !== 'emphasized'\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-tag': true,\n 'qds-padding': this.importance !== 'subdued',\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n data-status={this.#computedStatus}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n {this.iconName !== undefined && this.iconName !== '' ? (\n <>\n {this.iconDescription !== undefined &&\n this.iconDescription !== '' && (\n <span class=\"qds-sr-only\">{this.iconDescription}</span>\n )}\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n </>\n ) : (\n this.#hasBadge && (\n <qds-badge-indicator\n status={this.#computedStatus}\n description={this.badgeDescription}\n size={this.#computedSize}\n strokeRing\n />\n )\n )}\n <span class=\"qds-text\">{this.text}</span>\n </span>\n )\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, h } from './p-50f85f75.js';
|
|
7
7
|
|
|
8
8
|
const badgeCounterCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-badge-counter{align-items:center;background-color:var(--qds-theme-feedback-message-neutral);border-radius:var(--qds-control-toggle-indicator-rounded-border-radius);color:var(--qds-theme-feedback-message-neutral-contrast);display:flex;font:var(--qds-badge-standard-text);height:var(--qds-badge-counter-standard-height);justify-content:center;margin:0;padding-inline:var(--qds-badge-standard-padding-horizontal);text-align:center}.qds-stroke-ring{border:var(--qds-badge-border-width) solid var(--qds-theme-feedback-message-neutral-contrast)}.qds-sr-only{clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}[data-importance=emphasized]{background-color:var(--qds-theme-signature-color-contrast);color:var(--qds-theme-signature-color-default)}.qds-stroke-ring[data-importance=emphasized]{border-color:var(--qds-theme-signature-color-default)}[data-importance=subdued]{background-color:var(--qds-theme-feedback-message-informational);color:var(--qds-theme-feedback-message-informational-contrast)}.qds-stroke-ring[data-importance=subdued]{border-color:var(--qds-theme-feedback-message-informational-contrast)}[data-importance=destructive]{background-color:var(--qds-theme-feedback-message-critical-contrast);color:var(--qds-theme-feedback-message-critical)}.qds-stroke-ring[data-importance=destructive]{border-color:var(--qds-theme-feedback-message-critical)}[data-importance=subdued-destructive]{background-color:var(--qds-theme-feedback-message-critical);color:var(--qds-theme-feedback-message-critical-contrast)}.qds-stroke-ring[data-importance=subdued-destructive]{border-color:var(--qds-theme-feedback-message-critical-contrast)}[data-size=small]{font:var(--qds-badge-small-text);height:var(--qds-badge-counter-small-height);padding-inline:var(--qds-badge-small-padding-horizontal)}[data-size=large]{font:var(--qds-badge-large-text);height:var(--qds-badge-counter-large-height);padding-inline:var(--qds-badge-large-padding-horizontal)}[data-size=hero]{font:var(--qds-badge-hero-text);height:var(--qds-badge-counter-hero-height);padding-inline:var(--qds-badge-hero-padding-horizontal)}";
|
|
9
9
|
const QdsBadgeCounterStyle0 = badgeCounterCss;
|
|
@@ -100,4 +100,4 @@ function defineCustomElement() {
|
|
|
100
100
|
|
|
101
101
|
export { BadgeCounter as B, defineCustomElement as d };
|
|
102
102
|
|
|
103
|
-
//# sourceMappingURL=p-
|
|
103
|
+
//# sourceMappingURL=p-e22dd76d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-e22dd76d.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,4qEAA4qE,CAAC;AACrsE,8BAAe,eAAe;;ACD9B;AACA;AACA;;;;;;;;;MAwBa,YAAY;IALzB;;;;;;;;QAmB0B,eAAU,GAA4B,UAAU,CAAA;;;;QAKhD,SAAI,GAAsB,UAAU,CAAA;;;;QAKpC,eAAU,GAAY,KAAK,CAAA;KA4DpD;IAfQ,MAAM;QACX,QACE,6DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,iBAAiB,EAAE,IAAI,CAAC,UAAU;aACnC,qBACgB,uBAAA,IAAI,qEAAoB,eAC9B,uBAAA,IAAI,+DAAc,IAE5B,uBAAA,IAAI,gEAAe,EACpB,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,EACR;KACF;;;;;;;;;;IAnDC,MAAM,KAAK,GACT,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ;UAC1B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;;aAE9B,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC,GAAG,CAAC,CAAA;IAChC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC;QAAE,OAAO,EAAE,CAAA;IAE/C,OAAO,KAAK,GAAG,GAAG,GAAG,KAAK,CAAC,QAAQ,EAAE,GAAG,KAAK,CAAA;AAC/C,CAAC;IAGC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,SAAS,CAAC;QACf,KAAK,aAAa,CAAC;QACnB,KAAK,qBAAqB,CAAC;QAC3B,KAAK,YAAY,EAAE;YACjB,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,MAAM,CAAC;QACZ,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badge-counter/badge-counter.css?tag=qds-badge-counter&encapsulation=shadow","src/components/badge-counter/badge-counter.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-badge-counter {\n align-items: center;\n background-color: var(--qds-theme-feedback-message-neutral);\n border-radius: var(--qds-control-toggle-indicator-rounded-border-radius);\n color: var(--qds-theme-feedback-message-neutral-contrast);\n display: flex;\n font: var(--qds-badge-standard-text);\n height: var(--qds-badge-counter-standard-height);\n justify-content: center;\n margin: 0;\n padding-inline: var(--qds-badge-standard-padding-horizontal);\n text-align: center;\n}\n\n.qds-stroke-ring {\n border: var(--qds-badge-border-width) solid\n var(--qds-theme-feedback-message-neutral-contrast);\n}\n\n.qds-sr-only {\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-signature-color-contrast);\n color: var(--qds-theme-signature-color-default);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-signature-color-default);\n }\n}\n\n[data-importance='subdued'] {\n background-color: var(--qds-theme-feedback-message-informational);\n color: var(--qds-theme-feedback-message-informational-contrast);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-informational-contrast);\n }\n}\n\n[data-importance='destructive'] {\n background-color: var(--qds-theme-feedback-message-critical-contrast);\n color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical);\n }\n}\n\n[data-importance='subdued-destructive'] {\n color: var(--qds-theme-feedback-message-critical-contrast);\n background-color: var(--qds-theme-feedback-message-critical);\n\n &.qds-stroke-ring {\n border-color: var(--qds-theme-feedback-message-critical-contrast);\n }\n}\n\n[data-size='small'] {\n font: var(--qds-badge-small-text);\n height: var(--qds-badge-counter-small-height);\n padding-inline: var(--qds-badge-small-padding-horizontal);\n}\n\n[data-size='large'] {\n font: var(--qds-badge-large-text);\n height: var(--qds-badge-counter-large-height);\n padding-inline: var(--qds-badge-large-padding-horizontal);\n}\n\n[data-size='hero'] {\n font: var(--qds-badge-hero-text);\n height: var(--qds-badge-counter-hero-height);\n padding-inline: var(--qds-badge-hero-padding-horizontal);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop } from '@stencil/core'\n\nimport type { Importance, Size } from '../shared'\n\nexport type BadgeCounterImportance =\n | Importance\n | 'destructive'\n | 'subdued-destructive'\nexport type BadgeCounterSize = Size | 'hero'\n\n/**\n * The `<qds-badge-counter>` element is a small, rounded UI element used to\n * display numerical values or counts. It is designed to draw the user's eye to\n * important or dynamic content by providing a visual cue that a countable\n * event or item has occurred or is waiting to be addressed.\n */\n@Component({\n tag: 'qds-badge-counter',\n shadow: true,\n styleUrl: 'badge-counter.css',\n})\nexport class BadgeCounter implements ComponentInterface {\n /**\n * Adds accessible text to the qds-badge-counter that will be used by screen\n * readers.\n *\n * @example\n * <qds-badge-counter value={2} description=\"new notifications\"></qds-badge-counter>\n * // This qds-badge-counter will be read by screen readers as \"two new notifications\"\n */\n @Prop() public readonly description?: string\n\n /**\n * The badge counter's importance.\n */\n @Prop() public readonly importance?: BadgeCounterImportance = 'standard'\n\n /**\n * The badge counter's size.\n */\n @Prop() public readonly size?: BadgeCounterSize = 'standard'\n\n /**\n * Shows a stroke ring around the component for better visibility\n */\n @Prop() public readonly strokeRing: boolean = false\n\n /**\n * The badge-counter's value.\n */\n @Prop() public readonly value!: number | string\n\n get #computedValue(): string {\n const value =\n typeof this.value === 'string'\n ? Number.parseInt(this.value, 10)\n : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n (this.value ?? Number.NaN)\n if (Number.isNaN(value) || value < 0) return ''\n\n return value < 100 ? value.toString() : '99+'\n }\n\n get #computedImportance(): BadgeCounterImportance {\n switch (this.importance) {\n case 'subdued':\n case 'destructive':\n case 'subdued-destructive':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): BadgeCounterSize {\n switch (this.size) {\n case 'hero':\n case 'large':\n case 'small': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-badge-counter': true,\n 'qds-stroke-ring': this.strokeRing,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n >\n {this.#computedValue}\n <span class=\"qds-sr-only\">{this.description}</span>\n </span>\n )\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, h } from './p-50f85f75.js';
|
|
7
7
|
import { a as attachInternals } from './p-8abba29b.js';
|
|
8
8
|
|
|
9
9
|
const dividerCss = ":host([hidden]){display:none!important}:host{display:block}.qds-divider{border:none;height:var(--qds-control-border-width);margin:0;width:100%}.qds-vertical{height:100%;width:var(--qds-control-border-width)}[data-importance=standard]{background-color:var(--qds-theme-divider-standard)}[data-importance=emphasized]{background-color:var(--qds-theme-divider-emphasized)}[data-importance=subdued]{background-color:var(--qds-theme-divider-subdued)}";
|
|
@@ -46,7 +46,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends H {
|
|
|
46
46
|
this.verticalChanged();
|
|
47
47
|
}
|
|
48
48
|
render() {
|
|
49
|
-
return (h("hr", { key: '
|
|
49
|
+
return (h("hr", { key: '94c7922480ed8aff5973dec5a5ffa5a9586c7d3a', class: {
|
|
50
50
|
'qds-divider': true,
|
|
51
51
|
'qds-vertical': this.vertical,
|
|
52
52
|
}, "aria-hidden": "true", "data-importance": __classPrivateFieldGet(this, _Divider_instances, "a", _Divider_computedImportance_get) }));
|
|
@@ -88,4 +88,4 @@ function defineCustomElement() {
|
|
|
88
88
|
|
|
89
89
|
export { Divider as D, defineCustomElement as d };
|
|
90
90
|
|
|
91
|
-
//# sourceMappingURL=p-
|
|
91
|
+
//# sourceMappingURL=p-e2a9e441.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-
|
|
1
|
+
{"file":"p-e2a9e441.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,6bAA6b,CAAC;AACjd,yBAAe,UAAU;;ACDzB;AACA;AACA;;;;;;;;;MAsBa,OAAO;IALpB;;;;;;;;QAS0B,eAAU,GAAgB,UAAU,CAAA;;;;QAKpC,aAAQ,GAAY,KAAK,CAAA;;QAGxC,6BAA+B,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA;KAsCnE;IAvBW,eAAe;QACvB,uBAAA,IAAI,0BAAW,CAAC,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAA;KAC5E;IAEM,iBAAiB;QACtB,uBAAA,IAAI,0BAAW,CAAC,IAAI,GAAG,WAAW,CAAA;QAClC,uBAAA,IAAI,0BAAW,CAAC,UAAU,GAAG,MAAM,CAAA;QAEnC,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;IAEM,MAAM;QACX,QACE,2DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,cAAc,EAAE,IAAI,CAAC,QAAQ;aAC9B,iBACW,MAAM,qBACD,uBAAA,IAAI,2DAAoB,GACzC,EACH;KACF;;;;;;;;;;;;IAlCC,QAAQ,IAAI,CAAC,UAAU;QACrB,KAAK,YAAY,CAAC;QAClB,KAAK,SAAS,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAA;SACvB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/divider/divider.css?tag=qds-divider&encapsulation=shadow","src/components/divider/divider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-divider {\n border: none;\n height: var(--qds-control-border-width);\n margin: 0;\n width: 100%;\n}\n\n.qds-vertical {\n height: 100%;\n width: var(--qds-control-border-width);\n}\n\n[data-importance='standard'] {\n background-color: var(--qds-theme-divider-standard);\n}\n\n[data-importance='emphasized'] {\n background-color: var(--qds-theme-divider-emphasized);\n}\n\n[data-importance='subdued'] {\n background-color: var(--qds-theme-divider-subdued);\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, Watch } from '@stencil/core'\n\nimport { attachInternals } from '../../helpers'\nimport type { Importance } from '../shared'\n\n/**\n * The `<qds-divider>` element a thematic break between paragraph-level\n * elements: for example, a change of scene in a story, or a shift of topic\n * within a section.\n *\n * Dividers can also be used to group menu items in `<qds-dropdown>` elements.\n *\n * @see https://quartz.se.com/build/components/divider\n */\n@Component({\n tag: 'qds-divider',\n shadow: true,\n styleUrl: 'divider.css',\n})\nexport class Divider implements ComponentInterface {\n /**\n * The divider's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * Display the divider in vertical orientation.\n */\n @Prop() public readonly vertical: boolean = false\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n readonly #internals: ElementInternals = attachInternals.call(this)\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'emphasized':\n case 'subdued': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('vertical')\n protected verticalChanged(): void {\n this.#internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal'\n }\n\n public componentWillLoad(): void {\n this.#internals.role = 'separator'\n this.#internals.ariaHidden = 'true'\n\n this.verticalChanged()\n }\n\n public render() {\n return (\n <hr\n class={{\n 'qds-divider': true,\n 'qds-vertical': this.vertical,\n }}\n aria-hidden=\"true\"\n data-importance={this.#computedImportance}\n />\n )\n }\n}\n"],"version":3}
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, h } from './p-50f85f75.js';
|
|
7
7
|
import { i as inheritAriaAttributes } from './p-8abba29b.js';
|
|
8
|
-
import { d as defineCustomElement$1 } from './p-
|
|
8
|
+
import { d as defineCustomElement$1 } from './p-72c09714.js';
|
|
9
9
|
|
|
10
|
-
const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"
|
|
10
|
+
const titleCss = ":host([hidden]){display:none!important}:host{display:block}.qds-titles{display:grid;grid-template-areas:\"a\"}.qds-titles.qds-has-kicker{grid-template-areas:\"b\" \"a\"}.qds-titles.qds-has-subtitle{grid-template-areas:\"a\" \"c\"}.qds-titles.qds-has-kicker.qds-has-subtitle{grid-template-areas:\"b\" \"a\" \"c\"}.qds-has-icon{grid-template-areas:\"d a\";grid-template-columns:auto 1fr}.qds-has-icon.qds-has-kicker{grid-template-areas:\". b\" \"d a\"}.qds-has-icon.qds-has-subtitle{grid-template-areas:\"d a\" \". c\"}.qds-has-icon.qds-has-kicker.qds-has-subtitle{grid-template-areas:\". b\" \"d a\" \". c\"}.qds-kicker,.qds-subtitle,.qds-title{margin-block:0}.qds-title{color:var(--qds-theme-title);grid-area:a}.qds-subtitle{color:var(--qds-theme-subtitle);grid-area:c}.qds-kicker{color:var(--qds-theme-kicker);grid-area:b}.qds-icon{align-content:center;color:var(--qds-theme-text-standard);grid-area:d}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap) var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{height:var(--qds-main-section-titles-icon-crop-height);width:var(--qds-main-section-titles-icon-size)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap) var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{height:var(--qds-main-subsection-titles-icon-crop-height);width:var(--qds-main-subsection-titles-icon-size)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{height:var(--qds-panel-titles-icon-crop-height);width:var(--qds-panel-titles-icon-size)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap) var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{height:var(--qds-panel-section-titles-icon-crop-height);width:var(--qds-panel-section-titles-icon-size)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap) var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{height:var(--qds-panel-subsection-titles-icon-crop-height);width:var(--qds-panel-subsection-titles-icon-size)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap) var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{height:var(--qds-navigation-section-titles-icon-crop-height);width:var(--qds-navigation-section-titles-icon-size)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap) var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{height:var(--qds-navigation-subsection-titles-icon-crop-height);width:var(--qds-navigation-subsection-titles-icon-size)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{height:var(--qds-popup-titles-icon-crop-height);width:var(--qds-popup-titles-icon-size)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap) var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{height:var(--qds-popup-section-titles-icon-crop-height);width:var(--qds-popup-section-titles-icon-size)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap) var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{height:var(--qds-popup-subsection-titles-icon-crop-height);width:var(--qds-popup-subsection-titles-icon-size)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{height:var(--qds-accessory-titles-icon-crop-height);width:var(--qds-accessory-titles-icon-size)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap) var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{height:var(--qds-accessory-section-titles-icon-crop-height);width:var(--qds-accessory-section-titles-icon-size)}.qds-titles[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap);margin:auto}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-promo-title)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-subtitle{font:var(--qds-main-section-promo-subtitle)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-kicker{font:var(--qds-main-section-promo-kicker)}.qds-has-icon[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-promo-titles-gap) var(--qds-main-section-promo-titles-icon-gap)}[data-variant=web-main-section-promo]:is(.qds-root,.qds-section,.qds-subsection) .qds-icon{height:var(--qds-main-section-promo-titles-icon-crop-height);width:var(--qds-main-section-promo-titles-icon-size)}[data-alignment=start]{text-align:start}[data-alignment=center]{text-align:center}[data-alignment=end]{text-align:end}.qds-titles[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-display-titles-gap)}[data-variant=web-main-section-display]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-display-title)}.qds-titles[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-subsection-card-titles-gap)}[data-variant=web-main-subsection-card]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-subsection-card-title)}.qds-titles[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection){gap:var(--qds-main-section-hero-titles-gap)}[data-variant=web-main-section-hero]:is(.qds-root,.qds-section,.qds-subsection) .qds-title{font:var(--qds-main-section-hero-title)}";
|
|
11
11
|
const QdsTitleStyle0 = titleCss;
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -108,4 +108,4 @@ function defineCustomElement() {
|
|
|
108
108
|
|
|
109
109
|
export { Title as T, defineCustomElement as d };
|
|
110
110
|
|
|
111
|
-
//# sourceMappingURL=p-
|
|
111
|
+
//# sourceMappingURL=p-fc31384f.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-3baf75f4.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n | 'web-main-section-display'\n | 'web-main-section-hero'\n | 'web-main-section-promo'\n | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The alignment of the title.\n */\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n /**\n * The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"p-fc31384f.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,ixSAAixS,CAAC;AACnyS,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MA4Ba,KAAK;IALlB;;;;;;;;QAS0B,cAAS,GAAe,OAAO,CAAA;;;;QAY/B,gBAAW,GAAW,SAAS,CAAA;QAO/B,UAAK,GAAW,MAAM,CAAA;QAEtB,UAAK,GAAW,SAAS,CAAA;;;;QAUzB,QAAG,GAAS,IAAI,CAAA;QASxC,qCAAmC,EAAE,EAAA;KAmDtC;IAzCQ,iBAAiB;QACtB,uBAAA,IAAI,8BAAwB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;KAC7D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAC3C,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,SAAS,EAAE,CAAA;QAC9C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;QAEnE,QACE,iFACkB,IAAI,CAAC,SAAS,IAAI,OAAO,kBAC3B,IAAI,CAAC,OAAO,EAC1B,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,OAAO;gBACvB,gBAAgB,EAAE,uBAAA,IAAI,8CAAW;gBACjC,kBAAkB,EAAE,uBAAA,IAAI,gDAAa;aACtC,KAEG,uBAAA,IAAI,kCAAqB,IAE7B,EAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,kBAAe,IAAI,CAAC,OAAO,IAC/C,8DAAQ,CACJ,EACL,uBAAA,IAAI,8CAAW,IAAI,0DAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EAC1D,uBAAA,IAAI,gDAAa,IAAI,0DAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAChE,OAAO,KACN,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;IA/CC,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;AAC5D,CAAC;IAGC,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;AACxD,CAAC;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas: 'title';\n\n &.qds-has-kicker {\n grid-template-areas:\n 'kicker'\n 'title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'title'\n 'subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n }\n}\n\n.qds-has-icon {\n grid-template-columns: auto 1fr;\n grid-template-areas: 'icon title';\n\n &.qds-has-kicker {\n grid-template-areas:\n '. kicker'\n 'icon title';\n }\n\n &.qds-has-subtitle {\n grid-template-areas:\n 'icon title'\n '. subtitle';\n }\n\n &.qds-has-kicker.qds-has-subtitle {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\n }\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-title {\n grid-area: title;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n grid-area: subtitle;\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n grid-area: kicker;\n color: var(--qds-theme-kicker);\n}\n\n.qds-icon {\n grid-area: icon;\n align-content: center;\n color: var(--qds-theme-text-standard);\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-panel-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-navigation-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-titles-icon-crop-height);\n }\n }\n\n &.qds-subsection {\n &.qds-titles {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-popup-subsection-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-titles-icon-crop-height);\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-titles-icon-crop-height);\n }\n }\n\n &.qds-section {\n &.qds-titles {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-has-icon {\n gap: var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap);\n }\n\n & .qds-title {\n font: var(--qds-accessory-section-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n & .qds-icon {\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-titles-icon-crop-height);\n }\n }\n}\n\n[data-variant='web-main-section-promo'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-promo-titles-gap);\n margin: auto;\n }\n\n & .qds-title {\n font: var(--qds-main-section-promo-title);\n }\n\n & .qds-subtitle {\n font: var(--qds-main-section-promo-subtitle);\n }\n\n & .qds-kicker {\n font: var(--qds-main-section-promo-kicker);\n }\n\n &.qds-has-icon {\n gap: var(--qds-main-section-promo-titles-gap)\n var(--qds-main-section-promo-titles-icon-gap);\n }\n\n & .qds-icon {\n width: var(--qds-main-section-promo-titles-icon-size);\n height: var(--qds-main-section-promo-titles-icon-crop-height);\n }\n }\n}\n\n[data-alignment='start'] {\n text-align: start;\n}\n\n[data-alignment='center'] {\n text-align: center;\n}\n\n[data-alignment='end'] {\n text-align: end;\n}\n\n[data-variant='web-main-section-display'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-display-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-display-title);\n }\n }\n}\n\n[data-variant='web-main-subsection-card'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-subsection-card-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-subsection-card-title);\n }\n }\n}\n\n[data-variant='web-main-section-hero'] {\n &:is(.qds-root, .qds-section, .qds-subsection) {\n &.qds-titles {\n gap: var(--qds-main-section-hero-titles-gap);\n }\n\n & .qds-title {\n font: var(--qds-main-section-hero-title);\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, Element, h, Prop } from '@stencil/core'\n\nimport type { Attributes } from '../../helpers'\nimport { inheritAriaAttributes } from '../../helpers'\n\nexport type Layer = 'accessory' | 'main' | 'navigation' | 'panel' | 'popup'\nexport type Level = 'root' | 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TitleVariant =\n | 'web-main-section-display'\n | 'web-main-section-hero'\n | 'web-main-section-promo'\n | 'web-main-subsection-card'\n\nexport type Alignment = 'center' | 'end' | 'start'\n\n/**\n * @slot Content to display for the title.\n * @see https://quartz.se.com/build/components/title\n */\n@Component({\n tag: 'qds-title',\n shadow: true,\n styleUrl: 'title.css',\n})\nexport class Title implements ComponentInterface {\n /**\n * The alignment of the title.\n */\n @Prop() public readonly alignment?: Alignment = 'start'\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * Text to display for the kicker.\n */\n @Prop() public readonly kicker?: string\n\n @Prop() public readonly layer?: Layer = 'main'\n\n @Prop() public readonly level?: Level = 'section'\n\n /**\n * Text to display for the subtitle.\n */\n @Prop() public readonly subtitle?: string\n\n /**\n * HTML tag to use to render the title.\n */\n @Prop() public readonly tag?: Tag = 'h2'\n\n /**\n * The title's variant.\n */\n @Prop() public readonly variant?: TitleVariant\n\n @Element() private readonly host!: HTMLElement\n\n #inheritedAttributes: Attributes = {}\n\n get #hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n get #hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n }\n\n public render() {\n const layer = `qds-${this.layer ?? 'main'}`\n const level = `qds-${this.level ?? 'section'}`\n const Tag = this.tag ?? 'h2'\n const hasIcon = this.iconName !== undefined && this.iconName !== ''\n\n return (\n <hgroup\n data-alignment={this.alignment ?? 'start'}\n data-variant={this.variant}\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': hasIcon,\n 'qds-has-kicker': this.#hasKicker,\n 'qds-has-subtitle': this.#hasSubtitle,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n >\n <Tag class=\"qds-title\" data-variant={this.variant}>\n <slot />\n </Tag>\n {this.#hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.#hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { B as BadgeCounter, d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { B as BadgeCounter, d as defineCustomElement$1 } from './p-e22dd76d.js';
|
|
7
7
|
|
|
8
8
|
const QdsBadgeCounter = BadgeCounter;
|
|
9
9
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { B as BadgeIndicator, d as defineCustomElement$1 } from './p-
|
|
6
|
+
import { B as BadgeIndicator, d as defineCustomElement$1 } from './p-5570cc30.js';
|
|
7
7
|
|
|
8
8
|
const QdsBadgeIndicator = BadgeIndicator;
|
|
9
9
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
*/
|
|
6
|
-
import { p as proxyCustomElement, H, h, F as Fragment } from './p-
|
|
6
|
+
import { p as proxyCustomElement, H, r as readTask, h, F as Fragment } from './p-50f85f75.js';
|
|
7
7
|
import { a as attachInternals, b as isOverflowing } from './p-8abba29b.js';
|
|
8
|
-
import { d as defineCustomElement$2 } from './p-
|
|
8
|
+
import { d as defineCustomElement$2 } from './p-70d12c72.js';
|
|
9
9
|
|
|
10
10
|
const breadcrumbItemCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-anchor{-webkit-text-decoration:none;text-decoration:none}.qds-anchor:hover{-webkit-text-decoration:underline;text-decoration:underline}.qds-breadcrumb-item{align-items:center;display:inline-flex;font:var(--qds-control-standard-text);gap:var(--qds-control-standard-gap-siblings-related);height:var(--qds-control-standard-height);width:inherit}.qds-divider{margin-inline:auto}.qds-overflow{line-height:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}";
|
|
11
11
|
const QdsBreadcrumbItemStyle0 = breadcrumbItemCss;
|
|
@@ -59,7 +59,10 @@ const QdsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class QdsBreadcrumb
|
|
|
59
59
|
__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
|
|
60
60
|
if (!__classPrivateFieldGet(this, _QdsBreadcrumbItem_span, "f"))
|
|
61
61
|
return;
|
|
62
|
-
|
|
62
|
+
const span = __classPrivateFieldGet(this, _QdsBreadcrumbItem_span, "f");
|
|
63
|
+
readTask(() => {
|
|
64
|
+
this.tooltip = isOverflowing(span);
|
|
65
|
+
});
|
|
63
66
|
__classPrivateFieldSet(this, _QdsBreadcrumbItem_ro, new ResizeObserver(([spanEntry]) => {
|
|
64
67
|
this.tooltip = isOverflowing(spanEntry.target);
|
|
65
68
|
}), "f");
|
|
@@ -76,7 +79,7 @@ const QdsBreadcrumbItem$1 = /*@__PURE__*/ proxyCustomElement(class QdsBreadcrumb
|
|
|
76
79
|
__classPrivateFieldGet(this, _QdsBreadcrumbItem_ro, "f").disconnect();
|
|
77
80
|
}
|
|
78
81
|
render() {
|
|
79
|
-
return (h("div", { key: '
|
|
82
|
+
return (h("div", { key: '4f9f59ac89630bc02ee25e98530908100201258b', class: "qds-breadcrumb-item", ref: this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_breadcrumbItemRef, "f") : undefined, tabIndex: this.tooltip && this.href === undefined ? 0 : undefined }, this.href === undefined ? __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderText).call(this) : __classPrivateFieldGet(this, _QdsBreadcrumbItem_instances, "m", _QdsBreadcrumbItem_renderAnchor).call(this), this.tooltip && (h("qds-tooltip", { key: '133e4a568e37e8d17939e614e861385f35a7c3d4', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _QdsBreadcrumbItem_tooltipRef, "f") }, this.text))));
|
|
80
83
|
}
|
|
81
84
|
static get delegatesFocus() { return true; }
|
|
82
85
|
static get watchers() { return {
|