@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/esm/stzh-header.entry.js

@@ -49,7 +49,6 @@ const StzhHeader = class {
       this.updatePosition();
     };
     this.handleMetanavItemClick = (event, item) => {
-      this.flyoutOpen = false;
       this.stzhMetanavItemClick.emit({
         component: "stzh-header",
         item,

package/dist/esm/stzh-header.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-header.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"stzh-header.entry.js","mappings":"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","names":[],"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.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"],"version":3}

package/dist/esm/stzh-imagecomparison.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
 
-const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
+const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}@media print{.sc-stzh-imagecomparison-h{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
 
 const StzhImageComparison = class {
   constructor(hostRef) {

package/dist/esm/stzh-imagecomparison.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-imagecomparison.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,koIAAkoI;;MC6BppI,mBAAmB;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EACN,WAAK,KAAK,EAAC,mCAAmC,GAAO,EAErD,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 2px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n\n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n\n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: calc(2 * #{iconSize()} + var(--divider-width));\n    height: #{iconSize()};\n    transform: translate(-50%, -50%);\n    color: $colorPrimary70;\n    background-color: $colorWhite;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack50op;\n    color: $colorWhite;\n  }\n\n  &__hint-left {\n    left: 0;\n  }\n\n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line {\n    background-color: $colorPrimary70;\n }\n\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorSecondary30;\n  }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport {\n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n  private inputElement: HTMLInputElement;\n\n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({\n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-left\"\n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-right\"\n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n              <input\n                type=\"range\"\n                class=\"stzh-imagecomparison__control\"\n                min=\"0\"\n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"stzh-imagecomparison.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,qvIAAqvI;;MC6BvwI,mBAAmB;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EACN,WAAK,KAAK,EAAC,mCAAmC,GAAO,EAErD,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 2px;\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n\n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n\n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: calc(2 * #{iconSize()} + var(--divider-width));\n    height: #{iconSize()};\n    transform: translate(-50%, -50%);\n    color: $colorPrimary70;\n    background-color: $colorWhite;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack50op;\n    color: $colorWhite;\n  }\n\n  &__hint-left {\n    left: 0;\n  }\n\n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line {\n    background-color: $colorPrimary70;\n }\n\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorSecondary30;\n  }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport {\n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n  private inputElement: HTMLInputElement;\n\n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({\n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-left\"\n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-right\"\n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n              <input\n                type=\"range\"\n                class=\"stzh-imagecomparison__control\"\n                min=\"0\"\n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}