@quartzds/core 1.0.0-beta.13 → 1.0.0-beta.15

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.
Files changed (88) hide show
  1. package/components/icon.js +2 -2
  2. package/components/icon.js.map +1 -1
  3. package/components/label.js +4 -4
  4. package/components/label.js.map +1 -1
  5. package/components/qds-button.js +4 -4
  6. package/components/qds-button.js.map +1 -1
  7. package/components/qds-checkbox.js +8 -8
  8. package/components/qds-checkbox.js.map +1 -1
  9. package/components/qds-dialog.js +2 -2
  10. package/components/qds-dialog.js.map +1 -1
  11. package/components/qds-divider.js +2 -2
  12. package/components/qds-divider.js.map +1 -1
  13. package/components/qds-form-message.js +4 -4
  14. package/components/qds-form-message.js.map +1 -1
  15. package/components/qds-inline-link.js +2 -2
  16. package/components/qds-inline-link.js.map +1 -1
  17. package/components/qds-input.js +2 -2
  18. package/components/qds-input.js.map +1 -1
  19. package/components/qds-radio.js +4 -4
  20. package/components/qds-radio.js.map +1 -1
  21. package/components/qds-switch.js +7 -7
  22. package/components/qds-switch.js.map +1 -1
  23. package/components/qds-textarea.js +2 -2
  24. package/components/qds-textarea.js.map +1 -1
  25. package/components/qds-title.js +19 -17
  26. package/components/qds-title.js.map +1 -1
  27. package/components/qds-tooltip.js +3 -3
  28. package/components/qds-tooltip.js.map +1 -1
  29. package/dist/cjs/qds-button.cjs.entry.js +4 -4
  30. package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
  31. package/dist/cjs/qds-checkbox.cjs.entry.js +8 -8
  32. package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
  33. package/dist/cjs/qds-dialog.cjs.entry.js +2 -2
  34. package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -1
  35. package/dist/cjs/qds-divider.cjs.entry.js +2 -2
  36. package/dist/cjs/qds-divider.cjs.entry.js.map +1 -1
  37. package/dist/cjs/qds-form-message.cjs.entry.js +4 -4
  38. package/dist/cjs/qds-form-message.cjs.entry.js.map +1 -1
  39. package/dist/cjs/qds-icon.cjs.entry.js +2 -2
  40. package/dist/cjs/qds-icon.cjs.entry.js.map +1 -1
  41. package/dist/cjs/qds-inline-link.cjs.entry.js +2 -2
  42. package/dist/cjs/qds-inline-link.cjs.entry.js.map +1 -1
  43. package/dist/cjs/qds-input.cjs.entry.js +2 -2
  44. package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
  45. package/dist/cjs/qds-label.cjs.entry.js +4 -4
  46. package/dist/cjs/qds-label.cjs.entry.js.map +1 -1
  47. package/dist/cjs/qds-radio.cjs.entry.js +4 -4
  48. package/dist/cjs/qds-radio.cjs.entry.js.map +1 -1
  49. package/dist/cjs/qds-switch.cjs.entry.js +7 -7
  50. package/dist/cjs/qds-switch.cjs.entry.js.map +1 -1
  51. package/dist/cjs/qds-textarea.cjs.entry.js +2 -2
  52. package/dist/cjs/qds-textarea.cjs.entry.js.map +1 -1
  53. package/dist/cjs/qds-title.cjs.entry.js +19 -17
  54. package/dist/cjs/qds-title.cjs.entry.js.map +1 -1
  55. package/dist/cjs/qds-tooltip.cjs.entry.js +3 -3
  56. package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
  57. package/dist/custom-elements.json +1 -1
  58. package/dist/docs.json +2 -2
  59. package/dist/esm/qds-button.entry.js +4 -4
  60. package/dist/esm/qds-button.entry.js.map +1 -1
  61. package/dist/esm/qds-checkbox.entry.js +8 -8
  62. package/dist/esm/qds-checkbox.entry.js.map +1 -1
  63. package/dist/esm/qds-dialog.entry.js +2 -2
  64. package/dist/esm/qds-dialog.entry.js.map +1 -1
  65. package/dist/esm/qds-divider.entry.js +2 -2
  66. package/dist/esm/qds-divider.entry.js.map +1 -1
  67. package/dist/esm/qds-form-message.entry.js +4 -4
  68. package/dist/esm/qds-form-message.entry.js.map +1 -1
  69. package/dist/esm/qds-icon.entry.js +2 -2
  70. package/dist/esm/qds-icon.entry.js.map +1 -1
  71. package/dist/esm/qds-inline-link.entry.js +2 -2
  72. package/dist/esm/qds-inline-link.entry.js.map +1 -1
  73. package/dist/esm/qds-input.entry.js +2 -2
  74. package/dist/esm/qds-input.entry.js.map +1 -1
  75. package/dist/esm/qds-label.entry.js +4 -4
  76. package/dist/esm/qds-label.entry.js.map +1 -1
  77. package/dist/esm/qds-radio.entry.js +4 -4
  78. package/dist/esm/qds-radio.entry.js.map +1 -1
  79. package/dist/esm/qds-switch.entry.js +7 -7
  80. package/dist/esm/qds-switch.entry.js.map +1 -1
  81. package/dist/esm/qds-textarea.entry.js +2 -2
  82. package/dist/esm/qds-textarea.entry.js.map +1 -1
  83. package/dist/esm/qds-title.entry.js +19 -17
  84. package/dist/esm/qds-title.entry.js.map +1 -1
  85. package/dist/esm/qds-tooltip.entry.js +3 -3
  86. package/dist/esm/qds-tooltip.entry.js.map +1 -1
  87. package/hydrate/index.js +65 -63
  88. package/package.json +8 -3
package/dist/esm/qds-title.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,qnXAAqnX;;MCuBznX,KAAK;;;IAkCR,wBAAmB,GAAe,EAAE,CAAA;;uBAvBmB,SAAS;;iBAOjC,OAAO;iBAEN,SAAS;;eAUd,IAAI;;EAMvC,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;GACvD;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACE,cACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;OACb,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,IACP,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,KAAK,EAAE,IAAI;OACZ,IAEA,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,KAClD,gBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACD,eACE,eAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACf,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,QAAQ,EAAE,IAAI;QACd,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,QAAQ,CACZ,CACL,EACA,IAAI,CAAC,SAAS,KACb,SACE,KAAK,EAAE;QACL,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI;QAClB,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM,GAAG,IAAI;QAC5B,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,IAAI,CAAC,OAAO;OACzB,IAEA,IAAI,CAAC,MAAM,CACV,CACL,CACM,EACV;GACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.titles,\n.title {\n display: flex;\n}\n\n.titles {\n flex-direction: column;\n}\n\n.title,\n.subtitle,\n.kicker {\n margin-block: 0;\n}\n\n.icon {\n flex-shrink: 0;\n}\n\n.title {\n font-weight: initial;\n font-size: initial;\n color: var(--qds-theme-title);\n}\n\n.subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n.subtitle,\n.kicker {\n overflow-wrap: break-word;\n}\n\n.main {\n &.section {\n &.titles,\n &.title {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.title {\n font: var(--qds-main-section-title);\n\n & .icon {\n --qds-main-section-title-line-height: 2rem;\n\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-main-section-subtitle);\n }\n\n &.kicker {\n font: var(--qds-main-section-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );\n }\n\n &.has-icon-end {\n padding-inline-end: calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );\n }\n }\n\n &.subsection {\n &.titles,\n &.title {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.title {\n font: var(--qds-main-subsection-title);\n\n & .icon {\n --qds-main-subsection-title-line-height: 1.5rem;\n\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-main-subsection-subtitle);\n }\n\n &.kicker {\n font: var(--qds-main-subsection-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-main-subsection-titles-icon-size, 0px) +\n var(--qds-main-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.panel {\n &.root {\n &.titles,\n &.title {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.title {\n font: var(--qds-panel-title);\n\n & .icon {\n --qds-panel-title-line-height: 2rem;\n\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-panel-subtitle);\n }\n\n &.kicker {\n font: var(--qds-panel-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-panel-titles-icon-size, 0px) +\n var(--qds-panel-titles-gap, 0px)\n );\n }\n }\n\n &.section {\n &.titles,\n &.title {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.title {\n font: var(--qds-panel-section-title);\n\n & .icon {\n --qds-panel-section-title-line-height: 1.5rem;\n\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-panel-section-subtitle);\n }\n\n &.kicker {\n font: var(--qds-panel-section-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-panel-section-titles-icon-size, 0px) +\n var(--qds-panel-section-titles-gap, 0px)\n );\n }\n }\n\n &.subsection {\n &.titles,\n &.title {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.title {\n font: var(--qds-panel-subsection-title);\n\n & .icon {\n --qds-panel-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-panel-subsection-subtitle);\n }\n\n &.kicker {\n font: var(--qds-panel-subsection-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-panel-subsection-titles-icon-size, 0px) +\n var(--qds-panel-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.navigation {\n &.section {\n &.titles,\n &.title {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.title {\n font: var(--qds-navigation-section-title);\n\n & .icon {\n --qds-navigation-section-title-line-height: 1.5rem;\n\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-navigation-section-subtitle);\n }\n\n &.kicker {\n font: var(--qds-navigation-section-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-navigation-section-titles-icon-size, 0px) +\n var(--qds-navigation-section-titles-gap, 0px)\n );\n }\n }\n\n &.subsection {\n &.titles,\n &.title {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.title {\n font: var(--qds-navigation-subsection-title);\n\n & .icon {\n --qds-navigation-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-navigation-subsection-subtitle);\n }\n\n &.kicker {\n font: var(--qds-navigation-subsection-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-navigation-subsection-titles-icon-size, 0px) +\n var(--qds-navigation-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.popup {\n &.root {\n &.titles,\n &.title {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.title {\n font: var(--qds-popup-title);\n\n & .icon {\n --qds-popup-title-line-height: 1.75rem;\n\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-popup-subtitle);\n }\n\n &.kicker {\n font: var(--qds-popup-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-popup-titles-icon-size, 0px) +\n var(--qds-popup-titles-gap, 0px)\n );\n }\n }\n\n &.section {\n &.titles,\n &.title {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.title {\n font: var(--qds-popup-section-title);\n\n & .icon {\n --qds-popup-section-title-line-height: 1.5rem;\n\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-popup-section-subtitle);\n }\n\n &.kicker {\n font: var(--qds-popup-section-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-popup-section-titles-icon-size, 0px) +\n var(--qds-popup-section-titles-gap, 0px)\n );\n }\n }\n\n &.subsection {\n &.titles,\n &.title {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.title {\n font: var(--qds-popup-subsection-title);\n\n & .icon {\n --qds-popup-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-popup-subsection-subtitle);\n }\n\n &.kicker {\n font: var(--qds-popup-subsection-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-popup-subsection-titles-icon-size, 0px) +\n var(--qds-popup-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.accessory {\n &.root {\n &.titles,\n &.title {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.title {\n font: var(--qds-accessory-title);\n\n & .icon {\n --qds-accessory-title-line-height: 1.5rem;\n\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-accessory-subtitle);\n }\n\n &.kicker {\n font: var(--qds-accessory-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-accessory-titles-icon-size, 0px) +\n var(--qds-accessory-titles-gap, 0px)\n );\n }\n }\n\n &.section {\n &.titles,\n &.title {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.title {\n font: var(--qds-accessory-section-title);\n\n & .icon {\n --qds-accessory-section-title-line-height: 1.25rem;\n\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-title-line-height);\n }\n }\n\n &.subtitle {\n font: var(--qds-accessory-section-subtitle);\n }\n\n &.kicker {\n font: var(--qds-accessory-section-kicker);\n }\n\n &.has-icon {\n padding-inline-start: calc(\n var(--qds-accessory-section-titles-icon-size, 0px) +\n var(--qds-accessory-section-titles-gap, 0px)\n );\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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({ reflect: true }) public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop({ reflect: true }) 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 = 'panel'\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 private get hasIcon(): boolean {\n return this.iconName !== undefined && this.iconName !== ''\n }\n\n public componentWillLoad(): void {\n this.inheritedAttributes = inheritAriaAttributes(this.element)\n }\n\n public render() {\n return (\n <hgroup\n class={{\n [this.layer]: true,\n [this.level ?? 'root']: true,\n titles: true,\n }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag\n class={{\n [this.layer]: true,\n [this.level ?? 'root']: true,\n title: true,\n }}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n <div>\n <slot />\n </div>\n </this.tag>\n {this.hasSubtitle && (\n <p\n class={{\n [this.layer]: true,\n [this.level ?? 'root']: true,\n subtitle: true,\n 'has-icon': this.hasIcon,\n }}\n >\n {this.subtitle}\n </p>\n )}\n {this.hasKicker && (\n <p\n class={{\n [this.layer]: true,\n [this.level ?? 'root']: true,\n kicker: true,\n 'has-icon': this.hasIcon,\n }}\n >\n {this.kicker}\n </p>\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
1
+ {"file":"qds-title.entry.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,itZAAitZ;;MCuBrtZ,KAAK;;;IAkCR,wBAAmB,GAAe,EAAE,CAAA;;uBAvBmB,SAAS;;iBAOjC,MAAM;iBAEL,SAAS;;eAUd,IAAI;;EAMvC,IAAY,WAAW;IACrB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAED,IAAY,SAAS;IACnB,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,KAAK,EAAE,CAAA;GACvD;EAED,IAAY,OAAO;IACjB,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,EAAE,CAAA;GAC3D;EAEM,iBAAiB;IACtB,IAAI,CAAC,mBAAmB,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAA;IACjC,MAAM,KAAK,GAAG,OAAO,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAA;IAE3C,QACE,cACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,YAAY,EAAE,IAAI;OACnB,KAEG,IAAI,CAAC,mBAAmB,IAE5B,EAAC,IAAI,CAAC,GAAG,IACP,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,WAAW,EAAE,IAAI;OAClB,IAEA,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,EACD,eACE,eAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACf,SACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,cAAc,EAAE,IAAI;QACpB,cAAc,EAAE,IAAI,CAAC,OAAO;OAC7B,IAEA,IAAI,CAAC,QAAQ,CACZ,CACL,EACA,IAAI,CAAC,SAAS,KACb,SACE,KAAK,EAAE;QACL,CAAC,KAAK,GAAG,IAAI;QACb,CAAC,KAAK,GAAG,IAAI;QACb,YAAY,EAAE,IAAI;QAClB,cAAc,EAAE,IAAI,CAAC,OAAO;OAC7B,IAEA,IAAI,CAAC,MAAM,CACV,CACL,CACM,EACV;GACF;;;;;;;","names":[],"sources":["src/components/title/title.css?tag=qds-title&encapsulation=shadow","src/components/title/title.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\n */\n\n@import url('../shared.css');\n\n:host {\n display: block;\n}\n\n.qds-titles,\n.qds-title {\n display: flex;\n}\n\n.qds-titles {\n flex-direction: column;\n}\n\n.qds-title,\n.qds-subtitle,\n.qds-kicker {\n margin-block: 0;\n}\n\n.qds-icon {\n flex-shrink: 0;\n}\n\n.qds-title {\n font-weight: initial;\n font-size: initial;\n color: var(--qds-theme-title);\n}\n\n.qds-subtitle {\n color: var(--qds-theme-subtitle);\n}\n\n.qds-kicker {\n color: var(--qds-theme-kicker);\n order: -1;\n}\n\n.qds-subtitle,\n.qds-kicker {\n overflow-wrap: break-word;\n}\n\n.qds-main {\n &.qds-section {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-main-section-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-main-section-title);\n\n & .qds-icon {\n --qds-main-section-title-line-height: 2rem;\n\n width: var(--qds-main-section-titles-icon-size);\n height: var(--qds-main-section-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );\n }\n\n &.qds-has-icon-end {\n padding-inline-end: calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );\n }\n }\n\n &.qds-subsection {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-main-subsection-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-main-subsection-title);\n\n & .qds-icon {\n --qds-main-subsection-title-line-height: 1.5rem;\n\n width: var(--qds-main-subsection-titles-icon-size);\n height: var(--qds-main-subsection-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-main-subsection-titles-icon-size, 0px) +\n var(--qds-main-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.qds-panel {\n &.qds-root {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-panel-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-panel-title);\n\n & .qds-icon {\n --qds-panel-title-line-height: 2rem;\n\n width: var(--qds-panel-titles-icon-size);\n height: var(--qds-panel-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-panel-titles-icon-size, 0px) +\n var(--qds-panel-titles-gap, 0px)\n );\n }\n }\n\n &.qds-section {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-panel-section-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-panel-section-title);\n\n & .qds-icon {\n --qds-panel-section-title-line-height: 1.5rem;\n\n width: var(--qds-panel-section-titles-icon-size);\n height: var(--qds-panel-section-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-panel-section-titles-icon-size, 0px) +\n var(--qds-panel-section-titles-gap, 0px)\n );\n }\n }\n\n &.qds-subsection {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-panel-subsection-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-panel-subsection-title);\n\n & .qds-icon {\n --qds-panel-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-panel-subsection-titles-icon-size);\n height: var(--qds-panel-subsection-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-panel-subsection-titles-icon-size, 0px) +\n var(--qds-panel-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.qds-navigation {\n &.qds-section {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-navigation-section-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-navigation-section-title);\n\n & .qds-icon {\n --qds-navigation-section-title-line-height: 1.5rem;\n\n width: var(--qds-navigation-section-titles-icon-size);\n height: var(--qds-navigation-section-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-navigation-section-titles-icon-size, 0px) +\n var(--qds-navigation-section-titles-gap, 0px)\n );\n }\n }\n\n &.qds-subsection {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-navigation-subsection-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-navigation-subsection-title);\n\n & .qds-icon {\n --qds-navigation-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-navigation-subsection-titles-icon-size);\n height: var(--qds-navigation-subsection-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-navigation-subsection-titles-icon-size, 0px) +\n var(--qds-navigation-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.qds-popup {\n &.qds-root {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-popup-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-popup-title);\n\n & .qds-icon {\n --qds-popup-title-line-height: 1.75rem;\n\n width: var(--qds-popup-titles-icon-size);\n height: var(--qds-popup-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-popup-titles-icon-size, 0px) +\n var(--qds-popup-titles-gap, 0px)\n );\n }\n }\n\n &.qds-section {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-popup-section-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-popup-section-title);\n\n & .qds-icon {\n --qds-popup-section-title-line-height: 1.5rem;\n\n width: var(--qds-popup-section-titles-icon-size);\n height: var(--qds-popup-section-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-popup-section-titles-icon-size, 0px) +\n var(--qds-popup-section-titles-gap, 0px)\n );\n }\n }\n\n &.qds-subsection {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-popup-subsection-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-popup-subsection-title);\n\n & .qds-icon {\n --qds-popup-subsection-title-line-height: 1.25rem;\n\n width: var(--qds-popup-subsection-titles-icon-size);\n height: var(--qds-popup-subsection-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-popup-subsection-titles-icon-size, 0px) +\n var(--qds-popup-subsection-titles-gap, 0px)\n );\n }\n }\n}\n\n.qds-accessory {\n &.qds-root {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-accessory-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-accessory-title);\n\n & .qds-icon {\n --qds-accessory-title-line-height: 1.5rem;\n\n width: var(--qds-accessory-titles-icon-size);\n height: var(--qds-accessory-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-accessory-titles-icon-size, 0px) +\n var(--qds-accessory-titles-gap, 0px)\n );\n }\n }\n\n &.qds-section {\n &.qds-titles,\n &.qds-title {\n gap: var(--qds-accessory-section-titles-gap);\n }\n\n &.qds-title {\n font: var(--qds-accessory-section-title);\n\n & .qds-icon {\n --qds-accessory-section-title-line-height: 1.25rem;\n\n width: var(--qds-accessory-section-titles-icon-size);\n height: var(--qds-accessory-section-title-line-height);\n }\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-has-icon {\n padding-inline-start: calc(\n var(--qds-accessory-section-titles-icon-size, 0px) +\n var(--qds-accessory-section-titles-gap, 0px)\n );\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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({ reflect: true }) public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop({ reflect: true }) 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 private get hasIcon(): boolean {\n return this.iconName !== undefined && this.iconName !== ''\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 }}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.inheritedAttributes}\n >\n <this.tag\n class={{\n [layer]: true,\n [level]: true,\n 'qds-title': true,\n }}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n name={this.iconName}\n library={this.iconLibrary}\n />\n )}\n <div>\n <slot />\n </div>\n </this.tag>\n {this.hasSubtitle && (\n <p\n class={{\n [layer]: true,\n [level]: true,\n 'qds-subtitle': true,\n 'qds-has-icon': this.hasIcon,\n }}\n >\n {this.subtitle}\n </p>\n )}\n {this.hasKicker && (\n <p\n class={{\n [layer]: true,\n [level]: true,\n 'qds-kicker': true,\n 'qds-has-icon': this.hasIcon,\n }}\n >\n {this.kicker}\n </p>\n )}\n </hgroup>\n )\n }\n}\n"],"version":3}
package/dist/esm/qds-tooltip.entry.js CHANGED
@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
7
7
  import { o as offset, f as flip, s as shift, l as limitShift, b as arrow, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm-c2f3e549.js';
8
8
  import { c as ignorePromise, d as propertyToPx, a as invariant, r as roundByDPR, f as isTouchDevice } from './helpers-76b84f45.js';
9
9
 
10
- const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n 0px +\n 0px\n );height:calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );top:100%}:host([data-side='bottom'])::before{top:calc(\n -1 * (0px +\n 0px)\n );top:calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n 0px +\n 0px\n );width:calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );left:100%}:host([data-side='right'])::before{left:calc(\n -1 * (0px +\n 0px)\n );left:calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n )}.arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.arrow-container[data-side='top']{top:100%}.arrow{fill:var(--qds-theme-accessory-background)}";
10
+ const tooltipCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{align-items:flex-start;background-color:var(--qds-theme-accessory-background);border-radius:var(--qds-accessory-border-radius);box-shadow:var(--qds-theme-accessory-elevation);color:var(--qds-theme-text-standard);display:flex;flex-direction:column;gap:var(--qds-accessory-gap-children-unrelated);left:0;padding:var(--qds-accessory-padding);top:0}:host([aria-hidden='true']){display:none}:host::before{content:'';height:100%;left:0;position:absolute;top:0;width:100%}::slotted(blockquote),::slotted(button),::slotted(dd),::slotted(dl),::slotted(fieldset),::slotted(figure),::slotted(h1),::slotted(h2),::slotted(h3),::slotted(h4),::slotted(h5),::slotted(h6),::slotted(hr),::slotted(input),::slotted(menu),::slotted(ol),::slotted(p),::slotted(pre),::slotted(select),::slotted(textarea),::slotted(ul){margin:0}:host([data-side='top'])::before,:host([data-side='bottom'])::before{height:calc(\n 0px +\n 0px\n );height:calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );top:100%}:host([data-side='bottom'])::before{top:calc(\n -1 * (0px +\n 0px)\n );top:calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n )}:host([data-side='left'])::before,:host([data-side='right'])::before{width:calc(\n 0px +\n 0px\n );width:calc(\n var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px)\n );left:100%}:host([data-side='right'])::before{left:calc(\n -1 * (0px +\n 0px)\n );left:calc(\n -1 * (var(--qds-accessory-gap-floating, 0px) +\n var(--qds-signature-triangle-pointer-size-height, 0px))\n )}.qds-arrow-container{height:var(--qds-signature-triangle-pointer-size-width);position:absolute;width:var(--qds-signature-triangle-pointer-size-width)}.qds-arrow-container[data-side='bottom']{bottom:100%;transform:rotate(180deg)}.qds-arrow-container[data-side='left']{left:100%;transform:rotate(-90deg)}.qds-arrow-container[data-side='right']{right:100%;transform:rotate(90deg)}.qds-arrow-container[data-side='top']{top:100%}.qds-arrow{fill:var(--qds-theme-accessory-background)}";
11
11
 
12
12
  let autoIncrementingId = 1;
13
13
  const Tooltip = class {
@@ -210,11 +210,11 @@ const Tooltip = class {
210
210
  return (h(Host, { "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
211
211
  position: this.hostPosition,
212
212
  transform: this.hostTransform,
213
- } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
213
+ } }, h("slot", null), h("svg", { "aria-hidden": true, "data-side": this.side, class: "qds-arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
214
214
  left: this.aX,
215
215
  top: this.aY,
216
216
  display: this.aDisplay,
217
- } }, h("path", { class: "arrow", d: this.aShape }))));
217
+ } }, h("path", { class: "qds-arrow", d: this.aShape }))));
218
218
  }
219
219
  async handleFocus() {
220
220
  if (!this.disabled)
package/dist/esm/qds-tooltip.entry.js.map CHANGED
@@ -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: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\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 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.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.arrow {\n fill: var(--qds-theme-accessory-background);\n}\n","// SPDX-FileCopyrightText: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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({ mutable: true }) public disabled = 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=\"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=\"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: © 2023 Schneider Electric\n *\n * SPDX-License-Identifier: LGPL-2.1-only\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 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: © 2023 Schneider Electric\n//\n// SPDX-License-Identifier: LGPL-2.1-only\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({ mutable: true }) public disabled = 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}