npm - @oiz/stzh-components - Versions diffs - 3.3.0-beta4 → 3.3.0-beta5 - Mend

@oiz/stzh-components 3.3.0-beta4 → 3.3.0-beta5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (93) hide show

package/dist/components/stzh-row.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhRowCss = ":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::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}@media (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-small=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-small=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-small=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-small=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-small=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-small=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-small=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-small=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-small=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-small=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-small=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 900px){:host([span-medium=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-medium=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-medium=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-medium=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-medium=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-medium=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-medium=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-medium=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-medium=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-medium=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-medium=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-medium=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-large=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-large=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-large=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-large=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-large=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-large=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-large=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-large=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-large=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-large=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-large=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}@media (min-width: 1600px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell){flex:0 0 8.3333333333%;max-width:8.3333333333%}:host([span-ultra=\"2\"]) ::slotted(stzh-cell){flex:0 0 16.6666666667%;max-width:16.6666666667%}:host([span-ultra=\"3\"]) ::slotted(stzh-cell){flex:0 0 25%;max-width:25%}:host([span-ultra=\"4\"]) ::slotted(stzh-cell){flex:0 0 33.3333333333%;max-width:33.3333333333%}:host([span-ultra=\"5\"]) ::slotted(stzh-cell){flex:0 0 41.6666666667%;max-width:41.6666666667%}:host([span-ultra=\"6\"]) ::slotted(stzh-cell){flex:0 0 50%;max-width:50%}:host([span-ultra=\"7\"]) ::slotted(stzh-cell){flex:0 0 58.3333333333%;max-width:58.3333333333%}:host([span-ultra=\"8\"]) ::slotted(stzh-cell){flex:0 0 66.6666666667%;max-width:66.6666666667%}:host([span-ultra=\"9\"]) ::slotted(stzh-cell){flex:0 0 75%;max-width:75%}:host([span-ultra=\"10\"]) ::slotted(stzh-cell){flex:0 0 83.3333333333%;max-width:83.3333333333%}:host([span-ultra=\"11\"]) ::slotted(stzh-cell){flex:0 0 91.6666666667%;max-width:91.6666666667%}:host([span-ultra=\"12\"]) ::slotted(stzh-cell){flex:0 0 100%;max-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}";
+const stzhRowCss = ":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::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span=\"1\"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span=\"2\"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span=\"3\"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span=\"4\"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span=\"5\"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span=\"6\"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span=\"7\"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span=\"8\"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span=\"9\"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span=\"10\"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span=\"11\"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span=\"12\"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small=\"1\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"2\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"3\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small=\"4\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"5\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"6\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small=\"7\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"8\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"9\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small=\"10\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small=\"11\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small=\"12\"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium=\"1\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"2\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"3\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium=\"4\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"5\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"6\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium=\"7\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"8\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"9\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium=\"10\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium=\"11\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium=\"12\"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large=\"1\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"2\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"3\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large=\"4\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"5\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"6\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large=\"7\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"8\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"9\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large=\"10\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large=\"11\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large=\"12\"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra=\"1\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"2\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"3\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra=\"4\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"5\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"6\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra=\"7\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"8\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"9\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra=\"10\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra=\"11\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra=\"12\"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2);}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 900px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}@media screen and (min-width: 1260px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-large) / -2);margin-right:calc(var(--stzh-grid-gutter-large) / -2)}}@media screen and (min-width: 1600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-ultra) / -2);margin-right:calc(var(--stzh-grid-gutter-ultra) / -2)}}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}";
 const StzhRow$1 = /*@__PURE__*/ proxyCustomElement(class StzhRow extends HTMLElement {
   constructor() {

package/dist/components/stzh-row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-row.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~8pOAA8pO~~;;~~MCiBpqOA~~,SAAO;;;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhRow"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@for $i from 1 through $gridCells {\n // ~~Standard~~ ~~span~~\n :host([span=\"#{$i}\"]) ::slotted(stzh-cell) {\n ~~flex~~: 0 ~~0 #~~{~~100% / $gridCells * $i};\~~n ~~max~~-width: #{100% / $gridCells * $i};\n }\n}\n~~\n//~~ ~~Small breakpoint\n~~@~~media~~ ~~(min-width: 600px)~~ {\n ~~@for $i from 1 through $gridCells {\n~~ :host([span~~-small~~=\"#{$i}\"]) ::slotted(stzh-cell) {\n ~~flex~~: ~~0 0~~ #{100% / $gridCells * $i};\n ~~max-width: #{100% / $gridCells * $i~~};\n }\n }\n}\n\n~~// Medium breakpoint\n~~@~~media~~ (~~min-width: 900px~~) {\n @~~for~~ $i ~~from~~ 1 ~~through~~ $~~gridCells~~ {\n ~~:host~~(~~[span-medium=\"#{~~$i}\~~"]) ::slotted(~~stzh-~~cell)~~ {\n flex: 0 0 #{~~100%~~ / ~~$gridCells * $i}~~;\n ~~max~~-~~width~~: #{~~100%~~ / ~~$gridCells * $i}~~;\n }\n ~~}\n}\n\n// Large breakpoint\n~~@~~media~~ (~~min-width~~: ~~1260px~~) {\n ~~@for~~ $i ~~from~~ ~~1 through $gridCells {\~~n :~~host~~(~~[span-large=\"~~#{$i}\~~"])~~ ~~::slotted~~(~~stzh-cell~~) {\n ~~flex~~: ~~0 0~~ #{~~100%~~ / ~~$gridCells * $i}~~;\n ~~max~~-~~width~~: #{~~100%~~ / ~~$gridCells * $i}~~;\n ~~}\n~~ }\n}\n~~\n// Ultra breakpoint\n~~@~~media~~ (~~min-width~~: ~~1600px~~) {\n ~~@for $i from 1 through $gridCells {\n~~ :~~host~~(~~[span-ultra=\"~~#{$i}~~\"])~~ ~~::slotted(stzh~~-~~cell~~) {\n ~~flex~~: ~~0 0~~ #{~~100% /~~ $~~gridCells * $i~~}~~;\n max-width:~~ ~~#{100%~~ / ~~$gridCells * $i}~~;\n ~~}\n~~ }\n}\n~~\n.stzh-row {\n~~ ~~display:~~ ~~flex;\n flex-wrap~~: ~~wrap;\n justify-content:~~ ~~flex-start;\~~n ~~row-gap: var(--row-gap);\n~~ margin-left: calc(#{$~~gridGutter~~} / -2);\n margin-right: calc(#{$~~gridGutter~~} / -2);\n\n /* Justify content variants /\n\n &--justify-end {\n justify-content: flex-end;\n }\n\n &--justify-center {\n justify-content: center;\n }\n\n &--justify-between {\n justify-content: space-between;\n }\n\n &--justify-around {\n justify-content: space-around;\n }\n\n &--justify-evenly {\n justify-content: space-evenly;\n }\n\n / Align items variants /\n\n &--items-end {\n align-items: flex-end;\n }\n\n &--items-center {\n align-items: center;\n }\n\n &--items-baseline {\n align-items: baseline;\n }\n\n &--items-stretch {\n align-items: stretch;\n }\n\n / Align content variants /\n\n &--content-end {\n align-content: flex-end;\n }\n\n &--content-center {\n align-content: center;\n }\n\n &--content-between {\n align-content: space-between;\n }\n\n &--content-around {\n align-content: space-around;\n }\n\n &--content-evenly {\n align-content: space-evenly;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/\n @slot - Slot for `stzh-cell` elements\n /\n@Component({\n tag: \"stzh-row\",\n styleUrl: \"stzh-row.scss\",\n shadow: true\n})\nexport class StzhRow {\n /* Default span of each cell /\n @Prop({ reflect: true }) span: number = 12;\n /* Default span of each cell above small breakpoint /\n @Prop({ reflect: true }) spanSmall: number;\n /* Default span of each cell above medium breakpoint /\n @Prop({ reflect: true }) spanMedium: number;\n /* Default span of each cell above large breakpoint /\n @Prop({ reflect: true }) spanLarge: number;\n /* Default span of each cell above ultra breakpoint /\n @Prop({ reflect: true }) spanUltra: number;\n\n /* Controlling how cells are positioned along a container's main axis /\n @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n /* Control how cells items are positioned along a container's cross axis /\n @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n /* Utilities for controlling how rows are positioned in multi-row flex containers. */\n @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-row\": true,\n [`stzh-row--justify-${this.justify}`]: !!this.justify,\n [`stzh-row--items-${this.items}`]: !!this.items,\n [`stzh-row--content-${this.content}`]: !!this.content\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-row.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o8SAAo8S;;MCiB18SA,SAAO;;;;;gBAEsB,EAAE;;;;;mBAWS,OAAO;iBAGX,OAAO;mBAGH,OAAO;;EAE1D,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,UAAU,EAAE,IAAI;QAChB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QACrD,CAAC,mBAAmB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;QAC/C,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;OACtD,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhRow"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n @for $i from 1 through $gridCells {\n @if $breakpoint {\n :host([span-#{$breakpoint}=\"#{$i}\"])\n ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n @include mq($from: $breakpoint) {\n --cell-width: #{100% / ($gridCells / $i)};\n }\n }\n } @else {\n :host([span=\"#{$i}\"])\n ::slotted(stzh-cell:not([span])) {\n --cell-width: #{100% / ($gridCells / $i)};\n }\n }\n }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n @include cellProps($breakpoint);\n}\n\n.stzh-row {\n display: flex;\n\tflex-wrap: wrap;\n\tjustify-content: flex-start;\n row-gap: var(--row-gap);\n margin-left: calc(#{$gridGutter} / -2);\n margin-right: calc(#{$gridGutter} / -2);\n\n @include mq($from: small) {\n margin-left: calc(#{$gridGutterSmall} / -2);\n margin-right: calc(#{$gridGutterSmall} / -2);\n }\n\n @include mq($from: medium) {\n margin-left: calc(#{$gridGutterMedium} / -2);\n margin-right: calc(#{$gridGutterMedium} / -2);\n }\n\n @include mq($from: large) {\n margin-left: calc(#{$gridGutterLarge} / -2);\n margin-right: calc(#{$gridGutterLarge} / -2);\n }\n\n @include mq($from: ultra) {\n margin-left: calc(#{$gridGutterUltra} / -2);\n margin-right: calc(#{$gridGutterUltra} / -2);\n }\n\n /* Justify content variants /\n\n &--justify-end {\n justify-content: flex-end;\n }\n\n &--justify-center {\n justify-content: center;\n }\n\n &--justify-between {\n justify-content: space-between;\n }\n\n &--justify-around {\n justify-content: space-around;\n }\n\n &--justify-evenly {\n justify-content: space-evenly;\n }\n\n / Align items variants /\n\n &--items-end {\n align-items: flex-end;\n }\n\n &--items-center {\n align-items: center;\n }\n\n &--items-baseline {\n align-items: baseline;\n }\n\n &--items-stretch {\n align-items: stretch;\n }\n\n / Align content variants /\n\n &--content-end {\n align-content: flex-end;\n }\n\n &--content-center {\n align-content: center;\n }\n\n &--content-between {\n align-content: space-between;\n }\n\n &--content-around {\n align-content: space-around;\n }\n\n &--content-evenly {\n align-content: space-evenly;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/\n @slot - Slot for `stzh-cell` elements\n /\n@Component({\n tag: \"stzh-row\",\n styleUrl: \"stzh-row.scss\",\n shadow: true\n})\nexport class StzhRow {\n /* Default span of each cell /\n @Prop({ reflect: true }) span: number = 12;\n /* Default span of each cell above small breakpoint /\n @Prop({ reflect: true }) spanSmall: number;\n /* Default span of each cell above medium breakpoint /\n @Prop({ reflect: true }) spanMedium: number;\n /* Default span of each cell above large breakpoint /\n @Prop({ reflect: true }) spanLarge: number;\n /* Default span of each cell above ultra breakpoint /\n @Prop({ reflect: true }) spanUltra: number;\n\n /* Controlling how cells are positioned along a container's main axis /\n @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n /* Control how cells items are positioned along a container's cross axis /\n @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n /* Utilities for controlling how rows are positioned in multi-row flex containers. */\n @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-row\": true,\n [`stzh-row--justify-${this.justify}`]: !!this.justify,\n [`stzh-row--items-${this.items}`]: !!this.items,\n [`stzh-row--content-${this.content}`]: !!this.content\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-tooltip2.js CHANGED Viewed

@@ -141,6 +141,7 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
         trigger.addEventListener("focusout", this.onBlurTrigger);
       }
     };
+    this.initializedTooltip = false;
     this.open = false;
     this.label = "";
     this.content = "";
@@ -249,7 +250,6 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     }
   }
   componentDidRender() {
-    this.computePosition();
     const isStzh = isStzhElement(this.triggerFirstElement);
     if (this.hasTrigger("click")) {
       this.triggerFirstElement.setAttribute(isStzh ? "a11y-expanded" : "aria-expanded", this.open ? "true" : "false");
@@ -277,23 +277,35 @@ const StzhTooltip = /*@__PURE__*/ proxyCustomElement(class StzhTooltip extends H
     }
   }
   componentDidUpdate() {
-    if (this.trap) {
-      this.trap.updateContainerElements(this.contentElement);
+    if (this.open && !this.initializedTooltip) {
+      this.initializeAutoUpdate();
+      this.initializeFocusTrap();
+      this.initializedTooltip = true;
+    }
+    if (this.initializedTooltip) {
+      this.computePosition();
+      if (this.trap) {
+        this.trap.updateContainerElements(this.contentElement);
+      }
     }
   }
-  componentDidLoad() {
+  initializeAutoUpdate() {
     this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);
+  }
+  initializeFocusTrap() {
     if (this.interactive) {
       this.trap = createFocusTrap(this.contentElement, {
         fallbackFocus: this.contentElement,
         clickOutsideDeactivates: true,
         returnFocusOnDeactivate: true,
       });
-      if (this.open) {
-        this.trap.activate();
-      }
     }
+  }
+  componentDidLoad() {
     this.contentElement.hidden = !this.open;
+    if (this.open && this.trap) {
+      this.trap.activate();
+    }
   }
   connectedCallback() {
     this.init();

package/dist/components/stzh-tooltip2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-tooltip2.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 * @prop --stzh-tooltip-color: Global: Color of tooltip text\n * @prop --stzh-tooltip-background-color: Global: Background color of tooltip\n * @prop --stzh-tooltip-link-color: Global: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: Global: Hover color for link within tooltip\n /\n\n:host {\n display: contents;\n\n --color: var(--stzh-tooltip-color, #{$colorWhite});\n --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --padding: #{$tooltipPadding};\n --border-radius: #{$tooltipBorderRadius};\n --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n &[size=\"small\"] {\n --padding: #{$tooltipSmallPadding};\n }\n\n &[type=\"button\"] {\n --color: #{$colorMidnightblue70};\n --background-color: #{$colorCoolgrey10};\n --link-color: #{$colorMidnightblue70};\n --hover-link-color: #{$colorMidnightblue80};\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 --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 { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhTooltipClosedEvent,\n StzhTooltipCloseEvent,\n StzhTooltipOpenedEvent,\n StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\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 /* Visual type /\n @Prop({ reflect: true }) type: \"overlay\" \| \"button\" = \"overlay\";\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(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\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(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\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 =\n event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n const isClickTrigger =\n event.target === this.triggerElement \|\| 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 observer: MutationObserver;\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 {\n x = 0,\n y = 0,\n strategy = \"absolute\",\n placement,\n 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 = popperRect.top - clientY > topDistance;\n const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n const exceedsLeft = popperRect.left - clientX > leftDistance;\n const exceedsRight = 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 private init = () => {\n let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger;\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 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.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement.setAttribute(\n isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n `${this.id}-trigger-description`\n );\n }\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n } else {\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement.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(this.element, this.contentElement, this.computePosition);\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 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 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--type-${this.type}`]: 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 class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\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 class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\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\n curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n class=\"stzh-tooltip__content-slot\"\n >\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-tooltip2.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 * @prop --stzh-tooltip-color: Global: Color of tooltip text\n * @prop --stzh-tooltip-background-color: Global: Background color of tooltip\n * @prop --stzh-tooltip-link-color: Global: Color for link within tooltip\n * @prop --stzh-tooltip-hover-link-color: Global: Hover color for link within tooltip\n /\n\n:host {\n display: contents;\n\n --color: var(--stzh-tooltip-color, #{$colorWhite});\n --background-color: var(--stzh-tooltip-background-color, #{$colorCoolgrey60});\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --padding: #{$tooltipPadding};\n --border-radius: #{$tooltipBorderRadius};\n --link-color: var(--stzh-tooltip-link-color, #{$colorWhite});\n --hover-link-color: var(--stzh-tooltip-hover-link-color, #{$colorWhite70op});\n\n &[size=\"small\"] {\n --padding: #{$tooltipSmallPadding};\n }\n\n &[type=\"button\"] {\n --color: #{$colorMidnightblue70};\n --background-color: #{$colorCoolgrey10};\n --link-color: #{$colorMidnightblue70};\n --hover-link-color: #{$colorMidnightblue80};\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 --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 { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhTooltipClosedEvent,\n StzhTooltipCloseEvent,\n StzhTooltipOpenedEvent,\n StzhTooltipOpenEvent,\n} from \"../../index\";\n\nimport { arrow, autoUpdate, computePosition, flip, MiddlewareData, offset, Placement, shift } from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, stopAnimations } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n keyframes: [{ opacity: \"0\" }, { opacity: \"1\" }],\n options: { duration: 100, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [{ opacity: \"1\" }, { opacity: \"0\" }],\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 /* Visual type /\n @Prop({ reflect: true }) type: \"overlay\" \| \"button\" = \"overlay\";\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(this.contentElement, ANIMATION_SHOW.keyframes, ANIMATION_SHOW.options);\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(this.contentElement, ANIMATION_HIDE.keyframes, ANIMATION_HIDE.options);\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 =\n event.target !== this.contentElement && this.contentElement.contains(event.target as HTMLElement) === false;\n\n const isClickTrigger =\n event.target === this.triggerElement \|\| 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 observer: MutationObserver;\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 {\n x = 0,\n y = 0,\n strategy = \"absolute\",\n placement,\n 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 = popperRect.top - clientY > topDistance;\n const exceedsBottom = clientY - popperRect.bottom > bottomDistance;\n const exceedsLeft = popperRect.left - clientX > leftDistance;\n const exceedsRight = 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 private init = () => {\n let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children).find(child => !child.hasAttribute(\"slot\")) as HTMLElement;\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger;\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 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 const isStzh = isStzhElement(this.triggerFirstElement);\n\n if (this.hasTrigger(\"click\")) {\n this.triggerFirstElement.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement.setAttribute(\n isStzh ? \"a11y-describedby\" : \"aria-describedby\",\n `${this.id}-trigger-description`\n );\n }\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement.setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement.setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n } else {\n if (\n (isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\")) \|\|\n (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement.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 private initializedTooltip = false\n\n componentDidUpdate() {\n if (this.open && !this.initializedTooltip) {\n this.initializeAutoUpdate();\n this.initializeFocusTrap();\n this.initializedTooltip = true\n }\n\n if (this.initializedTooltip) {\n this.computePosition();\n if (this.trap) {\n this.trap.updateContainerElements(this.contentElement);\n }\n }\n }\n\n initializeAutoUpdate() {\n this.autoUpdateCleanup = autoUpdate(this.element, this.contentElement, this.computePosition);\n }\n\n initializeFocusTrap() {\n if (this.interactive) {\n this.trap = createFocusTrap(this.contentElement, {\n fallbackFocus: this.contentElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true,\n });\n }\n }\n\n componentDidLoad() {\n this.contentElement.hidden = !this.open;\n if (this.open && this.trap) {\n this.trap.activate();\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 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--type-${this.type}`]: 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 class=\"stzh-tooltip__trigger\" ref={el => (this.triggerElement = el as HTMLDivElement)}>\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 class=\"stzh-tooltip__close\" onClick={() => this.hide()} type=\"button\">\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\n curve={this.type === \"overlay\" ? \"none\" : \"caption\"}\n {...(this.type === \"button\" ? { font: \"heavy\" } : {})}\n class=\"stzh-tooltip__content-slot\"\n >\n {this.content ? this.content : <slot name=\"content\"></slot>}\n </stzh-text>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-upload.js CHANGED Viewed

@@ -14000,7 +14000,7 @@ const StzhUpload$1 = /*@__PURE__*/ proxyCustomElement(class StzhUpload extends H
     const description = this.description ? this.description : this.localization.description;
     return (h(Host, { "is-invalid": this.invalid || errorUsed }, h("div", { class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { ref: el => (this.hiddenInputContainerElement = el) }), h("div", { id: `${this.uploadId}-label` }, this.label && h("div", { class: "stzh-upload__label" }, this.label)), h("div", { class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { class: "stzh-upload__heading-wrapper" }, h("div", { class: "stzh-upload__heading-inner-wrapper" }, h("div", { class: "stzh-upload__heading" }, this.heading ? this.heading : this.localization.heading), h("div", { class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { class: "stzh-upload__button", variant: "secondary", size: "small", ref: el => (this.linkElement = el), label: this.button ? this.button : tc(this.localization.button, this.maxFiles), a11yDescribedby: `${this.uploadId}-label ${this.uploadId}-instruction ${this.uploadId}-description`, disabled: this.disabled, a11yControls: `${this.uploadId}-previews` }, h("stzh-icon", { slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { class: "stzh-upload__button-scan", variant: "secondary", size: "small", label: this.buttonScan ? this.buttonScan : tc(this.localization.buttonScan, this.maxFiles), onClick: this.onButtonScanClick }, h("stzh-icon", { slot: "icon", name: "camera" })))), h("div", { class: "stzh-upload__hint-wrapper" }, h("span", null, this.localization.buttonIntro)))), h("div", { class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, description
       .replace("{{fileformats}}", this.acceptedFiles ? this.acceptedFiles : "Alle")
-      .replace("{{filesize}}", `${this.maxFilesize}`))), ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error })), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), h("stzh-dialog", { ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection }, h("stzh-button", { class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, null, h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle1), h("div", { class: "stzh-upload-photographing__text-qrcode" }, h("div", null, h("stzh-text", null, this.localization.photographingText1), !!this.photographingUrlDetails && (h("stzh-link", { class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url, target: "_blank" }, this.photographingUrlDetails.url))), h("canvas", { class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) }))), h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle2), h("stzh-text", null, this.localization.photographingText2)))))));
+      .replace("{{filesize}}", `${this.maxFilesize}`))), h("div", { class: "stzh-upload__description-wrapper" }, ((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 && (h(StzhInputDescription, { classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error }))), h("div", { id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { class: "stzh-upload__previews-inner-wrapper" }, h("div", { class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), h("stzh-dialog", { ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection }, h("stzh-button", { class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "small", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, null, h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle1), h("div", { class: "stzh-upload-photographing__text-qrcode" }, h("div", null, h("stzh-text", null, this.localization.photographingText1), !!this.photographingUrlDetails && (h("stzh-link", { class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url, target: "_blank" }, this.photographingUrlDetails.url))), h("canvas", { class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) }))), h("div", { class: "stzh-upload-photographing__info" }, h("stzh-heading", { level: "3" }, this.localization.photographingTitle2), h("stzh-text", null, this.localization.photographingText2)))))));
   }
   get element() { return this; }
   static get watchers() { return {