@quartzds/core 1.0.0-beta.1
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/README.md +136 -0
- package/components/floating-ui.dom.esm.js +1402 -0
- package/components/floating-ui.dom.esm.js.map +1 -0
- package/components/helpers.js +174 -0
- package/components/helpers.js.map +1 -0
- package/components/icon.js +175 -0
- package/components/icon.js.map +1 -0
- package/components/index.d.ts +52 -0
- package/components/index.js +117 -0
- package/components/index.js.map +1 -0
- package/components/label.js +55 -0
- package/components/label.js.map +1 -0
- package/components/qds-button.d.ts +11 -0
- package/components/qds-button.js +148 -0
- package/components/qds-button.js.map +1 -0
- package/components/qds-checkbox.d.ts +11 -0
- package/components/qds-checkbox.js +156 -0
- package/components/qds-checkbox.js.map +1 -0
- package/components/qds-dropdown.d.ts +11 -0
- package/components/qds-dropdown.js +259 -0
- package/components/qds-dropdown.js.map +1 -0
- package/components/qds-icon.d.ts +11 -0
- package/components/qds-icon.js +13 -0
- package/components/qds-icon.js.map +1 -0
- package/components/qds-inline-link.d.ts +11 -0
- package/components/qds-inline-link.js +89 -0
- package/components/qds-inline-link.js.map +1 -0
- package/components/qds-input.d.ts +11 -0
- package/components/qds-input.js +244 -0
- package/components/qds-input.js.map +1 -0
- package/components/qds-label.d.ts +11 -0
- package/components/qds-label.js +13 -0
- package/components/qds-label.js.map +1 -0
- package/components/qds-radio.d.ts +11 -0
- package/components/qds-radio.js +109 -0
- package/components/qds-radio.js.map +1 -0
- package/components/qds-switch.d.ts +11 -0
- package/components/qds-switch.js +119 -0
- package/components/qds-switch.js.map +1 -0
- package/components/qds-title.d.ts +11 -0
- package/components/qds-title.js +94 -0
- package/components/qds-title.js.map +1 -0
- package/components/qds-tooltip.d.ts +11 -0
- package/components/qds-tooltip.js +325 -0
- package/components/qds-tooltip.js.map +1 -0
- package/dist/cjs/floating-ui.dom.esm-71fa96af.js +1410 -0
- package/dist/cjs/floating-ui.dom.esm-71fa96af.js.map +1 -0
- package/dist/cjs/helpers-0b23af3f.js +184 -0
- package/dist/cjs/helpers-0b23af3f.js.map +1 -0
- package/dist/cjs/index-f19b2823.js +2030 -0
- package/dist/cjs/index-f19b2823.js.map +1 -0
- package/dist/cjs/index.cjs.js +115 -0
- package/dist/cjs/index.cjs.js.map +1 -0
- package/dist/cjs/library-4803c801.js +62 -0
- package/dist/cjs/library-4803c801.js.map +1 -0
- package/dist/cjs/loader.cjs.js +29 -0
- package/dist/cjs/loader.cjs.js.map +1 -0
- package/dist/cjs/qds-button.cjs.entry.js +110 -0
- package/dist/cjs/qds-button.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-checkbox.cjs.entry.js +116 -0
- package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-dropdown.cjs.entry.js +227 -0
- package/dist/cjs/qds-dropdown.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-icon.cjs.entry.js +113 -0
- package/dist/cjs/qds-icon.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-inline-link.cjs.entry.js +61 -0
- package/dist/cjs/qds-inline-link.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-input.cjs.entry.js +200 -0
- package/dist/cjs/qds-input.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-label.cjs.entry.js +39 -0
- package/dist/cjs/qds-label.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-radio.cjs.entry.js +74 -0
- package/dist/cjs/qds-radio.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-switch.cjs.entry.js +79 -0
- package/dist/cjs/qds-switch.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-title.cjs.entry.js +66 -0
- package/dist/cjs/qds-title.cjs.entry.js.map +1 -0
- package/dist/cjs/qds-tooltip.cjs.entry.js +284 -0
- package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -0
- package/dist/cjs/qds.cjs.js +33 -0
- package/dist/cjs/qds.cjs.js.map +1 -0
- package/dist/custom-elements.json +3976 -0
- package/dist/docs.d.ts +148 -0
- package/dist/docs.json +3918 -0
- package/dist/esm/floating-ui.dom.esm-f96ac766.js +1402 -0
- package/dist/esm/floating-ui.dom.esm-f96ac766.js.map +1 -0
- package/dist/esm/helpers-5c189a19.js +174 -0
- package/dist/esm/helpers-5c189a19.js.map +1 -0
- package/dist/esm/index-1bc8e218.js +2000 -0
- package/dist/esm/index-1bc8e218.js.map +1 -0
- package/dist/esm/index.js +106 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/library-aa6893c0.js +58 -0
- package/dist/esm/library-aa6893c0.js.map +1 -0
- package/dist/esm/loader.js +25 -0
- package/dist/esm/loader.js.map +1 -0
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/esm/qds-button.entry.js +106 -0
- package/dist/esm/qds-button.entry.js.map +1 -0
- package/dist/esm/qds-checkbox.entry.js +112 -0
- package/dist/esm/qds-checkbox.entry.js.map +1 -0
- package/dist/esm/qds-dropdown.entry.js +223 -0
- package/dist/esm/qds-dropdown.entry.js.map +1 -0
- package/dist/esm/qds-icon.entry.js +109 -0
- package/dist/esm/qds-icon.entry.js.map +1 -0
- package/dist/esm/qds-inline-link.entry.js +57 -0
- package/dist/esm/qds-inline-link.entry.js.map +1 -0
- package/dist/esm/qds-input.entry.js +196 -0
- package/dist/esm/qds-input.entry.js.map +1 -0
- package/dist/esm/qds-label.entry.js +35 -0
- package/dist/esm/qds-label.entry.js.map +1 -0
- package/dist/esm/qds-radio.entry.js +70 -0
- package/dist/esm/qds-radio.entry.js.map +1 -0
- package/dist/esm/qds-switch.entry.js +75 -0
- package/dist/esm/qds-switch.entry.js.map +1 -0
- package/dist/esm/qds-title.entry.js +62 -0
- package/dist/esm/qds-title.entry.js.map +1 -0
- package/dist/esm/qds-tooltip.entry.js +280 -0
- package/dist/esm/qds-tooltip.entry.js.map +1 -0
- package/dist/esm/qds.js +28 -0
- package/dist/esm/qds.js.map +1 -0
- package/dist/types/components/button/button.d.ts +209 -0
- package/dist/types/components/checkbox/checkbox.d.ts +136 -0
- package/dist/types/components/create-story.d.ts +5 -0
- package/dist/types/components/dropdown/dropdown.d.ts +135 -0
- package/dist/types/components/icon/default-library.d.ts +4 -0
- package/dist/types/components/icon/icon.d.ts +31 -0
- package/dist/types/components/icon/library.d.ts +19 -0
- package/dist/types/components/icon/request.d.ts +12 -0
- package/dist/types/components/icon/system-library.d.ts +4 -0
- package/dist/types/components/inline-link/inline-link.d.ts +208 -0
- package/dist/types/components/input/input.d.ts +386 -0
- package/dist/types/components/label/label.d.ts +33 -0
- package/dist/types/components/radio/radio.d.ts +110 -0
- package/dist/types/components/switch/switch.d.ts +115 -0
- package/dist/types/components/title/title.d.ts +42 -0
- package/dist/types/components/tooltip/tooltip.d.ts +147 -0
- package/dist/types/components.d.ts +1692 -0
- package/dist/types/helpers.d.ts +49 -0
- package/dist/types/index.d.ts +4 -0
- package/dist/types/qds-test.d.ts +18 -0
- package/dist/types/stencil-public-runtime.d.ts +1638 -0
- package/dist/types/utils.d.ts +65 -0
- package/dist/vscode.html-custom-data.json +947 -0
- package/hydrate/index.d.ts +218 -0
- package/hydrate/index.js +9690 -0
- package/hydrate/package.json +6 -0
- package/loader/cdn.js +7 -0
- package/loader/index.cjs.js +7 -0
- package/loader/index.d.ts +21 -0
- package/loader/index.es2017.js +7 -0
- package/loader/index.js +8 -0
- package/loader/package.json +11 -0
- package/package.json +231 -0
- package/styles/core.css +379 -0
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2023 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: LGPL-2.1-only
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
9
|
+
|
|
10
|
+
const index = require('./index-f19b2823.js');
|
|
11
|
+
const helpers = require('./helpers-0b23af3f.js');
|
|
12
|
+
|
|
13
|
+
const titleCss = ":host{box-sizing:border-box}:host([hidden]){display:none !important}:host([hidden]){}:host *,:host *::before,:host *::after{box-sizing:inherit}:host{display:block}.titles,.title{display:flex}.titles{flex-direction:column}.title,.subtitle,.kicker{margin-block:0}.icon{flex-shrink:0}.title{font-weight:normal;font-weight:initial;font-size:medium;font-size:initial;color:var(--qds-theme-title)}.subtitle{color:var(--qds-theme-subtitle)}.kicker{color:var(--qds-theme-kicker);order:-1}.subtitle,.kicker{word-wrap:break-word}.main.section.titles,.main.section.title{gap:var(--qds-main-section-titles-gap)}.main.section.title{font:var(--qds-main-section-title)}.main.section.title .icon{--qds-main-section-title-line-height:2rem;width:var(--qds-main-section-titles-icon-size);height:2rem;height:var(--qds-main-section-title-line-height)}.main.section.subtitle{font:var(--qds-main-section-subtitle)}.main.section.kicker{font:var(--qds-main-section-kicker)}.main.section.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n )}.main.section.has-icon-end{-webkit-padding-end:calc(\n 0px +\n 0px\n );padding-inline-end:calc(\n 0px +\n 0px\n );-webkit-padding-end:calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n );padding-inline-end:calc(\n var(--qds-main-section-titles-icon-size, 0px) +\n var(--qds-main-section-titles-gap, 0px)\n )}.main.subsection.titles,.main.subsection.title{gap:var(--qds-main-subsection-titles-gap)}.main.subsection.title{font:var(--qds-main-subsection-title)}.main.subsection.title .icon{--qds-main-subsection-title-line-height:1.5rem;width:var(--qds-main-subsection-titles-icon-size);height:1.5rem;height:var(--qds-main-subsection-title-line-height)}.main.subsection.subtitle{font:var(--qds-main-subsection-subtitle)}.main.subsection.kicker{font:var(--qds-main-subsection-kicker)}.main.subsection.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-main-subsection-titles-icon-size, 0px) +\n var(--qds-main-subsection-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-main-subsection-titles-icon-size, 0px) +\n var(--qds-main-subsection-titles-gap, 0px)\n )}.panel.root.titles,.panel.root.title{gap:var(--qds-panel-titles-gap)}.panel.root.title{font:var(--qds-panel-title)}.panel.root.title .icon{--qds-panel-title-line-height:2rem;width:var(--qds-panel-titles-icon-size);height:2rem;height:var(--qds-panel-title-line-height)}.panel.root.subtitle{font:var(--qds-panel-subtitle)}.panel.root.kicker{font:var(--qds-panel-kicker)}.panel.root.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-panel-titles-icon-size, 0px) +\n var(--qds-panel-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-panel-titles-icon-size, 0px) +\n var(--qds-panel-titles-gap, 0px)\n )}.panel.section.titles,.panel.section.title{gap:var(--qds-panel-section-titles-gap)}.panel.section.title{font:var(--qds-panel-section-title)}.panel.section.title .icon{--qds-panel-section-title-line-height:1.5rem;width:var(--qds-panel-section-titles-icon-size);height:1.5rem;height:var(--qds-panel-section-title-line-height)}.panel.section.subtitle{font:var(--qds-panel-section-subtitle)}.panel.section.kicker{font:var(--qds-panel-section-kicker)}.panel.section.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-panel-section-titles-icon-size, 0px) +\n var(--qds-panel-section-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-panel-section-titles-icon-size, 0px) +\n var(--qds-panel-section-titles-gap, 0px)\n )}.panel.subsection.titles,.panel.subsection.title{gap:var(--qds-panel-subsection-titles-gap)}.panel.subsection.title{font:var(--qds-panel-subsection-title)}.panel.subsection.title .icon{--qds-panel-subsection-title-line-height:1.25rem;width:var(--qds-panel-subsection-titles-icon-size);height:1.25rem;height:var(--qds-panel-subsection-title-line-height)}.panel.subsection.subtitle{font:var(--qds-panel-subsection-subtitle)}.panel.subsection.kicker{font:var(--qds-panel-subsection-kicker)}.panel.subsection.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-panel-subsection-titles-icon-size, 0px) +\n var(--qds-panel-subsection-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-panel-subsection-titles-icon-size, 0px) +\n var(--qds-panel-subsection-titles-gap, 0px)\n )}.navigation.section.titles,.navigation.section.title{gap:var(--qds-navigation-section-titles-gap)}.navigation.section.title{font:var(--qds-navigation-section-title)}.navigation.section.title .icon{--qds-navigation-section-title-line-height:1.5rem;width:var(--qds-navigation-section-titles-icon-size);height:1.5rem;height:var(--qds-navigation-section-title-line-height)}.navigation.section.subtitle{font:var(--qds-navigation-section-subtitle)}.navigation.section.kicker{font:var(--qds-navigation-section-kicker)}.navigation.section.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-navigation-section-titles-icon-size, 0px) +\n var(--qds-navigation-section-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-navigation-section-titles-icon-size, 0px) +\n var(--qds-navigation-section-titles-gap, 0px)\n )}.navigation.subsection.titles,.navigation.subsection.title{gap:var(--qds-navigation-subsection-titles-gap)}.navigation.subsection.title{font:var(--qds-navigation-subsection-title)}.navigation.subsection.title .icon{--qds-navigation-subsection-title-line-height:1.25rem;width:var(--qds-navigation-subsection-titles-icon-size);height:1.25rem;height:var(--qds-navigation-subsection-title-line-height)}.navigation.subsection.subtitle{font:var(--qds-navigation-subsection-subtitle)}.navigation.subsection.kicker{font:var(--qds-navigation-subsection-kicker)}.navigation.subsection.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-navigation-subsection-titles-icon-size, 0px) +\n var(--qds-navigation-subsection-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-navigation-subsection-titles-icon-size, 0px) +\n var(--qds-navigation-subsection-titles-gap, 0px)\n )}.popup.root.titles,.popup.root.title{gap:var(--qds-popup-titles-gap)}.popup.root.title{font:var(--qds-popup-title)}.popup.root.title .icon{--qds-popup-title-line-height:1.75rem;width:var(--qds-popup-titles-icon-size);height:1.75rem;height:var(--qds-popup-title-line-height)}.popup.root.subtitle{font:var(--qds-popup-subtitle)}.popup.root.kicker{font:var(--qds-popup-kicker)}.popup.root.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-popup-titles-icon-size, 0px) +\n var(--qds-popup-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-popup-titles-icon-size, 0px) +\n var(--qds-popup-titles-gap, 0px)\n )}.popup.section.titles,.popup.section.title{gap:var(--qds-popup-section-titles-gap)}.popup.section.title{font:var(--qds-popup-section-title)}.popup.section.title .icon{--qds-popup-section-title-line-height:1.5rem;width:var(--qds-popup-section-titles-icon-size);height:1.5rem;height:var(--qds-popup-section-title-line-height)}.popup.section.subtitle{font:var(--qds-popup-section-subtitle)}.popup.section.kicker{font:var(--qds-popup-section-kicker)}.popup.section.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-popup-section-titles-icon-size, 0px) +\n var(--qds-popup-section-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-popup-section-titles-icon-size, 0px) +\n var(--qds-popup-section-titles-gap, 0px)\n )}.popup.subsection.titles,.popup.subsection.title{gap:var(--qds-popup-subsection-titles-gap)}.popup.subsection.title{font:var(--qds-popup-subsection-title)}.popup.subsection.title .icon{--qds-popup-subsection-title-line-height:1.25rem;width:var(--qds-popup-subsection-titles-icon-size);height:1.25rem;height:var(--qds-popup-subsection-title-line-height)}.popup.subsection.subtitle{font:var(--qds-popup-subsection-subtitle)}.popup.subsection.kicker{font:var(--qds-popup-subsection-kicker)}.popup.subsection.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-popup-subsection-titles-icon-size, 0px) +\n var(--qds-popup-subsection-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-popup-subsection-titles-icon-size, 0px) +\n var(--qds-popup-subsection-titles-gap, 0px)\n )}.accessory.root.titles,.accessory.root.title{gap:var(--qds-accessory-titles-gap)}.accessory.root.title{font:var(--qds-accessory-title)}.accessory.root.title .icon{--qds-accessory-title-line-height:1.5rem;width:var(--qds-accessory-titles-icon-size);height:1.5rem;height:var(--qds-accessory-title-line-height)}.accessory.root.subtitle{font:var(--qds-accessory-subtitle)}.accessory.root.kicker{font:var(--qds-accessory-kicker)}.accessory.root.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-accessory-titles-icon-size, 0px) +\n var(--qds-accessory-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-accessory-titles-icon-size, 0px) +\n var(--qds-accessory-titles-gap, 0px)\n )}.accessory.section.titles,.accessory.section.title{gap:var(--qds-accessory-section-titles-gap)}.accessory.section.title{font:var(--qds-accessory-section-title)}.accessory.section.title .icon{--qds-accessory-section-title-line-height:1.25rem;width:var(--qds-accessory-section-titles-icon-size);height:1.25rem;height:var(--qds-accessory-section-title-line-height)}.accessory.section.subtitle{font:var(--qds-accessory-section-subtitle)}.accessory.section.kicker{font:var(--qds-accessory-section-kicker)}.accessory.section.has-icon{-webkit-padding-start:calc(\n 0px +\n 0px\n );padding-inline-start:calc(\n 0px +\n 0px\n );-webkit-padding-start:calc(\n var(--qds-accessory-section-titles-icon-size, 0px) +\n var(--qds-accessory-section-titles-gap, 0px)\n );padding-inline-start:calc(\n var(--qds-accessory-section-titles-icon-size, 0px) +\n var(--qds-accessory-section-titles-gap, 0px)\n )}";
|
|
14
|
+
|
|
15
|
+
const Title = class {
|
|
16
|
+
constructor(hostRef) {
|
|
17
|
+
index.registerInstance(this, hostRef);
|
|
18
|
+
this.inheritedAttributes = {};
|
|
19
|
+
this.iconName = undefined;
|
|
20
|
+
this.iconLibrary = 'default';
|
|
21
|
+
this.kicker = undefined;
|
|
22
|
+
this.layer = 'panel';
|
|
23
|
+
this.level = 'section';
|
|
24
|
+
this.subtitle = undefined;
|
|
25
|
+
this.tag = 'h2';
|
|
26
|
+
}
|
|
27
|
+
get hasSubtitle() {
|
|
28
|
+
return this.subtitle !== undefined && this.subtitle !== '';
|
|
29
|
+
}
|
|
30
|
+
get hasKicker() {
|
|
31
|
+
return this.kicker !== undefined && this.kicker !== '';
|
|
32
|
+
}
|
|
33
|
+
get hasIcon() {
|
|
34
|
+
return this.iconName !== undefined && this.iconName !== '';
|
|
35
|
+
}
|
|
36
|
+
componentWillLoad() {
|
|
37
|
+
this.inheritedAttributes = helpers.inheritAriaAttributes(this.element);
|
|
38
|
+
}
|
|
39
|
+
render() {
|
|
40
|
+
return (index.h("hgroup", { class: {
|
|
41
|
+
[this.layer]: true,
|
|
42
|
+
[this.level ?? 'root']: true,
|
|
43
|
+
titles: true,
|
|
44
|
+
}, ...this.inheritedAttributes }, index.h(this.tag, { class: {
|
|
45
|
+
[this.layer]: true,
|
|
46
|
+
[this.level ?? 'root']: true,
|
|
47
|
+
title: true,
|
|
48
|
+
} }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { class: "icon", name: this.iconName, library: this.iconLibrary })), index.h("div", null, index.h("slot", null))), this.hasSubtitle && (index.h("p", { class: {
|
|
49
|
+
[this.layer]: true,
|
|
50
|
+
[this.level ?? 'root']: true,
|
|
51
|
+
subtitle: true,
|
|
52
|
+
'has-icon': this.hasIcon,
|
|
53
|
+
} }, this.subtitle)), this.hasKicker && (index.h("p", { class: {
|
|
54
|
+
[this.layer]: true,
|
|
55
|
+
[this.level ?? 'root']: true,
|
|
56
|
+
kicker: true,
|
|
57
|
+
'has-icon': this.hasIcon,
|
|
58
|
+
} }, this.kicker))));
|
|
59
|
+
}
|
|
60
|
+
get element() { return index.getElement(this); }
|
|
61
|
+
};
|
|
62
|
+
Title.style = titleCss;
|
|
63
|
+
|
|
64
|
+
exports.qds_title = Title;
|
|
65
|
+
|
|
66
|
+
//# sourceMappingURL=qds-title.cjs.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"qds-title.entry.cjs.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,GAAGA,6BAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;GAC/D;EAEM,MAAM;IACX,QACEC,oBACE,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,IAE5BA,QAAC,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,KAClDA,sBACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACH,EACDA,qBACEA,qBAAQ,CACJ,CACG,EACV,IAAI,CAAC,WAAW,KACfA,eACE,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,KACbA,eACE,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":["inheritAriaAttributes","h"],"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}
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2023 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: LGPL-2.1-only
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
9
|
+
|
|
10
|
+
const index = require('./index-f19b2823.js');
|
|
11
|
+
const floatingUi_dom_esm = require('./floating-ui.dom.esm-71fa96af.js');
|
|
12
|
+
const helpers = require('./helpers-0b23af3f.js');
|
|
13
|
+
|
|
14
|
+
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)}";
|
|
15
|
+
|
|
16
|
+
let autoIncrementingId = 1;
|
|
17
|
+
const Tooltip = class {
|
|
18
|
+
constructor(hostRef) {
|
|
19
|
+
index.registerInstance(this, hostRef);
|
|
20
|
+
this.closeEmitter = index.createEvent(this, "qdsClose", 2);
|
|
21
|
+
this.clickedTooltip = false;
|
|
22
|
+
this.isTouchDevice = false;
|
|
23
|
+
this.arrowContainerRef = (svg) => {
|
|
24
|
+
this.arrowContainerElement = svg;
|
|
25
|
+
};
|
|
26
|
+
this.boundTooltipMouseDown = () => {
|
|
27
|
+
this.clickedTooltip = true;
|
|
28
|
+
};
|
|
29
|
+
this.boundFocus = () => {
|
|
30
|
+
helpers.ignorePromise(this.handleFocus());
|
|
31
|
+
};
|
|
32
|
+
this.boundMouseEnter = () => {
|
|
33
|
+
helpers.ignorePromise(this.handleMouseEnter());
|
|
34
|
+
};
|
|
35
|
+
this.boundMouseLeave = (event) => {
|
|
36
|
+
helpers.ignorePromise(this.handleMouseLeave(event));
|
|
37
|
+
};
|
|
38
|
+
this.boundFocusout = (event) => {
|
|
39
|
+
helpers.ignorePromise(this.handleFocusOut(event));
|
|
40
|
+
};
|
|
41
|
+
this.boundReferenceClick = () => {
|
|
42
|
+
helpers.ignorePromise(this.handleReferenceClick());
|
|
43
|
+
};
|
|
44
|
+
this.autoUpdateOptions = undefined;
|
|
45
|
+
this.disabled = false;
|
|
46
|
+
this.flipOptions = undefined;
|
|
47
|
+
this.noFlip = false;
|
|
48
|
+
this.noShift = false;
|
|
49
|
+
this.offsetOptions = undefined;
|
|
50
|
+
this.placement = 'top';
|
|
51
|
+
this.shiftOptions = undefined;
|
|
52
|
+
this.strategy = undefined;
|
|
53
|
+
this.target = undefined;
|
|
54
|
+
this.hostPosition = undefined;
|
|
55
|
+
this.hostTransform = undefined;
|
|
56
|
+
this.open = false;
|
|
57
|
+
this.middleware = undefined;
|
|
58
|
+
this.aDisplay = undefined;
|
|
59
|
+
this.side = 'top';
|
|
60
|
+
this.aShape = '';
|
|
61
|
+
this.aViewbox = '';
|
|
62
|
+
this.aHeight = 0;
|
|
63
|
+
this.aWidth = 0;
|
|
64
|
+
this.aGap = 0;
|
|
65
|
+
this.aX = '';
|
|
66
|
+
this.aY = '';
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Show the tooltip.
|
|
70
|
+
*/
|
|
71
|
+
async show() {
|
|
72
|
+
if (this.open)
|
|
73
|
+
return;
|
|
74
|
+
if (this.referenceElement instanceof globalThis.Element)
|
|
75
|
+
this.referenceElement.addEventListener('focusout', this.boundFocusout);
|
|
76
|
+
this.open = true;
|
|
77
|
+
this.element.setAttribute('aria-hidden', 'false');
|
|
78
|
+
this.startAutoUpdate();
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Close the tooltip.
|
|
82
|
+
*/
|
|
83
|
+
async close() {
|
|
84
|
+
if (!this.open)
|
|
85
|
+
return;
|
|
86
|
+
this.closeEmitter.emit();
|
|
87
|
+
if (this.referenceElement instanceof globalThis.Element)
|
|
88
|
+
this.referenceElement.removeEventListener('focusout', this.boundFocusout);
|
|
89
|
+
this.open = false;
|
|
90
|
+
this.clickedTooltip = false;
|
|
91
|
+
this.element.setAttribute('aria-hidden', 'true');
|
|
92
|
+
if (this.cleanup)
|
|
93
|
+
this.cleanup();
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* Update the tooltip's arrow.
|
|
97
|
+
*
|
|
98
|
+
* This method should typically be called when the Quartz platform was
|
|
99
|
+
* changed.
|
|
100
|
+
*/
|
|
101
|
+
async updateArrow() {
|
|
102
|
+
this.aGap = helpers.propertyToPx(this.element, '--qds-accessory-gap-floating') ?? 0;
|
|
103
|
+
this.aHeight =
|
|
104
|
+
helpers.propertyToPx(this.element, `--qds-signature-triangle-pointer-size-height`) ?? 0;
|
|
105
|
+
this.aWidth =
|
|
106
|
+
helpers.propertyToPx(this.element, `--qds-signature-triangle-pointer-size-width`) ?? 0;
|
|
107
|
+
this.aViewbox = `0 0 ${this.aWidth} ${Math.max(this.aHeight, this.aWidth)}`;
|
|
108
|
+
const aTipRadius = helpers.propertyToPx(this.element, `--qds-signature-triangle-pointer-tip-radius`) ?? 0;
|
|
109
|
+
const svgX = (this.aWidth / 2) * (aTipRadius / -8 + 1);
|
|
110
|
+
const svgY = ((this.aHeight / 2) * aTipRadius) / 4;
|
|
111
|
+
this.aShape =
|
|
112
|
+
'M0,0' +
|
|
113
|
+
` H${this.aWidth}` +
|
|
114
|
+
` L${this.aWidth - svgX},${this.aHeight - svgY}` +
|
|
115
|
+
` Q${this.aWidth / 2},${this.aHeight} ${svgX},${this.aHeight - svgY}` +
|
|
116
|
+
' Z';
|
|
117
|
+
}
|
|
118
|
+
async handleMouseDown(event) {
|
|
119
|
+
const composedPath = event.composedPath();
|
|
120
|
+
const withinBounds = composedPath.includes(this.element) ||
|
|
121
|
+
(this.referenceElement instanceof globalThis.Element &&
|
|
122
|
+
composedPath.includes(this.referenceElement));
|
|
123
|
+
if (!withinBounds)
|
|
124
|
+
await this.close();
|
|
125
|
+
}
|
|
126
|
+
async updateMiddleware() {
|
|
127
|
+
helpers.invariant(this.arrowContainerElement);
|
|
128
|
+
this.middleware = [
|
|
129
|
+
floatingUi_dom_esm.offset({
|
|
130
|
+
...this.offsetOptions,
|
|
131
|
+
mainAxis: this.aGap + this.aHeight,
|
|
132
|
+
}),
|
|
133
|
+
!this.noFlip &&
|
|
134
|
+
floatingUi_dom_esm.flip({
|
|
135
|
+
crossAxis: this.noShift,
|
|
136
|
+
...this.flipOptions,
|
|
137
|
+
}),
|
|
138
|
+
!this.noShift &&
|
|
139
|
+
floatingUi_dom_esm.shift({
|
|
140
|
+
limiter: floatingUi_dom_esm.limitShift(),
|
|
141
|
+
...this.shiftOptions,
|
|
142
|
+
}),
|
|
143
|
+
floatingUi_dom_esm.arrow({
|
|
144
|
+
element: this.arrowContainerElement,
|
|
145
|
+
}),
|
|
146
|
+
].filter((middleware) => middleware !== false);
|
|
147
|
+
}
|
|
148
|
+
async updateReferenceElement() {
|
|
149
|
+
var _a;
|
|
150
|
+
this.disconnectReferenceElement();
|
|
151
|
+
const resolvedTarget = typeof this.target === 'function' ? this.target() : this.target;
|
|
152
|
+
if (typeof resolvedTarget === 'string') {
|
|
153
|
+
const element = document.querySelector(resolvedTarget);
|
|
154
|
+
if (element === null)
|
|
155
|
+
throw new Error('String `target` must resolve to an Element.');
|
|
156
|
+
this.referenceElement = element;
|
|
157
|
+
}
|
|
158
|
+
else
|
|
159
|
+
this.referenceElement = resolvedTarget;
|
|
160
|
+
if (!(this.referenceElement instanceof globalThis.Element))
|
|
161
|
+
return;
|
|
162
|
+
if (this.isTouchDevice)
|
|
163
|
+
this.referenceElement.addEventListener('click', this.boundReferenceClick);
|
|
164
|
+
this.referenceElement.addEventListener('focus', this.boundFocus);
|
|
165
|
+
this.referenceElement.addEventListener('mouseenter', this.boundMouseEnter);
|
|
166
|
+
this.referenceElement.addEventListener('mouseleave', this.boundMouseLeave);
|
|
167
|
+
(_a = this.element).id || (_a.id = `qds-tooltip-${autoIncrementingId}`);
|
|
168
|
+
this.referenceElement.setAttribute('aria-describedby', this.element.id);
|
|
169
|
+
}
|
|
170
|
+
async updatePosition() {
|
|
171
|
+
helpers.invariant(this.referenceElement);
|
|
172
|
+
const { x, y, middlewareData, placement, strategy } = await floatingUi_dom_esm.computePosition(this.referenceElement, this.element, {
|
|
173
|
+
middleware: this.middleware,
|
|
174
|
+
placement: this.placement,
|
|
175
|
+
strategy: this.strategy,
|
|
176
|
+
});
|
|
177
|
+
this.hostPosition = strategy;
|
|
178
|
+
this.hostTransform = `translate(${helpers.roundByDPR(x)}px,${helpers.roundByDPR(y)}px)`;
|
|
179
|
+
if (!middlewareData.arrow)
|
|
180
|
+
return;
|
|
181
|
+
helpers.invariant(this.arrowContainerElement);
|
|
182
|
+
if (middlewareData.arrow.centerOffset !== 0) {
|
|
183
|
+
this.aDisplay = 'none';
|
|
184
|
+
return;
|
|
185
|
+
}
|
|
186
|
+
this.aDisplay = undefined;
|
|
187
|
+
const [side] = placement.split('-');
|
|
188
|
+
this.side = side;
|
|
189
|
+
const { x: aX, y: aY } = middlewareData.arrow;
|
|
190
|
+
this.aX = aX === undefined ? '' : `${aX}px`;
|
|
191
|
+
this.aY = aY === undefined ? '' : `${aY}px`;
|
|
192
|
+
}
|
|
193
|
+
startAutoUpdate() {
|
|
194
|
+
helpers.invariant(this.referenceElement);
|
|
195
|
+
if (this.cleanup)
|
|
196
|
+
this.cleanup();
|
|
197
|
+
this.cleanup = floatingUi_dom_esm.autoUpdate(this.referenceElement, this.element, () => {
|
|
198
|
+
helpers.ignorePromise(this.updatePosition());
|
|
199
|
+
}, this.autoUpdateOptions);
|
|
200
|
+
}
|
|
201
|
+
async componentWillLoad() {
|
|
202
|
+
this.isTouchDevice = helpers.isTouchDevice();
|
|
203
|
+
this.element.setAttribute('aria-hidden', 'true');
|
|
204
|
+
await this.updateReferenceElement();
|
|
205
|
+
autoIncrementingId += 1;
|
|
206
|
+
}
|
|
207
|
+
async componentDidLoad() {
|
|
208
|
+
await this.updateArrow();
|
|
209
|
+
}
|
|
210
|
+
disconnectedCallback() {
|
|
211
|
+
this.disconnectReferenceElement();
|
|
212
|
+
}
|
|
213
|
+
render() {
|
|
214
|
+
return (index.h(index.Host, { "data-side": this.side, onFocusout: this.boundFocusout, onMouseDown: this.boundTooltipMouseDown, onMouseLeave: this.boundMouseLeave, role: this.element.role ?? 'tooltip', style: {
|
|
215
|
+
position: this.hostPosition,
|
|
216
|
+
transform: this.hostTransform,
|
|
217
|
+
} }, index.h("slot", null), index.h("svg", { "aria-hidden": true, "data-side": this.side, class: "arrow-container", ref: this.arrowContainerRef, viewBox: this.aViewbox, style: {
|
|
218
|
+
left: this.aX,
|
|
219
|
+
top: this.aY,
|
|
220
|
+
display: this.aDisplay,
|
|
221
|
+
} }, index.h("path", { class: "arrow", d: this.aShape }))));
|
|
222
|
+
}
|
|
223
|
+
async handleFocus() {
|
|
224
|
+
if (!this.disabled)
|
|
225
|
+
await this.show();
|
|
226
|
+
}
|
|
227
|
+
async handleMouseEnter() {
|
|
228
|
+
if (!this.disabled)
|
|
229
|
+
await this.show();
|
|
230
|
+
}
|
|
231
|
+
async handleMouseLeave(event) {
|
|
232
|
+
if (!this.clickedTooltip &&
|
|
233
|
+
document.activeElement !== this.referenceElement &&
|
|
234
|
+
document.activeElement?.closest('qds-tooltip') !== this.element &&
|
|
235
|
+
event instanceof MouseEvent &&
|
|
236
|
+
event.relatedTarget !== this.referenceElement &&
|
|
237
|
+
event.relatedTarget !== this.element)
|
|
238
|
+
await this.close();
|
|
239
|
+
}
|
|
240
|
+
async handleFocusOut(event) {
|
|
241
|
+
if (!(event instanceof FocusEvent))
|
|
242
|
+
return;
|
|
243
|
+
const { relatedTarget } = event;
|
|
244
|
+
if (relatedTarget instanceof globalThis.Element &&
|
|
245
|
+
!this.element.contains(relatedTarget) &&
|
|
246
|
+
this.referenceElement !== relatedTarget)
|
|
247
|
+
await this.close();
|
|
248
|
+
}
|
|
249
|
+
async handleReferenceClick() {
|
|
250
|
+
if (!this.disabled)
|
|
251
|
+
await (this.open ? this.close() : this.show());
|
|
252
|
+
}
|
|
253
|
+
disconnectReferenceElement() {
|
|
254
|
+
if (!(this.referenceElement instanceof globalThis.Element))
|
|
255
|
+
return;
|
|
256
|
+
if (this.isTouchDevice)
|
|
257
|
+
this.referenceElement.removeEventListener('click', this.boundReferenceClick);
|
|
258
|
+
this.referenceElement.removeEventListener('focus', this.boundFocus);
|
|
259
|
+
this.referenceElement.removeEventListener('focusout', this.boundFocusout);
|
|
260
|
+
this.referenceElement.removeEventListener('mouseenter', this.boundMouseEnter);
|
|
261
|
+
this.referenceElement.removeEventListener('mouseleave', this.boundMouseLeave);
|
|
262
|
+
this.referenceElement.removeAttribute('aria-describedby');
|
|
263
|
+
}
|
|
264
|
+
get element() { return index.getElement(this); }
|
|
265
|
+
static get watchers() { return {
|
|
266
|
+
"aGap": ["updateMiddleware"],
|
|
267
|
+
"aHeight": ["updateMiddleware"],
|
|
268
|
+
"flipOptions": ["updateMiddleware"],
|
|
269
|
+
"noFlip": ["updateMiddleware"],
|
|
270
|
+
"noShift": ["updateMiddleware"],
|
|
271
|
+
"offsetOptions": ["updateMiddleware"],
|
|
272
|
+
"shiftOptions": ["updateMiddleware"],
|
|
273
|
+
"target": ["updateReferenceElement"],
|
|
274
|
+
"middleware": ["updatePosition"],
|
|
275
|
+
"placement": ["updatePosition"],
|
|
276
|
+
"strategy": ["updatePosition"],
|
|
277
|
+
"autoUpdateOptions": ["startAutoUpdate"]
|
|
278
|
+
}; }
|
|
279
|
+
};
|
|
280
|
+
Tooltip.style = tooltipCss;
|
|
281
|
+
|
|
282
|
+
exports.qds_tooltip = Tooltip;
|
|
283
|
+
|
|
284
|
+
//# sourceMappingURL=qds-tooltip.cjs.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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: © 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 * @experimental\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}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* SPDX-FileCopyrightText: © 2023 Schneider Electric
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: LGPL-2.1-only
|
|
5
|
+
*/
|
|
6
|
+
'use strict';
|
|
7
|
+
|
|
8
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
9
|
+
|
|
10
|
+
const index = require('./index-f19b2823.js');
|
|
11
|
+
|
|
12
|
+
/*
|
|
13
|
+
Stencil Client Patch Browser v3.2.2 | MIT Licensed | https://stenciljs.com
|
|
14
|
+
*/
|
|
15
|
+
const patchBrowser = () => {
|
|
16
|
+
const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('qds.cjs.js', document.baseURI).href));
|
|
17
|
+
const opts = {};
|
|
18
|
+
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
|
|
19
|
+
if (importMeta !== '') {
|
|
20
|
+
opts.resourcesUrl = new URL('.', importMeta).href;
|
|
21
|
+
// TODO(STENCIL-661): Remove code related to the dynamic import shim
|
|
22
|
+
// TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
|
|
23
|
+
}
|
|
24
|
+
return index.promiseResolve(opts);
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
patchBrowser().then(options => {
|
|
28
|
+
return index.bootstrapLazy([["qds-icon.cjs",[[1,"qds-icon",{"name":[513],"library":[513],"svg":[32]}]]],["qds-checkbox.cjs",[[2,"qds-checkbox",{"inline":[4],"size":[513],"text":[1537],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"indeterminate":[1540],"name":[1],"required":[4],"value":[1032],"checkValidity":[64],"reportValidity":[64],"setCustomValidity":[64]},[[0,"click","onClick"]]]]],["qds-radio.cjs",[[2,"qds-radio",{"inline":[4],"size":[513],"text":[1537],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"required":[4],"value":[1032]},[[0,"click","onClick"]]]]],["qds-switch.cjs",[[2,"qds-switch",{"inline":[4],"iconCheckedName":[513,"icon-checked-name"],"iconCheckedLibrary":[513,"icon-checked-library"],"iconUncheckedName":[513,"icon-unchecked-name"],"iconUncheckedLibrary":[513,"icon-unchecked-library"],"size":[513],"textChecked":[1537,"text-checked"],"textUnchecked":[1537,"text-unchecked"],"autoFocus":[4,"autofocus"],"checked":[1540],"disabled":[1540],"form":[1],"name":[1],"value":[1032]},[[0,"click","onClick"]]]]],["qds-button.cjs",[[17,"qds-button",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"importance":[513],"size":[513],"text":[1537],"disabled":[1540],"download":[1],"form":[1],"formAction":[1,"formaction"],"formMethod":[1,"formmethod"],"formNoValidate":[4,"formnovalidate"],"formTarget":[1,"formtarget"],"href":[1],"name":[1],"target":[1],"type":[1],"value":[1]}]]],["qds-inline-link.cjs",[[17,"qds-inline-link",{"disabled":[1540],"download":[8],"href":[1],"hreflang":[1],"referrerPolicy":[1,"referrerpolicy"],"rel":[1],"target":[1]},[[0,"click","onClick"]]]]],["qds-title.cjs",[[1,"qds-title",{"iconName":[513,"icon-name"],"iconLibrary":[513,"icon-library"],"kicker":[1],"layer":[1],"level":[1],"subtitle":[1],"tag":[1]}]]],["qds-dropdown.cjs",[[1,"qds-dropdown",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostAriaLabelledBy":[32],"hostDisplay":[32],"hostPosition":[32],"hostTransform":[32],"show":[64],"close":[64],"update":[64]},[[4,"click","handleMouseDown"]]]]],["qds-input.cjs",[[2,"qds-input",{"invalid":[1540],"size":[513],"autoCapitalize":[1,"autocapitalize"],"autoComplete":[1,"autocomplete"],"autoFocus":[4,"autofocus"],"disabled":[1540],"enterkeyhint":[1],"form":[1],"inputmode":[1],"max":[8],"maxLength":[2,"maxlength"],"min":[8],"minLength":[2,"minlength"],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readOnly":[4,"readonly"],"required":[4],"spellCheck":[4,"spellcheck"],"step":[8],"type":[1],"value":[1032],"reportValidity":[64],"select":[64],"setCustomValidity":[64],"setRangeText":[64],"setSelectionRange":[64],"stepDown":[64],"stepUp":[64]}]]],["qds-tooltip.cjs",[[1,"qds-tooltip",{"autoUpdateOptions":[16],"disabled":[1028],"flipOptions":[16],"noFlip":[4,"no-flip"],"noShift":[4,"no-shift"],"offsetOptions":[16],"placement":[1],"shiftOptions":[16],"strategy":[1],"target":[1],"hostPosition":[32],"hostTransform":[32],"open":[32],"middleware":[32],"aDisplay":[32],"side":[32],"aShape":[32],"aViewbox":[32],"aHeight":[32],"aWidth":[32],"aGap":[32],"aX":[32],"aY":[32],"show":[64],"close":[64],"updateArrow":[64]},[[5,"mousedown","handleMouseDown"]]]]],["qds-label.cjs",[[1,"qds-label",{"inline":[4],"required":[4],"size":[513],"text":[513]}]]]], options);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
exports.setNonce = index.setNonce;
|
|
32
|
+
|
|
33
|
+
//# sourceMappingURL=qds.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"qds.cjs.js","mappings":";;;;;;;;;;;AAAA;AACA;AACA;AAiBA,MAAM,YAAY,GAAG,MAAM;AAkC3B,IAAI,MAAM,UAAU,GAAG,qMAAe,CAAC;AACvC,IAAI,MAAM,IAAI,GAAiE,EAAE,CAAC;AAgBlF;AACA,IAAI,IAAuB,UAAU,KAAK,EAAE,EAAE;AAC9C,QAAQ,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI,CAAC;AAC1D;AACA;AACA,KAaK;AACL,IAAI,OAAOA,oBAAc,CAAC,IAAI,CAAC,CAAC;AAChC,CAAC;;ACtFD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI;AAE/B,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC,CAAC;AAC9D,CAAC,CAAC;;;;","names":["promiseResolve","bootstrapLazy"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v3.2.2 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nimport { consoleDevInfo, plt, win, doc, promiseResolve, H } from '@stencil/core';\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\\s|-/g, '_')}`;\nconst patchBrowser = () => {\n // NOTE!! This fn cannot use async/await!\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo('Running in development mode.');\n }\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n if (BUILD.cssVarShim) {\n // shim css vars\n // TODO(STENCIL-659): Remove code implementing the CSS variable shim\n plt.$cssShim$ = win.__cssshim;\n }\n if (BUILD.cloneNodeFix) {\n // opted-in to polyfill cloneNode() for slot polyfilled components\n patchCloneNodeFix(H.prototype);\n }\n if (BUILD.profile && !performance.mark) {\n // not all browsers support performance.mark/measure (Safari 10)\n // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,\n // simply stub the implementations out.\n // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)\n // @ts-ignore\n performance.mark = performance.measure = () => {\n /*noop*/\n };\n performance.getEntriesByName = () => [];\n }\n // @ts-ignore\n const scriptElm = \n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim\n ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\\/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) ||\n s.getAttribute('data-stencil-namespace') === NAMESPACE)\n : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})['data-opts'] || {} : {};\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {\n // Safari < v11 support: This IF is true if it's Safari below v11.\n // This fn cannot use async/await since Safari didn't support it until v11,\n // however, Safari 10 did support modules. Safari 10 also didn't support \"nomodule\",\n // so both the ESM file and nomodule file would get downloaded. Only Safari\n // has 'onbeforeload' in the script, and \"history.scrollRestoration\" was added\n // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.\n // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.\n return {\n then() {\n /* promise noop */\n },\n };\n }\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n if (!BUILD.safari10 && importMeta !== '') {\n opts.resourcesUrl = new URL('.', importMeta).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.\n }\n else if (BUILD.dynamicImportShim || BUILD.safari10) {\n opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim) {\n patchDynamicImport(opts.resourcesUrl, scriptElm);\n }\n // TODO(STENCIL-661): Remove code related to the dynamic import shim\n if (BUILD.dynamicImportShim && !win.customElements) {\n // module support, but no custom elements support (Old Edge)\n // @ts-ignore\n return import(/* webpackChunkName: \"polyfills-dom\" */ './dom.js').then(() => opts);\n }\n }\n return promiseResolve(opts);\n};\n// TODO(STENCIL-661): Remove code related to the dynamic import shim\nconst patchDynamicImport = (base, orgScriptElm) => {\n const importFunctionName = getDynamicImportFunction(NAMESPACE);\n try {\n // test if this browser supports dynamic imports\n // There is a caching issue in V8, that breaks using import() in Function\n // By generating a random string, we can workaround it\n // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info\n win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);\n }\n catch (e) {\n // this shim is specifically for browsers that do support \"esm\" imports\n // however, they do NOT support \"dynamic\" imports\n // basically this code is for old Edge, v18 and below\n const moduleMap = new Map();\n win[importFunctionName] = (src) => {\n var _a;\n const url = new URL(src, base).href;\n let mod = moduleMap.get(url);\n if (!mod) {\n const script = doc.createElement('script');\n script.type = 'module';\n script.crossOrigin = orgScriptElm.crossOrigin;\n script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {\n type: 'application/javascript',\n }));\n // Apply CSP nonce to the script tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n script.setAttribute('nonce', nonce);\n }\n mod = new Promise((resolve) => {\n script.onload = () => {\n resolve(win[importFunctionName].m);\n script.remove();\n };\n });\n moduleMap.set(url, mod);\n doc.head.appendChild(script);\n }\n return mod;\n };\n }\n};\nconst patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function (deep) {\n if (this.nodeName === 'TEMPLATE') {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n // Node.ATTRIBUTE_NODE === 2, and checking because IE11\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport { patchBrowser };\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(options => {\n globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"version":3}
|