@oiz/stzh-components 3.0.0-beta1 → 3.0.0-beta2
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/dist/cjs/{app-globals-d508a3bc.js → app-globals-4968ae1c.js} +2 -2
- package/dist/cjs/{app-globals-d508a3bc.js.map → app-globals-4968ae1c.js.map} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/stzh-badge_3.cjs.entry.js +1 -1
- package/dist/cjs/stzh-badge_3.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-components.cjs.js +2 -2
- package/dist/cjs/stzh-cspace.cjs.entry.js +1 -1
- package/dist/cjs/stzh-cspace.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-cta.cjs.entry.js +1 -1
- package/dist/cjs/stzh-cta.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-gallery.cjs.entry.js +13 -10
- package/dist/cjs/stzh-gallery.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-header.cjs.entry.js +1 -1
- package/dist/cjs/stzh-header.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-pagebottom.cjs.entry.js +15 -9
- package/dist/cjs/stzh-pagebottom.cjs.entry.js.map +1 -1
- package/dist/cjs/{stzh-share.cjs.entry.js → stzh-print_2.cjs.entry.js} +53 -11
- package/dist/cjs/stzh-print_2.cjs.entry.js.map +1 -0
- package/dist/cjs/stzh-skin-portal-mitwirken.cjs.entry.js +1 -1
- package/dist/cjs/stzh-skin-portal-mitwirken.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-sticky-actions.cjs.entry.js +15 -9
- package/dist/cjs/stzh-sticky-actions.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-sticky.cjs.entry.js +13 -4
- package/dist/cjs/stzh-sticky.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-tooltip.cjs.entry.js +2 -1
- package/dist/cjs/stzh-tooltip.cjs.entry.js.map +1 -1
- package/dist/collection/assets/i18n/de.json +3 -0
- package/dist/collection/assets/i18n/en.json +3 -0
- package/dist/collection/assets/media/icons/mono/facebook.svg +1 -1
- package/dist/collection/assets/media/icons/mono/linkedin.svg +1 -1
- package/dist/collection/assets/media/icons/mono/mail.svg +1 -1
- package/dist/collection/assets/media/icons/mono/xing.svg +1 -1
- package/dist/collection/assets/meta/icons-preview.html +4 -4
- package/dist/collection/components/stzh-button/stzh-button.css +1 -1
- package/dist/collection/components/stzh-cspace/stzh-cspace.css +11 -0
- package/dist/collection/components/stzh-cta/stzh-cta.css +1 -1
- package/dist/collection/components/stzh-cta/stzh-cta.js +1 -1
- package/dist/collection/components/stzh-cta/stzh-cta.js.map +1 -1
- package/dist/collection/components/stzh-gallery/stzh-gallery.e2e.js +1 -0
- package/dist/collection/components/stzh-gallery/stzh-gallery.e2e.js.map +1 -1
- package/dist/collection/components/stzh-gallery/stzh-gallery.js +32 -9
- package/dist/collection/components/stzh-gallery/stzh-gallery.js.map +1 -1
- package/dist/collection/components/stzh-gallery/stzh-gallery.stories.js +9 -0
- package/dist/collection/components/stzh-header/stzh-header.js +1 -1
- package/dist/collection/components/stzh-header/stzh-header.js.map +1 -1
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.css +54 -13
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.e2e.js +2 -1
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.e2e.js.map +1 -1
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.js +56 -12
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.js.map +1 -1
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.localization.js +2 -0
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.localization.js.map +1 -0
- package/dist/collection/components/stzh-pagebottom/stzh-pagebottom.stories.js +87 -9
- package/dist/collection/components/stzh-scrollup/stzh-scrollup.stories.js +20 -18
- package/dist/collection/components/stzh-share/stzh-share.css +1 -43
- package/dist/collection/components/stzh-share/stzh-share.js +10 -10
- package/dist/collection/components/stzh-share/stzh-share.js.map +1 -1
- package/dist/collection/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.css +10 -0
- package/dist/collection/components/stzh-sticky/stzh-sticky.css +1 -1
- package/dist/collection/components/stzh-sticky/stzh-sticky.js +13 -4
- package/dist/collection/components/stzh-sticky/stzh-sticky.js.map +1 -1
- package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.js +15 -9
- package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.js.map +1 -1
- package/dist/collection/components/stzh-sticky-actions/stzh-sticky-actions.stories.js +20 -18
- package/dist/collection/components/stzh-tooltip/stzh-tooltip.css +3 -0
- package/dist/collection/components/stzh-tooltip/stzh-tooltip.js +19 -0
- package/dist/collection/components/stzh-tooltip/stzh-tooltip.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/stzh-button2.js +1 -1
- package/dist/components/stzh-button2.js.map +1 -1
- package/dist/components/stzh-cspace.js +1 -1
- package/dist/components/stzh-cspace.js.map +1 -1
- package/dist/components/stzh-cta.js +1 -1
- package/dist/components/stzh-cta.js.map +1 -1
- package/dist/components/stzh-gallery.js +16 -11
- package/dist/components/stzh-gallery.js.map +1 -1
- package/dist/components/stzh-header.js +1 -1
- package/dist/components/stzh-header.js.map +1 -1
- package/dist/components/stzh-pagebottom.js +39 -12
- package/dist/components/stzh-pagebottom.js.map +1 -1
- package/dist/components/stzh-print.js +1 -58
- package/dist/components/stzh-print.js.map +1 -1
- package/dist/{esm/stzh-print.entry.js → components/stzh-print2.js} +25 -11
- package/dist/components/stzh-print2.js.map +1 -0
- package/dist/components/stzh-share2.js +23 -11
- package/dist/components/stzh-share2.js.map +1 -1
- package/dist/components/stzh-skin-portal-mitwirken.js +1 -1
- package/dist/components/stzh-skin-portal-mitwirken.js.map +1 -1
- package/dist/components/stzh-sticky-actions.js +15 -9
- package/dist/components/stzh-sticky-actions.js.map +1 -1
- package/dist/components/stzh-sticky2.js +13 -4
- package/dist/components/stzh-sticky2.js.map +1 -1
- package/dist/components/stzh-tooltip2.js +3 -1
- package/dist/components/stzh-tooltip2.js.map +1 -1
- package/dist/esm/{app-globals-984d1c64.js → app-globals-924beb17.js} +2 -2
- package/dist/esm/{app-globals-984d1c64.js.map → app-globals-924beb17.js.map} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/stzh-badge_3.entry.js +1 -1
- package/dist/esm/stzh-badge_3.entry.js.map +1 -1
- package/dist/esm/stzh-components.js +2 -2
- package/dist/esm/stzh-cspace.entry.js +1 -1
- package/dist/esm/stzh-cspace.entry.js.map +1 -1
- package/dist/esm/stzh-cta.entry.js +1 -1
- package/dist/esm/stzh-cta.entry.js.map +1 -1
- package/dist/esm/stzh-gallery.entry.js +13 -10
- package/dist/esm/stzh-gallery.entry.js.map +1 -1
- package/dist/esm/stzh-header.entry.js +1 -1
- package/dist/esm/stzh-header.entry.js.map +1 -1
- package/dist/esm/stzh-pagebottom.entry.js +15 -9
- package/dist/esm/stzh-pagebottom.entry.js.map +1 -1
- package/dist/esm/{stzh-share.entry.js → stzh-print_2.entry.js} +54 -13
- package/dist/esm/stzh-print_2.entry.js.map +1 -0
- package/dist/esm/stzh-skin-portal-mitwirken.entry.js +1 -1
- package/dist/esm/stzh-skin-portal-mitwirken.entry.js.map +1 -1
- package/dist/esm/stzh-sticky-actions.entry.js +15 -9
- package/dist/esm/stzh-sticky-actions.entry.js.map +1 -1
- package/dist/esm/stzh-sticky.entry.js +13 -4
- package/dist/esm/stzh-sticky.entry.js.map +1 -1
- package/dist/esm/stzh-tooltip.entry.js +2 -1
- package/dist/esm/stzh-tooltip.entry.js.map +1 -1
- package/dist/stzh-components/assets/i18n/de.json +3 -0
- package/dist/stzh-components/assets/i18n/en.json +3 -0
- package/dist/stzh-components/assets/media/icons/mono/facebook.svg +1 -1
- package/dist/stzh-components/assets/media/icons/mono/linkedin.svg +1 -1
- package/dist/stzh-components/assets/media/icons/mono/mail.svg +1 -1
- package/dist/stzh-components/assets/media/icons/mono/xing.svg +1 -1
- package/dist/stzh-components/assets/meta/icons-preview.html +4 -4
- package/dist/stzh-components/p-2e713d1e.entry.js +2 -0
- package/dist/stzh-components/p-2e713d1e.entry.js.map +1 -0
- package/dist/stzh-components/p-31a45529.entry.js +2 -0
- package/dist/stzh-components/p-31a45529.entry.js.map +1 -0
- package/dist/stzh-components/p-33b46d08.entry.js +2 -0
- package/dist/stzh-components/{p-a2656f84.entry.js.map → p-33b46d08.entry.js.map} +1 -1
- package/dist/stzh-components/{p-52078c0b.entry.js → p-3641eb0c.entry.js} +2 -2
- package/dist/stzh-components/p-3641eb0c.entry.js.map +1 -0
- package/dist/stzh-components/p-475fc161.entry.js +2 -0
- package/dist/stzh-components/p-475fc161.entry.js.map +1 -0
- package/dist/stzh-components/{p-83978293.entry.js → p-5511087f.entry.js} +2 -2
- package/dist/stzh-components/p-5511087f.entry.js.map +1 -0
- package/dist/stzh-components/p-705d5931.entry.js +2 -0
- package/dist/stzh-components/{p-35b78231.entry.js.map → p-705d5931.entry.js.map} +1 -1
- package/dist/stzh-components/{p-e2485377.js → p-862a98f9.js} +2 -2
- package/dist/stzh-components/{p-879795a9.entry.js → p-bf79dbd0.entry.js} +2 -2
- package/dist/stzh-components/{p-879795a9.entry.js.map → p-bf79dbd0.entry.js.map} +1 -1
- package/dist/stzh-components/p-d2f7c020.entry.js +2 -0
- package/dist/stzh-components/p-d2f7c020.entry.js.map +1 -0
- package/dist/stzh-components/p-fa82219c.entry.js +2 -0
- package/dist/stzh-components/p-fa82219c.entry.js.map +1 -0
- package/dist/stzh-components/{p-fa3c5519.entry.js → p-fb9cc8a7.entry.js} +2 -2
- package/dist/stzh-components/p-fb9cc8a7.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.css +1 -1
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/stzh-components/stzh-components.esm.js.map +1 -1
- package/dist/types/components/stzh-cta/stzh-cta.d.ts +1 -1
- package/dist/types/components/stzh-gallery/stzh-gallery.d.ts +5 -0
- package/dist/types/components/stzh-pagebottom/stzh-pagebottom.d.ts +11 -1
- package/dist/types/components/stzh-pagebottom/stzh-pagebottom.localization.d.ts +4 -0
- package/dist/types/components/stzh-sticky-actions/stzh-sticky-actions.d.ts +2 -2
- package/dist/types/components/stzh-tooltip/stzh-tooltip.d.ts +2 -0
- package/dist/types/components.d.ts +40 -6
- package/dist/vscode-data.json +25 -5
- package/package.json +1 -1
- package/dist/cjs/stzh-print.cjs.entry.js +0 -52
- package/dist/cjs/stzh-print.cjs.entry.js.map +0 -1
- package/dist/cjs/stzh-share.cjs.entry.js.map +0 -1
- package/dist/collection/patterns/print/print.e2e.js +0 -18
- package/dist/collection/patterns/print/print.e2e.js.map +0 -1
- package/dist/esm/stzh-print.entry.js.map +0 -1
- package/dist/esm/stzh-share.entry.js.map +0 -1
- package/dist/stzh-components/p-2676b9db.entry.js +0 -2
- package/dist/stzh-components/p-2676b9db.entry.js.map +0 -1
- package/dist/stzh-components/p-2afe2028.entry.js +0 -2
- package/dist/stzh-components/p-2afe2028.entry.js.map +0 -1
- package/dist/stzh-components/p-35b78231.entry.js +0 -2
- package/dist/stzh-components/p-51be8f59.entry.js +0 -2
- package/dist/stzh-components/p-51be8f59.entry.js.map +0 -1
- package/dist/stzh-components/p-52078c0b.entry.js.map +0 -1
- package/dist/stzh-components/p-83978293.entry.js.map +0 -1
- package/dist/stzh-components/p-89de4375.entry.js +0 -2
- package/dist/stzh-components/p-89de4375.entry.js.map +0 -1
- package/dist/stzh-components/p-a2656f84.entry.js +0 -2
- package/dist/stzh-components/p-c67dcd7a.entry.js +0 -2
- package/dist/stzh-components/p-c67dcd7a.entry.js.map +0 -1
- package/dist/stzh-components/p-e142e3e5.entry.js +0 -2
- package/dist/stzh-components/p-e142e3e5.entry.js.map +0 -1
- package/dist/stzh-components/p-fa3c5519.entry.js.map +0 -1
- /package/dist/stzh-components/{p-e2485377.js.map → p-862a98f9.js.map} +0 -0
|
@@ -269,6 +269,6 @@
|
|
|
269
269
|
transform: translateY(100%);
|
|
270
270
|
opacity: 0;
|
|
271
271
|
}
|
|
272
|
-
.stzh-sticky--is-not-loaded .stzh-sticky__content, .stzh-sticky--is-not-loaded .stzh-sticky__content::before, .stzh-sticky--is-not-loaded .stzh-sticky__content-inner {
|
|
272
|
+
.stzh-sticky--is-not-loaded .stzh-sticky__sticky, .stzh-sticky--is-not-loaded .stzh-sticky__content, .stzh-sticky--is-not-loaded .stzh-sticky__content::before, .stzh-sticky--is-not-loaded .stzh-sticky__content-inner {
|
|
273
273
|
transition-duration: 0ms;
|
|
274
274
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Host, h
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { isVisible, offset } from "../../utils/utils";
|
|
3
3
|
import throttle from "lodash/throttle";
|
|
4
4
|
const ATTR_STICKY_CONTAINER = "data-stzh-sticky-container";
|
|
@@ -25,9 +25,10 @@ export class StzhSticky {
|
|
|
25
25
|
};
|
|
26
26
|
this.handleStickyResize = throttle(() => {
|
|
27
27
|
this.stuckHeightWatcher();
|
|
28
|
+
this.updateByScroll();
|
|
28
29
|
}, 100);
|
|
29
30
|
this.updateByScroll = () => {
|
|
30
|
-
if (!isVisible(this.stickyElement)) {
|
|
31
|
+
if (!isVisible(this.stickyElement) || !this.element.isConnected) {
|
|
31
32
|
return;
|
|
32
33
|
}
|
|
33
34
|
const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`)
|
|
@@ -51,10 +52,11 @@ export class StzhSticky {
|
|
|
51
52
|
const unstuckWidth = this.element.getBoundingClientRect().width;
|
|
52
53
|
// stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);
|
|
53
54
|
stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);
|
|
55
|
+
// console.log(unstuckWidth);
|
|
54
56
|
// console.log(
|
|
55
57
|
// this.scrollX,
|
|
56
58
|
// this.scrollY,
|
|
57
|
-
// this.windowHeight,
|
|
59
|
+
// this.windowHeight,
|
|
58
60
|
// this.fixedTop,
|
|
59
61
|
// this.fixedLeft,
|
|
60
62
|
// this.fixedHeight,
|
|
@@ -76,7 +78,7 @@ export class StzhSticky {
|
|
|
76
78
|
// );
|
|
77
79
|
if (this.isStuckTop || this.isStuckBottom) {
|
|
78
80
|
this.setFixed();
|
|
79
|
-
// stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);
|
|
81
|
+
// stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);
|
|
80
82
|
}
|
|
81
83
|
else {
|
|
82
84
|
this.setUnfixed();
|
|
@@ -84,9 +86,13 @@ export class StzhSticky {
|
|
|
84
86
|
}
|
|
85
87
|
};
|
|
86
88
|
this.updateFixedByResize = () => {
|
|
89
|
+
if (!this.stickyElement || !this.element.isConnected) {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
87
92
|
// reset sticky so we can read current offsets
|
|
88
93
|
this.setUnfixed();
|
|
89
94
|
this.stickyElement.style.position = "static";
|
|
95
|
+
this.stickyElement.style.width = "auto";
|
|
90
96
|
this.isStuckTop = false;
|
|
91
97
|
this.isStuckBottom = false;
|
|
92
98
|
if (isVisible(this.stickyElement)) {
|
|
@@ -255,6 +261,9 @@ export class StzhSticky {
|
|
|
255
261
|
requestAnimationFrame(() => {
|
|
256
262
|
window.setTimeout(() => {
|
|
257
263
|
this.loaded = true;
|
|
264
|
+
if (this.position === "fixed") {
|
|
265
|
+
this.updateFixedByResize();
|
|
266
|
+
}
|
|
258
267
|
}, 250);
|
|
259
268
|
});
|
|
260
269
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/**\n *\n */\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"transparent\" = \"default\";\n\n /** Whether to disable sticking to top */\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /** Whether to disable sticking to bottom */\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /** Whether background breaks out container to full viewport width */\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /** Name of sticky element (used for setting css properties) */\n @Prop() name: string;\n\n /**\n * Position type used.\n *\n * - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n */\n @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /** Sticky stuck top event */\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /** Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } | null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } | null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop || position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n }, 100)\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement)) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n || this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop || this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n \n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight, \n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit \n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit \n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop || this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`); \n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop || this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop || this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"stzh-sticky.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky/stzh-sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/**\n *\n */\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"transparent\" = \"default\";\n\n /** Whether to disable sticking to top */\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /** Whether to disable sticking to bottom */\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /** Whether background breaks out container to full viewport width */\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /** Name of sticky element (used for setting css properties) */\n @Prop() name: string;\n\n /**\n * Position type used.\n *\n * - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n */\n @Prop({ reflect: true }) position: \"sticky\" | \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /** Sticky stuck top event */\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /** Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } | null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } | null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit || this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop || position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n this.updateByScroll();\n }, 100);\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement) || !this.element.isConnected) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n || this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop || this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(unstuckWidth);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight,\n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit\n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit\n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop || this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n if (!this.stickyElement || !this.element.isConnected) {\n return;\n }\n\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.stickyElement.style.width = \"auto\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n }\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop || this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop || this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -10,33 +10,39 @@ export class StzhStickyActions {
|
|
|
10
10
|
this.hasActiveScrollup = !entries[0].isIntersecting;
|
|
11
11
|
};
|
|
12
12
|
this.updateScrollupWidth = () => {
|
|
13
|
-
|
|
13
|
+
if (this.scrollupElement && this.element.isConnected) {
|
|
14
|
+
const { width } = this.scrollupElement.getBoundingClientRect();
|
|
15
|
+
document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width", `${width}px`);
|
|
16
|
+
}
|
|
14
17
|
};
|
|
15
18
|
this.handleScrollupResize = throttle(this.updateScrollupWidth, 100);
|
|
16
19
|
this.pagetitleQuery = 'stzh-pagetitle, stzh-pagetitle-hero';
|
|
17
|
-
this.hasActiveScrollup =
|
|
20
|
+
this.hasActiveScrollup = false;
|
|
18
21
|
}
|
|
19
22
|
hasActiveScrollupWatcher(newValue) {
|
|
20
23
|
document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active", newValue ? "1" : "0");
|
|
21
24
|
document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active", newValue ? "0" : "1");
|
|
22
25
|
}
|
|
23
26
|
componentDidLoad() {
|
|
24
|
-
|
|
25
|
-
|
|
27
|
+
const pagetitle = typeof this.pagetitleQuery === "string"
|
|
28
|
+
? document.querySelector(this.pagetitleQuery)
|
|
29
|
+
: this.pagetitleQuery();
|
|
26
30
|
if (pagetitle) {
|
|
31
|
+
this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px", });
|
|
27
32
|
this.observer.observe(pagetitle);
|
|
28
33
|
}
|
|
29
|
-
this.resizeObserver = new ResizeObserver(this.handleScrollupResize);
|
|
30
|
-
this.resizeObserver.observe(this.scrollupElement);
|
|
31
34
|
requestAnimationFrame(() => {
|
|
32
35
|
requestAnimationFrame(() => {
|
|
33
36
|
this.updateScrollupWidth();
|
|
37
|
+
this.resizeObserver = new ResizeObserver(this.handleScrollupResize);
|
|
38
|
+
this.resizeObserver.observe(this.scrollupElement);
|
|
34
39
|
});
|
|
35
40
|
});
|
|
36
41
|
}
|
|
37
|
-
|
|
38
|
-
var _a;
|
|
39
|
-
(_a = this.
|
|
42
|
+
disconnectedCallback() {
|
|
43
|
+
var _a, _b;
|
|
44
|
+
(_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
45
|
+
(_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
40
46
|
}
|
|
41
47
|
render() {
|
|
42
48
|
const chatSlotUsed = hasSlot(this.element, "chat");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-sticky-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,WAAW,EACX,KAAK,EACL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,QAAQ,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C;;GAEG;AAMH,MAAM,OAAO,iBAAiB;;IAkBpB,qBAAgB,GAAG,CAAC,OAAoC,EAAE,EAAE;MAClE,IAAI,CAAC,iBAAiB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;IACtD,CAAC,CAAA;IAEO,wBAAmB,GAAG,GAAG,EAAE;MACjC,
|
|
1
|
+
{"version":3,"file":"stzh-sticky-actions.js","sourceRoot":"","sources":["../../../../src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n forceUpdate,\n State,\n Prop,\n Watch,\n} from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for content that should stick to chat place\n */\n@Component({\n tag: \"stzh-sticky-actions\",\n styleUrl: \"stzh-sticky-actions.scss\",\n shadow: true\n})\nexport class StzhStickyActions {\n /** Query used to get pagetitle element (will show scrollup when passed). */\n @Prop() pagetitleQuery: string | (() => HTMLElement) = 'stzh-pagetitle, stzh-pagetitle-hero';\n\n @State() hasActiveScrollup = false;\n\n @Element() element: HTMLStzhStickyActionsElement;\n\n @Watch(\"hasActiveScrollup\")\n hasActiveScrollupWatcher(newValue: boolean) {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n }\n\n private observer: IntersectionObserver;\n private resizeObserver: ResizeObserver;\n private scrollupElement: HTMLElement;\n\n private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n this.hasActiveScrollup = !entries[0].isIntersecting;\n }\n\n private updateScrollupWidth = () => {\n if (this.scrollupElement && this.element.isConnected) {\n const { width } = this.scrollupElement.getBoundingClientRect();\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n }\n }\n\n private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n componentDidLoad() {\n const pagetitle = typeof this.pagetitleQuery === \"string\"\n ? document.querySelector(this.pagetitleQuery)\n : this.pagetitleQuery();\n\n if (pagetitle) {\n this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\", });\n this.observer.observe(pagetitle);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateScrollupWidth();\n\n this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n this.resizeObserver.observe(this.scrollupElement);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n render() {\n const chatSlotUsed = hasSlot(this.element, \"chat\");\n const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n const classes = {\n \"stzh-sticky-actions\": true,\n \"has-chat\": chatSlotUsed,\n \"has-scrollup\": scrollupSlotUsed,\n \"has-active-scrollup\": this.hasActiveScrollup,\n };\n\n return (\n <Host>\n <div class={classes} data-stzh-sticky-width-container>\n <stzh-sticky\n name=\"actions\"\n class=\"stzh-sticky-actions__sticky\"\n position=\"fixed\"\n variant=\"transparent\"\n disableStickyTop={true}\n >\n <div class=\"stzh-sticky-actions__container\">\n <div class=\"stzh-sticky-actions__chat-wrapper\">\n <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n <div\n ref={(el) => (this.scrollupElement = el as HTMLElement)}\n class=\"stzh-sticky-actions__scrollup-wrapper\"\n >\n <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n </div>\n </stzh-sticky>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -8,43 +8,45 @@ const COMPONENT_NAME = 'stzh-sticky-scrollup';
|
|
|
8
8
|
const story = createComponentStory(COMPONENT_NAME);
|
|
9
9
|
|
|
10
10
|
const SUBTEMPLATE_DUMMY_TEXT = `
|
|
11
|
-
<
|
|
12
|
-
<
|
|
11
|
+
<div style="opacity: 0.2">
|
|
12
|
+
<stzh-text>
|
|
13
|
+
<p><b>Scroll down to see scroll up link</b></p>
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
<stzh-heading id="mainPageHeading">Example main page heading</stzh-heading>
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
<p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
<p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
<p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
<p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
<p>Nostrud amet laboris exercitation voluptate fugiat proident culpa consequat commodo minim ut officia dolor ad. Ut ipsum officia ipsum officia aute ad ullamco minim adipisicing commodo consectetur ut est aliqua. Magna est incididunt nisi labore ipsum minim occaecat consectetur labore nulla. Enim reprehenderit culpa excepteur enim esse ad.</p>
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
<p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
|
|
27
28
|
|
|
28
|
-
|
|
29
|
+
<p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
<p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
<p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
<p>Ipsum ea laborum consectetur amet enim voluptate in. Laboris deserunt duis irure mollit fugiat nisi elit anim elit. Sit incididunt eiusmod labore deserunt id ea aute nisi voluptate dolore non. Incididunt nostrud laboris magna Lorem non cupidatat ad in velit eiusmod non laborum minim occaecat. Adipisicing enim esse sint ex enim sunt duis excepteur. Quis ipsum ullamco nulla est incididunt fugiat laborum sit enim. Et tempor enim ut qui sint.</p>
|
|
35
36
|
|
|
36
|
-
|
|
37
|
+
<p>Incididunt nostrud amet ea nisi cupidatat. Elit esse incididunt tempor sint non deserunt qui excepteur consequat laborum excepteur adipisicing esse est. Consequat nulla enim cillum do anim mollit duis esse magna sint amet. Culpa in nulla enim adipisicing cillum non incididunt quis officia Lorem esse velit reprehenderit. Cupidatat ex exercitation officia nulla fugiat ex. Exercitation nisi proident duis sunt. Et minim cupidatat consectetur adipisicing irure enim.</p>
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
</stzh-text>
|
|
39
|
+
<p>Dolor consectetur nisi reprehenderit nostrud eiusmod ex quis officia est qui. Mollit sint reprehenderit et tempor ut aute anim magna irure fugiat cillum elit. Est est sit enim irure adipisicing est nulla. Aliqua tempor mollit ex fugiat pariatur adipisicing. Duis sit dolore aliqua pariatur do mollit aliqua consequat ex veniam.</p>
|
|
40
|
+
</stzh-text>
|
|
41
|
+
|
|
42
|
+
<stzh-vspace></stzh-vspace>
|
|
43
|
+
</div>
|
|
40
44
|
`;
|
|
41
45
|
|
|
42
46
|
const TEMPLATE = `
|
|
43
47
|
<div>
|
|
44
48
|
${SUBTEMPLATE_DUMMY_TEXT}
|
|
45
49
|
|
|
46
|
-
<stzh-vspace></stzh-vspace>
|
|
47
|
-
|
|
48
50
|
<stzh-sticky-actions>
|
|
49
51
|
<stzh-button slot="chat" variant="secondary" label="Chat" size="small" icon="text-message"></stzh-button>
|
|
50
52
|
<stzh-scrollup slot="scrollup">
|
|
@@ -130,6 +130,7 @@ export class StzhTooltip {
|
|
|
130
130
|
this.content = "";
|
|
131
131
|
this.placement = "bottom";
|
|
132
132
|
this.strategy = "absolute";
|
|
133
|
+
this.size = "default";
|
|
133
134
|
this.skidding = 0;
|
|
134
135
|
this.distance = 12;
|
|
135
136
|
this.interactive = false;
|
|
@@ -434,6 +435,24 @@ export class StzhTooltip {
|
|
|
434
435
|
"reflect": false,
|
|
435
436
|
"defaultValue": "\"absolute\""
|
|
436
437
|
},
|
|
438
|
+
"size": {
|
|
439
|
+
"type": "string",
|
|
440
|
+
"mutable": false,
|
|
441
|
+
"complexType": {
|
|
442
|
+
"original": "\"default\" | \"small\"",
|
|
443
|
+
"resolved": "\"default\" | \"small\"",
|
|
444
|
+
"references": {}
|
|
445
|
+
},
|
|
446
|
+
"required": false,
|
|
447
|
+
"optional": false,
|
|
448
|
+
"docs": {
|
|
449
|
+
"tags": [],
|
|
450
|
+
"text": "Shifting of tooltip content"
|
|
451
|
+
},
|
|
452
|
+
"attribute": "size",
|
|
453
|
+
"reflect": true,
|
|
454
|
+
"defaultValue": "\"default\""
|
|
455
|
+
},
|
|
437
456
|
"skidding": {
|
|
438
457
|
"type": "number",
|
|
439
458
|
"mutable": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stzh-tooltip.js","sourceRoot":"","sources":["../../../../src/components/stzh-tooltip/stzh-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Host,\n Element,\n Component,\n Prop,\n h,\n Event,\n EventEmitter,\n Method,\n Listen,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhTooltipOpenEvent,\n StzhTooltipOpenedEvent,\n StzhTooltipCloseEvent,\n StzhTooltipClosedEvent\n} from \"../../index\";\n\nimport {\n arrow,\n computePosition,\n offset,\n shift,\n flip,\n autoUpdate,\n Placement,\n MiddlewareData\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { opacity: \"0\" },\n { opacity: \"1\" }\n ],\n options: { duration: 100, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { opacity: \"1\" },\n { opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"linear\" }\n};\n\nconst keyCode = {\n ESC: 27\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n tag: \"stzh-tooltip\",\n styleUrl: \"stzh-tooltip.scss\",\n scoped: true\n})\nexport class StzhTooltip {\n /** Whether tooltip should be open */\n @Prop({ mutable: true }) open: boolean = false;\n\n /** Label of tooltip (used for screenreaders) */\n @Prop() label: string = \"\";\n\n /** Content of tooltip (use instead of content slot) */\n @Prop() content: string = \"\";\n\n /** Default placement of tooltip relative to trigger element */\n @Prop() placement: Placement = \"bottom\";\n\n /** Position strategy */\n @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n /** Shifting of tooltip content */\n @Prop() skidding: number = 0;\n\n /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n @Prop() distance: number = 12;\n\n /** Whether tooltip is interactive */\n @Prop() interactive: boolean = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = \"hover focus\";\n private _trigger: string[];\n\n /** Translation strings */\n @Prop() localization: StzhTooltipLocalizedText;\n\n @Element() element: HTMLStzhTooltipElement;\n\n /** Tooltip open event */\n @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n /** Tooltip opened event (after animation) */\n @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n /** Tooltip close event */\n @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n /** Tooltip closed event (after animation) */\n @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n /** Show tooltip content */\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /** Hide tooltip content */\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /** Toggle tooltip content */\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @Method()\n async update() {\n return await this.computePosition();\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.contentElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n\n // safari seems to need will-change,\n // otherwise it has problems animating the element with the drop shadow\n this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n this.contentElement.hidden = false;\n\n await animateTo(\n this.contentElement,\n ANIMATION_SHOW.keyframes,\n ANIMATION_SHOW.options\n );\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-tooltip\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n await animateTo(\n this.contentElement,\n ANIMATION_HIDE.keyframes,\n ANIMATION_HIDE.options\n );\n\n this.contentElement.hidden = true;\n this.contentElement.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-tooltip\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Watch(\"trigger\")\n triggerWatcher(newValue: string) {\n this._trigger = newValue.split(\" \");\n }\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleDocumentClick(event: MouseEvent) {\n if (!this.open) {\n return\n }\n\n const isClickOutside = event.target !== this.contentElement\n && this.contentElement.contains(event.target as HTMLElement) === false\n\n const isClickTrigger = event.target === this.triggerElement\n || this.triggerElement.contains(event.target as HTMLElement)\n\n if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n this.hide()\n }\n }\n\n @State() computedPlacement: Placement;\n\n private toggledByMethod: boolean = false;\n private middlewareData: MiddlewareData;\n private triggerElement: HTMLElement;\n private triggerFirstElement: HTMLElement;\n private contentElement: HTMLElement;\n private arrowElement: HTMLElement;\n private autoUpdateCleanup: Function;\n private id: string;\n private trap: FocusTrap;\n private isHovering: boolean = false;\n\n private hasTrigger(trigger: string) {\n return this._trigger.indexOf(trigger) > -1;\n }\n\n private onEscKey = (event: KeyboardEvent) => {\n if (event.keyCode === keyCode.ESC) {\n this.hide()\n }\n }\n\n private computePosition = async () => {\n if (!this.open) {\n return;\n }\n\n const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n = await computePosition(this.triggerFirstElement, this.contentElement, {\n strategy: this.strategy,\n placement: this.placement,\n middleware: [\n offset({\n mainAxis: this.distance,\n crossAxis: this.skidding\n }),\n flip({\n padding: 5\n }),\n shift({\n padding: 5\n }),\n arrow({\n element: this.arrowElement,\n padding: 5\n })\n ],\n });\n\n this.middlewareData = middlewareData;\n this.computedPlacement = placement;\n\n Object.assign(this.contentElement.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n });\n\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n });\n }\n\n private onClickTrigger = () => {\n if (this.hasTrigger(\"click\")) {\n this.toggle();\n }\n }\n\n private onMouseEnterTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = true;\n this.show();\n }\n }\n\n private onMouseLeaveTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = false;\n document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n }\n }\n\n private onFocusTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.show();\n }\n }\n\n private onBlurTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.hide();\n }\n }\n\n private onMouseMoveDocument = (event: MouseEvent) => {\n const { clientX, clientY } = event;\n\n if (!this.computedPlacement) {\n return true;\n }\n\n const basePlacement = this.computedPlacement.split(\"-\")[0];\n const offsetData = this.middlewareData.offset;\n const popperRect = this.contentElement.getBoundingClientRect();\n\n if (!offsetData) {\n return true;\n }\n\n const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n const exceedsTop =\n popperRect.top - clientY > topDistance;\n const exceedsBottom =\n clientY - popperRect.bottom > bottomDistance;\n const exceedsLeft =\n popperRect.left - clientX > leftDistance;\n const exceedsRight =\n clientX - popperRect.right > rightDistance;\n\n if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n if (!this.isHovering) {\n this.hide();\n }\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n this.triggerWatcher(this.trigger);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n }\n }\n\n componentDidRender() {\n this.computePosition();\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n if (this.hasTrigger(\"click\")) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n } else {\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n }\n }\n\n if (this.trap) {\n this.open ? this.trap.activate() : this.trap.deactivate();\n }\n }\n\n componentDidUpdate() {\n if (this.trap) {\n this.trap.updateContainerElements(this.contentElement);\n }\n }\n\n componentDidLoad() {\n this.autoUpdateCleanup = autoUpdate(\n this.element,\n this.contentElement,\n this.computePosition\n );\n\n if (this.interactive) {\n this.trap = createFocusTrap(this.contentElement, {\n fallbackFocus: this.contentElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true\n });\n\n if (this.open) {\n this.trap.activate();\n }\n }\n\n this.contentElement.hidden = !this.open;\n }\n\n connectedCallback() {\n let trigger = this.triggerElement?.firstElementChild;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute('slot'))\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger as HTMLElement;\n\n trigger.addEventListener(\"click\", this.onClickTrigger);\n trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n disconnectedCallback() {\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (this.triggerFirstElement) {\n this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n render() {\n const classes = {\n \"stzh-tooltip\": true,\n [`stzh-tooltip--open`]: this.open,\n [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n class=\"stzh-tooltip__trigger\"\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n >\n <slot></slot>\n </div>\n {this.hasTrigger(\"click\") &&\n <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n {this.localization.open}\n </div>\n }\n <div\n class=\"stzh-tooltip__content\"\n id={`${this.id}-content`}\n ref={(el) => (this.contentElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n aria-labelledby={this.label ? `${this.id}-label` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onKeyDown={this.onEscKey}\n onMouseEnter={this.onMouseEnterTrigger}\n onMouseLeave={this.onMouseLeaveTrigger}\n onFocusin={this.onFocusTrigger}\n onFocusout={this.onBlurTrigger}\n >\n <div\n class=\"stzh-tooltip__arrow\"\n ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n innerHTML={Arrow}\n ></div>\n {this.label &&\n <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n {this.label}\n </h2>\n }\n {this.hasTrigger(\"click\") &&\n <button\n class=\"stzh-tooltip__close\"\n onClick={() => this.hide()}\n type=\"button\"\n >\n <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n </button>\n }\n <stzh-text curve=\"none\" class=\"stzh-tooltip__content-slot\">\n {this.content ? this.content : <slot name=\"content\"></slot>}\n </stzh-text>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"stzh-tooltip.js","sourceRoot":"","sources":["../../../../src/components/stzh-tooltip/stzh-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Host,\n Element,\n Component,\n Prop,\n h,\n Event,\n EventEmitter,\n Method,\n Listen,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhTooltipOpenEvent,\n StzhTooltipOpenedEvent,\n StzhTooltipCloseEvent,\n StzhTooltipClosedEvent\n} from \"../../index\";\n\nimport {\n arrow,\n computePosition,\n offset,\n shift,\n flip,\n autoUpdate,\n Placement,\n MiddlewareData\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { opacity: \"0\" },\n { opacity: \"1\" }\n ],\n options: { duration: 100, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { opacity: \"1\" },\n { opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"linear\" }\n};\n\nconst keyCode = {\n ESC: 27\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n tag: \"stzh-tooltip\",\n styleUrl: \"stzh-tooltip.scss\",\n scoped: true\n})\nexport class StzhTooltip {\n /** Whether tooltip should be open */\n @Prop({ mutable: true }) open: boolean = false;\n\n /** Label of tooltip (used for screenreaders) */\n @Prop() label: string = \"\";\n\n /** Content of tooltip (use instead of content slot) */\n @Prop() content: string = \"\";\n\n /** Default placement of tooltip relative to trigger element */\n @Prop() placement: Placement = \"bottom\";\n\n /** Position strategy */\n @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n /** Shifting of tooltip content */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Shifting of tooltip content */\n @Prop() skidding: number = 0;\n\n /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n @Prop() distance: number = 12;\n\n /** Whether tooltip is interactive */\n @Prop() interactive: boolean = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = \"hover focus\";\n private _trigger: string[];\n\n /** Translation strings */\n @Prop() localization: StzhTooltipLocalizedText;\n\n @Element() element: HTMLStzhTooltipElement;\n\n /** Tooltip open event */\n @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n /** Tooltip opened event (after animation) */\n @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n /** Tooltip close event */\n @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n /** Tooltip closed event (after animation) */\n @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n /** Show tooltip content */\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /** Hide tooltip content */\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /** Toggle tooltip content */\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @Method()\n async update() {\n return await this.computePosition();\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.contentElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n\n // safari seems to need will-change,\n // otherwise it has problems animating the element with the drop shadow\n this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n this.contentElement.hidden = false;\n\n await animateTo(\n this.contentElement,\n ANIMATION_SHOW.keyframes,\n ANIMATION_SHOW.options\n );\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-tooltip\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n await animateTo(\n this.contentElement,\n ANIMATION_HIDE.keyframes,\n ANIMATION_HIDE.options\n );\n\n this.contentElement.hidden = true;\n this.contentElement.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-tooltip\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Watch(\"trigger\")\n triggerWatcher(newValue: string) {\n this._trigger = newValue.split(\" \");\n }\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleDocumentClick(event: MouseEvent) {\n if (!this.open) {\n return\n }\n\n const isClickOutside = event.target !== this.contentElement\n && this.contentElement.contains(event.target as HTMLElement) === false\n\n const isClickTrigger = event.target === this.triggerElement\n || this.triggerElement.contains(event.target as HTMLElement)\n\n if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n this.hide()\n }\n }\n\n @State() computedPlacement: Placement;\n\n private toggledByMethod: boolean = false;\n private middlewareData: MiddlewareData;\n private triggerElement: HTMLElement;\n private triggerFirstElement: HTMLElement;\n private contentElement: HTMLElement;\n private arrowElement: HTMLElement;\n private autoUpdateCleanup: Function;\n private id: string;\n private trap: FocusTrap;\n private isHovering: boolean = false;\n\n private hasTrigger(trigger: string) {\n return this._trigger.indexOf(trigger) > -1;\n }\n\n private onEscKey = (event: KeyboardEvent) => {\n if (event.keyCode === keyCode.ESC) {\n this.hide()\n }\n }\n\n private computePosition = async () => {\n if (!this.open) {\n return;\n }\n\n const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n = await computePosition(this.triggerFirstElement, this.contentElement, {\n strategy: this.strategy,\n placement: this.placement,\n middleware: [\n offset({\n mainAxis: this.distance,\n crossAxis: this.skidding\n }),\n flip({\n padding: 5\n }),\n shift({\n padding: 5\n }),\n arrow({\n element: this.arrowElement,\n padding: 5\n })\n ],\n });\n\n this.middlewareData = middlewareData;\n this.computedPlacement = placement;\n\n Object.assign(this.contentElement.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n });\n\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n });\n }\n\n private onClickTrigger = () => {\n if (this.hasTrigger(\"click\")) {\n this.toggle();\n }\n }\n\n private onMouseEnterTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = true;\n this.show();\n }\n }\n\n private onMouseLeaveTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = false;\n document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n }\n }\n\n private onFocusTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.show();\n }\n }\n\n private onBlurTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.hide();\n }\n }\n\n private onMouseMoveDocument = (event: MouseEvent) => {\n const { clientX, clientY } = event;\n\n if (!this.computedPlacement) {\n return true;\n }\n\n const basePlacement = this.computedPlacement.split(\"-\")[0];\n const offsetData = this.middlewareData.offset;\n const popperRect = this.contentElement.getBoundingClientRect();\n\n if (!offsetData) {\n return true;\n }\n\n const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n const exceedsTop =\n popperRect.top - clientY > topDistance;\n const exceedsBottom =\n clientY - popperRect.bottom > bottomDistance;\n const exceedsLeft =\n popperRect.left - clientX > leftDistance;\n const exceedsRight =\n clientX - popperRect.right > rightDistance;\n\n if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n if (!this.isHovering) {\n this.hide();\n }\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n this.triggerWatcher(this.trigger);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n }\n }\n\n componentDidRender() {\n this.computePosition();\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n if (this.hasTrigger(\"click\")) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n } else {\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n }\n }\n\n if (this.trap) {\n this.open ? this.trap.activate() : this.trap.deactivate();\n }\n }\n\n componentDidUpdate() {\n if (this.trap) {\n this.trap.updateContainerElements(this.contentElement);\n }\n }\n\n componentDidLoad() {\n this.autoUpdateCleanup = autoUpdate(\n this.element,\n this.contentElement,\n this.computePosition\n );\n\n if (this.interactive) {\n this.trap = createFocusTrap(this.contentElement, {\n fallbackFocus: this.contentElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true\n });\n\n if (this.open) {\n this.trap.activate();\n }\n }\n\n this.contentElement.hidden = !this.open;\n }\n\n connectedCallback() {\n let trigger = this.triggerElement?.firstElementChild;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute('slot'))\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger as HTMLElement;\n\n trigger.addEventListener(\"click\", this.onClickTrigger);\n trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n disconnectedCallback() {\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (this.triggerFirstElement) {\n this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n render() {\n const classes = {\n \"stzh-tooltip\": true,\n [`stzh-tooltip--open`]: this.open,\n [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n class=\"stzh-tooltip__trigger\"\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n >\n <slot></slot>\n </div>\n {this.hasTrigger(\"click\") &&\n <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n {this.localization.open}\n </div>\n }\n <div\n class=\"stzh-tooltip__content\"\n id={`${this.id}-content`}\n ref={(el) => (this.contentElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n aria-labelledby={this.label ? `${this.id}-label` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onKeyDown={this.onEscKey}\n onMouseEnter={this.onMouseEnterTrigger}\n onMouseLeave={this.onMouseLeaveTrigger}\n onFocusin={this.onFocusTrigger}\n onFocusout={this.onBlurTrigger}\n >\n <div\n class=\"stzh-tooltip__arrow\"\n ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n innerHTML={Arrow}\n ></div>\n {this.label &&\n <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n {this.label}\n </h2>\n }\n {this.hasTrigger(\"click\") &&\n <button\n class=\"stzh-tooltip__close\"\n onClick={() => this.hide()}\n type=\"button\"\n >\n <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n </button>\n }\n <stzh-text curve=\"none\" class=\"stzh-tooltip__content-slot\">\n {this.content ? this.content : <slot name=\"content\"></slot>}\n </stzh-text>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
|
package/dist/components/index.js
CHANGED
|
@@ -2,7 +2,7 @@ export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stenc
|
|
|
2
2
|
export { V as VBZ } from './index2.js';
|
|
3
3
|
|
|
4
4
|
const name = "@oiz/stzh-components";
|
|
5
|
-
const version = "3.0.0-
|
|
5
|
+
const version = "3.0.0-beta2";
|
|
6
6
|
|
|
7
7
|
const packageName = name.substring(name.indexOf('/')+1);
|
|
8
8
|
|