@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/stzh-components/p-836c4cdf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as a,a as c,g as e}from"./p-c7bfac7a.js";import{h as i}from"./p-7e304ea3.js";import"./p-9b063923.js";const h='.sc-stzh-cta-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-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::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-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-white);--lead-color:var(--stzh-color-white);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    "cta cta cta cta"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      "cta cta cta cta cta cta cta cta"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      "cta cta cta cta cta cta cta cta"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      "cta cta cta cta"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      "cta cta cta cta cta cta cta cta"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}';var n=0;const r=class{constructor(a){t(this,a);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.stzhClick=s(this,"stzhClick",7);this.focusedByInput=false;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-cta",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-cta",originalEvent:t})};this.onClick=t=>{this.stzhClick.emit({component:"stzh-cta",originalEvent:t,href:this.href})};this.handlePlaceholderButtonResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateButtonWidthByResize)};this.updateButtonWidthByResize=()=>{if(!this.placeholderButton){return}const{width:t}=this.placeholderButton.getBoundingClientRect();this.element.style.setProperty("--button-width",`${t}px`)};this.heading="";this.lead="";this.label="";this.href="";this.stickyDisabled=true;this.loaded=false}componentDidLoad(){this.stickyDisabled=n>1;this.placeholderButtonResizeObserver=new ResizeObserver(this.handlePlaceholderButtonResize);if(this.placeholderButton){this.placeholderButtonResizeObserver.observe(this.placeholderButton)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateButtonWidthByResize();window.setTimeout((()=>{this.loaded=true}),250)}))}))}componentDidRender(){if(this.placeholderButton&&this.placeholderButtonResizeObserver){this.placeholderButtonResizeObserver.observe(this.placeholderButton)}}connectedCallback(){n=n+1}disconnectedCallback(){var t;n=n-1;(t=this.placeholderButtonResizeObserver)===null||t===void 0?void 0:t.disconnect()}renderButtons(t){return a("div",{class:"stzh-cta__buttons"},t==="small"&&a("div",{class:"stzh-cta__button is-placeholder",ref:t=>this.placeholderButton=t},a("span",{class:"stzh-cta__button-text"},this.label),a("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})),this.href?a("a",{class:"stzh-cta__button",href:this.href,ref:t=>this.button=t,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},a("span",{class:"stzh-cta__button-text"},this.label),a("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})):a("button",{class:"stzh-cta__button",ref:t=>this.button=t,onFocus:this.onFocus,onBlur:this.onBlur},a("span",{class:"stzh-cta__button-text"},this.label),a("stzh-icon",{class:"stzh-cta__button-icon",name:"arrow-right"})))}render(){const t=i(this.element,"heading");const s=i(this.element,"lead");const e=!!this.heading||t;const h=!!this.lead||s;const n=e||h;const r=!n?"small":"default";const o={"stzh-cta":true,"stzh-cta--is-sticky-disabled":this.stickyDisabled,"stzh-cta--is-not-loaded":!this.loaded,"stzh-cta--has-heading":e,"stzh-cta--has-lead":h,[`stzh-cta--size-${r}`]:!!r};return a(c,{size:r,tabindex:"-1",onFocus:this.onRootFocus},a("article",{class:o,"data-stzh-sticky-width-container":true},a("div",{class:"stzh-cta__wrapper"},a("div",{class:"stzh-cta__heading"},this.heading?this.heading:a("slot",{name:"heading"})),a("div",{class:"stzh-cta__lead"},this.lead?this.lead:a("slot",{name:"lead"})),a("stzh-sticky",{name:"cta",class:"stzh-cta__sticky",position:"fixed",bleeding:true,disableStickyBottom:this.stickyDisabled,disableStickyTop:true},this.renderButtons(r)))))}get element(){return e(this)}};r.style=h;export{r as stzh_cta};
-//# sourceMappingURL=p-836c4cdf.entry.js.map

package/dist/stzh-components/p-836c4cdf.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhCtaCss","counter","StzhCta","this","focusedByInput","onRootFocus","button","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","href","handlePlaceholderButtonResize","debounceResize","cancelAnimationFrame","requestAnimationFrame","updateButtonWidthByResize","placeholderButton","width","getBoundingClientRect","style","setProperty","componentDidLoad","stickyDisabled","placeholderButtonResizeObserver","ResizeObserver","observe","setTimeout","loaded","componentDidRender","connectedCallback","disconnectedCallback","_a","disconnect","renderButtons","size","h","class","ref","el","label","name","render","headingSlotUsed","hasSlot","leadSlotUsed","hasHeading","heading","hasLead","lead","hasHeadingOrLead","classes","Host","tabindex","position","bleeding","disableStickyBottom","disableStickyTop"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n  --stzh-flyingfocus-color: #{$colorWhite};\n\n  --background-color: #{$ctaBackgroundColor};\n  --heading-color: #{$colorWhite};\n  --lead-color: #{$colorWhite};\n  --sticky-background-color: var(--background-color);\n  --button-color: #{$colorWhite};\n  --button-background-color: #{$colorPrimary70};\n  --button-border-radius: #{$buttonBorderRadius};\n\n  --hover-button-color: #{$colorWhite};\n  --hover-button-background-color: #{$colorSecondary60};\n\n  --stuck-background-color: #{$colorGrey10};\n  --stuck-heading-color: #{$colorPrimary70};\n  --stuck-lead-color: #{$baseColor};\n  --stuck-sticky-background-color: var(--background-color);\n\n  --grid-template-areas: var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-cta-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    );\n  }\n\n  &[size=\"small\"] {\n    --button-background-color: transparent;\n\n    --hover-button-color: var(--button-color);\n    --hover-button-background-color: var(--button-background-color);\n\n    --stuck-background-color: var(--background-color);\n\n    @include mq($from: small) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-cta-small-grid-template-areas,\n        \"cta cta cta cta cta cta cta cta\"\n      );\n    }\n  }\n}\n\n@keyframes stzh-cta-effect {\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-cta {\n  @include font('heavy');\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: cta;\n    background-color: var(--background-color);\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n    background-color: var(--stuck-background-color);\n  }\n\n  &__heading,\n  &__lead {\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-left', 'medium');\n      @include spaceCurve('margin-right', 'medium');\n      @include spaceCurve('margin-bottom', 'medium');\n\n      @include mq($from: small) {\n        margin-bottom: space('xxlarge');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('xxxlarge');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xxxxlarge');\n      }\n    }\n  }\n\n  &__heading {\n    @include fontCurve('h2', 'heading');\n    color: var(--heading-color);\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n    color: var(--stuck-heading-color);\n  }\n\n  &__lead {\n    @include fontCurve('p1');\n    color: var(--lead-color);\n\n    &:not(:empty) {\n      @include spaceCurve('padding-top', 'small');\n    }\n  }\n\n  &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n    color: var(--stuck-lead-color);\n  }\n\n  &__button {\n    @include font('heavy');\n    @include fontSize('centi');\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    border-radius: var(--button-border-radius);\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    gap: space('xsmall');\n    transition-property: width, height, min-height, color, background-color, font-size, padding;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: auto;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    @include fontSize('milli');\n\n    @include mq($from: medium) {\n      @include fontSize('centi');\n    }\n  }\n\n  &__button-text {\n    display: block;\n  }\n\n  &__button-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n  }\n\n  &__sticky {\n    @include spaceCurve('--padding-left', 'medium');\n    @include spaceCurve('--padding-right', 'medium');\n    --padding-top: #{space('large')};\n    --padding-bottom: #{space('large')};\n    --background-color: var(--sticky-background-color);\n    --stuck-background-color: var(--stuck-sticky-background-color);\n    --stuck-padding-left: 0px;\n    --stuck-padding-right: 0px;\n\n    display: block;\n  }\n\n  &__buttons {\n    display: flex;\n    gap: space('medium');\n  }\n\n  /* Has lead variant */\n\n  &--has-lead &__heading {\n    margin-bottom: 0;\n  }\n\n  /* Default variant; has heading, lead or multiple buttons */\n\n  &--size-default &__wrapper {\n    padding-top: space('large');\n    padding-bottom: space('large');\n\n    @include mq($from: small) {\n      @include spaceCurve('padding-top', 'large');\n      @include spaceCurve('padding-bottom', 'large');\n    }\n  }\n\n  &--size-default &__button {\n    padding: space('xsmall') space('xlarge');\n    min-height: $formInputHeight;\n  }\n\n  &--size-default &__button-icon {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n\n  &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n    min-height: $formInputHeightSmall;\n\n    @include mq($from: medium) {\n      min-height: $formInputHeight;\n    }\n  }\n\n  &--size-default &__sticky {\n    margin-top: calc(var(--padding-top) / -1);\n    margin-bottom: calc(var(--padding-bottom) / -1);\n  }\n\n  /* Small variant; has no heading, lead or multiple buttons */\n\n  &--size-small &__button {\n    width: 100%;\n    max-width: 100%;\n    gap: space('medium');\n\n    &.is-placeholder {\n      width: auto;\n      max-width: none;\n      visibility: hidden;\n      position: absolute;\n      pointer-events: none;\n    }\n  }\n\n  &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n    width: var(--button-width, auto);\n  }\n\n  &--size-small &__button-icon {\n    --size: #{iconSize('large')};\n  }\n\n  &--size-small &__sticky {\n    @include spaceCurve('--padding-top', 'large');\n    @include spaceCurve('--padding-bottom', 'large');\n\n    &[is-stuck]:not([is-stuck=\"false\"]) {\n      @include spaceCurve('--padding-top', 'medium');\n      @include spaceCurve('--padding-bottom', 'medium');\n    }\n  }\n\n  /* Not loaded */\n\n  &--is-not-loaded {\n    visibility: hidden;\n  }\n\n  &--is-not-loaded &__wrapper,\n  &--is-not-loaded &__heading,\n  &--is-not-loaded &__lead,\n  &--is-not-loaded &__button {\n    transition-duration: 0ms;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent, StzhCtaClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhCtaClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\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-cta\",\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-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-cta\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAa,8tfCkBnB,IAAIC,EAAU,E,MAYDC,EAAO,M,sIAoCVC,KAAAC,eAA0B,MAG1BD,KAAAE,YAAc,KACpB,IAAKF,KAAKC,eAAgB,CACxBD,KAAKG,OAAOC,O,CAGdJ,KAAKC,eAAiB,KAAK,EAGrBD,KAAAK,QAAWC,IACjBN,KAAKC,eAAiB,KAEtB,MAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcP,GAC3BP,KAAKe,UAAUC,KAAK,CAClBC,UAAW,WACXC,cAAeZ,GACf,EAGIN,KAAAmB,OAAUb,IAChB,MAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcM,GAC3BpB,KAAKqB,SAASL,KAAK,CACjBC,UAAW,WACXC,cAAeZ,GACf,EAGIN,KAAAsB,QAAWhB,IACjBN,KAAKuB,UAAUP,KAAK,CAClBC,UAAW,WACXC,cAAeZ,EACfkB,KAAMxB,KAAKwB,MACX,EAGIxB,KAAAyB,8BAAgC,KACtC,GAAIzB,KAAK0B,eAAgB,CACvBhB,OAAOiB,qBAAqB3B,KAAK0B,e,CAGnC1B,KAAK0B,eAAiBE,sBAAsB5B,KAAK6B,0BAA0B,EAGrE7B,KAAA6B,0BAA4B,KAClC,IAAK7B,KAAK8B,kBAAmB,CAC3B,M,CAGF,MAAMC,MAAEA,GAAU/B,KAAK8B,kBAAkBE,wBACzChC,KAAKa,QAAQoB,MAAMC,YAAY,iBAAkB,GAAGH,MAAU,E,aAjGtC,G,UAGH,G,WAGC,G,UAGD,G,oBAOW,K,YAEP,K,CAkF3B,gBAAAI,GACEnC,KAAKoC,eAAiBtC,EAAU,EAEhCE,KAAKqC,gCAAkC,IAAIC,eAAetC,KAAKyB,+BAC/D,GAAIzB,KAAK8B,kBAAmB,CAC1B9B,KAAKqC,gCAAgCE,QAAQvC,KAAK8B,kB,CAGpDF,uBAAsB,KACpBA,uBAAsB,KACpB5B,KAAK6B,4BAELnB,OAAO8B,YAAW,KAChBxC,KAAKyC,OAAS,IAAI,GACjB,IAAI,GACP,G,CAIN,kBAAAC,GACE,GAAI1C,KAAK8B,mBAAqB9B,KAAKqC,gCAAiC,CAClErC,KAAKqC,gCAAgCE,QAAQvC,KAAK8B,kB,EAItD,iBAAAa,GACE7C,EAAUA,EAAU,C,CAGtB,oBAAA8C,G,MAGE9C,EAAUA,EAAU,GAEpB+C,EAAA7C,KAAKqC,mCAA+B,MAAAQ,SAAA,SAAAA,EAAEC,Y,CAGhC,aAAAC,CAAcC,GACpB,OACEC,EAAA,OAAKC,MAAM,qBACRF,IAAS,SACRC,EAAA,OACEC,MAAM,kCACNC,IAAMC,GAAQpD,KAAK8B,kBAAoBsB,GAEvCH,EAAA,QAAMC,MAAM,yBAAyBlD,KAAKqD,OAC1CJ,EAAA,aAAWC,MAAM,wBAAwBI,KAAK,iBAIjDtD,KAAKwB,KAEJyB,EAAA,KACEC,MAAM,mBACN1B,KAAMxB,KAAKwB,KACX2B,IAAMC,GAAQpD,KAAKG,OAASiD,EAC5B/C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,OACbG,QAAStB,KAAKsB,SAEd2B,EAAA,QAAMC,MAAM,yBAAyBlD,KAAKqD,OAC1CJ,EAAA,aAAWC,MAAM,wBAAwBI,KAAK,iBAGhDL,EAAA,UACEC,MAAM,mBACNC,IAAMC,GAAQpD,KAAKG,OAASiD,EAC5B/C,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEb8B,EAAA,QAAMC,MAAM,yBAAyBlD,KAAKqD,OAC1CJ,EAAA,aAAWC,MAAM,wBAAwBI,KAAK,iB,CAOxD,MAAAC,GACE,MAAMC,EAAkBC,EAAQzD,KAAKa,QAAS,WAC9C,MAAM6C,EAAeD,EAAQzD,KAAKa,QAAS,QAE3C,MAAM8C,IAAe3D,KAAK4D,SAAWJ,EACrC,MAAMK,IAAY7D,KAAK8D,MAAQJ,EAC/B,MAAMK,EAAmBJ,GAAcE,EAEvC,MAAMb,GAAQe,EACV,QACA,UAEJ,MAAMC,EAAU,CACd,WAAY,KACZ,+BAAgChE,KAAKoC,eACrC,2BAA4BpC,KAAKyC,OACjC,wBAAyBkB,EACzB,qBAAsBE,EACtB,CAAC,kBAAkBb,OAAWA,GAGhC,OACEC,EAACgB,EAAI,CAACjB,KAAMA,EAAMkB,SAAS,KAAK7D,QAASL,KAAKE,aAC5C+C,EAAA,WAASC,MAAOc,EAAO,yCACrBf,EAAA,OAAKC,MAAM,qBACTD,EAAA,OAAKC,MAAM,qBACRlD,KAAK4D,QAAU5D,KAAK4D,QAAUX,EAAA,QAAMK,KAAK,aAE5CL,EAAA,OAAKC,MAAM,kBACRlD,KAAK8D,KAAO9D,KAAK8D,KAAOb,EAAA,QAAMK,KAAK,UAEtCL,EAAA,eACEK,KAAK,MACLJ,MAAM,mBACNiB,SAAS,QACTC,SAAQ,KACRC,oBAAqBrE,KAAKoC,eAC1BkC,iBAAkB,MAEjBtE,KAAK+C,cAAcC,M"}

package/dist/stzh-components/p-93721591.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhTextandimageCss","StzhTextandimage","this","init","ratios","element","querySelectorAll","galleries","leftSlotUsed","hasSlot","rightSlotUsed","size","forEach","button","setPropsIfNull","ratio","ratioSmall","variant","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","isSingle","classes","h","Host","single","class","name","onSlotchange","forceUpdate"],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-textandimage-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\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 leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single\": isSingle,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAsB,62J,MCoBfC,EAAgB,M,yBAQnBC,KAAAC,KAAO,KACb,MAAMC,EAASF,KAAKG,QAAQC,iBAC1B,gHAGF,MAAMC,EAAYL,KAAKG,QAAQC,iBAC7B,2DAGF,MAAME,EAAeC,EAAQP,KAAKG,QAAS,QAC3C,MAAMK,EAAgBD,EAAQP,KAAKG,QAAS,SAE5C,GAAIH,KAAKS,OAAS,WAAaH,GAAgBE,GAAgB,CAC7DN,EAAOQ,SAASC,IACdC,EAAeD,EAAQ,CACrBE,MAAO,MACPC,WAAY,QACY,G,CAI9BT,EAAUK,SAASC,IACjBC,EAAeD,EAAQ,CACrBI,QAAS,UACiB,GAC5B,E,UA/B2D,S,CAkC/D,iBAAAC,GACEhB,KAAKC,OAELD,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,MAC1CD,KAAKiB,SAASE,QAAQnB,KAAKG,QAAS,CAClCiB,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAItB,KAAKiB,SAAU,CACjBjB,KAAKiB,SAASM,Y,EAIlB,MAAAC,GACE,MAAMlB,EAAeC,EAAQP,KAAKG,QAAS,QAC3C,MAAMK,EAAgBD,EAAQP,KAAKG,QAAS,SAE5C,MAAMsB,IAAanB,GAAgBE,GAEnC,MAAMkB,EAAU,CACd,oBAAqB,KACrB,+BAAgCD,EAChC,8BAA+BnB,EAC/B,+BAAgCE,EAChC,CAAC,2BAA2BR,KAAKS,UAAWT,KAAKS,MAGnD,OACEkB,EAACC,EAAI,CAACC,OAAQJ,GACZE,EAAA,OAAKG,MAAOJ,GACVC,EAAA,OAAKG,MAAM,2BACTH,EAAA,QAAMI,KAAK,OAAOC,aAAc,IAAMC,EAAYjC,KAAKG,YAGzDwB,EAAA,OAAKG,MAAM,4BACTH,EAAA,QAAMI,KAAK,QAAQC,aAAc,IAAMC,EAAYjC,KAAKG,a"}

package/dist/stzh-components/p-9f9d53a0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhHeaderCss","CLASS_BODY_OPEN","StzhHeader","this","lastOpener","flyoutOpenedByMetanavItem","handleMenuListFocusout","event","isNextFocusOutOfMenuList","currentTarget","contains","relatedTarget","isMedium","closeMenuItem","handleBurgerClick","async","closeMetanavItem","flyoutOpen","element","querySelector","window","setTimeout","focus","updatePosition","handleBackdropClick","handleMetanavItemClick","item","stzhMetanavItemClick","emit","component","originalEvent","handleMenuItemClick","stzhMenuItemClick","handleSearchInput","searchValue","searchInput","value","stzhSearchChange","handleSearchChange","stzhSearchChanged","handleLanguageClick","dropdownOption","languagePreventUrlchange","preventDefault","languageActive","stzhLanguageChange","handleFlyoutResize","resizeMenunavElement","handleResize","sticky","debounceResize","cancelAnimationFrame","requestAnimationFrame","readTask","media","matches","mainHeight","_a","mainElement","offsetHeight","metabarHeight","_b","metabarElement","logobarHeight","_c","logobarElement","headerTop","offsetTop","headerHeight","writeTask","document","documentElement","style","setProperty","scrollListener","handleKeydown","key","flyoutOpenWatcher","open","currentOpenMenuItem","currentOpenMetanavItem","currentOpenLanguage","body","classList","remove","enableSiblings","trap","deactivate","add","disableSiblings","activate","fixedWatcher","paddingTop","fixed","waitForNextRender","fixedTransition","stickyWatcher","activateSticky","stickyActive","disableSticky","belowStayStickyPoint","scrollingUp","belowStartStickyPoint","currentScrollY","scrollY","lastScrollY","headerOverlap","hideLogo","searchValueWatcher","newValue","searchFilled","menuItemsWatcher","_menuItems","JSON","parse","map","menuItem","index","Object","assign","id","metanavItemsWatcher","_metanavItems","metanavItem","languagesWatcher","_languages","getSiblings","_parentElement","Array","from","children","filter","child","forEach","sibling","setAttribute","removeAttribute","Promise","resolve","renderPromiseResolve","openSubmenuElement","menunavElement","height","getBoundingClientRect","openMenuItem","scrollTop","firstButtonOrLink","tabbable","focusOpener","openMetanavItem","openMetanavSubmenuElement","openLanguage","closeLanguage","componentWillLoad","menuItems","metanavItems","languages","localization","stzhComponents","utils","fetchTranslations","componentDidRender","flyoutElement","flyoutResizeObserver","observe","componentDidLoad","createFocusTrap","createBaseFocusTrapOptions","initialFocus","ResizeObserver","connectedCallback","parentElement","resizeObserver","disconnectedCallback","disconnect","render","metanavBeforeUsed","hasSlot","metanavAfterUsed","classes","stay","stayAndShowInMobileMenu","length","languageStay","searchAction","activeLanguage","getLocale","activeLanguageOption","find","renderMetanavItemButton","additionalClasses","additionalAttributes","Element","items","itemButton","href","h","target","class","important","labelHidden","labelShort","label","icon","iconOpen","name","badge","badgeEmpty","type","badgeType","Host","ref","el","logoAnalyticsId","menuId","onClick","menuLabel","action","role","searchId","searchFieldName","onChange","onInput","searchLabel","metanavId","Fragment","e","placement","distance","variant","size","slot","childItem","importantSubmenu","counter","languageId","languageLabel","text","language","active","navigationLabel","onFocusout","menuBackLabel","_d","_e","iconOnly","closeMetanavMenuLabel","replace","_f","dialogLanguageTitle"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/**\n * @prop --logo-width: Width of logo\n * @prop --logo-height: Height of logo\n * @prop --logobar-background-color: Background color of logobar\n * @prop --stzh-header-logobar-background-color: **Global**: Background color of logobar\n *\n * @prop --stzh-header-height: **Global**: Height of header (readonly variable on `<html>`)\n * @prop --stzh-header-main-height: **Global**: Height of main header part (readonly variable on `<html>`)\n * @prop --stzh-header-metabar-height: **Global**: Height of metabar header (readonly variable on `<html>`)\n * @prop --stzh-header-logobar-height: **Global**: Height of logobar header (readonly variable on `<html>`)\n * @prop --stzh-header-is-stuck: **Global**: Whether head is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-header-is-not-stuck: **Global**: Whether head is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --logo-width: auto;\n  --logo-height: 100%;\n  --logobar-background-color: #{$headerLogobarBackgroundColor};\n\n  @media print {\n    display: none;\n  }\n\n  &[logo-type=\"vbz\"],\n  &[logo-type=\"aoz\"],\n  &[logo-type=\"pkzh\"],\n  &[logo-type=\"uvz\"] {\n    --logo-height: 31px;\n\n    @include mq($from: medium) {\n      --logo-height: 35px;\n    }\n\n    @include mq($from: ultra) {\n      --logo-height: 53px;\n    }\n  }\n\n  ::slotted([slot=\"logo\"]) {\n    width: var(--logo-width);\n    height: var(--logo-height);\n  }\n}\n\n.stzh-header {\n  @include fontSize('milli');\n  color: $colorGrey90;\n\n  &__inner,\n  &__main {\n    max-width: calc(100vw - var(--stzh-scrollbar-width));\n    // transition-property: box-shadow;\n    // transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__inner {\n    @include mq($from: small) {\n      position: relative;\n      z-index: $zIndexHeader;\n    }\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__main {\n    display: flex;\n    flex-direction: column;\n    background-color: $colorWhite;\n\n\t\t@include mq($to: small) {\n      position: relative;\n      z-index: $zIndexHeader;\n    }\n  }\n\n  &__metabar {\n    background-color: $colorCoolgrey10;\n  }\n\n  &__metabar-inner {\n    @include container;\n    display: flex;\n    align-items: center;\n    height: $headerMetabarHeight;\n\n\t\t// @include mq($to: medium) {\n    //   // overwrite container margin for regular\n    //   // to be able to use fullwidth of metabar\n    //   margin: 0 auto;\n    // }\n\n\t\t@include mq($from: medium) {\n      height: $headerMetabarHeightMediumUp;\n    }\n  }\n\n  &__burger,\n  &__search,\n  &__metanav-item {\n    color: $colorGrey90;\n    transition: color $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorBlack;\n    }\n  }\n\n  &__burger {\n    @include font('heavy');\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin-right: space('medium');\n    gap: space('medium');\n    color: $colorPrimary70;\n\n    @include mq($from: small) {\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      margin-right: space('xxxxlarge');\n    }\n  }\n\n  &__burger-icon {\n    &.is-open {\n      display: none;\n    }\n  }\n\n  &__burger.is-open &__burger-icon.is-open {\n    display: inline-flex;\n  }\n\n  &__burger.is-open &__burger-icon.is-close {\n    display: none;\n  }\n\n  &__metabar-search {\n    overflow: hidden; // prevents input from going out in smaller viewports\n    margin-right: space('medium');\n    transition-property: width;\n    transition-duration: $baseTransitionAnimationSpeed;\n    width: 40px;\n    max-width: 345px;\n\n    &:focus-within {\n      width: 100%;\n    }\n\n    @include mq($from: small) {\n      width: 96px;\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      // flex-shrink: 0; // prevent shrinking when metanav is in way\n      width: 160px;\n      margin-left: 0;\n      margin-right: space('xxxxlarge');\n    }\n  }\n\n  &__search {\n    position: relative;\n    display: block;\n    width: 100%;\n  }\n\n  &__search-input {\n    // width: 96px;\n    width: 100%;\n    max-width: 100%;\n    background-color: transparent;\n    color: transparent;\n    font-family: inherit;\n    font-size: inherit;\n    border: none;\n    padding: space('xsmall');\n    padding-left: 0;\n    padding-right: 0;\n    height: $formInputHeightSmall;\n    transition-property: padding-left, padding-right, background-color, color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      color: $colorSecondary60;\n      padding-left: calc(#{iconSize()} + #{space('medium')});\n    }\n\n    &:focus {\n      // width: 345px;\n      color: $colorSecondary60;\n      background-color: $colorWhite;\n      padding-left: calc(#{space('medium')} + #{iconSize()} + #{space('medium')});\n      padding-right: space('xlarge');\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  &__search-input:focus ~ &__search-icon,\n  &__search-input:focus ~ &__search-text {\n    transform: translate(space('medium'), -50%);\n  }\n\n  &__search-input:focus ~ &__search-text {\n    color: $colorGrey70;\n  }\n\n  &__search-text,\n  &__search-icon {\n    position: absolute;\n    top: 50%;\n    transform: translate(0, -50%);\n    transition: transform $baseTransitionAnimationSpeed;\n  }\n\n  &__search-icon {\n    left: 0px;\n\n    @include mq($to: small) {\n      transform: translate((40px - 24px) / 2, -50%);\n    }\n  }\n\n  &__search-text {\n    pointer-events: none;\n    left: calc(#{iconSize()} + #{space('medium')});\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__metabar-nav {\n    display: flex;\n    align-items: center;\n    margin-left: auto;\n    gap: space('medium');\n\n    @include mq($from: small) {\n      gap: space('xlarge');\n    }\n\n    @include mq($from: medium) {\n      gap: space('xxlarge');\n    }\n  }\n\n  &__metanav-popover {\n    --width: auto;\n    --min-width: 254px;\n\n    &.is-langnav {\n      --min-width: 140px;\n    }\n  }\n\n  &__metanav-item {\n    display: none;\n    gap: space('small');\n    align-items: center;\n    justify-content: center;\n    appearance: none;\n    background-color: transparent;\n    padding: 0;\n    border: none;\n    text-decoration: none;\n    font-size: 100%;\n    font-family: inherit;\n    white-space: nowrap;\n    min-width: 40px;\n\n    @include mq($from: medium) {\n      display: flex;\n    }\n\n    &[aria-expanded=\"true\"] {\n      color: $colorPrimary70;\n    }\n\n    &.is-heavy {\n      @include font('heavy');\n    }\n\n    &.is-stay {\n      display: flex;\n    }\n\n    &.is-popover-mobile {\n      @include mq($from: medium) {\n        display: none;\n      }\n    }\n\n    &.is-popover-desktop {\n      display: none;\n\n      @include mq($from: medium) {\n        display: flex;\n      }\n    }\n  }\n\n  &__metanav-menu-item {\n    &.is-heavy {\n      @include font('heavy');\n    }\n  }\n\n  &__metanav-item-text {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n\n    &.is-vhidden {\n      @include visuallyhidden;\n    }\n\n    &.has-no-short-label {\n      @include mq($to: small) {\n        @include visuallyhidden;\n      }\n    }\n  }\n\n  &__metanav-item-text-label-long {\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__metanav-item-text-label-short {\n    @include mq($from: small) {\n      display: none;\n    }\n  }\n\n  &__metanav-icon-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &__metanav-icon-badge {\n    position: absolute;\n    top: -4px;\n    right: -4px;\n  }\n\n  &__metanav-icon {\n    &.is-open {\n      display: none;\n    }\n  }\n\n  &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-open {\n    display: inline-flex;\n  }\n\n  &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-close {\n    display: none;\n  }\n\n  // &__metabar-login {\n  //   display: flex;\n  //   flex-basis: 50%;\n\n  //   &:not(:empty) {\n  // \t\t@include mq($from: medium) {\n  //       flex-basis: auto;\n  //       margin-left: space('small');\n  //     }\n  //   }\n  // }\n\n  // &__metabar-langnav {\n  //   &:not(:empty) {\n  //     @include mq($from: medium) {\n  //       margin-left: space('medium');\n  //     }\n  //   }\n  // }\n\n  &__logobar {\n    display: flex;\n\n    @include mq($from: ultra) {\n      margin-left: auto;\n      margin-right: auto;\n      width: $containerMaxWidth;\n    }\n  }\n\n  &__logobar-logo {\n    box-sizing: content-box;\n    display: flex;\n    overflow: hidden;\n    flex-shrink: 0;\n  }\n\n  &__logobar-decoration {\n    background-color: var(--logobar-background-color);\n    flex-grow: 1;\n\n\t\t@include mq($from: ultra) {\n      width: calc((100% - 553px) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n      margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n\t\t}\n  }\n\n  &__logo-link {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n    padding-top: 14px;\n    padding-bottom: 11px;\n    padding-left: $containerMargin;\n    display: inline-flex;\n    width: 288px;\n\t\theight: 66px;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n      width: 300px;\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: medium) {\n      width: 399px;\n\t\t\theight: 88px;\n      padding-top: 18px;\n      padding-bottom: 18px;\n\t\t\tpadding-left: $containerMarginMedium;\n\t\t}\n\n\t\t@include mq($from: large) {\n      width: 617px;\n\t\t\theight: 135px;\n      padding-top: 28px;\n      padding-bottom: 24px;\n\t\t\tpadding-left: $containerMarginLarge;\n    }\n\n\t\t@include mq($from: ultra) {\n      width: 553px;\n      padding-left: 0;\n    }\n  }\n\n  &__flyout {\n    @include fontSize('milli');\n    z-index: calc(#{$zIndexHeader} - 1);\n    position: fixed;\n    visibility: hidden;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100dvw;\n    height: 100dvh;\n    overflow: auto;\n    transition: visibility $baseTransitionAnimationSpeed;\n\n    @media (min-height: 580px) {\n      overflow: hidden;\n    }\n\n    @include mq($from: medium) {\n      overflow: hidden;\n    }\n  }\n\n  &__flyout-backdrop {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: $colorBlack40op;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__menu {\n    position: absolute;\n    width: 100%;\n    height: auto;\n    background-color: $colorSecondary30;\n    display: grid;\n    grid-template-rows: auto auto;\n    transition-property: opacity, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(-100%);\n    opacity: 0;\n\n    @media (min-height: 580px) {\n      height: 100%;\n      grid-template-rows: minmax(0, 1fr) auto;\n    }\n\n    @include mq($from: medium) {\n      height: 100%;\n      grid-template-rows: minmax(0, 1fr) auto;\n    }\n\n    @include mq($from: medium) {\n      width: 335px;\n    }\n\n    @include mq($from: large) {\n      width: 374px;\n    }\n\n    @include mq($from: large) {\n      width: 439px;\n    }\n\n    @include mq($from: ultra) {\n      width: calc((439px - #{$containerMarginLarge}) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2))\n    }\n  }\n\n  &__menu-nav {\n    position: relative;\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    @media (min-height: 580px) {\n      overflow-y: auto;\n    }\n\n    @include mq($from: medium) {\n      overflow-y: auto;\n      position: static;\n    }\n  }\n\n  &__menu-metanav {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'medium');\n    background-color: $colorSecondary20;\n\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__menu-metanav-nav {\n    max-width: 375px;\n  }\n\n  &__menu-list,\n  &__menu-metanav-list {\n    display: block;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  &__menu-list,\n  &__menu-metanav-list.is-level-2 {\n    padding-top: calc(var(--stzh-header-main-height) + #{space('xxxlarge')});\n    padding-bottom: space('xxxlarge');\n\n    @include mq($from: medium) {\n      padding-top: calc(var(--stzh-header-main-height) + #{space('huge')});\n    }\n  }\n\n  &__menu-list.is-level-2,\n  &__menu-metanav-list.is-level-2 {\n    overflow: auto;\n    background-color: $colorSecondary20;\n    visibility: hidden;\n    opacity: 0;\n    transform: translateX(100%);\n    position: absolute;\n    z-index: 200;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition-property: opacity, visibility, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      width: 315px;\n      transform: none;\n      left: 100%;\n      // transition-property: opacity, visibility, transform;\n      transition-property: opacity, visibility;\n    }\n\n    @include mq($from: large) {\n      width: 334px;\n    }\n\n    @include mq($from: ultra) {\n      width: 345px;\n    }\n  }\n\n  &__menu-list.is-level-2 {\n    height: max-content;\n\n    @media (min-height: 580px) {\n      height: 100%;\n    }\n\n    @include mq($from: medium) {\n      height: 100%;\n    }\n  }\n\n  &__menu-metanav-list.is-level-2 {\n    background-color: $colorSecondary30;\n    transform: none;\n    transition-property: opacity, visibility;\n  }\n\n  // we add closing transition delay only to menu-list if hovering/focusing of another is currently active\n  // to prevent showing background (flickering) when transitioning from one menu-list to another (on the same level)\n  &__menu-list:where(:has(> #{&}__menu-list-item:hover > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list),\n  &__menu-list:where(:has(> #{&}__menu-list-item.is-open > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list) {\n    @include mq($from: medium) {\n      transition-delay: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__menu-list-item:hover > &__menu-list,\n  &__menu-list-item.is-open > &__menu-list {\n    @include mq($from: medium) {\n      z-index: 200;\n      transition-delay: 0ms;\n      visibility: visible;\n      opacity: 1;\n      // transform: translateX(0);\n    }\n  }\n\n  &__menu-list-item:hover > &__menu-item,\n  &__menu-list-item.is-open > &__menu-item {\n    @include mq($from: medium) {\n      background-color: $colorSecondary40;\n    }\n\n    &.is-level-2 {\n      @include mq($from: medium) {\n        background-color: $colorSecondary10;\n      }\n    }\n  }\n\n  &__menu-nav:has(#{&}__menu-list-item.is-open), // hide menu when any menu-list has been opened\n  &__menu:has(#{&}__menu-metanav-list-item.is-open) &__menu-nav, // hide menu when menu metanav menu-list has been opened\n  &__menu-list:has(#{&}__menu-list-item.is-open), // hide parent menu-list when sub menu-list has been opened\n  &__menu-metanav-list:has(#{&}__menu-metanav-list-item.is-open) { // hide parent metanav menu-list when sub menu-list has been opened\n    @include mq($to: medium) {\n      transition-property: visibility;\n      transition-duration: 0ms;\n      transition-delay: $baseTransitionAnimationSpeed;\n      visibility: hidden;\n      // background-color: red;\n    }\n  }\n\n  // force showing menu-list that is currently open\n  &__menu-list-item.is-open > :where(#{&}__menu-list),\n  &__menu-metanav-list-item.is-open > :where(#{&}__menu-metanav-list) {\n    @include mq($to: medium) {\n      transform: translateX(0);\n      opacity: 1;\n      visibility: visible;\n      // background-color: green;\n    }\n  }\n\n  &__menu-list-item,\n  &__menu-metanav-list-item {\n    display: grid;\n  }\n\n  &__menu-list-item {\n    &.is-backlink {\n      display: block;\n    }\n  }\n\n  &__menu-item,\n  &__menu-metanav-item {\n    @include font('heavy');\n    @include fontSize('milli');\n    text-align: left;\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    background-color: transparent;\n    color: $colorPrimary70;\n    padding-left: space('xxxlarge');\n    padding-top: space('small');\n    padding-bottom: space('small');\n    padding-right: space('large');\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n  }\n\n  &__menu-item,\n  &__menu-metanav-item.is-title {\n    @include fontSize('deci');\n    min-height: 56px;\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n    }\n  }\n\n  &__menu-item {\n    &.is-level-1 {\n      @include mq($from: ultra) {\n        // padding-left: 126px;\n        // margin-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2) - #{$containerMarginLarge});\n        padding-left: calc(((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n      }\n    }\n\n    &.has-items {\n      @include mq($from: medium) {\n        cursor: default;\n      }\n    }\n\n    &.is-level-2 {\n      @include fontSize('milli');\n      min-height: 48px;\n\n      @include mq($from: medium) {\n        padding-left: space('xlarge');\n      }\n\n      @include mq($from: ultra) {\n        padding-left: space('xxlarge');\n      }\n    }\n\n    &.is-level-2.is-backlink {\n      @include font;\n      @include fontSize('micro');\n      @include spaceCurve('margin-bottom', 'regular');\n      @include spaceCurve('padding-top', 'regular');\n      @include spaceCurve('padding-bottom', 'small');\n      min-height: none;\n      padding-left: $containerMargin;\n      padding-right: $containerMargin;\n      gap: space('xxsmall');\n\n\t\t  @include mq($from: small) {\n        padding-left: $containerMarginSmall;\n        padding-right: $containerMarginSmall;\n      }\n\n      @include mq($from: medium) {\n        display: none;\n      }\n    }\n\n    &.is-level-2.is-main {\n      @include fontSize('centi');\n      margin-bottom: space('xlarge');\n    }\n  }\n\n  &__menu-metanav-item {\n    &.is-level-1 {\n      min-height: 44px;\n      padding-top: space('xsmall');\n      padding-bottom: space('xsmall');\n    }\n\n    &.is-level-2 {\n      min-height: 56px;\n      gap: space('medium');\n      padding-right: space('xxlarge');\n    }\n\n    &.is-title {\n      @include font('heavy');\n      justify-content: space-between;\n      padding-top: 0;\n      padding-bottom: 0;\n      padding-right: space('medium');\n      margin-bottom: space('xlarge');\n      cursor: default;\n    }\n\n    &.is-language {\n      @include font;\n      justify-content: space-between;\n    }\n\n    &.is-action {\n      display: grid;\n      padding-right: space('xxxlarge');\n      margin-top: space('xlarge');\n    }\n\n    &.is-hidden {\n      display: none;\n    }\n  }\n\n  &__menu-metanav-item.is-level-1 &__menu-metanav-item-icon {\n    --size: #{iconSize('small')};\n  }\n\n  &__menu-metanav-item-text {\n    display: flex;\n    gap: space('xsmall');\n\n    &.is-vhidden {\n      @include visuallyhidden;\n    }\n  }\n\n  &__menu-metanav-item-counter {\n    @include font;\n  }\n\n  /* Search is filled */\n\n  &--is-search-filled &__search-text {\n    @include visuallyhidden;\n  }\n\n  /* Hide logo */\n\n  &--hide-logo &__logo-link {\n    opacity: 0;\n  }\n\n  /* Has empty metabar */\n\n  // &--has-empty-metabar-mobile &__metabar {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  /* Has empty metabar */\n\n  // &--has-empty-metabar &__metabar {\n  //   display: none;\n  // }\n\n  /* Metabar Stay */\n\n  // &--has-metabar-stay &__metabar-nav {\n  //   @include mq($to: medium) {\n  //     display: inline-flex;\n  //   }\n  // }\n\n  // &--has-metabar-stay &__metabar {\n  //   @include mq($to: medium) {\n  //     display: block;\n  //   }\n  // }\n\n  // &--has-metabar-stay &__metabar-inner {\n  //   @include mq($to: medium) {\n  //     @include container;\n  //   }\n  // }\n\n  // &--has-metabar-stay &__burger {\n  //   @include mq($to: medium) {\n  //     margin-right: initial;\n  //   }\n  // }\n\n  /* Fixed variant (as soon as header is passed) */\n\n  &--is-fixed &__inner {\n    @include mq($from: small) {\n      transform: translateY(-100%);\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin-top: calc(var(--stzh-header-logobar-height) / -1);\n    }\n  }\n\n  &--is-fixed &__main {\n\t\t@include mq($to: small) {\n      transform: translateY(-100%);\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      margin-top: calc(var(--stzh-header-logobar-height) / -1);\n    }\n  }\n\n  &--is-fixed-transition &__inner {\n    @include mq($from: small) {\n      // transition-property: box-shadow, transform;\n      transition-property: transform;\n      transition-duration: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--is-fixed-transition &__main {\n\t\t@include mq($to: small) {\n      // transition-property: box-shadow, transform;\n      transition-property: transform;\n      transition-duration: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky (transition) variant */\n\n  &--is-sticky-transition &__logobar {\n    transition-property: opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &--is-sticky-transition &__inner,\n  &--is-sticky-transition &__main {\n    // transition-property: box-shadow, transform, margin-top;\n    transition-property: transform, margin-top;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &--is-sticky &__inner {\n\t\t@include mq($from: small) {\n      transform: translateY(0);\n      // box-shadow: $boxShadowHeader;\n    }\n  }\n\n  &--is-sticky &__main {\n\t\t@include mq($to: small) {\n      transform: translateY(0);\n      // box-shadow: $boxShadowHeader;\n    }\n\n\t\t// @include mq($from: small) {\n    //   box-shadow: none;\n    // }\n  }\n\n  &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__inner {\n\t\t@include mq($from: small, $to: medium) {\n      margin-top: calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1);\n    }\n  }\n\n  &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__main {\n\t\t@include mq($to: small) {\n      margin-top: calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1);\n    }\n  }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__inner {\n\t// \t@include mq($from: small, $to: medium) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__main {\n\t// \t@include mq($to: small) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__metabar {\n    @include mq($to: medium) {\n      visibility: hidden;\n    }\n  }\n\n\n\n  &--is-sticky:where(#{&}--has-empty-metabar) &__inner {\n\t\t@include mq($from: small) {\n      margin-top: calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1);\n    }\n  }\n\n  &--is-sticky:where(#{&}--has-empty-metabar) &__main {\n\t\t@include mq($to: small) {\n      margin-top: calc((var(--stzh-header-logobar-height) + var(--stzh-header-metabar-height)) / -1);\n    }\n  }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar) &__inner {\n\t// \t@include mq($from: small) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar) &__main {\n\t// \t@include mq($to: small) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  &--is-sticky:where(#{&}--has-empty-metabar) &__metabar {\n    visibility: hidden;\n  }\n\n  &--is-sticky &__logobar {\n    visibility: hidden;\n    opacity: 0;\n  }\n\n  // &--is-sticky:where(#{&}--has-metabar-stay) &__metabar {\n  //   visibility: visible;\n  // }\n\n  // &--is-sticky:where(#{&}--has-metabar-stay) &__main {\n\t// \t@include mq($to: small) {\n  //     // box-shadow: $boxShadowHeader;\n  //     margin-top: calc((var(--stzh-header-logobar-height)) / -1);\n  //   }\n  // }\n\n  // &--is-sticky:where(#{&}--has-metabar-stay) &__inner {\n\t// \t@include mq($from: small) {\n  //     // box-shadow: $boxShadowHeader;\n  //     margin-top: calc((var(--stzh-header-logobar-height)) / -1);\n  //   }\n  // }\n\n  /* Sticky disabled */\n\n  // &--sticky-disabled &__main {\n  //   @include mq($from: medium) {\n  //     padding-top: $headerMetabarHeightMediumUp;\n  //   }\n  // }\n\n  /* Sticky always */\n\n  &--sticky-always-full &__inner,\n  &--sticky-always-full &__main {\n    margin-top: 0px;\n  }\n\n  &--sticky-always-full &__logobar {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  /* Flyout open */\n\n  &--is-flyout-open &__flyout {\n    visibility: visible;\n  }\n\n  &--is-flyout-open &__flyout-backdrop {\n    opacity: 1;\n  }\n\n  &--is-flyout-open &__flyout-scrollbar {\n    display: none;\n    z-index: 999;\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: var(--stzh-scrollbar-width);\n    background-color: $colorGrey10;\n    border-left: calc(0.5px * var(--stzh-scrollbar-active)) solid $colorGrey30;\n\n    @media (min-height: 580px) {\n      display: block;\n    }\n\n    @include mq($from: medium) {\n      display: block;\n    }\n  }\n\n  &--is-flyout-open &__menu {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  &--is-flyout-open &__inner {\n    // position: static;\n\n\t\t@include mq($from: small) {\n      z-index: $zIndexHeader;\n      transform: translateY(0);\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: var(--stzh-scrollbar-width);\n      margin-top: 0;\n      // box-shadow: none;\n    }\n  }\n\n  &--is-flyout-open &__main {\n    // z-index: $zIndexHeader;\n    // position: fixed;\n    // top: 0;\n    // left: 0;\n    // right: 0;\n\n\t\t@include mq($to: small) {\n      z-index: $zIndexHeader;\n      transform: translateY(0);\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: var(--stzh-scrollbar-width);\n      margin-top: 0;\n      // box-shadow: none;\n    }\n  }\n\n  &--is-flyout-open &__logobar {\n    opacity: 1;\n  }\n\n  &--is-flyout-open &__logobar,\n  &--is-flyout-open &__metabar {\n    visibility: visible;\n  }\n\n  &--is-flyout-open &__logo-link {\n    opacity: 1;\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Listen,\n  Host,\n  State,\n  h,\n  writeTask,\n  readTask,\n  Method,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Fragment,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport {\n  StzhDropdownOption,\n  StzhHeaderMetanavItemClickEvent,\n  StzhHeaderLanguageChangeEvent,\n  StzhHeaderSearchChangeEvent,\n  StzhHeaderSearchChangedEvent,\n  StzhHeaderMenuItem,\n  StzhHeaderMetanavItem,\n  StzhHeaderMenuItemClickEvent,\n} from \"../../index\";\n\nimport { tabbable } from 'tabbable';\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nimport { StzhHeaderLocalizedText } from './stzh-header.localization';\n\nconst CLASS_BODY_OPEN = \"stzh-header-open\";\n\n// for flyout a11y see also: https://www.w3.org/WAI/tutorials/menus/flyout/\n\n/**\n * @slot logo - Slot for brand logo\n * @slot menu-before - Slot for custom elements before other menu elements\n * @slot menu-after - Slot for custom elements after other menu elements\n * @slot metanav-before - Slot for custom elements before other metanav elements\n * @slot metanav-after - Slot for custom elements after other metanav elements\n */\n@Component({\n  tag: \"stzh-header\",\n  styleUrl: \"stzh-header.scss\",\n  scoped: true\n})\nexport class StzhHeader {\n  /** Translation strings */\n  @Prop() localization: StzhHeaderLocalizedText;\n\n  /** Portal link (for logo) */\n  @Prop() href: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Menu element ID */\n  @Prop() menuId: string = \"anchorNavMain\";\n\n  /** Search element ID */\n  @Prop() searchId: string = \"anchorSearch\";\n\n  /** Metanav element ID */\n  @Prop() metanavId: string = \"anchorNavMeta\";\n\n  /** Language element ID */\n  @Prop() languageId: string = \"anchorNavLang\";\n\n  /**\n   * Type of logo (used for setting the correct height).\n   * Will enlarge the logo to 100% by default (default logos are using whitespace).\n   */\n  @Prop({ reflect: true }) logoType: \"default\" | \"vbz\" | \"aoz\" | \"pkzh\" | \"uvz\" = \"default\";\n\n  /** Menu navigation items */\n  @Prop() menuItems: StzhHeaderMenuItem[] | string = [];\n  private _menuItems: StzhHeaderMenuItem[];\n\n  /** Overwrite menu back label */\n  @Prop() menuBackLabel: string;\n\n  /** Meta navigation items */\n  @Prop() metanavItems: StzhHeaderMetanavItem[] | string = [];\n  private _metanavItems: StzhHeaderMetanavItem[];\n\n  /** Current language page path */\n  @Prop({ mutable: true }) languageActive: string;\n\n  /** Available language (paths) in language switch */\n  @Prop() languages: StzhDropdownOption[] | string = [];\n  private _languages: StzhDropdownOption[];\n\n  /** Prevent url change when language has changed (will only fire `stzhLanguageChange`) */\n  @Prop() languagePreventUrlchange: boolean = false;\n\n  /** Whether language switch should stay on mobile */\n  @Prop() languageStay: boolean = false;\n\n  /** Search form action (if given, searchfield will be shown) */\n  @Prop() searchAction: string;\n\n  /** Search field name */\n  @Prop() searchFieldName: string = \"q\";\n\n  /** Search input value */\n  @Prop() searchValue: string = \"\";\n\n  /** Sticky behaviour */\n  @Prop() sticky: \"default\" | \"disabled\" | \"always-full\" | \"always\" = \"default\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() headerHeight: number;\n  @State() paddingTop: number;\n  @State() stickyActive: boolean = false;\n  @State() flyoutOpen: boolean = false;\n  @State() searchFilled: boolean;\n\n  @State() fixed: boolean = false;\n  @State() fixedTransition: boolean = false;\n\n  @State() currentOpenMenuItem: StzhHeaderMenuItem = null;\n  @State() currentOpenMetanavItem: StzhHeaderMetanavItem = null;\n  @State() currentOpenLanguage: boolean = false;\n  private openSubmenuElement: HTMLElement;\n\n  @Element() element: HTMLStzhHeaderElement;\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Escape\") {\n      this.flyoutOpen = false;\n    }\n  }\n\n  @Watch(\"flyoutOpen\")\n  async flyoutOpenWatcher(open: boolean) {\n    if (!open) {\n      // reset current open menu when flyout was closed\n      this.currentOpenMenuItem = null;\n      this.currentOpenMetanavItem = null;\n      this.currentOpenLanguage = null;\n      // reset further flags\n      this.flyoutOpenedByMetanavItem = false;\n\n      document.body.classList.remove(CLASS_BODY_OPEN);\n      this.enableSiblings();\n\n      if (this.trap) {\n        this.trap.deactivate();\n      }\n    } else {\n      document.body.classList.add(CLASS_BODY_OPEN);\n      this.disableSiblings();\n\n      if (this.trap) {\n        this.trap.activate();\n      }\n    }\n  }\n\n  @Watch(\"fixed\")\n  @Watch(\"flyoutOpen\")\n  @Watch(\"headerHeight\")\n  async fixedWatcher() {\n    this.paddingTop = this.fixed || this.flyoutOpen ? this.headerHeight : 0;\n    // we don't want to run transitions on applying fixed class (out transition),\n    // so we set them in the next render\n    await this.waitForNextRender();\n    this.fixedTransition = this.fixed || this.flyoutOpen;\n  }\n\n  @Watch(\"sticky\")\n  stickyWatcher() {\n    this.updatePosition();\n  }\n\n  /** Update position / sticky state of header */\n  @Method()\n  async updatePosition() {\n    if (this.flyoutOpen) {\n      return;\n    }\n\n    const activateSticky = () => {\n      this.stickyActive = true;\n      document.documentElement.style.setProperty('--stzh-header-is-stuck', '1');\n      document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '0');\n    }\n\n    const disableSticky = () => {\n      document.documentElement.style.setProperty('--stzh-header-is-stuck', '0');\n      document.documentElement.style.setProperty('--stzh-header-is-not-stuck', '1');\n      this.stickyActive = false;\n    }\n\n    if (this.sticky === \"disabled\") {\n      disableSticky();\n    } else if (this.sticky === \"always-full\") {\n      activateSticky();\n    } else if (this.sticky === \"always\") {\n      if (this.belowStayStickyPoint) {\n        activateSticky();\n      } else {\n        disableSticky();\n      }\n    } else {\n      if (this.scrollingUp && this.belowStayStickyPoint) {\n        if (!this.stickyActive && this.belowStartStickyPoint) {\n          activateSticky();\n        }\n      } else {\n        if (this.stickyActive && this.belowStayStickyPoint) {\n          disableSticky();\n        } else {\n          disableSticky();\n        }\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.sticky === \"disabled\") {\n      return;\n    }\n\n    readTask(() => {\n      this.currentScrollY = window.scrollY;\n      this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;\n      this.lastScrollY = this.currentScrollY;\n\n      this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;\n      this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;\n\n      this.fixed = this.belowStartStickyPoint\n        || (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive)\n        || (this.sticky === \"always\" && this.belowStayStickyPoint)\n        || this.sticky === \"always-full\";\n\n      this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n      this.hideLogo = this.sticky !== \"always-full\" && this.isMedium && this.headerOverlap > 1;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  /** Metanav item click event */\n  @Event() stzhMetanavItemClick: EventEmitter<StzhHeaderMetanavItemClickEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhHeaderMenuItemClickEvent>;\n\n  /** Language change event */\n  @Event() stzhLanguageChange: EventEmitter<StzhHeaderLanguageChangeEvent>;\n\n  /** Search input change event */\n  @Event() stzhSearchChange: EventEmitter<StzhHeaderSearchChangeEvent>;\n\n  /** Search input changed event */\n  @Event() stzhSearchChanged: EventEmitter<StzhHeaderSearchChangedEvent>;\n\n  @Watch(\"searchValue\")\n  searchValueWatcher(newValue: string) {\n    this.searchFilled = newValue !== \"\";\n  }\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhHeaderMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem\n    }))\n  }\n\n  @Watch(\"metanavItems\")\n  metanavItemsWatcher(newValue: StzhHeaderMetanavItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._metanavItems = JSON.parse(newValue);\n    } else {\n      this._metanavItems = newValue;\n    }\n\n    this._metanavItems = this._metanavItems.map((metanavItem, index) => ({\n      id: `metanav-submenu-${index}`,\n      ...metanavItem\n    }))\n  }\n\n  @Watch(\"languages\")\n  languagesWatcher(newValue: StzhDropdownOption[] | string) {\n    if (typeof newValue === \"string\") {\n      this._languages = JSON.parse(newValue);\n    } else {\n      this._languages = newValue;\n    }\n  }\n\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private currentScrollY: number;\n  private lastScrollY: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  // private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n\n  private isMedium: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private flyoutResizeObserver: ResizeObserver;\n\n  // private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private menunavElement: HTMLElement;\n  private flyoutElement: HTMLElement;\n\n  private searchInput: HTMLInputElement;\n\n  private lastOpener: HTMLButtonElement | null = null;\n  private flyoutOpenedByMetanavItem: boolean = null;\n\n  private trap: FocusTrap;\n  private _parentElement: HTMLElement;\n\n  private getSiblings() {\n    if (!this._parentElement) {\n      return [];\n    }\n\n    return Array.from(this._parentElement.children).filter(\n      (child) => child !== this.element\n    );\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach((sibling) => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private resizeMenunavElement() {\n    // reset height when metanav is sticky, or on medium or no submenu element is open\n    if (media(\"headerMetanavSticky\").matches || media(\"medium\").matches || !this.openSubmenuElement) {\n      Object.assign(this.menunavElement.style, {\n        height: null\n      });\n    } else {\n      const { height } = this.openSubmenuElement.getBoundingClientRect();\n      Object.assign(this.menunavElement.style, {\n        height: `${height}px`\n      });\n    }\n  }\n\n  private async openMenuItem(event: MouseEvent, menuItem: StzhHeaderMenuItem) {\n    this.flyoutOpen = true;\n\n    this.lastOpener = event.currentTarget as HTMLButtonElement;\n    this.openSubmenuElement = this.element.querySelector(`#${menuItem.id}`) as HTMLElement;\n    this.currentOpenMenuItem = menuItem;\n    await this.waitForNextRender();\n\n    requestAnimationFrame(() => {\n      this.menunavElement.scrollTop = 0;\n\n      const firstButtonOrLink = this.openSubmenuElement\n        && tabbable(this.openSubmenuElement)[0];\n      firstButtonOrLink?.focus()\n\n      this.resizeMenunavElement();\n    });\n  }\n\n  private async closeMenuItem(focusOpener: boolean = true) {\n    this.openSubmenuElement = null;\n    this.currentOpenMenuItem = null;\n    await this.waitForNextRender();\n\n    if (focusOpener) {\n      requestAnimationFrame(() => {\n        this.lastOpener.focus();\n        this.lastOpener = null;\n\n        this.resizeMenunavElement();\n      });\n    }\n  }\n\n  private async openMetanavItem(event: MouseEvent, metanavItem: StzhHeaderMetanavItem) {\n    if (!this.flyoutOpen) {\n      this.flyoutOpenedByMetanavItem = true;\n      this.flyoutOpen = true;\n    }\n\n    this.lastOpener = event.currentTarget as HTMLButtonElement;\n    this.currentOpenMetanavItem = metanavItem;\n    await this.waitForNextRender();\n\n    requestAnimationFrame(() => {\n      const openMetanavSubmenuElement = this.element.querySelector(`#${metanavItem.id}`);\n      const firstButtonOrLink = openMetanavSubmenuElement\n        && tabbable(openMetanavSubmenuElement)[0];\n      firstButtonOrLink?.focus()\n    });\n  }\n\n  private async closeMetanavItem() {\n    this.currentOpenMetanavItem = null;\n\n    if (this.flyoutOpenedByMetanavItem) {\n      this.flyoutOpen = false;\n    }\n\n    await this.waitForNextRender();\n\n    requestAnimationFrame(() => {\n      this.lastOpener.focus();\n      this.lastOpener = null;\n    });\n  }\n\n  private async openLanguage(event: MouseEvent) {\n    if (!this.flyoutOpen) {\n      this.flyoutOpenedByMetanavItem = true;\n      this.flyoutOpen = true;\n    }\n\n    this.lastOpener = event.currentTarget as HTMLButtonElement;\n    this.currentOpenLanguage = true;\n    await this.waitForNextRender();\n\n    requestAnimationFrame(() => {\n      const openMetanavSubmenuElement = this.element.querySelector(\"#submenu-languages\");\n      const firstButtonOrLink = openMetanavSubmenuElement\n        && tabbable(openMetanavSubmenuElement)[0];\n      firstButtonOrLink?.focus()\n    });\n  }\n\n  private async closeLanguage() {\n    this.currentOpenLanguage = false;\n\n    if (this.flyoutOpenedByMetanavItem) {\n      this.flyoutOpen = false;\n    }\n\n    await this.waitForNextRender();\n\n    requestAnimationFrame(() => {\n      this.lastOpener.focus();\n      this.lastOpener = null;\n    });\n  }\n\n  private handleMenuListFocusout = (event: FocusEvent) => {\n    const isNextFocusOutOfMenuList = !(event.currentTarget as HTMLElement)\n      .contains(event.relatedTarget as HTMLElement);\n\n    if (this.isMedium && isNextFocusOutOfMenuList) {\n      this.closeMenuItem(false);\n    }\n  }\n\n  private handleBurgerClick = async () => {\n    if (this.flyoutOpenedByMetanavItem) {\n      this.flyoutOpenedByMetanavItem = false;\n      this.closeMetanavItem();\n    } else {\n      this.flyoutOpen = !this.flyoutOpen;\n    }\n\n    // focus first menu item\n    const element = this.element.querySelector('.stzh-header__menu-item') as HTMLElement;\n\n    if (element) {\n      window.setTimeout(() => {\n        element.focus();\n      }, 100);\n    }\n\n    // await this.waitForNextRender();\n    this.updatePosition();\n  }\n\n  private handleBackdropClick = async () => {\n    this.flyoutOpen = false;\n    // await this.waitForNextRender();\n    this.updatePosition();\n  }\n\n  private handleMetanavItemClick = (event: MouseEvent, item: StzhHeaderMetanavItem) => {\n    this.flyoutOpen = false;\n    this.stzhMetanavItemClick.emit({\n      component: \"stzh-header\",\n      item,\n      originalEvent: event,\n    })\n  }\n\n  private handleMenuItemClick = (event: MouseEvent, item: StzhHeaderMenuItem) => {\n    this.flyoutOpen = false;\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-header\",\n      item,\n      originalEvent: event,\n    })\n  }\n\n  private handleSearchInput = (event: InputEvent) => {\n    this.searchValue = this.searchInput.value;\n\n    this.stzhSearchChange.emit({\n      component: \"stzh-header\",\n      originalEvent: event,\n      value: this.searchValue\n    });\n  }\n\n  private handleSearchChange = (event: InputEvent) => {\n    this.searchValue = this.searchInput.value;\n\n    this.stzhSearchChanged.emit({\n      component: \"stzh-header\",\n      originalEvent: event,\n      value: this.searchValue\n    });\n  }\n\n  private handleLanguageClick = (event: MouseEvent, dropdownOption: StzhDropdownOption) => {\n    if (this.languagePreventUrlchange) {\n      event.preventDefault();\n    }\n\n    this.languageActive = dropdownOption.value;\n\n    this.stzhLanguageChange.emit({\n      component: \"stzh-header\",\n      value: this.languageActive\n    });\n  }\n\n  private handleFlyoutResize = () => {\n    this.resizeMenunavElement();\n  }\n\n  private handleResize = () => {\n    if (this.sticky === \"disabled\") {\n      return;\n    }\n\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(() => {\n      readTask(() => {\n        this.isMedium = media(\"medium\").matches;\n\n        this.mainHeight = this.mainElement?.offsetHeight || 0;\n        this.metabarHeight = this.metabarElement?.offsetHeight || 0;\n        this.logobarHeight = this.logobarElement?.offsetHeight || 0;\n\n        this.headerTop = this.element.offsetTop;\n        this.headerHeight = this.metabarHeight + this.logobarHeight;\n\n        // this.headerHeight = this.element.offsetHeight;\n        // console.log(this.headerHeight);\n        // console.log(this.metabarHeight + this.logobarHeight);\n        // console.log(this.metabarHeight, this.logobarHeight);\n      });\n\n      writeTask(() => {\n        document.documentElement.style.setProperty('--stzh-header-height', `${this.headerHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-main-height', `${this.mainHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-metabar-height', `${this.metabarHeight}px`);\n        document.documentElement.style.setProperty('--stzh-header-logobar-height', `${this.logobarHeight}px`);\n      });\n\n      this.scrollListener();\n    });\n  }\n\n  async componentWillLoad() {\n    this.menuItemsWatcher(this.menuItems);\n    this.metanavItemsWatcher(this.metanavItems);\n    this.languagesWatcher(this.languages);\n    this.searchValueWatcher(this.searchValue);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"header\");\n    }\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n\n    if (this.flyoutElement && this.flyoutResizeObserver) {\n      this.flyoutResizeObserver.observe(this.flyoutElement);\n    }\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      ...createBaseFocusTrapOptions(),\n      initialFocus: false\n    });\n\n    this.flyoutResizeObserver = new ResizeObserver(this.handleFlyoutResize);\n    if (this.flyoutElement) {\n      this.flyoutResizeObserver.observe(this.flyoutElement);\n    }\n  }\n\n  connectedCallback() {\n    this._parentElement = this.element.parentElement;\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    this.flyoutOpenWatcher(false);\n    this.resizeObserver?.disconnect();\n    this.flyoutResizeObserver?.disconnect();\n  }\n\n  render() {\n    const metanavBeforeUsed: boolean = hasSlot(this.element, \"metanav-before\");\n    const metanavAfterUsed: boolean = hasSlot(this.element, \"metanav-after\");\n\n    const classes = {\n      \"stzh-header\": true,\n      \"stzh-header--is-flyout-open\": this.flyoutOpen,\n      \"stzh-header--is-search-filled\": this.searchFilled,\n      \"stzh-header--is-fixed\": this.fixed,\n      \"stzh-header--is-fixed-transition\": this.fixedTransition,\n      \"stzh-header--is-sticky\": this.stickyActive,\n      \"stzh-header--is-sticky-transition\": this.stickyActive && this.fixedTransition,\n      \"stzh-header--hide-logo\": this.hideLogo,\n      \"stzh-header--has-empty-metabar-mobile\": !metanavBeforeUsed && !metanavAfterUsed\n        && this._metanavItems.filter(item => item.stay || item.stayAndShowInMobileMenu).length === 0\n        && this._menuItems.length === 0\n        && (this._languages.length === 0\n            || (this._languages.length > 0 && !this.languageStay))\n        && !this.searchAction,\n      \"stzh-header--has-empty-metabar\": !metanavBeforeUsed && !metanavAfterUsed\n        && this._metanavItems.length === 0\n        && this._menuItems.length === 0\n        && this._languages.length === 0\n        && !this.searchAction,\n      [`stzh-header--sticky-${this.sticky}`]: !!this.sticky,\n    };\n\n    const activeLanguage = this.languageActive ||  window.stzhComponents.utils.getLocale(this.element);\n    const activeLanguageOption = this._languages\n      ?.find(({ value }) => value === activeLanguage) || this._languages?.[0] || null;\n\n    const renderMetanavItemButton = (item: StzhHeaderMetanavItem, additionalClasses?: { [className: string]: boolean }, additionalAttributes?: any) => {\n      const Element = item.items?.length > 0 || item.itemButton || !item.href ? \"button\" : \"a\";\n\n      return (\n        <Element\n          {...additionalAttributes}\n          href={Element === \"a\" && item.href}\n          target={Element === \"a\" && item.target}\n          class={{\n            \"stzh-header__metanav-item\": true,\n            \"is-heavy\": item.important,\n            \"is-stay\": item.stay || item.stayAndShowInMobileMenu,\n            ...(additionalClasses || {})\n          }}\n        >\n          <span\n            class={{\n              \"stzh-header__metanav-item-text\": true,\n              \"is-vhidden\": item.labelHidden,\n              \"has-no-short-label\": !item.labelShort,\n            }}\n          >\n            <span class=\"stzh-header__metanav-item-text-label-long\">{item.label}</span>\n            <span class=\"stzh-header__metanav-item-text-label-short\" aria-hidden=\"true\">{item.labelShort}</span>\n          </span>\n          {item.icon &&\n            <span class=\"stzh-header__metanav-icon-wrapper\">\n              {item.icon && <stzh-icon class={`stzh-header__metanav-icon ${item.iconOpen ? 'is-close' : ''}`} name={item.icon}></stzh-icon>}\n              {item.iconOpen && <stzh-icon class=\"stzh-header__metanav-icon is-open\" name={item.iconOpen}></stzh-icon>}\n              {(item.badge || item.badgeEmpty) &&\n                <stzh-badge class=\"stzh-header__metanav-icon-badge\" label={item.badge} type={typeof item.badgeType === \"undefined\" ? \"error\" : item.badgeType}></stzh-badge>\n              }\n            </span>\n          }\n        </Element>\n      );\n    }\n\n    return (\n      <Host>\n        <header class={classes}>\n          <div class=\"stzh-header__header\" style={{paddingTop: `${this.paddingTop}px`}}>\n            <div\n              class=\"stzh-header__inner\"\n              // ref={(el) => (this.innerElement = el as HTMLDivElement)}\n            >\n              <div\n                class=\"stzh-header__main\"\n                ref={(el) => (this.mainElement = el as HTMLDivElement)}\n              >\n                <div\n                  class=\"stzh-header__logobar\"\n                  ref={(el) => (this.logobarElement = el as HTMLDivElement)}\n                >\n                  <div class=\"stzh-header__logobar-logo\">\n                    <a href={this.href} class=\"stzh-header__logo-link\" s-object-id={this.logoAnalyticsId || \"Header Logo\"}>\n                      <slot name=\"logo\"></slot>\n                    </a>\n                  </div>\n                  <div class=\"stzh-header__logobar-decoration\"></div>\n                </div>\n\n                <div\n                  class=\"stzh-header__metabar\"\n                  ref={(el) => (this.metabarElement = el as HTMLDivElement)}\n                >\n                  <div class=\"stzh-header__metabar-inner\">\n                    <slot name=\"menu-before\"></slot>\n\n                    {this._menuItems.length > 0 &&\n                      <button\n                        id={this.menuId}\n                        class={`stzh-header__burger ${this.flyoutOpen && !this.flyoutOpenedByMetanavItem && \"is-open\"}`}\n                        onClick={this.handleBurgerClick}\n                      >\n                        <stzh-icon\n                          class=\"stzh-header__burger-icon is-close\"\n                          name=\"menu\"\n                        ></stzh-icon>\n                        <stzh-icon\n                          class=\"stzh-header__burger-icon is-open\"\n                          name=\"close\"\n                        ></stzh-icon>\n                        <div class=\"stzh-header__burger-text\">\n                          {this.localization.menuLabel}\n                        </div>\n                      </button>\n                    }\n                    {this.searchAction &&\n                      <form\n                        class=\"stzh-header__metabar-search\"\n                        action={this.searchAction}\n                        role=\"search\"\n                      >\n                        <label class=\"stzh-header__search\">\n                          <input\n                            id={this.searchId}\n                            ref={(el) => (this.searchInput = el as HTMLInputElement)}\n                            class=\"stzh-header__search-input\"\n                            type=\"search\"\n                            name={this.searchFieldName}\n                            onChange={this.handleSearchChange}\n                            onInput={this.handleSearchInput}\n                          ></input>\n                          <stzh-icon class=\"stzh-header__search-icon\" name=\"search\"></stzh-icon>\n                          <div class=\"stzh-header__search-text\">{this.localization.searchLabel}</div>\n                        </label>\n                      </form>\n                    }\n\n                    <slot name=\"menu-after\"></slot>\n\n                    <div class=\"stzh-header__metabar-nav\" id={this.metanavId}>\n                      <slot name=\"metanav-before\"></slot>\n\n                      {this._metanavItems.map((item) =>\n                        (item.items?.length > 0 || item.itemButton)\n                          ?\n                            <Fragment>\n                              {renderMetanavItemButton(item, {\n                                \"is-popover-mobile\": true\n                              }, {\n                                'aria-expanded': item === this.currentOpenMetanavItem ? \"true\" : \"false\",\n                                'aria-controls': item.id,\n                                onClick: (e: MouseEvent) => {\n                                  if (item === this.currentOpenMetanavItem) {\n                                    this.closeMetanavItem();\n                                  } else {\n                                    this.openMetanavItem(e, item)\n                                  }\n\n                                  this.handleMetanavItemClick(e, item);\n                                }\n                              })}\n                              <stzh-popover\n                                class={{\n                                  \"stzh-header__metanav-popover\": true,\n                                }}\n                                placement=\"bottom-end\"\n                                distance={20}\n                                variant={item.variant}\n                                size={typeof item.size === \"undefined\" ? \"large\" : item.size}\n                              >\n                                {renderMetanavItemButton(item, {\n                                  \"is-popover-desktop\": true\n                                }, {\n                                  onClick: (e: MouseEvent) => {\n                                    this.handleMetanavItemClick(e, item);\n                                  }\n                                })}\n                                <div slot=\"content\">\n                                  {item.items?.length > 0 &&\n                                    <stzh-menu>\n                                      {item.items.map((childItem) =>\n                                        <stzh-menu-item\n                                          class={{\n                                            \"stzh-header__metanav-menu-item\": true,\n                                            \"is-heavy\": typeof item.importantSubmenu === \"undefined\" || item.importantSubmenu,\n                                          }}\n                                          size={typeof item.size === \"undefined\" ? \"large\" : item.size}\n                                          variant={item.variant}\n                                          href={childItem.href}\n                                          target={childItem.target}\n                                          icon={childItem.icon}\n                                          counter={childItem.counter}\n                                          badge={childItem.badge}\n                                          badgeType={childItem.badgeType}\n                                        >\n                                          {childItem.label}\n                                        </stzh-menu-item>\n                                      )}\n                                    </stzh-menu>\n                                  }\n                                </div>\n                                {item.itemButton &&\n                                  <stzh-button\n                                    slot=\"action\"\n                                    size={item.itemButton.size}\n                                    href={item.itemButton.href}\n                                    target={item.itemButton.target}\n                                  >\n                                    {item.itemButton.label}\n                                  </stzh-button>\n                                }\n                              </stzh-popover>\n                            </Fragment>\n                          :\n                          renderMetanavItemButton(item, {}, {\n                            onClick: (e: MouseEvent) => {\n                              this.handleMetanavItemClick(e, item);\n                            }\n                          })\n                      )}\n\n                      {this._languages?.length > 0 &&\n                        <Fragment>\n                          <h2 id={this.languageId} class=\"stzh-header__vhidden\">\n                            {this.localization.languageLabel}\n                          </h2>\n                          {this._menuItems.length > 0 && this.languageStay &&\n                            <button\n                              class={{\n                                \"stzh-header__metanav-item\": true,\n                                \"is-popover-mobile\": true,\n                                \"is-stay\": this.languageStay\n                              }}\n                              aria-expanded={this.currentOpenLanguage ? \"true\" : \"false\"}\n                              aria-controls=\"submenu-languages\"\n                              onClick={(e: MouseEvent) => {\n                                if (this.currentOpenLanguage) {\n                                  this.closeLanguage();\n                                } else {\n                                  this.openLanguage(e)\n                                }\n                              }}\n                            >\n                              <span class=\"stzh-header__metanav-item-text\">{activeLanguageOption?.text}</span>\n                              <stzh-icon class=\"stzh-header__metanav-icon is-close\" name=\"angle-down\"></stzh-icon>\n                              <stzh-icon class=\"stzh-header__metanav-icon is-open\" name=\"angle-up\"></stzh-icon>\n                            </button>\n                          }\n                          <stzh-popover\n                            class=\"stzh-header__metanav-popover is-langnav\"\n                            placement=\"bottom-end\"\n                            distance={20}\n                          >\n                            <button\n                              class={{\n                                \"stzh-header__metanav-item\": true,\n                                \"is-popover-desktop\": this._menuItems.length > 0,\n                                \"is-stay\": this.languageStay\n                              }}\n                            >\n                              <span class=\"stzh-header__metanav-item-text\">{activeLanguageOption?.text}</span>\n                              <stzh-icon class=\"stzh-header__metanav-icon is-close\" name=\"angle-down\"></stzh-icon>\n                              <stzh-icon class=\"stzh-header__metanav-icon is-open\" name=\"angle-up\"></stzh-icon>\n                            </button>\n                            <div slot=\"content\">\n                              <stzh-menu>\n                                {this._languages.map((language) =>\n                                  <stzh-menu-item\n                                    class=\"stzh-header__metanav-menu-item\"\n                                    active={activeLanguageOption?.value === language.value}\n                                    href={language.value}\n                                    onClick={(event) => this.handleLanguageClick(event, language)}\n                                  >\n                                    {language.text}\n                                  </stzh-menu-item>\n                                )}\n                              </stzh-menu>\n                            </div>\n                          </stzh-popover>\n                        </Fragment>\n                      }\n\n                      <slot name=\"metanav-after\"></slot>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          {this._menuItems.length > 0 &&\n            <div\n              ref={(el) => (this.flyoutElement = el as HTMLElement)}\n              class=\"stzh-header__flyout\"\n            >\n              <div class=\"stzh-header__flyout-backdrop\" onClick={this.handleBackdropClick}></div>\n              <div class=\"stzh-header__flyout-scrollbar\"></div>\n              <div class=\"stzh-header__menu\">\n                <nav\n                  class=\"stzh-header__menu-nav\"\n                  ref={(el) => (this.menunavElement = el as HTMLElement)}\n                  aria-label={this.localization.navigationLabel}\n                >\n                  <ul class=\"stzh-header__menu-list is-level-1\">\n                    {this._menuItems.map((item) =>\n                      <li\n                        class={{\n                          'stzh-header__menu-list-item': true,\n                          'is-open': item === this.currentOpenMenuItem\n                        }}\n                      >\n                        {item.items?.length > 0\n                          ?\n                          <button\n                            aria-expanded={item === this.currentOpenMenuItem ? \"true\" : \"false\"}\n                            aria-controls={item.id}\n                            class=\"stzh-header__menu-item is-level-1 has-items\"\n                            onClick={\n                              item === this.currentOpenMenuItem\n                              ? () => this.closeMenuItem()\n                              : (e) => this.openMenuItem(e, item)\n                            }\n                          >\n                            {item.label}\n                          </button>\n                          :\n                          <a href={item.href} onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)} class=\"stzh-header__menu-item is-level-1\">\n                            {item.label}\n                          </a>\n                        }\n                        {item.items?.length > 0 &&\n                          <ul\n                            id={item.id}\n                            class=\"stzh-header__menu-list is-level-2\"\n                            onFocusout={this.handleMenuListFocusout}\n                          >\n                            <li class=\"stzh-header__menu-list-item is-backlink\">\n                              <button class=\"stzh-header__menu-item is-level-2 is-backlink\" onClick={() => this.closeMenuItem()}>\n                                <stzh-icon name=\"angle-left\"></stzh-icon>\n                                <span>{this.menuBackLabel ? this.menuBackLabel : this.localization.menuBackLabel}</span>\n                              </button>\n                            </li>\n                            <li class=\"stzh-header__menu-list-item\">\n                              <a href={item.href} onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)} class=\"stzh-header__menu-item is-level-2 is-main\">\n                                {item.label}\n                              </a>\n                            </li>\n                            {item.items.map((item) =>\n                              <li class=\"stzh-header__menu-list-item\">\n                                <a href={item.href} onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)} class=\"stzh-header__menu-item is-level-2\">\n                                  {item.label}\n                                </a>\n                              </li>\n                            )}\n                          </ul>\n                        }\n                      </li>\n                    )}\n                  </ul>\n                </nav>\n\n                {(this._metanavItems?.length > 0 || this._languages?.length > 0) &&\n                  <div class=\"stzh-header__menu-metanav\">\n                    <nav class=\"stzh-header__menu-metanav-nav\">\n                      <ul class=\"stzh-header__menu-metanav-list is-level-1\">\n                        {this._metanavItems.map((item) =>\n                          <li\n                            class={{\n                              'stzh-header__menu-metanav-list-item': true,\n                              'is-open': item === this.currentOpenMetanavItem\n                            }}>\n                            {item.items?.length > 0\n                              ?\n                              <button\n                                aria-expanded={item === this.currentOpenMetanavItem ? \"true\" : \"false\"}\n                                aria-controls={item.id}\n                                class={{\n                                  \"stzh-header__menu-metanav-item is-level-1\": true,\n                                  \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n                                }}\n                                onClick={(e: MouseEvent) => {\n                                  if (item === this.currentOpenMetanavItem) {\n                                    this.closeMetanavItem();\n                                  } else {\n                                    this.openMetanavItem(e, item)\n                                  }\n\n                                  this.handleMetanavItemClick(e, item);\n                                }}\n                              >\n                                <span\n                                  class={{\n                                    \"stzh-header__menu-metanav-item-text\": true,\n                                    \"is-vhidden\": item.labelHidden,\n                                  }}\n                                >\n                                  {item.label}\n                                </span>\n                                {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n                              </button>\n                              :\n                              <a\n                                href={item.href}\n                                class={{\n                                  \"stzh-header__menu-metanav-item is-level-1\": true,\n                                  \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n                                }}\n                                onClick={(e: MouseEvent) => {\n                                  this.handleMetanavItemClick(e, item);\n                                }}\n                              >\n                                <span\n                                  class={{\n                                    \"stzh-header__menu-metanav-item-text\": true,\n                                    \"is-vhidden\": item.labelHidden,\n                                  }}\n                                >\n                                  {item.label}\n                                </span>\n                                {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n                              </a>\n                            }\n                            {item.items?.length > 0 &&\n                              <ul\n                                id={item.id}\n                                class=\"stzh-header__menu-metanav-list is-level-2\"\n                              >\n                                <li class=\"stzh-header__menu-metanav-list-item\">\n                                  <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n                                    <span>{item.label}</span>\n                                    <stzh-button\n                                      class=\"stzh-header__menu-metanav-item-icon\"\n                                      variant=\"tertiary\"\n                                      icon=\"close\"\n                                      iconOnly={true}\n                                      label={this.localization.closeMetanavMenuLabel?.replace(/\\{itemLabel\\}/gi, item.label)}\n                                      onClick={() => this.closeMetanavItem()}\n                                    ></stzh-button>\n                                  </div>\n                                </li>\n                                {item.items.map((item) =>\n                                  <li class=\"stzh-header__menu-metanav-list-item\">\n                                    <a href={item.href} class=\"stzh-header__menu-metanav-item is-level-2\">\n                                      {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n                                      <span class=\"stzh-header__menu-metanav-item-text\">\n                                        <span>{item.label}</span>\n                                        {item.counter &&\n                                          <span class=\"stzh-header__menu-metanav-item-counter\">({item.counter})</span>\n                                        }\n                                      </span>\n                                    </a>\n                                  </li>\n                                )}\n\n                                {item.itemButton &&\n                                  <li class=\"stzh-header__menu-metanav-list-item\">\n                                    <div class=\"stzh-header__menu-metanav-item is-level-2 is-action\">\n                                      <stzh-button\n                                        href={item.itemButton.href}\n                                        target={item.itemButton.target}\n                                      >\n                                        {item.itemButton.label}\n                                      </stzh-button>\n                                    </div>\n                                  </li>\n                                }\n                              </ul>\n                            }\n                          </li>\n                        )}\n\n                        {this._languages?.length > 0 &&\n                          <li\n                            class={{\n                              'stzh-header__menu-metanav-list-item': true,\n                              'is-open': this.currentOpenLanguage\n                            }}\n                          >\n                            <button\n                              aria-expanded={this.currentOpenLanguage ? \"true\" : \"false\"}\n                              aria-controls=\"submenu-languages\"\n                              class=\"stzh-header__menu-metanav-item is-level-1\"\n                              onClick={(e) => this.openLanguage(e)}\n                            >\n                              <span>{activeLanguageOption?.text}</span>\n                              <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"angle-down\"></stzh-icon>\n                            </button>\n                            <ul\n                              id=\"submenu-languages\"\n                              class=\"stzh-header__menu-metanav-list is-level-2\"\n                            >\n                              <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n                                <span>{this.localization.dialogLanguageTitle}</span>\n                                <stzh-button\n                                  class=\"stzh-header__menu-metanav-item-icon\"\n                                  variant=\"tertiary\"\n                                  icon=\"close\"\n                                  iconOnly={true}\n                                  label={\"Sprach-Dialog schliessen\"}\n                                  onClick={() => this.closeLanguage()}\n                                ></stzh-button>\n                              </div>\n                              {this._languages.map((language) =>\n                                <li class=\"stzh-header__menu-metanav-list-item\">\n                                  <a\n                                    class=\"stzh-header__menu-metanav-item is-level-2 is-language\"\n                                    href={language.value}\n                                    onClick={(event) => this.handleLanguageClick(event, language)}\n                                  >\n                                    <span>{language.text}</span>\n                                    {activeLanguageOption?.value === language.value &&\n                                      <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"checkmark\"></stzh-icon>}\n                                  </a>\n                                </li>\n                              )}\n                            </ul>\n                          </li>\n                        }\n                      </ul>\n                    </nav>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}