@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-tooltip.entry.js","mappings":";;;;;;;;AAAA,MAAM,cAAc,GAAG,wkIAAwkI;;ACyC/lI,MAAM,cAAc,GAAG;EACrB,SAAS,EAAE;IACT,EAAE,OAAO,EAAE,GAAG,EAAE;IAChB,EAAE,OAAO,EAAE,GAAG,EAAE;GACjB;EACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C,CAAC;AAEF,MAAM,cAAc,GAAG;EACrB,SAAS,EAAE;IACT,EAAE,OAAO,EAAE,GAAG,EAAE;IAChB,EAAE,OAAO,EAAE,GAAG,EAAE;GACjB;EACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C,CAAC;AAEF,MAAM,OAAO,GAAG;EACd,GAAG,EAAE,EAAE;CACR,CAAC;AAEF,IAAI,cAAc,GAAG,CAAC,CAAC;MAWV,WAAW;;;;;;;IA2Kd,oBAAe,GAAY,KAAK,CAAC;IASjC,eAAU,GAAY,KAAK,CAAC;IAM5B,aAAQ,GAAG,CAAC,KAAoB;MACtC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,IAAI,EAAE,CAAA;OACZ;KACF,CAAA;IAEO,oBAAe,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;QACd,OAAO;OACR;MAED,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,QAAQ,GAAG,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,GACpE,MAAM,eAAe,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,cAAc,EAAE;QACrE,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,UAAU,EAAE;UACV,MAAM,CAAC;YACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,SAAS,EAAE,IAAI,CAAC,QAAQ;WACzB,CAAC;UACF,IAAI,CAAC;YACH,OAAO,EAAE,CAAC;WACX,CAAC;UACF,KAAK,CAAC;YACJ,OAAO,EAAE,CAAC;WACX,CAAC;UACF,KAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,OAAO,EAAE,CAAC;WACX,CAAC;SACH;OACF,CAAC,CAAC;MAEL,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;MACrC,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;MAEnC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;QACvC,QAAQ,EAAE,QAAQ;QAClB,IAAI,EAAE,GAAG,CAAC,IAAI;QACd,GAAG,EAAE,GAAG,CAAC,IAAI;OACd,CAAC,CAAC;MAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE;QACrC,IAAI,EAAE,CAAC,IAAI,IAAI,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,EAAE;QACpD,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,IAAI,GAAG,EAAE;OACpD,CAAC,CAAC;KACJ,CAAA;IAEO,mBAAc,GAAG;MACvB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,MAAM,EAAE,CAAC;OACf;KACF,CAAA;IAEO,wBAAmB,GAAG;MAC5B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAA;IAEO,wBAAmB,GAAG;MAC5B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;OAClE;KACF,CAAA;IAEO,mBAAc,GAAG;MACvB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAA;IAEO,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;KACF,CAAA;IAEO,wBAAmB,GAAG,CAAC,KAAiB;MAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;MAEnC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;QAC3B,OAAO,IAAI,CAAC;OACb;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;MAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC;MAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,qBAAqB,EAAE,CAAC;MAE/D,IAAI,CAAC,UAAU,EAAE;QACf,OAAO,IAAI,CAAC;OACb;MAED,MAAM,WAAW,GAAG,aAAa,KAAK,QAAQ,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;MAClE,MAAM,cAAc,GAAG,aAAa,KAAK,KAAK,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;MAClE,MAAM,YAAY,GAAG,aAAa,KAAK,OAAO,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;MAClE,MAAM,aAAa,GAAG,aAAa,KAAK,MAAM,GAAG,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC;MAElE,MAAM,UAAU,GACd,UAAU,CAAC,GAAG,GAAG,OAAO,GAAG,WAAW,CAAC;MACzC,MAAM,aAAa,GACjB,OAAO,GAAG,UAAU,CAAC,MAAM,GAAG,cAAc,CAAC;MAC/C,MAAM,WAAW,GACf,UAAU,CAAC,IAAI,GAAG,OAAO,GAAG,YAAY,CAAC;MAC3C,MAAM,YAAY,GAChB,OAAO,GAAG,UAAU,CAAC,KAAK,GAAG,aAAa,CAAC;MAE7C,IAAI,UAAU,IAAI,aAAa,IAAI,WAAW,IAAI,YAAY,EAAE;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAEpE,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;UACpB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;OACF;KACF,CAAA;gBA5SwC,KAAK;iBAGtB,EAAE;mBAGA,EAAE;qBAGG,QAAQ;oBAGE,UAAU;oBAGxB,CAAC;oBAGD,EAAE;uBAGE,KAAK;mBAOV,aAAa;;;;;EAsBvC,MAAM,IAAI;IACR,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO;KACR;IAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;GACjD;;EAID,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO;KACR;IAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC5B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;GACjD;;EAID,MAAM,MAAM;IACV,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;SAAM;MACL,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;GACF;EAGD,MAAM,MAAM;IACV,OAAO,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;GACrC;EAGD,MAAM,WAAW,CAAC,QAAiB;IACjC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;MACxB,OAAO;KACR;IAED,IAAI,QAAQ,EAAE;MACZ,IAAI,IAAI,CAAC,eAAe,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;OACJ;MAED,MAAM,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;;;MAI1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,wDAAwD,CAAC;MAChG,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,KAAK,CAAC;MAEnC,MAAM,SAAS,CACb,IAAI,CAAC,cAAc,EACnB,cAAc,CAAC,SAAS,EACxB,cAAc,CAAC,OAAO,CACvB,CAAC;MAEF,IAAI,IAAI,CAAC,eAAe,EAAE;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;OACJ;KACF;SAAM;MACL,IAAI,IAAI,CAAC,eAAe,EAAE;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;OACJ;MAED,MAAM,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;MAC1C,MAAM,SAAS,CACb,IAAI,CAAC,cAAc,EACnB,cAAc,CAAC,SAAS,EACxB,cAAc,CAAC,OAAO,CACvB,CAAC;MAEF,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC;MAClC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;MAE9C,IAAI,IAAI,CAAC,eAAe,EAAE;QACxB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;UACnB,SAAS,EAAE,cAAc;SAC1B,CAAC,CAAC;OACJ;KACF;IAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAGD,cAAc,CAAC,QAAgB;IAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;GACrC;EAGD,mBAAmB,CAAC,KAAiB;IACnC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAM;KACP;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc;SACtD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,KAAK,KAAK,CAAA;IAExE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc;SACtD,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAA;IAE9D,IAAI,cAAc,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MACjE,IAAI,CAAC,IAAI,EAAE,CAAA;KACZ;GACF;EAeO,UAAU,CAAC,OAAe;IAChC,OAAO,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;GAC5C;EAwHD,MAAM,iBAAiB;IACrB,IAAI,CAAC,EAAE,GAAG,gBAAgB,cAAc,EAAE,EAAE,CAAC;IAE7C,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAElC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,eAAe,EAAE,CAAC;IAEvB,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAEvD,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;MAC5B,IAAI,CAAC,mBAAmB;SACrB,YAAY,CAAC,MAAM,GAAG,eAAe,GAAG,eAAe,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;MAE1F,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC;YACnE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,EAC1E;QACA,IAAI,CAAC,mBAAmB;WACrB,YAAY,CAAC,MAAM,GAAG,kBAAkB,GAAG,kBAAkB,EAAE,GAAG,IAAI,CAAC,EAAE,sBAAsB,CAAC,CAAC;OACrG;MAED,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,YAAY,CAAC;YAC7D,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,EACpE;QACA,IAAI,CAAC,mBAAmB;WACrB,YAAY,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;OACnE;MAED,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,cAAc,CAAC;YAC/D,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,EACrE;QACA,IAAI,CAAC,mBAAmB;WACrB,YAAY,CAAC,MAAM,GAAG,cAAc,GAAG,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;OACtE;KACF;SAAM;MACL,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC;YACnE,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,EAC1E;QACA,IAAI,CAAC,mBAAmB;WACrB,YAAY,CAAC,MAAM,GAAG,kBAAkB,GAAG,kBAAkB,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;OACzF;KACF;IAED,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;KAC3D;GACF;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACxD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,iBAAiB,GAAG,UAAU,CACjC,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,eAAe,CACrB,CAAC;IAEF,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,cAAc,EAAE;QAC/C,aAAa,EAAE,IAAI,CAAC,cAAc;QAClC,uBAAuB,EAAE,IAAI;QAC7B,uBAAuB,EAAE,IAAI;OAC9B,CAAC,CAAC;MAEH,IAAI,IAAI,CAAC,IAAI,EAAE;QACb,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;OACtB;KACF;IAED,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACzC;EAED,iBAAiB;;IACf,IAAI,OAAO,GAAG,MAAA,IAAI,CAAC,cAAc,0CAAE,iBAAiB,CAAC;IAErD,IAAI,CAAC,OAAO,EAAE;MACZ,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC;SAClD,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;MAE7C,OAAO,GAAG,WAAW,CAAC;KACvB;IAED,IAAI,OAAO,EAAE;MACX,IAAI,CAAC,mBAAmB,GAAG,OAAsB,CAAC;MAElD,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;MACvD,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACjE,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACjE,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;MACzD,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC1D;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAED,IAAI,IAAI,CAAC,mBAAmB,EAAE;MAC5B,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;MAC3E,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACrF,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;MACrF,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;MAC7E,IAAI,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9E;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,oBAAoB,GAAG,IAAI,CAAC,IAAI;MACjC,CAAC,2BAA2B,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,iBAAiB;KAChF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WACE,KAAK,EAAC,uBAAuB,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAoB,CAAC,IAEzD,eAAa,CACT,EACL,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;MACvB,WAAK,KAAK,EAAC,uBAAuB,EAAC,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,sBAAsB,IACpE,IAAI,CAAC,YAAY,CAAC,IAAI,CACnB,EAER,WACE,KAAK,EAAC,uBAAuB,EAC7B,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,UAAU,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAoB,CAAC,EACzD,QAAQ,EAAC,IAAI,qBACI,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,iBAC1C,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EACzC,SAAS,EAAE,IAAI,CAAC,QAAQ,EACxB,YAAY,EAAE,IAAI,CAAC,mBAAmB,EACtC,YAAY,EAAE,IAAI,CAAC,mBAAmB,EACtC,SAAS,EAAE,IAAI,CAAC,cAAc,EAC9B,UAAU,EAAE,IAAI,CAAC,aAAa,IAE9B,WACE,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAoB,CAAC,EACvD,SAAS,EAAE,KAAK,GACX,EACN,IAAI,CAAC,KAAK;MACT,UAAI,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAC,uBAAuB,IACtD,IAAI,CAAC,KAAK,CACR,EAEN,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;MACvB,cACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,MAAM,IAAI,CAAC,IAAI,EAAE,EAC1B,IAAI,EAAC,QAAQ,IAEb,iBAAW,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,oBAAoB,GAAa,EAC/D,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAQ,CAC7D,EAEX,iBAAW,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACjD,CACR,CACF,CACD,EACP;GACH;;;;;;;;;;;","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n display: contents;\n\n --color: #{$colorWhite};\n --background-color: #{$colorCoolgrey60};\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --padding: #{$tooltipPadding};\n --border-radius: #{$tooltipBorderRadius};\n --link-color: #{$colorWhite};\n\n --hover-link-color: #{$colorWhite70op};\n}\n\n.stzh-tooltip {\n @include tooltip-arrow;\n display: contents;\n\n &__trigger {\n display: contents;\n }\n\n &__content {\n @include tooltip-fontsize;\n @include tooltip-dropshadow;\n position: absolute;\n z-index: $zIndexPopover;\n border-radius: var(--border-radius);\n background-color: var(--background-color);\n color: var(--color);\n width: var(--width);\n min-width: var(--min-width);\n max-width: var(--max-width);\n display: flex;\n flex-direction: row-reverse;\n\n --stzh-base-color: var(--color);\n --stzh-link-color: var(--link-color);\n // TODO: check with designer which color it should be for hover\n --stzh-link-hover-color: var(--hover-link-color);\n }\n\n &__content-slot {\n padding: var(--padding);\n }\n\n &__close {\n @include tooltip__close;\n }\n\n &__icon {\n @include tooltip__icon;\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","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"],"version":3}
|
|
1
|
+
{"file":"stzh-tooltip.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n display: contents;\n\n --color: #{$colorWhite};\n --background-color: #{$colorCoolgrey60};\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --padding: #{$tooltipPadding};\n --border-radius: #{$tooltipBorderRadius};\n --link-color: #{$colorWhite};\n\n --hover-link-color: #{$colorWhite70op};\n\n &[size=\"small\"] {\n --padding: #{$tooltipSmallPadding};\n }\n}\n\n.stzh-tooltip {\n @include tooltip-arrow;\n display: contents;\n\n &__trigger {\n display: contents;\n }\n\n &__content {\n @include tooltip-fontsize;\n @include tooltip-dropshadow;\n position: absolute;\n z-index: $zIndexPopover;\n border-radius: var(--border-radius);\n background-color: var(--background-color);\n color: var(--color);\n width: var(--width);\n min-width: var(--min-width);\n max-width: var(--max-width);\n display: flex;\n flex-direction: row-reverse;\n\n --stzh-base-color: var(--color);\n --stzh-link-color: var(--link-color);\n // TODO: check with designer which color it should be for hover\n --stzh-link-hover-color: var(--hover-link-color);\n }\n\n &__content-slot {\n padding: var(--padding);\n }\n\n &__close {\n @include tooltip__close;\n }\n\n &__icon {\n @include tooltip__icon;\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","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"],"version":3}
|
|
@@ -255,6 +255,9 @@
|
|
|
255
255
|
"locationEnableLabel": "Standortermittlung aktivieren",
|
|
256
256
|
"locationDisableLabel": "Standortermittlung deaktivieren"
|
|
257
257
|
},
|
|
258
|
+
"pagebottom": {
|
|
259
|
+
"printLabel": "Seite drucken"
|
|
260
|
+
},
|
|
258
261
|
"pagination": {
|
|
259
262
|
"label": "Seitennummer",
|
|
260
263
|
"totalLabel": "von {total}",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m17 4.238-7.928 7.1L4 7.216V19h16zM4.511 5l7.55 6.662L19.502 5z"/></svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="M20.
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="M20.462 3.23c.153 0 .307.078.384.155a.49.49 0 0 1 0 .461l-6.077 10.77 3.846 7.076a.49.49 0 0 1 0 .462.6.6 0 0 1-.384.154h-2.77c-.384 0-.615-.308-.769-.539l-3.923-7.154C11 14.308 16.923 3.77 16.923 3.77c.154-.307.385-.538.77-.538h2.769zM8.923 7c.385 0 .615.308.77.538l1.922 3.308c-.153.154-3 5.23-3 5.23-.153.232-.384.54-.769.54H5.154a.6.6 0 0 1-.385-.154.49.49 0 0 1 0-.462l2.846-5.154-1.846-3.23a.49.49 0 0 1 0-.462A.6.6 0 0 1 6.154 7h2.77"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg>
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
</div>
|
|
227
227
|
|
|
228
228
|
<div class="icon-wrapper">
|
|
229
|
-
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
229
|
+
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4z"/></svg></div>
|
|
230
230
|
<div class="icon-name">facebook</div>
|
|
231
231
|
</div>
|
|
232
232
|
|
|
@@ -306,7 +306,7 @@
|
|
|
306
306
|
</div>
|
|
307
307
|
|
|
308
308
|
<div class="icon-wrapper">
|
|
309
|
-
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
309
|
+
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002M7 8.48H3V21h4zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91z"/></svg></div>
|
|
310
310
|
<div class="icon-name">linkedin</div>
|
|
311
311
|
</div>
|
|
312
312
|
|
|
@@ -331,7 +331,7 @@
|
|
|
331
331
|
</div>
|
|
332
332
|
|
|
333
333
|
<div class="icon-wrapper">
|
|
334
|
-
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><
|
|
334
|
+
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m17 4.238-7.928 7.1L4 7.216V19h16zM4.511 5l7.55 6.662L19.502 5z"/></svg></div>
|
|
335
335
|
<div class="icon-name">mail</div>
|
|
336
336
|
</div>
|
|
337
337
|
|
|
@@ -651,7 +651,7 @@
|
|
|
651
651
|
</div>
|
|
652
652
|
|
|
653
653
|
<div class="icon-wrapper">
|
|
654
|
-
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="M20.
|
|
654
|
+
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="M20.462 3.23c.153 0 .307.078.384.155a.49.49 0 0 1 0 .461l-6.077 10.77 3.846 7.076a.49.49 0 0 1 0 .462.6.6 0 0 1-.384.154h-2.77c-.384 0-.615-.308-.769-.539l-3.923-7.154C11 14.308 16.923 3.77 16.923 3.77c.154-.307.385-.538.77-.538h2.769zM8.923 7c.385 0 .615.308.77.538l1.922 3.308c-.153.154-3 5.23-3 5.23-.153.232-.384.54-.769.54H5.154a.6.6 0 0 1-.385-.154.49.49 0 0 1 0-.462l2.846-5.154-1.846-3.23a.49.49 0 0 1 0-.462A.6.6 0 0 1 6.154 7h2.77"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg></div>
|
|
655
655
|
<div class="icon-name">xing</div>
|
|
656
656
|
</div>
|
|
657
657
|
</body>
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as s,a as e,g as i}from"./p-c7bfac7a.js";import{s as o,g as n}from"./p-7e304ea3.js";import{b as r}from"./p-9b063923.js";const h=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{display:contents}@media print{:host{display:none}}.stzh-print{display:contents}";const a=class{constructor(s){t(this,s);this.handleLinkClick=()=>{window.print()};this.init=()=>{const t=this.element.querySelectorAll("stzh-link, stzh-button");t.forEach((t=>{t.addEventListener("click",this.handleLinkClick);o(t,{icon:"print"})}))}}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t={"stzh-print":true};return s(e,null,s("div",{class:t},s("slot",null)))}get element(){return i(this)}};a.style=h;const l=".sc-stzh-share-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-share-h{display:none}.sc-stzh-share-h *.sc-stzh-share,.sc-stzh-share-h *.sc-stzh-share::before,.sc-stzh-share-h *.sc-stzh-share::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-share-h .has-focus.sc-stzh-share{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share{outline-style:none !important}.sc-stzh-share-h .stzh-fylingfocus-focused.sc-stzh-share::-moz-focus-inner{border:0 !important}.stzh-share__list.sc-stzh-share{list-style:none;margin:0;padding:0;display:flex}.stzh-share__item.sc-stzh-share:not(:last-child){margin-right:var(--stzh-space-xxsmall)}";const c=256;const d=class{constructor(s){t(this,s);this._services=[];this.openPopup=(t,s)=>{s.preventDefault();window.open(t,"_blank","width=600,height=460")};this.localization=undefined;this.url=window.location.href;this.mailSubject=undefined;this.mailBody=undefined;this.services=["mail","facebook","twitter","linkedin","xing"]}servicesWatcher(t){if(typeof t==="string"){this._services=JSON.parse(t)}else{this._services=t}}async componentWillLoad(){this.servicesWatcher(this.services);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"share")}}render(){var t;const i={"stzh-share":true};const o=encodeURIComponent(this.url);const h=encodeURIComponent(this.mailSubject||this.localization.mailSubject);const a=encodeURIComponent((t=this.mailBody||this.localization.mailBody)===null||t===void 0?void 0:t.replace(/\{shareUrl\}/gi,this.url));const l=encodeURIComponent(document.title);const d=encodeURIComponent(r(l,c));const u=encodeURIComponent(n("description"));const f={mail:{popup:false,blank:false,url:`mailto:?subject=${h}&body=${a}`,text:this.localization.shareMail,icon:"mail"},facebook:{popup:true,blank:true,url:`https://www.facebook.com/sharer/sharer.php?u=${o}`,text:this.localization.shareFacebook,icon:"facebook"},twitter:{popup:true,blank:true,url:`https://twitter.com/intent/tweet?text=${d}&url=${o}`,text:this.localization.shareTwitter,icon:"twitter"},linkedin:{popup:true,blank:true,url:`https://www.linkedin.com/shareArticle?mini=true&summary=${u}&title=${l}&url=${o}`,text:this.localization.shareLinkedin,icon:"linkedin"},xing:{popup:true,blank:true,url:`https://www.xing.com/spi/shares/new?url=${o}`,text:this.localization.shareXing,icon:"xing"}};return s(e,null,s("div",{class:i},s("ul",{class:"stzh-share__list"},this._services.map((t=>s("li",{class:"stzh-share__item"},s("stzh-tooltip",{content:f[t].text,size:"small"},s("stzh-button",{class:`stzh-share__button is-${t}`,size:"small",variant:"tertiary",iconOnly:true,href:f[t].url,rel:f[t].blank?"nofollow noopener noreferrer":"nofollow",target:f[t].blank?"_blank":"_self",onClick:f[t].popup?s=>this.openPopup(f[t].url,s):null,analyticsId:f[t].text,icon:f[t].icon}))))))))}get element(){return i(this)}static get watchers(){return{services:["servicesWatcher"]}}};d.style=l;export{a as stzh_print,d as stzh_share};
|
|
2
|
+
//# sourceMappingURL=p-2e713d1e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stzhPrintCss","StzhPrint","constructor","hostRef","this","handleLinkClick","window","print","init","links","element","querySelectorAll","forEach","link","addEventListener","setPropsIfNull","icon","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","h","Host","class","stzhShareCss","MAX_TWEET_LENGTH","StzhShare","_services","openPopup","url","event","preventDefault","open","location","href","servicesWatcher","newValue","JSON","parse","componentWillLoad","services","localization","stzhComponents","utils","fetchTranslations","shareUrl","encodeURIComponent","mailSubject","mailBody","_a","replace","title","document","twitterTitle","abbreviateText","description","getMeta","serviceData","mail","popup","blank","text","shareMail","facebook","shareFacebook","twitter","shareTwitter","linkedin","shareLinkedin","xing","shareXing","map","service","content","size","variant","iconOnly","rel","target","onClick","e","analyticsId"],"sources":["src/components/stzh-print/stzh-print.scss?tag=stzh-print&encapsulation=shadow","src/components/stzh-print/stzh-print.tsx","src/components/stzh-share/stzh-share.scss?tag=stzh-share&encapsulation=scoped","src/components/stzh-share/stzh-share.tsx"],"sourcesContent":[":host {\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n.stzh-print {\n display: contents;\n}\n","import {\n Component,\n Host,\n h,\n Element,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n tag: \"stzh-print\",\n styleUrl: \"stzh-print.scss\",\n shadow: true\n})\nexport class StzhPrint {\n @Element() element: HTMLStzhPrintElement;\n\n private observer: MutationObserver;\n\n private handleLinkClick = () => {\n window.print();\n }\n\n private init = () => {\n const links = this.element.querySelectorAll(\"stzh-link, stzh-button\");\n\n links.forEach((link) => {\n link.addEventListener('click', this.handleLinkClick);\n\n setPropsIfNull(link, {\n icon: \"print\"\n } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-print\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n",":host {\n}\n\n.stzh-share {\n &__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n }\n\n &__item {\n &:not(:last-child) {\n margin-right: space('xxsmall');\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\nimport { StzhShareLocalizedText } from \"./stzh-share.localization\"\nimport { getMeta } from '../../utils/utils';\nimport { abbreviateText } from '../../utils/string-utils';\n\n// 280 - URL (always 24) = 256\nconst MAX_TWEET_LENGTH = 256;\n\n/**\n */\n@Component({\n tag: \"stzh-share\",\n styleUrl: \"stzh-share.scss\",\n scoped: true\n})\nexport class StzhShare {\n /** Translation strings */\n @Prop() localization: StzhShareLocalizedText;\n\n /** URL of current site (uses full URL by default) */\n @Prop() url: string = window.location.href;\n\n /** Overwrite mail subject translation */\n @Prop() mailSubject: string;\n\n /** Overwrite mail body translation */\n @Prop() mailBody: string;\n\n /**\n * Array of enabled share buttons.\n * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n */\n @Prop() services: ShareService[] | string = [\n \"mail\", \"facebook\", \"twitter\", \"linkedin\", \"xing\"\n ];\n\n private _services: ShareService[] = [];\n\n @Watch(\"services\")\n servicesWatcher(newValue: ShareService[] | string) {\n if (typeof newValue === \"string\") {\n this._services = JSON.parse(newValue);\n } else {\n this._services = newValue;\n }\n }\n\n @Element() element: HTMLStzhShareElement;\n\n private openPopup = (url, event) => {\n event.preventDefault();\n window.open(url, \"_blank\", \"width=600,height=460\");\n }\n\n async componentWillLoad() {\n this.servicesWatcher(this.services);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"share\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-share\": true\n };\n\n const shareUrl = encodeURIComponent(this.url);\n const mailSubject = encodeURIComponent(this.mailSubject || this.localization.mailSubject);\n const mailBody = encodeURIComponent(\n (this.mailBody || this.localization.mailBody)?.replace(/\\{shareUrl\\}/gi, this.url)\n );\n\n const title = encodeURIComponent(document.title);\n const twitterTitle = encodeURIComponent(abbreviateText(title, MAX_TWEET_LENGTH));\n const description = encodeURIComponent(getMeta(\"description\"));\n\n const serviceData = {\n \"mail\": {\n popup: false,\n blank: false,\n url: `mailto:?subject=${mailSubject}&body=${mailBody}`,\n text: this.localization.shareMail,\n icon: \"mail\"\n },\n \"facebook\": {\n popup: true,\n blank: true,\n url: `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`,\n text: this.localization.shareFacebook,\n icon: \"facebook\"\n },\n \"twitter\": {\n popup: true,\n blank: true,\n url: `https://twitter.com/intent/tweet?text=${twitterTitle}&url=${shareUrl}`,\n text: this.localization.shareTwitter,\n icon: \"twitter\"\n },\n \"linkedin\": {\n popup: true,\n blank: true,\n url: `https://www.linkedin.com/shareArticle?mini=true&summary=${description}&title=${title}&url=${shareUrl}`,\n text: this.localization.shareLinkedin,\n icon: \"linkedin\"\n },\n \"xing\": {\n popup: true,\n blank: true,\n url: `https://www.xing.com/spi/shares/new?url=${shareUrl}`,\n text: this.localization.shareXing,\n icon: \"xing\"\n }\n };\n\n return (\n <Host>\n <div class={classes}>\n <ul class=\"stzh-share__list\">\n {this._services.map((service) =>\n <li class=\"stzh-share__item\">\n <stzh-tooltip\n content={serviceData[service].text}\n size=\"small\"\n >\n <stzh-button\n class={`stzh-share__button is-${service}`}\n size=\"small\"\n variant=\"tertiary\"\n iconOnly={true}\n href={serviceData[service].url}\n rel={serviceData[service].blank ? \"nofollow noopener noreferrer\" : \"nofollow\"}\n target={serviceData[service].blank ? \"_blank\" : \"_self\"}\n onClick={serviceData[service].popup ? (e) => this.openPopup(serviceData[service].url, e) : null}\n analyticsId={serviceData[service].text}\n icon={serviceData[service].icon}\n ></stzh-button>\n </stzh-tooltip>\n </li>\n )}\n </ul>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=".sc-stzh-badge-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-badge-h{display:none}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error50)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,null,s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-button-h{display:none}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
|
|
2
|
+
//# sourceMappingURL=p-31a45529.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","class","label","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","href","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","nameWatcher","iconDisplay","response","fetch","pathMedia","status","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","setTimeout","a11yTitleWatcher","a11yTitle","svgHtml","iconId","title","querySelector","document","createElement","appendChild","innerHTML","outerHTML","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError50};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /** Text content of the badge */\n @Prop() label: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.label}\n </div>\n </Host>\n );\n }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space('xsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize('medium')};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize('large')};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space('xsmall')};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n @include font('heavy');\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper,\n &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: '';\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n /* Hover / Focus / Checked / Disabled of Radio Type */\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorSecondary60;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorSecondary60;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n /* Is expanded */\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n /* Badge positioning variants */\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Effect */\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n\n /* Default */\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Display a badge aligned to button or icons */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Whether the button is rounded */\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /** Size variant (abobe small breakpoint) */\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /** Size variant (abobe medium breakpoint) */\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /** Size variant (abobe large breakpoint) */\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /** Size variant (abobe ultra breakpoint) */\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Icon Position */\n @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n /** Checked status (if type is radio) */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset, if type is radio) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** The name of the input element (if type is button or radio) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element (if type is button or radio) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** `href` if the button should be used as link */\n @Prop() href: string = \"\";\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** Type of the button */\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n /** Whether the button is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether the button is active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Effect/Animation used */\n @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n /** Whether only an icon is used inside the button */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Whether padding left should be removed */\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /** Whether padding right should be removed */\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /** Access key of button (usually a number e.g. 1) */\n @Prop() buttonAccesskey: string;\n\n /** ID of button element */\n @Prop() buttonId: string;\n\n /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria disabled of link/button */\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Aria current of link/button */\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhButtonElement;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /** Change event (only called if type is radio) */\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div\n class=\"stzh-button__inner\"\n onClick={this.onClick}\n >\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n onClick={this.onClick}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n aria-current={this.a11yCurrent || null}\n id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /**\n * Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n */\n @Prop() name: string = \"\";\n\n /**\n * Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n if (response.status === 200) {\n const svgString = await response.text();\n\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n this.svgElement.classList.add('stzh-icon__svg');\n\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n\n this.a11yTitleWatcher(this.a11yTitle);\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement | null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n this.nameWatcher(this.name);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
|