@quartzds/core 1.0.0-beta.37 → 1.0.0-beta.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/qds-title.js +1 -1
- package/components/qds-title.js.map +1 -1
- package/components/tooltip.js +4 -4
- package/components/tooltip.js.map +1 -1
- package/dist/cjs/qds-title.cjs.entry.js +1 -1
- package/dist/cjs/qds-title.cjs.entry.js.map +1 -1
- package/dist/cjs/qds-tooltip.cjs.entry.js +4 -4
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/qds-title.entry.js +1 -1
- package/dist/esm/qds-title.entry.js.map +1 -1
- package/dist/esm/qds-tooltip.entry.js +4 -4
- package/dist/esm/qds-tooltip.entry.js.map +1 -1
- package/hydrate/index.js +5 -5
- package/package.json +1 -1
package/components/qds-title.js
CHANGED
|
@@ -7,7 +7,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
|
|
|
7
7
|
import { i as inheritAriaAttributes } from './helpers.js';
|
|
8
8
|
import { d as defineCustomElement$2 } from './icon.js';
|
|
9
9
|
|
|
10
|
-
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
10
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
11
11
|
const QdsTitleStyle0 = titleCss;
|
|
12
12
|
|
|
13
13
|
const Title = /*@__PURE__*/ proxyCustomElement(class Title extends HTMLElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\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-title.js","mappings":";;;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,uBAAe,QAAQ;;MCsBV,KAAK;;;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
package/components/tooltip.js
CHANGED
|
@@ -57,7 +57,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
57
57
|
this.aDisplay = undefined;
|
|
58
58
|
this.side = 'top';
|
|
59
59
|
this.aShape = '';
|
|
60
|
-
this.aViewbox = '';
|
|
60
|
+
this.aViewbox = '0 0 0 0';
|
|
61
61
|
this.aHeight = 0;
|
|
62
62
|
this.aWidth = 0;
|
|
63
63
|
this.aGap = 0;
|
|
@@ -210,14 +210,14 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
|
|
|
210
210
|
this.disconnectReferenceElement();
|
|
211
211
|
}
|
|
212
212
|
render() {
|
|
213
|
-
return (h(Host, { key: '
|
|
213
|
+
return (h(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
214
214
|
position: this.hostPosition,
|
|
215
215
|
transform: this.hostTransform,
|
|
216
|
-
} }, h("slot", { key: '
|
|
216
|
+
} }, h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
217
217
|
left: this.aX,
|
|
218
218
|
top: this.aY,
|
|
219
219
|
display: this.aDisplay,
|
|
220
|
-
} }, h("path", { key: '
|
|
220
|
+
} }, h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
221
221
|
}
|
|
222
222
|
async handleFocus() {
|
|
223
223
|
if (!this.disabled)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"tooltip.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([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"tooltip.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,qjEAAqjE,CAAC;AACzkE,yBAAe,UAAU;;AC8CzB,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAWb,OAAO;;;;;;QAoIV,mBAAc,GAAG,KAAK,CAAA;QAEtB,kBAAa,GAAG,KAAK,CAAA;QAiPZ,sBAAiB,GAAG,CAAC,GAAgB;YACpD,IAAI,CAAC,qBAAqB,GAAG,GAAG,CAAA;SACjC,CAAA;QAEgB,0BAAqB,GAAG;YACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;SAC3B,CAAA;QAMgB,eAAU,GAAG;YAC5B,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;SAClC,CAAA;QAMgB,oBAAe,GAAG;YACjC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;SACvC,CAAA;QAcgB,oBAAe,GAAG,CAAC,KAAY;YAC9C,aAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;SAC5C,CAAA;QAcgB,kBAAa,GAAG,CAAC,KAAY;YAC5C,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;SAC1C,CAAA;QAMgB,wBAAmB,GAAG;YACrC,aAAa,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;SAC3C,CAAA;;wBAxa2C,KAAK;;sBAoBP,KAAK;uBAMJ,KAAK;;yBAkBD,KAAK;;;;;;oBAiD5B,KAAK;;;oBAMC,KAAK;sBAET,EAAE;wBAEA,SAAS;uBAEV,CAAC;sBAEF,CAAC;oBAEH,CAAC;kBAEH,EAAE;kBAEF,EAAE;;;;;IAgBjB,MAAM,IAAI;QACf,IAAI,IAAI,CAAC,IAAI;YAAE,OAAM;QAErB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAExE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;QACjD,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;;;;IAMM,MAAM,KAAK;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;QACxB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAE3E,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;QAC3B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;KACjC;;;;;;;IASM,MAAM,WAAW;QACtB,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,CAAA;QAE3E,IAAI,CAAC,OAAO;YACV,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,8CAA8C,CAC/C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,MAAM;YACT,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA;QAE3E,MAAM,UAAU,GACd,YAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,UAAU,IAAI,CAAC,CAAA;QAElD,IAAI,CAAC,MAAM;YACT,MAAM;gBACN,KAAK,IAAI,CAAC,MAAM,EAAE;gBAClB,KAAK,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBAChD,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBACrE,IAAI,CAAA;KACP;IAGS,MAAM,eAAe,CAAC,KAAiB;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;QACzC,MAAM,YAAY,GAChB,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aAClC,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;gBAClD,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAA;QACjD,IAAI,CAAC,YAAY;YAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACtC;IASS,MAAM,gBAAgB;QAC9B,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,CAAC,UAAU,GAAG;YAChB,MAAM,CAAC;gBACL,GAAG,IAAI,CAAC,aAAa;gBACrB,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO;aACnC,CAAC;YACF,CAAC,IAAI,CAAC,MAAM;gBACV,IAAI,CAAC;oBACH,SAAS,EAAE,IAAI,CAAC,OAAO;oBACvB,GAAG,IAAI,CAAC,WAAW;iBACpB,CAAC;YACJ,CAAC,IAAI,CAAC,OAAO;gBACX,KAAK,CAAC;oBACJ,OAAO,EAAE,UAAU,EAAE;oBACrB,GAAG,IAAI,CAAC,YAAY;iBACrB,CAAC;YACJ,KAAK,CAAC;gBACJ,OAAO,EAAE,IAAI,CAAC,qBAAqB;aACpC,CAAC;SACH,CAAC,MAAM,CAAC,CAAC,UAAU,KAA+B,UAAU,KAAK,KAAK,CAAC,CAAA;KACzE;IAGO,MAAM,sBAAsB;;QAClC,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAEjC,MAAM,cAAc,GAClB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACjE,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;YACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;YACtD,IAAI,OAAO,KAAK,IAAI;gBAClB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAChE,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;SAChC;;YAAM,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAA;QAE7C,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;QAC3E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAChE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,MAAA,IAAI,CAAC,OAAO,EAAC,EAAE,QAAF,EAAE,GAAK,eAAe,kBAAkB,EAAE,EAAA;QACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;KACxE;IAKO,MAAM,cAAc;QAC1B,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,MAAM,eAAe,CACzE,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAA;QACD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,UAAU,CAAC,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,CAAC,KAAK,CAAA;QAEvE,IAAI,CAAC,cAAc,CAAC,KAAK;YAAE,OAAM;QAEjC,SAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,cAAc,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE;YAC3C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;YACtB,OAAM;SACP;QACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAW,CAAA;QAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAA;QAE7C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;QAC3C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;KAC5C;IAGO,eAAe;QACrB,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAChC,IAAI,CAAC,OAAO,GAAG,UAAU,CACvB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACE,aAAa,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;SACrC,EACD,IAAI,CAAC,iBAAiB,CACvB,CAAA;KACF;IAEM,MAAM,iBAAiB;QAC5B,IAAI,CAAC,aAAa,GAAG,aAAa,EAAE,CAAA;QACpC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,MAAM,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACnC,kBAAkB,IAAI,CAAC,CAAA;KACxB;IAEM,MAAM,gBAAgB;QAC3B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;KACzB;IAEM,oBAAoB;QACzB,IAAI,CAAC,0BAA0B,EAAE,CAAA;KAClC;IAEM,MAAM;QACX,QACE,EAAC,IAAI,kEACQ,IAAI,CAAC,IAAI,EACpB,UAAU,EAAE,IAAI,CAAC,aAAa,EAC9B,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,EACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAC3B,SAAS,EAAE,IAAI,CAAC,aAAa;aAC9B,IAED,8DAAQ,EACR,8FAEa,IAAI,CAAC,IAAI,EACpB,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,OAAO,EAAE,IAAI,CAAC,QAAQ;aACvB,IAED,6DAAM,KAAK,EAAC,WAAW,EAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAI,CACtC,CACD,EACR;KACF;IAUO,MAAM,WAAW;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB,CAAC,KAAY;QACzC,IACE,CAAC,IAAI,CAAC,cAAc;YACpB,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAChD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,OAAO;YAC/D,KAAK,YAAY,UAAU;YAC3B,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAC7C,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;YAEpC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,cAAc,CAAC,KAAY;QACvC,IAAI,EAAE,KAAK,YAAY,UAAU,CAAC;YAAE,OAAM;QAC1C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;QAE/B,IACE,aAAa,YAAY,UAAU,CAAC,OAAO;YAC3C,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;YACrC,IAAI,CAAC,gBAAgB,KAAK,aAAa;YAEvC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,oBAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;KACnE;IAMO,0BAA0B;QAChC,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,OAAO,EACP,IAAI,CAAC,mBAAmB,CACzB,CAAA;QACH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACnE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACzE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;KAC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
10
10
|
const index = require('./index-584d4de9.js');
|
|
11
11
|
const helpers = require('./helpers-cc2fda81.js');
|
|
12
12
|
|
|
13
|
-
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
13
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
14
14
|
const QdsTitleStyle0 = titleCss;
|
|
15
15
|
|
|
16
16
|
const Title = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACEC,qEACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzBA,oEAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClDA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\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-title.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACEC,qEACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5BA,QAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzBA,oEAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAIA,eAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAIA,eAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClDA,sBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":["inheritAriaAttributes","h"],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
@@ -59,7 +59,7 @@ const Tooltip = class {
|
|
|
59
59
|
this.aDisplay = undefined;
|
|
60
60
|
this.side = 'top';
|
|
61
61
|
this.aShape = '';
|
|
62
|
-
this.aViewbox = '';
|
|
62
|
+
this.aViewbox = '0 0 0 0';
|
|
63
63
|
this.aHeight = 0;
|
|
64
64
|
this.aWidth = 0;
|
|
65
65
|
this.aGap = 0;
|
|
@@ -212,14 +212,14 @@ const Tooltip = class {
|
|
|
212
212
|
this.disconnectReferenceElement();
|
|
213
213
|
}
|
|
214
214
|
render() {
|
|
215
|
-
return (index.h(index.Host, { key: '
|
|
215
|
+
return (index.h(index.Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
216
216
|
position: this.hostPosition,
|
|
217
217
|
transform: this.hostTransform,
|
|
218
|
-
} }, index.h("slot", { key: '
|
|
218
|
+
} }, index.h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), index.h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
219
219
|
left: this.aX,
|
|
220
220
|
top: this.aY,
|
|
221
221
|
display: this.aDisplay,
|
|
222
|
-
} }, index.h("path", { key: '
|
|
222
|
+
} }, index.h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
223
223
|
}
|
|
224
224
|
async handleFocus() {
|
|
225
225
|
if (!this.disabled)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-tooltip.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,UAAU,GAAG,qjEAAqjE,CAAC;AACzkE,yBAAe,UAAU;;AC8CzB,IAAI,kBAAkB,GAAG,CAAC,CAAA;MAWb,OAAO;;;;QAoIV,mBAAc,GAAG,KAAK,CAAA;QAEtB,kBAAa,GAAG,KAAK,CAAA;QAiPZ,sBAAiB,GAAG,CAAC,GAAgB;YACpD,IAAI,CAAC,qBAAqB,GAAG,GAAG,CAAA;SACjC,CAAA;QAEgB,0BAAqB,GAAG;YACvC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;SAC3B,CAAA;QAMgB,eAAU,GAAG;YAC5BA,qBAAa,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;SAClC,CAAA;QAMgB,oBAAe,GAAG;YACjCA,qBAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAA;SACvC,CAAA;QAcgB,oBAAe,GAAG,CAAC,KAAY;YAC9CA,qBAAa,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAA;SAC5C,CAAA;QAcgB,kBAAa,GAAG,CAAC,KAAY;YAC5CA,qBAAa,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAA;SAC1C,CAAA;QAMgB,wBAAmB,GAAG;YACrCA,qBAAa,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAA;SAC3C,CAAA;;wBAxa2C,KAAK;;sBAoBP,KAAK;uBAMJ,KAAK;;yBAkBD,KAAK;;;;;;oBAiD5B,KAAK;;;oBAMC,KAAK;sBAET,EAAE;wBAEA,EAAE;uBAEH,CAAC;sBAEF,CAAC;oBAEH,CAAC;kBAEH,EAAE;kBAEF,EAAE;;;;;IAgBjB,MAAM,IAAI;QACf,IAAI,IAAI,CAAC,IAAI;YAAE,OAAM;QAErB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAExE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;QACjD,IAAI,CAAC,eAAe,EAAE,CAAA;KACvB;;;;IAMM,MAAM,KAAK;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;QACxB,IAAI,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;YACrD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAE3E,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACjB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;QAC3B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;KACjC;;;;;;;IASM,MAAM,WAAW;QACtB,IAAI,CAAC,IAAI,GAAGC,oBAAY,CAAC,IAAI,CAAC,OAAO,EAAE,8BAA8B,CAAC,IAAI,CAAC,CAAA;QAE3E,IAAI,CAAC,OAAO;YACVA,oBAAY,CACV,IAAI,CAAC,OAAO,EACZ,8CAA8C,CAC/C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,MAAM;YACTA,oBAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,IAAI,CAAC,QAAQ,GAAG,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAA;QAE3E,MAAM,UAAU,GACdA,oBAAY,CACV,IAAI,CAAC,OAAO,EACZ,6CAA6C,CAC9C,IAAI,CAAC,CAAA;QAER,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,KAAK,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAA;QACtD,MAAM,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,UAAU,IAAI,CAAC,CAAA;QAElD,IAAI,CAAC,MAAM;YACT,MAAM;gBACN,KAAK,IAAI,CAAC,MAAM,EAAE;gBAClB,KAAK,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBAChD,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE;gBACrE,IAAI,CAAA;KACP;IAGS,MAAM,eAAe,CAAC,KAAiB;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAA;QACzC,MAAM,YAAY,GAChB,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;aAClC,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO;gBAClD,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAA;QACjD,IAAI,CAAC,YAAY;YAAE,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACtC;IASS,MAAM,gBAAgB;QAC9BC,iBAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,CAAC,UAAU,GAAG;YAChBC,yBAAM,CAAC;gBACL,GAAG,IAAI,CAAC,aAAa;gBACrB,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO;aACnC,CAAC;YACF,CAAC,IAAI,CAAC,MAAM;gBACVC,uBAAI,CAAC;oBACH,SAAS,EAAE,IAAI,CAAC,OAAO;oBACvB,GAAG,IAAI,CAAC,WAAW;iBACpB,CAAC;YACJ,CAAC,IAAI,CAAC,OAAO;gBACXC,wBAAK,CAAC;oBACJ,OAAO,EAAEC,6BAAU,EAAE;oBACrB,GAAG,IAAI,CAAC,YAAY;iBACrB,CAAC;YACJC,wBAAK,CAAC;gBACJ,OAAO,EAAE,IAAI,CAAC,qBAAqB;aACpC,CAAC;SACH,CAAC,MAAM,CAAC,CAAC,UAAU,KAA+B,UAAU,KAAK,KAAK,CAAC,CAAA;KACzE;IAGO,MAAM,sBAAsB;;QAClC,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAEjC,MAAM,cAAc,GAClB,OAAO,IAAI,CAAC,MAAM,KAAK,UAAU,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAA;QACjE,IAAI,OAAO,cAAc,KAAK,QAAQ,EAAE;YACtC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA;YACtD,IAAI,OAAO,KAAK,IAAI;gBAClB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;YAChE,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAA;SAChC;;YAAM,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAA;QAE7C,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAA;QAC3E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QAChE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC1E,MAAA,IAAI,CAAC,OAAO,EAAC,EAAE,QAAF,EAAE,GAAK,eAAe,kBAAkB,EAAE,EAAA;QACvD,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;KACxE;IAKO,MAAM,cAAc;QAC1BL,iBAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,MAAMM,kCAAe,CACzE,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACE,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CACF,CAAA;QACD,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAA;QAC5B,IAAI,CAAC,aAAa,GAAG,aAAaC,kBAAU,CAAC,CAAC,CAAC,MAAMA,kBAAU,CAAC,CAAC,CAAC,KAAK,CAAA;QAEvE,IAAI,CAAC,cAAc,CAAC,KAAK;YAAE,OAAM;QAEjCP,iBAAS,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAErC,IAAI,cAAc,CAAC,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE;YAC3C,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAA;YACtB,OAAM;SACP;QACD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAA;QAEzB,MAAM,CAAC,IAAI,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAW,CAAA;QAC7C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,MAAM,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,cAAc,CAAC,KAAK,CAAA;QAE7C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;QAC3C,IAAI,CAAC,EAAE,GAAG,EAAE,KAAK,SAAS,GAAG,EAAE,GAAG,GAAG,EAAE,IAAI,CAAA;KAC5C;IAGO,eAAe;QACrBA,iBAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAEhC,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,CAAA;QAChC,IAAI,CAAC,OAAO,GAAGQ,6BAAU,CACvB,IAAI,CAAC,gBAAgB,EACrB,IAAI,CAAC,OAAO,EACZ;YACEV,qBAAa,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAA;SACrC,EACD,IAAI,CAAC,iBAAiB,CACvB,CAAA;KACF;IAEM,MAAM,iBAAiB;QAC5B,IAAI,CAAC,aAAa,GAAGW,qBAAa,EAAE,CAAA;QACpC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;QAChD,MAAM,IAAI,CAAC,sBAAsB,EAAE,CAAA;QACnC,kBAAkB,IAAI,CAAC,CAAA;KACxB;IAEM,MAAM,gBAAgB;QAC3B,MAAM,IAAI,CAAC,WAAW,EAAE,CAAA;KACzB;IAEM,oBAAoB;QACzB,IAAI,CAAC,0BAA0B,EAAE,CAAA;KAClC;IAEM,MAAM;QACX,QACEC,QAACC,UAAI,kEACQ,IAAI,CAAC,IAAI,EACpB,UAAU,EAAE,IAAI,CAAC,aAAa,EAC9B,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,SAAS,EACpC,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,YAAY;gBAC3B,SAAS,EAAE,IAAI,CAAC,aAAa;aAC9B,IAEDD,oEAAQ,EACRA,oGAEa,IAAI,CAAC,IAAI,EACpB,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,iBAAiB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI,CAAC,EAAE;gBACb,GAAG,EAAE,IAAI,CAAC,EAAE;gBACZ,OAAO,EAAE,IAAI,CAAC,QAAQ;aACvB,IAEDA,mEAAM,KAAK,EAAC,WAAW,EAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAI,CACtC,CACD,EACR;KACF;IAUO,MAAM,WAAW;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB;QAC5B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;KACtC;IAMO,MAAM,gBAAgB,CAAC,KAAY;QACzC,IACE,CAAC,IAAI,CAAC,cAAc;YACpB,QAAQ,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAChD,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC,OAAO;YAC/D,KAAK,YAAY,UAAU;YAC3B,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,gBAAgB;YAC7C,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,OAAO;YAEpC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,cAAc,CAAC,KAAY;QACvC,IAAI,EAAE,KAAK,YAAY,UAAU,CAAC;YAAE,OAAM;QAC1C,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;QAE/B,IACE,aAAa,YAAY,UAAU,CAAC,OAAO;YAC3C,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC;YACrC,IAAI,CAAC,gBAAgB,KAAK,aAAa;YAEvC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAA;KACrB;IAMO,MAAM,oBAAoB;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAA;KACnE;IAMO,0BAA0B;QAChC,IAAI,EAAE,IAAI,CAAC,gBAAgB,YAAY,UAAU,CAAC,OAAO,CAAC;YAAE,OAAM;QAElE,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,OAAO,EACP,IAAI,CAAC,mBAAmB,CACzB,CAAA;QACH,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;QACnE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACzE,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CACvC,YAAY,EACZ,IAAI,CAAC,eAAe,CACrB,CAAA;QACD,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAA;KAC1D;;;;;;;;;;;;;;;;;;;;;","names":["ignorePromise","propertyToPx","invariant","offset","flip","shift","limitShift","arrow","computePosition","roundByDPR","autoUpdate","isTouchDevice","h","Host"],"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([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"qds-tooltip.entry.cjs.js","mappings":"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","names":["ignorePromise","propertyToPx","invariant","offset","flip","shift","limitShift","arrow","computePosition","roundByDPR","autoUpdate","isTouchDevice","h","Host"],"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([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { r as registerInstance, h, a as getElement } from './index-8135df23.js';
|
|
7
7
|
import { i as inheritAriaAttributes } from './helpers-ff47826f.js';
|
|
8
8
|
|
|
9
|
-
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
9
|
+
const titleCss = ":host([hidden]){display:none !important}:host{display:block}.qds-titles{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}.qds-has-icon{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}.qds-title,.qds-subtitle,.qds-kicker{margin-block:0}.qds-title{grid-area:title;color:var(--qds-theme-title)}.qds-subtitle{grid-area:subtitle;color:var(--qds-theme-subtitle)}.qds-kicker{grid-area:kicker;color:var(--qds-theme-kicker)}.qds-icon{grid-area:icon;color:var(--qds-theme-text-standard)}.qds-main.qds-section.qds-titles{gap:var(--qds-main-section-titles-gap)}.qds-main.qds-section.qds-has-icon{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}.qds-main.qds-section .qds-title{font:var(--qds-main-section-title)}.qds-main.qds-section .qds-subtitle{font:var(--qds-main-section-subtitle)}.qds-main.qds-section .qds-kicker{font:var(--qds-main-section-kicker)}.qds-main.qds-section .qds-icon{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}.qds-main.qds-subsection.qds-titles{gap:var(--qds-main-subsection-titles-gap)}.qds-main.qds-subsection.qds-has-icon{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}.qds-main.qds-subsection .qds-title{font:var(--qds-main-subsection-title)}.qds-main.qds-subsection .qds-subtitle{font:var(--qds-main-subsection-subtitle)}.qds-main.qds-subsection .qds-kicker{font:var(--qds-main-subsection-kicker)}.qds-main.qds-subsection .qds-icon{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}.qds-panel.qds-root.qds-titles{gap:var(--qds-panel-titles-gap)}.qds-panel.qds-root.qds-has-icon{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}.qds-panel.qds-root .qds-title{font:var(--qds-panel-title)}.qds-panel.qds-root .qds-subtitle{font:var(--qds-panel-subtitle)}.qds-panel.qds-root .qds-kicker{font:var(--qds-panel-kicker)}.qds-panel.qds-root .qds-icon{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}.qds-panel.qds-section.qds-titles{gap:var(--qds-panel-section-titles-gap)}.qds-panel.qds-section.qds-has-icon{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}.qds-panel.qds-section .qds-title{font:var(--qds-panel-section-title)}.qds-panel.qds-section .qds-subtitle{font:var(--qds-panel-section-subtitle)}.qds-panel.qds-section .qds-kicker{font:var(--qds-panel-section-kicker)}.qds-panel.qds-section .qds-icon{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}.qds-panel.qds-subsection.qds-titles{gap:var(--qds-panel-subsection-titles-gap)}.qds-panel.qds-subsection.qds-has-icon{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}.qds-panel.qds-subsection .qds-title{font:var(--qds-panel-subsection-title)}.qds-panel.qds-subsection .qds-subtitle{font:var(--qds-panel-subsection-subtitle)}.qds-panel.qds-subsection .qds-kicker{font:var(--qds-panel-subsection-kicker)}.qds-panel.qds-subsection .qds-icon{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}.qds-navigation.qds-section.qds-titles{gap:var(--qds-navigation-section-titles-gap)}.qds-navigation.qds-section.qds-has-icon{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}.qds-navigation.qds-section .qds-title{font:var(--qds-navigation-section-title)}.qds-navigation.qds-section .qds-subtitle{font:var(--qds-navigation-section-subtitle)}.qds-navigation.qds-section .qds-kicker{font:var(--qds-navigation-section-kicker)}.qds-navigation.qds-section .qds-icon{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}.qds-navigation.qds-subsection.qds-titles{gap:var(--qds-navigation-subsection-titles-gap)}.qds-navigation.qds-subsection.qds-has-icon{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}.qds-navigation.qds-subsection .qds-title{font:var(--qds-navigation-subsection-title)}.qds-navigation.qds-subsection .qds-subtitle{font:var(--qds-navigation-subsection-subtitle)}.qds-navigation.qds-subsection .qds-kicker{font:var(--qds-navigation-subsection-kicker)}.qds-navigation.qds-subsection .qds-icon{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}.qds-popup.qds-root.qds-titles{gap:var(--qds-popup-titles-gap)}.qds-popup.qds-root.qds-has-icon{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}.qds-popup.qds-root .qds-title{font:var(--qds-popup-title)}.qds-popup.qds-root .qds-subtitle{font:var(--qds-popup-subtitle)}.qds-popup.qds-root .qds-kicker{font:var(--qds-popup-kicker)}.qds-popup.qds-root .qds-icon{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}.qds-popup.qds-section.qds-titles{gap:var(--qds-popup-section-titles-gap)}.qds-popup.qds-section.qds-has-icon{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}.qds-popup.qds-section .qds-title{font:var(--qds-popup-section-title)}.qds-popup.qds-section .qds-subtitle{font:var(--qds-popup-section-subtitle)}.qds-popup.qds-section .qds-kicker{font:var(--qds-popup-section-kicker)}.qds-popup.qds-section .qds-icon{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}.qds-popup.qds-subsection.qds-titles{gap:var(--qds-popup-subsection-titles-gap)}.qds-popup.qds-subsection.qds-has-icon{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}.qds-popup.qds-subsection .qds-title{font:var(--qds-popup-subsection-title)}.qds-popup.qds-subsection .qds-subtitle{font:var(--qds-popup-subsection-subtitle)}.qds-popup.qds-subsection .qds-kicker{font:var(--qds-popup-subsection-kicker)}.qds-popup.qds-subsection .qds-icon{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}.qds-accessory.qds-root.qds-titles{gap:var(--qds-accessory-titles-gap)}.qds-accessory.qds-root.qds-has-icon{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}.qds-accessory.qds-root .qds-title{font:var(--qds-accessory-title)}.qds-accessory.qds-root .qds-subtitle{font:var(--qds-accessory-subtitle)}.qds-accessory.qds-root .qds-kicker{font:var(--qds-accessory-kicker)}.qds-accessory.qds-root .qds-icon{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}.qds-accessory.qds-section.qds-titles{gap:var(--qds-accessory-section-titles-gap)}.qds-accessory.qds-section.qds-has-icon{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}.qds-accessory.qds-section .qds-title{font:var(--qds-accessory-section-title)}.qds-accessory.qds-section .qds-subtitle{font:var(--qds-accessory-section-subtitle)}.qds-accessory.qds-section .qds-kicker{font:var(--qds-accessory-section-kicker)}.qds-accessory.qds-section .qds-icon{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
10
10
|
const QdsTitleStyle0 = titleCss;
|
|
11
11
|
|
|
12
12
|
const Title = class {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,yoOAAyoO,CAAC;AAC3pO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\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-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,wqOAAwqO,CAAC;AAC1rO,uBAAe,QAAQ;;MCsBV,KAAK;;;QAkCR,wBAAmB,GAAe,EAAE,CAAA;;2BAvBE,SAAS;;qBAOhB,MAAM;qBAEL,SAAS;;mBAUd,IAAI;;IAMvC,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;KAC3D;IAED,IAAY,SAAS;QACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;KACvD;IAEM,iBAAiB;QACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAC/D;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;QACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;QAE3C,QACE,+DACE,KAAK,EAAE;gBACL,CAAC,KAAK,GAAG,IAAI;gBACb,CAAC,KAAK,GAAG,IAAI;gBACb,YAAY,EAAE,IAAI;gBAClB,cAAc,EAAE,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE;aACpE,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,qDAAC,KAAK,EAAC,WAAW,IACzB,8DAAQ,CACC,EACV,IAAI,CAAC,WAAW,IAAI,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,QAAQ,CAAK,EAC/D,IAAI,CAAC,SAAS,IAAI,SAAG,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,MAAM,CAAK,EACzD,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,CACM,EACV;KACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles {\n display: grid;\n grid-template-areas:\n 'kicker'\n 'title'\n 'subtitle';\n grid-template-columns: auto 1fr;\n}\n\n.qds-has-icon {\n grid-template-areas:\n '. kicker'\n 'icon title'\n '. subtitle';\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 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","// 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 = 'section' | 'subsection'\nexport type Tag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\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 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 @Element() private readonly element!: HTMLQdsTitleElement\n\n private inheritedAttributes: Attributes = {}\n\n private get hasSubtitle(): boolean {\n return this.subtitle !== undefined && this.subtitle !== ''\n }\n\n private get hasKicker(): boolean {\n return this.kicker !== undefined && this.kicker !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n const layer = `qds-${this.layer}`\n const level = `qds-${this.level ?? 'root'}`\n\n return (\n <hgroup\n class={{\n [layer]: true,\n [level]: true,\n 'qds-titles': true,\n 'qds-has-icon': this.iconName !== undefined && this.iconName !== '',\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag class=\"qds-title\">\n <slot />\n </this.tag>\n {this.hasSubtitle && <p class=\"qds-subtitle\">{this.subtitle}</p>}\n {this.hasKicker && <p class=\"qds-kicker\">{this.kicker}</p>}\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
|
|
@@ -55,7 +55,7 @@ const Tooltip = class {
|
|
|
55
55
|
this.aDisplay = undefined;
|
|
56
56
|
this.side = 'top';
|
|
57
57
|
this.aShape = '';
|
|
58
|
-
this.aViewbox = '';
|
|
58
|
+
this.aViewbox = '0 0 0 0';
|
|
59
59
|
this.aHeight = 0;
|
|
60
60
|
this.aWidth = 0;
|
|
61
61
|
this.aGap = 0;
|
|
@@ -208,14 +208,14 @@ const Tooltip = class {
|
|
|
208
208
|
this.disconnectReferenceElement();
|
|
209
209
|
}
|
|
210
210
|
render() {
|
|
211
|
-
return (h(Host, { key: '
|
|
211
|
+
return (h(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
212
212
|
position: this.hostPosition,
|
|
213
213
|
transform: this.hostTransform,
|
|
214
|
-
} }, h("slot", { key: '
|
|
214
|
+
} }, h("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), h("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
215
215
|
left: this.aX,
|
|
216
216
|
top: this.aY,
|
|
217
217
|
display: this.aDisplay,
|
|
218
|
-
} }, h("path", { key: '
|
|
218
|
+
} }, h("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
219
219
|
}
|
|
220
220
|
async handleFocus() {
|
|
221
221
|
if (!this.disabled)
|
|
@@ -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([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = ''\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\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 padding: var(--qds-accessory-padding);\n top: 0;\n}\n\n:host([aria-hidden='true']) {\n display: none;\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-container {\n height: var(--qds-signature-triangle-pointer-size-width);\n position: absolute;\n width: var(--qds-signature-triangle-pointer-size-width);\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\n.qds-arrow {\n fill: var(--qds-theme-accessory-background);\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 Listen,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { OffsetOptions } from '../../helpers'\nimport {\n ignorePromise,\n invariant,\n isTouchDevice,\n propertyToPx,\n roundByDPR,\n} from '../../helpers'\n\nlet autoIncrementingId = 1\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 follow:\n *\n * - A CSS selector string\n * - A reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element) or\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements)\n * - A function returning a reference to an\n * [`Element`](https://developer.mozilla.org/docs/Web/API/Element),\n * [Virtual Element](https://floating-ui.com/docs/virtual-elements),\n * or a CSS selector string\n */\n @Prop() public readonly target?:\n | ReferenceElement\n | string\n | (() => ReferenceElement | string)\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 element!: HTMLQdsTooltipElement\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 aDisplay?: string\n\n @State() private side: Side = 'top'\n\n @State() private aShape = ''\n\n @State() private aViewbox = '0 0 0 0'\n\n @State() private aHeight = 0\n\n @State() private aWidth = 0\n\n @State() private aGap = 0\n\n @State() private aX = ''\n\n @State() private aY = ''\n\n private arrowContainerElement?: SVGElement\n\n private cleanup?: () => void\n\n private clickedTooltip = false\n\n private isTouchDevice = false\n\n private referenceElement?: ReferenceElement\n\n /**\n * Show the tooltip.\n */\n @Method()\n public async show(): Promise<void> {\n if (this.open) return\n\n if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.addEventListener('focusout', this.boundFocusout)\n\n this.open = true\n this.element.setAttribute('aria-hidden', 'false')\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 if (this.referenceElement instanceof globalThis.Element)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n\n this.open = false\n this.clickedTooltip = false\n this.element.setAttribute('aria-hidden', 'true')\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.aGap = propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0\n\n this.aHeight =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-height`,\n ) ?? 0\n\n this.aWidth =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-size-width`,\n ) ?? 0\n\n this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`\n\n const aTipRadius =\n propertyToPx(\n this.element,\n `--qds-signature-triangle-pointer-tip-radius`,\n ) ?? 0\n\n const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1)\n const svgY = ((this.aHeight / 2) * aTipRadius) / 4\n\n this.aShape =\n 'M0,0' +\n ` H${this.aWidth}` +\n ` L${this.aWidth - svgX},${this.aHeight - svgY}` +\n ` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +\n ' Z'\n }\n\n @Listen('mousedown', { target: 'document' })\n protected async handleMouseDown(event: MouseEvent): Promise<void> {\n const composedPath = event.composedPath()\n const withinBounds =\n composedPath.includes(this.element) ||\n (this.referenceElement instanceof globalThis.Element &&\n composedPath.includes(this.referenceElement))\n if (!withinBounds) await this.close()\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('target')\n private async updateReferenceElement(): Promise<void> {\n this.disconnectReferenceElement()\n\n const resolvedTarget =\n typeof this.target === 'function' ? this.target() : this.target\n if (typeof resolvedTarget === 'string') {\n const element = document.querySelector(resolvedTarget)\n if (element === null)\n throw new Error('String `target` must resolve to an Element.')\n this.referenceElement = element\n } else this.referenceElement = resolvedTarget\n\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.addEventListener('click', this.boundReferenceClick)\n this.referenceElement.addEventListener('focus', this.boundFocus)\n this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter)\n this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave)\n this.element.id ||= `qds-tooltip-${autoIncrementingId}`\n this.referenceElement.setAttribute('aria-describedby', this.element.id)\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.element,\n {\n middleware: this.middleware,\n placement: this.placement,\n strategy: this.strategy,\n },\n )\n this.hostPosition = strategy\n this.hostTransform = `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`\n\n if (!middlewareData.arrow) return\n\n invariant(this.arrowContainerElement)\n\n if (middlewareData.arrow.centerOffset !== 0) {\n this.aDisplay = 'none'\n return\n }\n this.aDisplay = undefined\n\n const [side] = placement.split('-') as [Side]\n this.side = side\n\n const { x: aX, y: aY } = middlewareData.arrow\n\n this.aX = aX === undefined ? '' : `${aX}px`\n this.aY = aY === undefined ? '' : `${aY}px`\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.element,\n () => {\n ignorePromise(this.updatePosition())\n },\n this.autoUpdateOptions,\n )\n }\n\n public async componentWillLoad(): Promise<void> {\n this.isTouchDevice = isTouchDevice()\n this.element.setAttribute('aria-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 this.disconnectReferenceElement()\n }\n\n public render() {\n return (\n <Host\n data-side={this.side}\n onFocusout={this.boundFocusout}\n onMouseDown={this.boundTooltipMouseDown}\n onMouseLeave={this.boundMouseLeave}\n role={this.element.role ?? 'tooltip'}\n style={{\n position: this.hostPosition,\n transform: this.hostTransform,\n }}\n >\n <slot />\n <svg\n aria-hidden\n data-side={this.side}\n class=\"qds-arrow-container\"\n ref={this.arrowContainerRef}\n viewBox={this.aViewbox}\n style={{\n left: this.aX,\n top: this.aY,\n display: this.aDisplay,\n }}\n >\n <path class=\"qds-arrow\" d={this.aShape} />\n </svg>\n </Host>\n )\n }\n\n private readonly arrowContainerRef = (svg?: SVGElement): void => {\n this.arrowContainerElement = svg\n }\n\n private readonly boundTooltipMouseDown = (): void => {\n this.clickedTooltip = true\n }\n\n private async handleFocus(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundFocus = (): void => {\n ignorePromise(this.handleFocus())\n }\n\n private async handleMouseEnter(): Promise<void> {\n if (!this.disabled) await this.show()\n }\n\n private readonly boundMouseEnter = (): void => {\n ignorePromise(this.handleMouseEnter())\n }\n\n private async handleMouseLeave(event: Event): Promise<void> {\n if (\n !this.clickedTooltip &&\n document.activeElement !== this.referenceElement &&\n document.activeElement?.closest('qds-tooltip') !== this.element &&\n event instanceof MouseEvent &&\n event.relatedTarget !== this.referenceElement &&\n event.relatedTarget !== this.element\n )\n await this.close()\n }\n\n private readonly boundMouseLeave = (event: Event): void => {\n ignorePromise(this.handleMouseLeave(event))\n }\n\n private 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.element.contains(relatedTarget) &&\n this.referenceElement !== relatedTarget\n )\n await this.close()\n }\n\n private readonly boundFocusout = (event: Event): void => {\n ignorePromise(this.handleFocusOut(event))\n }\n\n private async handleReferenceClick(): Promise<void> {\n if (!this.disabled) await (this.open ? this.close() : this.show())\n }\n\n private readonly boundReferenceClick = (): void => {\n ignorePromise(this.handleReferenceClick())\n }\n\n private disconnectReferenceElement(): void {\n if (!(this.referenceElement instanceof globalThis.Element)) return\n\n if (this.isTouchDevice)\n this.referenceElement.removeEventListener(\n 'click',\n this.boundReferenceClick,\n )\n this.referenceElement.removeEventListener('focus', this.boundFocus)\n this.referenceElement.removeEventListener('focusout', this.boundFocusout)\n this.referenceElement.removeEventListener(\n 'mouseenter',\n this.boundMouseEnter,\n )\n this.referenceElement.removeEventListener(\n 'mouseleave',\n this.boundMouseLeave,\n )\n this.referenceElement.removeAttribute('aria-describedby')\n }\n}\n"],"version":3}
|
package/hydrate/index.js
CHANGED
|
@@ -11851,7 +11851,7 @@ class TextArea {
|
|
|
11851
11851
|
}; }
|
|
11852
11852
|
}
|
|
11853
11853
|
|
|
11854
|
-
const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle'}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon;color:var(--qds-theme-text-standard)}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
11854
|
+
const titleCss = "/*!@:host([hidden])*/[hidden].sc-qds-title-h{display:none !important}/*!@:host*/.sc-qds-title-h{display:block}/*!@.qds-titles*/.qds-titles.sc-qds-title{display:grid;grid-template-areas:'kicker'\n 'title'\n 'subtitle';grid-template-columns:auto 1fr}/*!@.qds-has-icon*/.qds-has-icon.sc-qds-title{grid-template-areas:'. kicker'\n 'icon title'\n '. subtitle'}/*!@.qds-title,\n.qds-subtitle,\n.qds-kicker*/.qds-title.sc-qds-title,.qds-subtitle.sc-qds-title,.qds-kicker.sc-qds-title{margin-block:0}/*!@.qds-title*/.qds-title.sc-qds-title{grid-area:title;color:var(--qds-theme-title)}/*!@.qds-subtitle*/.qds-subtitle.sc-qds-title{grid-area:subtitle;color:var(--qds-theme-subtitle)}/*!@.qds-kicker*/.qds-kicker.sc-qds-title{grid-area:kicker;color:var(--qds-theme-kicker)}/*!@.qds-icon*/.qds-icon.sc-qds-title{grid-area:icon;color:var(--qds-theme-text-standard)}/*!@.qds-main.qds-section.qds-titles*/.qds-main.qds-section.qds-titles.sc-qds-title{gap:var(--qds-main-section-titles-gap)}/*!@.qds-main.qds-section.qds-has-icon*/.qds-main.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-main-section-titles-gap)\n var(--qds-main-section-titles-icon-gap)}/*!@.qds-main.qds-section .qds-title*/.qds-main.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-section-title)}/*!@.qds-main.qds-section .qds-subtitle*/.qds-main.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-section-subtitle)}/*!@.qds-main.qds-section .qds-kicker*/.qds-main.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-section-kicker)}/*!@.qds-main.qds-section .qds-icon*/.qds-main.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-section-titles-icon-size);height:var(--qds-main-section-titles-icon-crop-height)}/*!@.qds-main.qds-subsection.qds-titles*/.qds-main.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)}/*!@.qds-main.qds-subsection.qds-has-icon*/.qds-main.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-main-subsection-titles-gap)\n var(--qds-main-subsection-titles-icon-gap)}/*!@.qds-main.qds-subsection .qds-title*/.qds-main.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-main-subsection-title)}/*!@.qds-main.qds-subsection .qds-subtitle*/.qds-main.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-main-subsection-subtitle)}/*!@.qds-main.qds-subsection .qds-kicker*/.qds-main.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-main-subsection-kicker)}/*!@.qds-main.qds-subsection .qds-icon*/.qds-main.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-main-subsection-titles-icon-size);height:var(--qds-main-subsection-titles-icon-crop-height)}/*!@.qds-panel.qds-root.qds-titles*/.qds-panel.qds-root.qds-titles.sc-qds-title{gap:var(--qds-panel-titles-gap)}/*!@.qds-panel.qds-root.qds-has-icon*/.qds-panel.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-panel-titles-gap) var(--qds-panel-titles-icon-gap)}/*!@.qds-panel.qds-root .qds-title*/.qds-panel.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-title)}/*!@.qds-panel.qds-root .qds-subtitle*/.qds-panel.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subtitle)}/*!@.qds-panel.qds-root .qds-kicker*/.qds-panel.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-kicker)}/*!@.qds-panel.qds-root .qds-icon*/.qds-panel.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-titles-icon-size);height:var(--qds-panel-titles-icon-crop-height)}/*!@.qds-panel.qds-section.qds-titles*/.qds-panel.qds-section.qds-titles.sc-qds-title{gap:var(--qds-panel-section-titles-gap)}/*!@.qds-panel.qds-section.qds-has-icon*/.qds-panel.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-panel-section-titles-gap)\n var(--qds-panel-section-titles-icon-gap)}/*!@.qds-panel.qds-section .qds-title*/.qds-panel.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-section-title)}/*!@.qds-panel.qds-section .qds-subtitle*/.qds-panel.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-section-subtitle)}/*!@.qds-panel.qds-section .qds-kicker*/.qds-panel.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-section-kicker)}/*!@.qds-panel.qds-section .qds-icon*/.qds-panel.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-section-titles-icon-size);height:var(--qds-panel-section-titles-icon-crop-height)}/*!@.qds-panel.qds-subsection.qds-titles*/.qds-panel.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)}/*!@.qds-panel.qds-subsection.qds-has-icon*/.qds-panel.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-panel-subsection-titles-gap)\n var(--qds-panel-subsection-titles-icon-gap)}/*!@.qds-panel.qds-subsection .qds-title*/.qds-panel.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-panel-subsection-title)}/*!@.qds-panel.qds-subsection .qds-subtitle*/.qds-panel.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-panel-subsection-subtitle)}/*!@.qds-panel.qds-subsection .qds-kicker*/.qds-panel.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-panel-subsection-kicker)}/*!@.qds-panel.qds-subsection .qds-icon*/.qds-panel.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-panel-subsection-titles-icon-size);height:var(--qds-panel-subsection-titles-icon-crop-height)}/*!@.qds-navigation.qds-section.qds-titles*/.qds-navigation.qds-section.qds-titles.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)}/*!@.qds-navigation.qds-section.qds-has-icon*/.qds-navigation.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-section-titles-gap)\n var(--qds-navigation-section-titles-icon-gap)}/*!@.qds-navigation.qds-section .qds-title*/.qds-navigation.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-section-title)}/*!@.qds-navigation.qds-section .qds-subtitle*/.qds-navigation.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-section-subtitle)}/*!@.qds-navigation.qds-section .qds-kicker*/.qds-navigation.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-section-kicker)}/*!@.qds-navigation.qds-section .qds-icon*/.qds-navigation.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-section-titles-icon-size);height:var(--qds-navigation-section-titles-icon-crop-height)}/*!@.qds-navigation.qds-subsection.qds-titles*/.qds-navigation.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)}/*!@.qds-navigation.qds-subsection.qds-has-icon*/.qds-navigation.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-navigation-subsection-titles-gap)\n var(--qds-navigation-subsection-titles-icon-gap)}/*!@.qds-navigation.qds-subsection .qds-title*/.qds-navigation.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-navigation-subsection-title)}/*!@.qds-navigation.qds-subsection .qds-subtitle*/.qds-navigation.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-navigation-subsection-subtitle)}/*!@.qds-navigation.qds-subsection .qds-kicker*/.qds-navigation.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-navigation-subsection-kicker)}/*!@.qds-navigation.qds-subsection .qds-icon*/.qds-navigation.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-navigation-subsection-titles-icon-size);height:var(--qds-navigation-subsection-titles-icon-crop-height)}/*!@.qds-popup.qds-root.qds-titles*/.qds-popup.qds-root.qds-titles.sc-qds-title{gap:var(--qds-popup-titles-gap)}/*!@.qds-popup.qds-root.qds-has-icon*/.qds-popup.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-popup-titles-gap) var(--qds-popup-titles-icon-gap)}/*!@.qds-popup.qds-root .qds-title*/.qds-popup.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-title)}/*!@.qds-popup.qds-root .qds-subtitle*/.qds-popup.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subtitle)}/*!@.qds-popup.qds-root .qds-kicker*/.qds-popup.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-kicker)}/*!@.qds-popup.qds-root .qds-icon*/.qds-popup.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-titles-icon-size);height:var(--qds-popup-titles-icon-crop-height)}/*!@.qds-popup.qds-section.qds-titles*/.qds-popup.qds-section.qds-titles.sc-qds-title{gap:var(--qds-popup-section-titles-gap)}/*!@.qds-popup.qds-section.qds-has-icon*/.qds-popup.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-popup-section-titles-gap)\n var(--qds-popup-section-titles-icon-gap)}/*!@.qds-popup.qds-section .qds-title*/.qds-popup.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-section-title)}/*!@.qds-popup.qds-section .qds-subtitle*/.qds-popup.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-section-subtitle)}/*!@.qds-popup.qds-section .qds-kicker*/.qds-popup.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-section-kicker)}/*!@.qds-popup.qds-section .qds-icon*/.qds-popup.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-section-titles-icon-size);height:var(--qds-popup-section-titles-icon-crop-height)}/*!@.qds-popup.qds-subsection.qds-titles*/.qds-popup.qds-subsection.qds-titles.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)}/*!@.qds-popup.qds-subsection.qds-has-icon*/.qds-popup.qds-subsection.qds-has-icon.sc-qds-title{gap:var(--qds-popup-subsection-titles-gap)\n var(--qds-popup-subsection-titles-icon-gap)}/*!@.qds-popup.qds-subsection .qds-title*/.qds-popup.qds-subsection.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-popup-subsection-title)}/*!@.qds-popup.qds-subsection .qds-subtitle*/.qds-popup.qds-subsection.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-popup-subsection-subtitle)}/*!@.qds-popup.qds-subsection .qds-kicker*/.qds-popup.qds-subsection.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-popup-subsection-kicker)}/*!@.qds-popup.qds-subsection .qds-icon*/.qds-popup.qds-subsection.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-popup-subsection-titles-icon-size);height:var(--qds-popup-subsection-titles-icon-crop-height)}/*!@.qds-accessory.qds-root.qds-titles*/.qds-accessory.qds-root.qds-titles.sc-qds-title{gap:var(--qds-accessory-titles-gap)}/*!@.qds-accessory.qds-root.qds-has-icon*/.qds-accessory.qds-root.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-titles-gap) var(--qds-accessory-titles-icon-gap)}/*!@.qds-accessory.qds-root .qds-title*/.qds-accessory.qds-root.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-title)}/*!@.qds-accessory.qds-root .qds-subtitle*/.qds-accessory.qds-root.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-subtitle)}/*!@.qds-accessory.qds-root .qds-kicker*/.qds-accessory.qds-root.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-kicker)}/*!@.qds-accessory.qds-root .qds-icon*/.qds-accessory.qds-root.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-titles-icon-size);height:var(--qds-accessory-titles-icon-crop-height)}/*!@.qds-accessory.qds-section.qds-titles*/.qds-accessory.qds-section.qds-titles.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)}/*!@.qds-accessory.qds-section.qds-has-icon*/.qds-accessory.qds-section.qds-has-icon.sc-qds-title{gap:var(--qds-accessory-section-titles-gap)\n var(--qds-accessory-section-titles-icon-gap)}/*!@.qds-accessory.qds-section .qds-title*/.qds-accessory.qds-section.sc-qds-title .qds-title.sc-qds-title{font:var(--qds-accessory-section-title)}/*!@.qds-accessory.qds-section .qds-subtitle*/.qds-accessory.qds-section.sc-qds-title .qds-subtitle.sc-qds-title{font:var(--qds-accessory-section-subtitle)}/*!@.qds-accessory.qds-section .qds-kicker*/.qds-accessory.qds-section.sc-qds-title .qds-kicker.sc-qds-title{font:var(--qds-accessory-section-kicker)}/*!@.qds-accessory.qds-section .qds-icon*/.qds-accessory.qds-section.sc-qds-title .qds-icon.sc-qds-title{width:var(--qds-accessory-section-titles-icon-size);height:var(--qds-accessory-section-titles-icon-crop-height)}";
|
|
11855
11855
|
var QdsTitleStyle0 = titleCss;
|
|
11856
11856
|
|
|
11857
11857
|
/**
|
|
@@ -11961,7 +11961,7 @@ class Tooltip {
|
|
|
11961
11961
|
this.aDisplay = undefined;
|
|
11962
11962
|
this.side = 'top';
|
|
11963
11963
|
this.aShape = '';
|
|
11964
|
-
this.aViewbox = '';
|
|
11964
|
+
this.aViewbox = '0 0 0 0';
|
|
11965
11965
|
this.aHeight = 0;
|
|
11966
11966
|
this.aWidth = 0;
|
|
11967
11967
|
this.aGap = 0;
|
|
@@ -12114,14 +12114,14 @@ class Tooltip {
|
|
|
12114
12114
|
this.disconnectReferenceElement();
|
|
12115
12115
|
}
|
|
12116
12116
|
render() {
|
|
12117
|
-
return (hAsync(Host, { key: '
|
|
12117
|
+
return (hAsync(Host, { key: '65cbb0d751c92abfe319b7e00177b89428825609', "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
12118
12118
|
position: this.hostPosition,
|
|
12119
12119
|
transform: this.hostTransform,
|
|
12120
|
-
} }, hAsync("slot", { key: '
|
|
12120
|
+
} }, hAsync("slot", { key: '6e726aa92871f782179c63320f8abe9efb514859' }), hAsync("svg", { key: 'f2ffd338e6315226028c468aaa94e335e4472da4', "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
12121
12121
|
left: this.aX,
|
|
12122
12122
|
top: this.aY,
|
|
12123
12123
|
display: this.aDisplay,
|
|
12124
|
-
} }, hAsync("path", { key: '
|
|
12124
|
+
} }, hAsync("path", { key: 'c20b608b86da7cd5a5f21adbd9eb08306f7948e6', class: "qds-arrow", d: this.aShape }))));
|
|
12125
12125
|
}
|
|
12126
12126
|
async handleFocus() {
|
|
12127
12127
|
if (!this.disabled)
|
package/package.json
CHANGED