@quartzds/core 1.0.0-beta.98 → 1.0.0-beta.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/components/index.js +1 -1
- package/components/{p-6879ec37.js → p-00118ac9.js} +2 -2
- package/components/{p-6879ec37.js.map → p-00118ac9.js.map} +1 -1
- package/components/{p-a6ca0040.js → p-24e6297f.js} +4 -4
- package/components/{p-a6ca0040.js.map → p-24e6297f.js.map} +1 -1
- package/components/{p-88fcb762.js → p-30a089f2.js} +6 -6
- package/components/{p-88fcb762.js.map → p-30a089f2.js.map} +1 -1
- package/components/{p-da0bfe0b.js → p-4b9c6565.js} +2 -2
- package/components/{p-da0bfe0b.js.map → p-4b9c6565.js.map} +1 -1
- package/components/{p-c4122977.js → p-5576dc00.js} +2 -2
- package/components/{p-c4122977.js.map → p-5576dc00.js.map} +1 -1
- package/components/{p-a4f61139.js → p-5e2b521c.js} +5 -5
- package/components/{p-a4f61139.js.map → p-5e2b521c.js.map} +1 -1
- package/components/{p-5570cc30.js → p-ace9a02b.js} +2 -2
- package/components/p-ace9a02b.js.map +1 -0
- package/components/{p-29ad6b4e.js → p-b0639fd3.js} +4 -4
- package/components/p-b0639fd3.js.map +1 -0
- package/components/{p-1bf3d7c6.js → p-b12f8c8d.js} +3 -3
- package/components/p-b12f8c8d.js.map +1 -0
- package/components/{p-e22dd76d.js → p-e62b2711.js} +2 -2
- package/components/p-e62b2711.js.map +1 -0
- package/components/qds-badge-counter.js +1 -1
- package/components/qds-badge-indicator.js +1 -1
- package/components/qds-breadcrumb-item.js +1 -1
- package/components/qds-button.js +1 -1
- package/components/qds-checkbox.js +1 -1
- package/components/qds-chip.js +2 -2
- package/components/qds-dialog.js +1 -1
- package/components/qds-divider.js +1 -1
- package/components/qds-dropdown.js +2 -2
- package/components/qds-form-message.js +3 -3
- package/components/qds-icon.js +1 -1
- package/components/qds-inline-link.js +3 -3
- package/components/qds-input.js +5 -5
- package/components/qds-label.js +1 -1
- package/components/qds-list-item.js +4 -4
- package/components/qds-loader.js +1 -1
- package/components/qds-mini-button.js +2 -2
- package/components/qds-nav-list-item.js +5 -5
- package/components/qds-progress-bar.js +1 -1
- package/components/qds-radio.js +6 -6
- package/components/qds-select.js +1 -1
- package/components/qds-standalone-link.js +3 -3
- package/components/qds-switch.js +3 -3
- package/components/qds-tab.js +6 -6
- package/components/qds-tabbar.js +6 -6
- package/components/qds-table-body.js +1 -1
- package/components/qds-table-cell.js +1 -1
- package/components/qds-table-head.js +1 -1
- package/components/qds-table-row.js +1 -1
- package/components/qds-table.js +1 -1
- package/components/qds-tag.js +1 -1
- package/components/qds-title.js +1 -1
- package/components/qds-tooltip.js +1 -1
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js +2 -2
- package/dist/cjs/qds-badge-counter_2.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/qds-dialog.cjs.entry.js +1 -1
- package/dist/cjs/qds-divider.cjs.entry.js +1 -1
- package/dist/cjs/qds-dropdown.cjs.entry.js +2 -2
- package/dist/cjs/qds-form-message.cjs.entry.js +2 -2
- package/dist/cjs/qds-icon.cjs.entry.js +1 -1
- package/dist/cjs/qds-inline-link.cjs.entry.js +2 -2
- package/dist/cjs/qds-label.cjs.entry.js +2 -2
- package/dist/cjs/qds-mini-button.cjs.entry.js +1 -1
- package/dist/cjs/qds-nav-list-item.cjs.entry.js +3 -3
- package/dist/cjs/qds-progress-bar.cjs.entry.js +1 -1
- package/dist/cjs/qds-radio.cjs.entry.js +3 -3
- package/dist/cjs/qds-standalone-link.cjs.entry.js +2 -2
- package/dist/cjs/qds-switch.cjs.entry.js +3 -3
- package/dist/cjs/qds-table-body.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-head.cjs.entry.js +1 -1
- package/dist/cjs/qds-table-row.cjs.entry.js +1 -1
- package/dist/cjs/qds-table.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag_2.cjs.entry.js +1 -1
- package/dist/cjs/qds-tag_2.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +2 -2
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/qds-badge-counter_2.entry.js +2 -2
- package/dist/esm/qds-badge-counter_2.entry.js.map +1 -1
- package/dist/esm/qds-button.entry.js +1 -1
- package/dist/esm/qds-checkbox.entry.js +1 -1
- package/dist/esm/qds-dialog.entry.js +1 -1
- package/dist/esm/qds-divider.entry.js +1 -1
- package/dist/esm/qds-dropdown.entry.js +2 -2
- package/dist/esm/qds-form-message.entry.js +2 -2
- package/dist/esm/qds-icon.entry.js +1 -1
- package/dist/esm/qds-inline-link.entry.js +2 -2
- package/dist/esm/qds-label.entry.js +2 -2
- package/dist/esm/qds-mini-button.entry.js +1 -1
- package/dist/esm/qds-nav-list-item.entry.js +3 -3
- package/dist/esm/qds-progress-bar.entry.js +1 -1
- package/dist/esm/qds-radio.entry.js +3 -3
- package/dist/esm/qds-standalone-link.entry.js +2 -2
- package/dist/esm/qds-switch.entry.js +3 -3
- package/dist/esm/qds-table-body.entry.js +1 -1
- package/dist/esm/qds-table-cell.entry.js +1 -1
- package/dist/esm/qds-table-head.entry.js +1 -1
- package/dist/esm/qds-table-row.entry.js +1 -1
- package/dist/esm/qds-table.entry.js +1 -1
- package/dist/esm/qds-tag_2.entry.js +1 -1
- package/dist/esm/qds-tag_2.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +2 -2
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/hydrate/index.js +36 -36
- package/hydrate/index.mjs +36 -36
- package/package.json +1 -1
- package/components/p-1bf3d7c6.js.map +0 -1
- package/components/p-29ad6b4e.js.map +0 -1
- package/components/p-5570cc30.js.map +0 -1
- package/components/p-e22dd76d.js.map +0 -1
|
@@ -86,12 +86,12 @@ const Label = class {
|
|
|
86
86
|
__classPrivateFieldGet(this, _Label_ro, "f").disconnect();
|
|
87
87
|
}
|
|
88
88
|
render() {
|
|
89
|
-
return (h("span", { key: '
|
|
89
|
+
return (h("span", { key: 'f5fb8edbdad01bf57ba88b2e65c240d9512d63ff', class: {
|
|
90
90
|
'qds-inline': this.inline,
|
|
91
91
|
'qds-label': true,
|
|
92
92
|
}, "data-size": __classPrivateFieldGet(this, _Label_instances, "a", _Label_computedSize_get), ref: __classPrivateFieldGet(this, _Label_labelRef, "f"),
|
|
93
93
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
94
|
-
tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '
|
|
94
|
+
tabIndex: this.tooltip ? 0 : undefined }, this.required && h("span", { key: '3dd4a66af8b2e1e8ce32d98427ffab9973e23387', class: "qds-required" }, "*"), h("span", { key: 'a5a06d788520604f85bb2868579f2b985eb82d79', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (h("qds-tooltip", { key: '29e5a9dd29895c775dd77d31d47893e8c7e5cdf6', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
|
|
95
95
|
}
|
|
96
96
|
static get watchers() { return {
|
|
97
97
|
"text": ["textChanged"]
|
|
@@ -109,7 +109,7 @@ const MiniButton = class {
|
|
|
109
109
|
}
|
|
110
110
|
render() {
|
|
111
111
|
const Tag = this.href === undefined ? 'button' : 'a';
|
|
112
|
-
return (h(Tag, { key: '
|
|
112
|
+
return (h(Tag, { key: '2f785c9383e9bea5000d2138869fb615c2fc526a', type: Tag === 'a' ? undefined : 'button', class: "qds-mini-button", href: Tag === 'a' ? this.href : undefined, rel: Tag === 'a' ? this.rel : undefined, disabled: __classPrivateFieldGet(this, _MiniButton_instances, "a", _MiniButton_computedDisabled_get), "aria-hidden": "true", onKeyDown: preventDefault, onKeyUp: preventDefault, onKeyPress: preventDefault, tabIndex: -1 }, h("qds-icon", { key: '090ce41a59508975b0c9f7f0a80cf10e4cff7dfc', class: "qds-icon", library: this.library, name: this.name })));
|
|
113
113
|
}
|
|
114
114
|
static get formAssociated() { return true; }
|
|
115
115
|
get host() { return getElement(this); }
|
|
@@ -81,14 +81,14 @@ const NavListItem = class {
|
|
|
81
81
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
82
82
|
}
|
|
83
83
|
render() {
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: 'c7f391e436f367ef65e32f83badbf15348c4c692' }, h("li", { key: '36542684c6bc57f1641f96cbcf62c8e48de87f07', class: {
|
|
85
85
|
'qds-nav-list-item': true,
|
|
86
86
|
'qds-disabled': this.disabled,
|
|
87
87
|
'qds-selected': this.selected,
|
|
88
|
-
}, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, h("button", { key: '
|
|
88
|
+
}, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, h("button", { key: 'fff46bbd82b0b7920e94554a43c6a84c00a59bef', class: {
|
|
89
89
|
'qds-button': true,
|
|
90
90
|
'qds-selected': this.selected,
|
|
91
|
-
}, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '
|
|
91
|
+
}, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '26c11beecf687e03d782329215bd7cac6dc3c074', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (h("qds-tooltip", { key: '310d43a54adce9e1bb7f6cbee0fb0df6a61bbad8', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
|
|
92
92
|
}
|
|
93
93
|
renderText() {
|
|
94
94
|
return (h("div", { class: "qds-texts" }, h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (h("div", { class: "qds-subtext" }, this.subtext))));
|
|
@@ -91,7 +91,7 @@ const ProgressBar = class {
|
|
|
91
91
|
this.valueChanged();
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
|
-
return (h("div", { key: '
|
|
94
|
+
return (h("div", { key: '655cc682d147daa998164bbde5025ba37bfc04b1', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, h("div", { key: '87fd05b1eb357e0bbcd8a63feb5c5bc6df29cc23', class: {
|
|
95
95
|
'qds-bar': true,
|
|
96
96
|
'qds-indeterminate': __classPrivateFieldGet(this, _ProgressBar_position, "f") === -1,
|
|
97
97
|
}, "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get), style: { width: this.width } })));
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { r as registerInstance, c as createEvent, h, d as getElement } from './index-bc9462c1.js';
|
|
7
7
|
import { p as pickFocusEventAttributes, c as invariant, b as inheritAriaAttributes } from './helpers-10f68bf3.js';
|
|
8
8
|
|
|
9
|
-
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:
|
|
9
|
+
const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:h;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"h\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner.sc-qds-radio{flex:1 1 auto;min-width:0}.qds-radio.sc-qds-radio{-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-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
|
|
10
10
|
const QdsRadioStyle0 = radioCss;
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -82,10 +82,10 @@ const Radio = class {
|
|
|
82
82
|
render() {
|
|
83
83
|
return (
|
|
84
84
|
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
85
|
-
h("label", { key: '
|
|
85
|
+
h("label", { key: '9f81dc891d91007aa139eb94eef0a2b863efc8af', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
|
|
86
86
|
'qds-inline': this.inline,
|
|
87
87
|
'qds-label': true,
|
|
88
|
-
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: '
|
|
88
|
+
}, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, h("div", { key: 'ed86bc6da78672f26b740daf49dcbc80a9ab8df3', class: "qds-container" }, h("input", { key: 'dba460b3e1cacec7d36479258e534f8e1afed5fc', checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), h("div", { key: '9f1ebcef2a9800e19d28e1fdbdf6c8be9b7e5405', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }), h("qds-icon", { key: 'dd5fcec8216e9a86b85081953869698bd21eed8d', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (h("qds-label", { key: '942db2ce682f4de52d35826ba3817a2bac4767ed', class: "qds-label-inner", size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
|
|
89
89
|
}
|
|
90
90
|
get host() { return getElement(this); }
|
|
91
91
|
static get watchers() { return {
|
|
@@ -86,11 +86,11 @@ const StandaloneLink = class {
|
|
|
86
86
|
__classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
|
|
87
87
|
}
|
|
88
88
|
render() {
|
|
89
|
-
return (h("a", { key: '
|
|
89
|
+
return (h("a", { key: 'd7294640161818040298665e03040c4a3f6491b3', "aria-hidden": "true", class: {
|
|
90
90
|
'qds-standalone-link': true,
|
|
91
91
|
'qds-disabled': this.disabled,
|
|
92
92
|
'qds-visitable': this.visitable,
|
|
93
|
-
}, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: '
|
|
93
|
+
}, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("span", { key: 'b9eb93128f033ce8d1f3202af45eb23463360fa9', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: 'dcbddd9c0858a22b1e88fdaa9c312adaa261cba5', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName }))), h("span", { key: 'd7b6ac17ee7111ff8a42fa46a0388eea05262bb9', class: "qds-text" }, h("slot", { key: '64408a2f589b8cb9628413fd7ac11ec55883040d', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("span", { key: 'a95bbc72e29eece906933610cfdf8799642c3f1f', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: 'd31022c0f5599b62a3fb7f69f31b21e725e43171', class: "qds-icon", library: "core", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), name: this.linkIcon }))), this.importance === 'emphasized' && (h("span", { key: '4e5779a8f4156191b36cf2f282581fc99df8eec3', class: "qds-icon-crop", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get) }, h("qds-icon", { key: '7fd3b05cbb3c19641d1d67806d64c47f4688bc0a', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: "core", name: "next" })))));
|
|
94
94
|
}
|
|
95
95
|
static get delegatesFocus() { return true; }
|
|
96
96
|
get host() { return getElement(this); }
|
|
@@ -152,13 +152,13 @@ const Switch = class {
|
|
|
152
152
|
this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
|
|
153
153
|
}
|
|
154
154
|
render() {
|
|
155
|
-
return (h("div", { key: '
|
|
155
|
+
return (h("div", { key: '89a9a8f980b199a31902a03212bf5ea7add48453', class: {
|
|
156
156
|
'qds-container': true,
|
|
157
157
|
'qds-disabled': __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get),
|
|
158
158
|
'qds-inline': this.inline,
|
|
159
|
-
}, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("input", { key: '
|
|
159
|
+
}, "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("input", { key: 'cecfa4843c109be1b83e456f0be8782dfeb5b14e', "aria-hidden": "true",
|
|
160
160
|
// eslint-disable-next-line jsx-a11y/no-autofocus
|
|
161
|
-
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _Switch_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Switch_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: '
|
|
161
|
+
autoFocus: this.host.autofocus, checked: this.checked, class: "qds-switch", disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _Switch_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _Switch_onFocus, "f"), tabIndex: __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedDisabled_get) ? undefined : this.tabIndex, type: "checkbox", value: this.value ?? undefined, ...this.inheritedAttributes }), h("div", { key: 'd103a175a33d1e84d2360852f6e8c0d092031635', class: "qds-track", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }, h("div", { key: '8e68df89091b995389fedcbdbe7bd33a7aca67d9', class: "qds-knob", "data-size": __classPrivateFieldGet(this, _Switch_instances, "a", _Switch_computedSize_get) }))));
|
|
162
162
|
}
|
|
163
163
|
static get delegatesFocus() { return true; }
|
|
164
164
|
static get formAssociated() { return true; }
|
|
@@ -38,7 +38,7 @@ const TableBody = class {
|
|
|
38
38
|
__classPrivateFieldSet(this, _TableBody_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("tbody", { key: '
|
|
41
|
+
return (h("tbody", { key: '419ead9ff35b6574be6518d3f8b10fc648445a2e', class: "qds-table-body", ...__classPrivateFieldGet(this, _TableBody_inheritedAttributes, "f") }, h("slot", { key: '2c5929346099e283653e32adede1bc10b4398e84' })));
|
|
42
42
|
}
|
|
43
43
|
get host() { return getElement(this); }
|
|
44
44
|
};
|
|
@@ -38,7 +38,7 @@ const TableCell = class {
|
|
|
38
38
|
__classPrivateFieldSet(this, _TableCell_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("td", { key: '
|
|
41
|
+
return (h("td", { key: 'b9160667774da6312659c267deb98976b7e4f48d', class: "qds-table-cell", colSpan: this.colSpan, rowSpan: this.rowSpan, ...__classPrivateFieldGet(this, _TableCell_inheritedAttributes, "f") }, h("slot", { key: '1cdee08f8a6b34cae17a24031b45d96f01398f23' })));
|
|
42
42
|
}
|
|
43
43
|
get host() { return getElement(this); }
|
|
44
44
|
};
|
|
@@ -38,7 +38,7 @@ const TableHead = class {
|
|
|
38
38
|
__classPrivateFieldSet(this, _TableHead_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("thead", { key: '
|
|
41
|
+
return (h("thead", { key: 'd61461bae57fc3af847b1ed9ebda53f01086b213', class: "qds-table-head", ...__classPrivateFieldGet(this, _TableHead_inheritedAttributes, "f") }, h("slot", { key: 'a0985c131495672cd42fb484a7526d0b769399ca' })));
|
|
42
42
|
}
|
|
43
43
|
get host() { return getElement(this); }
|
|
44
44
|
};
|
|
@@ -38,7 +38,7 @@ const TableRow = class {
|
|
|
38
38
|
__classPrivateFieldSet(this, _TableRow_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("tr", { key: '
|
|
41
|
+
return (h("tr", { key: 'dca7751e89eaf4ec82af9ed00a9b28582526e739', class: "qds-table-row", ...__classPrivateFieldGet(this, _TableRow_inheritedAttributes, "f") }, h("slot", { key: 'e000ddc99f9cc11c81af3f08067c70924e10ac4b' })));
|
|
42
42
|
}
|
|
43
43
|
get host() { return getElement(this); }
|
|
44
44
|
};
|
|
@@ -38,7 +38,7 @@ const Table = class {
|
|
|
38
38
|
__classPrivateFieldSet(this, _Table_inheritedAttributes, inheritAriaAttributes(this.host), "f");
|
|
39
39
|
}
|
|
40
40
|
render() {
|
|
41
|
-
return (h("table", { key: '
|
|
41
|
+
return (h("table", { key: '96eb99b1ae9f098e6d2c2b44d22d61e817ac3c28', class: "qds-table", ...__classPrivateFieldGet(this, _Table_inheritedAttributes, "f") }, h("slot", { key: 'c9395edb1973b153e1b4a59ea7b1c337e657fb55' })));
|
|
42
42
|
}
|
|
43
43
|
get host() { return getElement(this); }
|
|
44
44
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { r as registerInstance, h, F as Fragment, d as getElement } from './index-bc9462c1.js';
|
|
7
7
|
import { b as inheritAriaAttributes } from './helpers-10f68bf3.js';
|
|
8
8
|
|
|
9
|
-
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-
|
|
9
|
+
const tagCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-tag{align-items:center;border-radius:var(--qds-feedback-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-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-feedback-tag-small-text);gap:var(--qds-feedback-tag-small-gap-internal);height:var(--qds-feedback-tag-small-height)}.qds-padding[data-size=small]{padding-inline:var(--qds-feedback-tag-small-padding-horizontal)}.qds-icon[data-size=small]{height:var(--qds-feedback-tag-small-icon-size);width:var(--qds-feedback-tag-small-icon-size)}.qds-tag[data-size=standard]{font:var(--qds-feedback-tag-standard-text);gap:var(--qds-feedback-tag-standard-gap-internal);height:var(--qds-feedback-tag-standard-height)}.qds-padding[data-size=standard]{padding-inline:var(--qds-feedback-tag-standard-padding-horizontal)}.qds-icon[data-size=standard]{height:var(--qds-feedback-tag-standard-icon-size);width:var(--qds-feedback-tag-standard-icon-size)}.qds-tag[data-size=large]{font:var(--qds-feedback-tag-large-text);gap:var(--qds-feedback-tag-large-gap-internal);height:var(--qds-feedback-tag-large-height)}.qds-padding[data-size=large]{padding-inline:var(--qds-feedback-tag-large-padding-horizontal)}.qds-icon[data-size=large]{height:var(--qds-feedback-tag-large-icon-size);width:var(--qds-feedback-tag-large-icon-size)}";
|
|
10
10
|
const QdsTagStyle0 = tagCss;
|
|
11
11
|
|
|
12
12
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tag.qds-title.entry.js","mappings":"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","names":["__classPrivateFieldSet","__classPrivateFieldGet"],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx","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: 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","/*\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":"qds-tag.qds-title.entry.js","mappings":"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","names":["__classPrivateFieldSet","__classPrivateFieldGet"],"sources":["src/components/tag/tag.css?tag=qds-tag&encapsulation=shadow","src/components/tag/tag.tsx","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: inline-block;\n}\n\n.qds-tag {\n align-items: center;\n border-radius: var(--qds-feedback-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-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-feedback-tag-small-text);\n gap: var(--qds-feedback-tag-small-gap-internal);\n height: var(--qds-feedback-tag-small-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-feedback-tag-small-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-small-icon-size);\n height: var(--qds-feedback-tag-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-standard-text);\n gap: var(--qds-feedback-tag-standard-gap-internal);\n height: var(--qds-feedback-tag-standard-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-feedback-tag-standard-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-standard-icon-size);\n height: var(--qds-feedback-tag-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-tag {\n font: var(--qds-feedback-tag-large-text);\n gap: var(--qds-feedback-tag-large-gap-internal);\n height: var(--qds-feedback-tag-large-height);\n }\n\n &.qds-padding {\n padding-inline: var(--qds-feedback-tag-large-padding-horizontal);\n }\n\n &.qds-icon {\n width: var(--qds-feedback-tag-large-icon-size);\n height: var(--qds-feedback-tag-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","/*\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}
|
|
@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, d as getElement
|
|
|
7
7
|
import { o as offset, f as flip, s as shift, l as limitShift, b as arrow, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-61986f35.js';
|
|
8
8
|
import { f as ignorePromise, d as propertyToPx, c as invariant, r as resolveTarget, e as roundByDPR, j as isTouchDevice } from './helpers-10f68bf3.js';
|
|
9
9
|
|
|
10
|
-
const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;
|
|
10
|
+
const tooltipCss = ":host([hidden]){display:none!important}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);box-sizing:border-box;color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;top:0}:host:before{content:\"\";height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side=bottom]):before,:host([data-side=top]):before{height:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px));top:100%}:host([data-side=bottom]):before{top:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}:host([data-side=left]):before,:host([data-side=right]):before{left:100%;width:calc(var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))}:host([data-side=right]):before{left:calc((var(--qds-accessory-gap-floating, 0px) + var(--qds-signature-triangle-pointer-size-height, 0px))*-1)}.qds-arrow{height:var(--qds-signature-triangle-pointer-size-height);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow:before{background-color:var(--qds-theme-accessory-background);height:100%;width:100%}.qds-arrow:after,.qds-arrow:before{clip-path:polygon(0 0,100% 0,50% 100%);content:\"\";position:absolute}.qds-arrow:after{background-color:var(--qds-theme-accessory-border);bottom:calc(var(--qds-accessory-border-width)*-1);height:calc(100% + var(--qds-accessory-border-width));left:calc(var(--qds-accessory-border-width)*-1);width:calc(100% + var(--qds-accessory-border-width)*2);z-index:-1}.qds-arrow[data-side=bottom]{bottom:99%;transform:rotate(180deg)}.qds-arrow[data-side=left]{left:99%;transform:rotate(-90deg)}.qds-arrow[data-side=right]{right:99%;transform:rotate(90deg)}.qds-arrow[data-side=top]{top:99%}.qds-tooltip{align-items:inherit;border:var(--qds-accessory-border-width) solid var(--qds-theme-accessory-border);border-radius:var(--qds-accessory-border-radius);display:inherit;flex-direction:inherit;flex-wrap:inherit;gap:inherit;justify-content:inherit;padding:var(--qds-accessory-padding)}";
|
|
11
11
|
const QdsTooltipStyle0 = tooltipCss;
|
|
12
12
|
|
|
13
13
|
// SPDX-FileCopyrightText: © 2024 Schneider Electric
|
|
@@ -263,7 +263,7 @@ const Tooltip = class {
|
|
|
263
263
|
return (h(Host, { key: 'fe699b7a444ed3d9632d841d91225aeeebb5db77', "data-side": this.side, role: this.host.role ?? 'tooltip', onKeyDown: __classPrivateFieldGet(this, _Tooltip_boundKeyDown, "f"), onPointerDown: __classPrivateFieldGet(this, _Tooltip_boundTooltipPointerDown, "f"), style: {
|
|
264
264
|
position: this.hostPosition,
|
|
265
265
|
transform: this.hostTransform,
|
|
266
|
-
} }, h("slot", { key: '
|
|
266
|
+
} }, h("div", { key: '778daec5795fdc7959958cf8685a71d601e422b5', class: "qds-tooltip" }, h("slot", { key: 'f8f04dcf4761140f5e1d06bdb206b2051c165a2d' })), h("div", { key: 'ce54374ef5964631b7d2869554de2045a654ca7c', class: "qds-arrow", "data-side": this.side, ref: __classPrivateFieldGet(this, _Tooltip_arrowContainerRef, "f"), style: this.aStyles })));
|
|
267
267
|
}
|
|
268
268
|
get host() { return getElement(this); }
|
|
269
269
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow {\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n height: var(--qds-signature-triangle-pointer-size-height);\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--qds-theme-accessory-background);\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n }\n\n &[data-side='bottom'] {\n bottom: 100%;\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: 100%;\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: 100%;\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: 100%;\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\nimport type { Split } from 'type-fest'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n resolveTarget,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nexport type TriggerEvent = Extract<\n keyof GlobalEventHandlersEventMap,\n 'click' | 'focus' | 'focusin' | 'pointerenter'\n>\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][] or [Virtual Element][]\n * - A function returning a reference to an [`Element`][],\n * [Virtual Element][], or a CSS selector string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Determines the events that cause the tooltip to show. Multiple event names\n * are separated by spaces.\n */\n @Prop() public readonly trigger?: TriggerEvent[] | string =\n 'pointerenter focus'\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private side: Side = 'top'\n\n @State() private aStyles?: Record<string, string | undefined>\n\n @State() private aHeight = 0\n\n @State() private aGap = 0\n\n #arrowContainerElement?: HTMLElement\n\n #cleanup?: () => void\n\n #clickedTooltip = false\n\n #isTouchDevice = false\n\n #listeners: {\n element: Element\n event: keyof GlobalEventHandlersEventMap\n listener: EventListenerOrEventListenerObject\n }[] = []\n\n #referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n this.open = true\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n\n this.open = false\n this.#clickedTooltip = false\n if (this.#cleanup) this.#cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aHeight =\n propertyToPx(this.host, `--qds-signature-triangle-pointer-size-height`) ??\n 0\n this.aGap = propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.#arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.#arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('role')\n protected updateAriaHasPopup(): void {\n this.#referenceElement = resolveTarget(this.target)\n\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n ) {\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n }\n\n @Watch('open')\n protected setAriaExpanded(): void {\n this.host.hidden = !this.open\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n ) {\n this.#referenceElement.ariaExpanded = String(this.open)\n }\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectedCallback()\n\n this.#referenceElement = resolveTarget(this.target)\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.updateEventListeners()\n this.host.id ||= `qds-tooltip-${autoIncrementingId}`\n this.#referenceElement.setAttribute('aria-describedby', this.host.id)\n\n if (this.host.role === 'dialog') {\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n }\n\n @Watch('trigger')\n private updateEventListeners(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n const triggers = Array.isArray(this.trigger)\n ? this.trigger\n : ((this.trigger?.split(' ') as Split<TriggerEvent, ' '> | undefined) ??\n [])\n\n this.#removeEventListeners()\n\n if (this.#isTouchDevice)\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n this.#on(document.documentElement, 'pointerdown', this.#boundPointerdown)\n this.#on(this.#referenceElement, 'keydown', this.#boundKeyDown)\n\n for (const trigger of triggers) {\n switch (trigger) {\n case 'click': {\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n break\n }\n case 'focus':\n case 'focusin': {\n this.#on(this.#referenceElement, trigger, this.#boundFocus)\n this.#on(this.#referenceElement, 'focusout', this.#boundFocusout)\n this.#on(this.host, 'focusout', this.#boundFocusout)\n break\n }\n case 'pointerenter': {\n this.#on(\n this.#referenceElement,\n 'pointerenter',\n this.#boundPointerenter,\n )\n this.#on(\n this.#referenceElement,\n 'pointerleave',\n this.#boundPointerleave,\n )\n this.#on(this.host, 'pointerleave', this.#boundPointerleave)\n break\n }\n default:\n }\n }\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.#referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.#referenceElement,\n this.host,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n const [side] = placement.split('-') as Split<Placement, '-'>\n\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n this.side = side\n\n if (middlewareData.arrow === undefined) return\n const { x: aX, y: aY, centerOffset } = middlewareData.arrow\n this.aStyles = {\n display: centerOffset === 0 ? undefined : 'none',\n left: aX === undefined ? '' : `${aX}px`,\n top: aY === undefined ? '' : `${aY}px`,\n }\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.#referenceElement)\n\n if (this.#cleanup) this.#cleanup()\n this.#cleanup = autoUpdate(\n this.#referenceElement,\n this.host,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.#isTouchDevice = isTouchDevice()\n this.host.hidden = true\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#removeEventListeners()\n this.#referenceElement.removeAttribute('aria-describedby')\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n role={this.host.role ?? 'tooltip'}\n onKeyDown={this.#boundKeyDown}\n onPointerDown={this.#boundTooltipPointerDown}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <div\n class=\"qds-arrow\"\n data-side={this.side}\n ref={this.#arrowContainerRef}\n style={this.aStyles}\n />\n </Host>\n )\n }\n\n readonly #arrowContainerRef = (div?: HTMLElement): void => {\n this.#arrowContainerElement = div\n }\n\n readonly #boundTooltipPointerDown = (): void => {\n this.#clickedTooltip = true\n }\n\n async #handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundFocus = (): void => {\n ignorePromise(this.#handleFocus())\n }\n\n async #handleKeyDown(event: Event): Promise<void> {\n if (event instanceof KeyboardEvent && event.key === 'Escape')\n await this.close()\n }\n\n readonly #boundKeyDown = (event: Event): void => {\n ignorePromise(this.#handleKeyDown(event))\n }\n\n async #handlePointerenter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundPointerenter = (): void => {\n ignorePromise(this.#handlePointerenter())\n }\n\n async #handlePointerleave(event: Event): Promise<void> {\n if (\n !this.#clickedTooltip &&\n document.activeElement !== this.#referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.host &&\n event instanceof PointerEvent &&\n event.relatedTarget !== this.#referenceElement &&\n event.relatedTarget !== this.host\n )\n await this.close()\n }\n\n readonly #boundPointerleave = (event: Event): void => {\n ignorePromise(this.#handlePointerleave(event))\n }\n\n async #handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.host.contains(relatedTarget) &&\n this.#referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n readonly #boundFocusout = (event: Event): void => {\n ignorePromise(this.#handleFocusOut(event))\n }\n\n async #handlePointerdown(event: Event): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.host) ||\n (this.#referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.#referenceElement))\n if (!withinBounds) await this.close()\n }\n\n readonly #boundPointerdown = (event: Event): void => {\n ignorePromise(this.#handlePointerdown(event))\n }\n\n async #handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n readonly #boundReferenceClick = (): void => {\n ignorePromise(this.#handleReferenceClick())\n }\n\n #on(\n element: Element,\n event: keyof GlobalEventHandlersEventMap,\n listener: EventListenerOrEventListenerObject,\n ): void {\n const hasListener = this.#listeners.some(\n (value) => value.element === element && value.event === event,\n )\n if (hasListener) return\n\n element.addEventListener(event, listener)\n this.#listeners.push({ element, event, listener })\n }\n\n #removeEventListeners(): void {\n for (const { element, event, listener } of this.#listeners)\n element.removeEventListener(event, listener)\n this.#listeners = []\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/tooltip/tooltip.css?tag=qds-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.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 align-items: flex-start;\n background-color: var(--qds-theme-accessory-background);\n border-radius: var(--qds-accessory-border-radius);\n box-shadow: var(--qds-theme-accessory-elevation);\n box-sizing: border-box;\n color: var(--qds-theme-text-standard);\n display: flex;\n flex-direction: column;\n gap: var(--qds-accessory-gap-children-unrelated);\n left: 0;\n top: 0;\n}\n\n:host::before {\n content: '';\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n::slotted(blockquote),\n::slotted(button),\n::slotted(dd),\n::slotted(dl),\n::slotted(fieldset),\n::slotted(figure),\n::slotted(h1),\n::slotted(h2),\n::slotted(h3),\n::slotted(h4),\n::slotted(h5),\n::slotted(h6),\n::slotted(hr),\n::slotted(input),\n::slotted(menu),\n::slotted(ol),\n::slotted(p),\n::slotted(pre),\n::slotted(select),\n::slotted(textarea),\n::slotted(ul) {\n margin: 0;\n}\n\n:host([data-side='top'])::before,\n:host([data-side='bottom'])::before {\n height: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n top: 100%;\n}\n\n:host([data-side='bottom'])::before {\n top: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n:host([data-side='left'])::before,\n:host([data-side='right'])::before {\n width: calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );\n left: 100%;\n}\n\n:host([data-side='right'])::before {\n left: calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n );\n}\n\n.qds-arrow {\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\n height: var(--qds-signature-triangle-pointer-size-height);\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: var(--qds-theme-accessory-background);\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n }\n\n &::after {\n content: '';\n position: absolute;\n width: calc(100% + (2 * var(--qds-accessory-border-width)));\n height: calc(100% + var(--qds-accessory-border-width));\n background-color: var(--qds-theme-accessory-border);\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n z-index: -1;\n bottom: calc(-1 * var(--qds-accessory-border-width));\n left: calc(-1 * var(--qds-accessory-border-width));\n }\n\n &[data-side='bottom'] {\n /* 1% overlap ensures seamless visual connection between arrow and tooltip border */\n bottom: calc(100% - 1%);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n left: calc(100% - 1%);\n transform: rotate(-90deg);\n }\n\n &[data-side='right'] {\n right: calc(100% - 1%);\n transform: rotate(90deg);\n }\n\n &[data-side='top'] {\n top: calc(100% - 1%);\n }\n}\n\n.qds-tooltip {\n border: var(--qds-accessory-border-width) solid\n var(--qds-theme-accessory-border);\n border-radius: var(--qds-accessory-border-radius);\n padding: var(--qds-accessory-padding);\n display: inherit;\n flex-direction: inherit;\n flex-wrap: inherit;\n justify-content: inherit;\n align-items: inherit;\n gap: inherit;\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type {\n AutoUpdateOptions,\n DetectOverflowOptions,\n FlipOptions,\n Middleware,\n Placement,\n ReferenceElement,\n ShiftOptions,\n Side,\n Strategy,\n} from '@floating-ui/dom'\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n limitShift,\n offset,\n shift,\n} from '@floating-ui/dom'\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\nimport type { Split } from 'type-fest'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n resolveTarget,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\n\nexport type TriggerEvent = Extract<\n keyof GlobalEventHandlersEventMap,\n 'click' | 'focus' | 'focusin' | 'pointerenter'\n>\n\n/**\n * @slot Content to display in the dropdown.\n * @see https://quartz.se.com/build/components/tooltip\n */\n@Component({\n tag: 'qds-tooltip',\n shadow: true,\n styleUrl: 'tooltip.css',\n})\nexport class Tooltip implements ComponentInterface {\n /**\n * Options to pass to Floating UI's\n * [`autoUpdate()` function](https://floating-ui.com/docs/autoUpdate).\n *\n * @see https://floating-ui.com/docs/autoupdate#options\n */\n @Prop() public readonly autoUpdateOptions?: AutoUpdateOptions\n\n /**\n * Prevents the tooltip from being shown by user interaction. The tooltip can\n * still be displayed by calling the `show()` method.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n *\n * The [`crossAxis` option](https://floating-ui.com/docs/flip#crossaxis) is\n * set to the value of the `noShift` property by default for interoperability\n * with the [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/flip#options\n */\n @Prop() public readonly flipOptions?: Partial<\n DetectOverflowOptions & FlipOptions\n >\n\n /**\n * Disable Floating UI's\n * [`flip` middleware](https://floating-ui.com/docs/flip).\n */\n @Prop() public readonly noFlip: boolean = false\n\n /**\n * Disable Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n */\n @Prop() public readonly noShift: boolean = false\n\n /**\n * Options to pass to Floating UI's\n * [`offset` middleware](https://floating-ui.com/docs/offset).\n *\n * The [`mainAxis` option](https://floating-ui.com/docs/offset#mainaxis) is\n * not supported.\n *\n * @see https://floating-ui.com/docs/offset#options\n */\n @Prop() public readonly offsetOptions?: OffsetOptions\n\n /**\n * Where to place the tooltip relative to the `target`.\n *\n * @see https://floating-ui.com/docs/tutorial#placements\n */\n @Prop() public readonly placement: Placement = 'top'\n\n /**\n * Options to pass to Floating UI's\n * [`shift` middleware](https://floating-ui.com/docs/shift).\n *\n * @see https://floating-ui.com/docs/shift#options\n */\n @Prop() public readonly shiftOptions?: Partial<\n DetectOverflowOptions & ShiftOptions\n >\n\n /**\n * The CSS position strategy to use.\n *\n * @see https://floating-ui.com/docs/computeposition#strategy\n */\n @Prop() public readonly strategy?: Strategy\n\n /**\n * The trigger element that will trigger the tooltip. The target specified\n * can be any of the following:\n *\n * - A CSS selector string\n * - A reference to an [`Element`][] or [Virtual Element][]\n * - A function returning a reference to an [`Element`][],\n * [Virtual Element][], or a CSS selector string\n *\n * [`Element`]: https://developer.mozilla.org/docs/Web/API/Element\n * [Virtual Element]: https://floating-ui.com/docs/virtual-elements\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\n\n /**\n * Determines the events that cause the tooltip to show. Multiple event names\n * are separated by spaces.\n */\n @Prop() public readonly trigger?: TriggerEvent[] | string =\n 'pointerenter focus'\n\n /**\n * Emitted when the tooltip is closed.\n */\n @Event({ eventName: 'qdsClose', bubbles: false, cancelable: false })\n private readonly closeEmitter!: EventEmitter<void>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private hostPosition?: string\n\n @State() private hostTransform?: string\n\n @State() private open = false\n\n @State() private middleware?: Middleware[]\n\n @State() private side: Side = 'top'\n\n @State() private aStyles?: Record<string, string | undefined>\n\n @State() private aHeight = 0\n\n @State() private aGap = 0\n\n #arrowContainerElement?: HTMLElement\n\n #cleanup?: () => void\n\n #clickedTooltip = false\n\n #isTouchDevice = false\n\n #listeners: {\n element: Element\n event: keyof GlobalEventHandlersEventMap\n listener: EventListenerOrEventListenerObject\n }[] = []\n\n #referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n this.open = true\n this.startAutoUpdate()\n }\n\n /**\n * Close the tooltip.\n */\n @Method()\n public async close(): Promise<void> {\n if (!this.open) return\n\n this.closeEmitter.emit()\n\n this.open = false\n this.#clickedTooltip = false\n if (this.#cleanup) this.#cleanup()\n }\n\n /**\n * Update the tooltip's arrow.\n *\n * This method should typically be called when the Quartz platform was\n * changed.\n */\n @Method()\n public async updateArrow(): Promise<void> {\n this.aHeight =\n propertyToPx(this.host, `--qds-signature-triangle-pointer-size-height`) ??\n 0\n this.aGap = propertyToPx(this.host, '--qds-accessory-gap-floating') ?? 0\n }\n\n @Watch('aGap')\n @Watch('aHeight')\n @Watch('flipOptions')\n @Watch('noFlip')\n @Watch('noShift')\n @Watch('offsetOptions')\n @Watch('shiftOptions')\n protected async updateMiddleware(): Promise<void> {\n invariant(this.#arrowContainerElement)\n\n this.middleware = [\n offset({\n ...this.offsetOptions,\n mainAxis: this.aGap + this.aHeight,\n }),\n !this.noFlip &&\n flip({\n crossAxis: this.noShift,\n ...this.flipOptions,\n }),\n !this.noShift &&\n shift({\n limiter: limitShift(),\n ...this.shiftOptions,\n }),\n arrow({\n element: this.#arrowContainerElement,\n }),\n ].filter((middleware): middleware is Middleware => middleware !== false)\n }\n\n @Watch('role')\n protected updateAriaHasPopup(): void {\n this.#referenceElement = resolveTarget(this.target)\n\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n ) {\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n }\n\n @Watch('open')\n protected setAriaExpanded(): void {\n this.host.hidden = !this.open\n if (\n this.#referenceElement instanceof globalThis.Element &&\n this.host.role === 'dialog'\n ) {\n this.#referenceElement.ariaExpanded = String(this.open)\n }\n }\n\n @Watch('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectedCallback()\n\n this.#referenceElement = resolveTarget(this.target)\n\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.updateEventListeners()\n this.host.id ||= `qds-tooltip-${autoIncrementingId}`\n this.#referenceElement.setAttribute('aria-describedby', this.host.id)\n\n if (this.host.role === 'dialog') {\n this.#referenceElement.ariaHasPopup = 'dialog'\n }\n }\n\n @Watch('trigger')\n private updateEventListeners(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n const triggers = Array.isArray(this.trigger)\n ? this.trigger\n : ((this.trigger?.split(' ') as Split<TriggerEvent, ' '> | undefined) ??\n [])\n\n this.#removeEventListeners()\n\n if (this.#isTouchDevice)\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n this.#on(document.documentElement, 'pointerdown', this.#boundPointerdown)\n this.#on(this.#referenceElement, 'keydown', this.#boundKeyDown)\n\n for (const trigger of triggers) {\n switch (trigger) {\n case 'click': {\n this.#on(this.#referenceElement, 'click', this.#boundReferenceClick)\n break\n }\n case 'focus':\n case 'focusin': {\n this.#on(this.#referenceElement, trigger, this.#boundFocus)\n this.#on(this.#referenceElement, 'focusout', this.#boundFocusout)\n this.#on(this.host, 'focusout', this.#boundFocusout)\n break\n }\n case 'pointerenter': {\n this.#on(\n this.#referenceElement,\n 'pointerenter',\n this.#boundPointerenter,\n )\n this.#on(\n this.#referenceElement,\n 'pointerleave',\n this.#boundPointerleave,\n )\n this.#on(this.host, 'pointerleave', this.#boundPointerleave)\n break\n }\n default:\n }\n }\n }\n\n @Watch('middleware')\n @Watch('placement')\n @Watch('strategy')\n private async updatePosition(): Promise<void> {\n invariant(this.#referenceElement)\n\n const { x, y, middlewareData, placement, strategy } = await computePosition(\n this.#referenceElement,\n this.host,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n const [side] = placement.split('-') as Split<Placement, '-'>\n\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n this.side = side\n\n if (middlewareData.arrow === undefined) return\n const { x: aX, y: aY, centerOffset } = middlewareData.arrow\n this.aStyles = {\n display: centerOffset === 0 ? undefined : 'none',\n left: aX === undefined ? '' : `${aX}px`,\n top: aY === undefined ? '' : `${aY}px`,\n }\n }\n\n @Watch('autoUpdateOptions')\n private startAutoUpdate(): void {\n invariant(this.#referenceElement)\n\n if (this.#cleanup) this.#cleanup()\n this.#cleanup = autoUpdate(\n this.#referenceElement,\n this.host,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.#isTouchDevice = isTouchDevice()\n this.host.hidden = true\n await this.updateReferenceElement()\n autoIncrementingId += 1\n }\n\n public async componentDidLoad(): Promise<void> {\n await this.updateArrow()\n }\n\n public disconnectedCallback(): void {\n if (!(this.#referenceElement instanceof globalThis.Element)) return\n\n this.#removeEventListeners()\n this.#referenceElement.removeAttribute('aria-describedby')\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n role={this.host.role ?? 'tooltip'}\n onKeyDown={this.#boundKeyDown}\n onPointerDown={this.#boundTooltipPointerDown}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <div class=\"qds-tooltip\">\n <slot />\n </div>\n\n <div\n class=\"qds-arrow\"\n data-side={this.side}\n ref={this.#arrowContainerRef}\n style={this.aStyles}\n />\n </Host>\n )\n }\n\n readonly #arrowContainerRef = (div?: HTMLElement): void => {\n this.#arrowContainerElement = div\n }\n\n readonly #boundTooltipPointerDown = (): void => {\n this.#clickedTooltip = true\n }\n\n async #handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundFocus = (): void => {\n ignorePromise(this.#handleFocus())\n }\n\n async #handleKeyDown(event: Event): Promise<void> {\n if (event instanceof KeyboardEvent && event.key === 'Escape')\n await this.close()\n }\n\n readonly #boundKeyDown = (event: Event): void => {\n ignorePromise(this.#handleKeyDown(event))\n }\n\n async #handlePointerenter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n readonly #boundPointerenter = (): void => {\n ignorePromise(this.#handlePointerenter())\n }\n\n async #handlePointerleave(event: Event): Promise<void> {\n if (\n !this.#clickedTooltip &&\n document.activeElement !== this.#referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.host &&\n event instanceof PointerEvent &&\n event.relatedTarget !== this.#referenceElement &&\n event.relatedTarget !== this.host\n )\n await this.close()\n }\n\n readonly #boundPointerleave = (event: Event): void => {\n ignorePromise(this.#handlePointerleave(event))\n }\n\n async #handleFocusOut(event: Event): Promise<void> {\n if (!(event instanceof FocusEvent)) return\n const { relatedTarget } = event\n\n if (\n relatedTarget instanceof globalThis.Element &&\n !this.host.contains(relatedTarget) &&\n this.#referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n readonly #boundFocusout = (event: Event): void => {\n ignorePromise(this.#handleFocusOut(event))\n }\n\n async #handlePointerdown(event: Event): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.host) ||\n (this.#referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.#referenceElement))\n if (!withinBounds) await this.close()\n }\n\n readonly #boundPointerdown = (event: Event): void => {\n ignorePromise(this.#handlePointerdown(event))\n }\n\n async #handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n readonly #boundReferenceClick = (): void => {\n ignorePromise(this.#handleReferenceClick())\n }\n\n #on(\n element: Element,\n event: keyof GlobalEventHandlersEventMap,\n listener: EventListenerOrEventListenerObject,\n ): void {\n const hasListener = this.#listeners.some(\n (value) => value.element === element && value.event === event,\n )\n if (hasListener) return\n\n element.addEventListener(event, listener)\n this.#listeners.push({ element, event, listener })\n }\n\n #removeEventListeners(): void {\n for (const { element, event, listener } of this.#listeners)\n element.removeEventListener(event, listener)\n this.#listeners = []\n }\n}\n"],"version":3}
|