npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta1 → 3.0.0-beta2 - Mend

@oiz/stzh-components 3.0.0-beta1 → 3.0.0-beta2

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

Files changed (187) hide show

package/dist/stzh-components/{p-879795a9.entry.js.map → p-bf79dbd0.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhHeaderCss","CLASS_BODY_OPEN","StzhHeader","this","lastOpener","flyoutOpenedByMetanavItem","handleMenuListFocusout","event","isNextFocusOutOfMenuList","currentTarget","contains","relatedTarget","isMedium","closeMenuItem","handleBurgerClick","async","closeMetanavItem","flyoutOpen","element","querySelector","window","setTimeout","focus","updatePosition","handleBackdropClick","handleMetanavItemClick","item","stzhMetanavItemClick","emit","component","originalEvent","handleSearchInput","searchValue","searchInput","value","stzhSearchChange","handleSearchChange","stzhSearchChanged","handleLanguageClick","dropdownOption","languagePreventUrlchange","preventDefault","languageActive","stzhLanguageChange","handleFlyoutResize","resizeMenunavElement","handleResize","sticky","debounceResize","cancelAnimationFrame","requestAnimationFrame","readTask","media","matches","mainHeight","_a","mainElement","offsetHeight","metabarHeight","_b","metabarElement","logobarHeight","_c","logobarElement","headerTop","offsetTop","headerHeight","writeTask","document","documentElement","style","setProperty","scrollListener","handleKeydown","key","flyoutOpenWatcher","open","currentOpenMenuItem","currentOpenMetanavItem","currentOpenLanguage","body","classList","remove","enableSiblings","trap","deactivate","add","disableSiblings","activate","fixedWatcher","paddingTop","fixed","waitForNextRender","fixedTransition","stickyWatcher","stickyActive","scrollingUp","belowStayStickyPoint","belowStartStickyPoint","currentScrollY","scrollY","lastScrollY","headerOverlap","hideLogo","searchValueWatcher","newValue","searchFilled","menuItemsWatcher","_menuItems","JSON","parse","map","menuItem","index","Object","assign","id","metanavItemsWatcher","_metanavItems","metanavItem","languagesWatcher","_languages","getSiblings","parentElement","Array","from","children","filter","child","forEach","sibling","setAttribute","removeAttribute","Promise","resolve","renderPromiseResolve","openSubmenuElement","menunavElement","height","getBoundingClientRect","openMenuItem","scrollTop","firstButtonOrLink","tabbable","focusOpener","openMetanavItem","openMetanavSubmenuElement","openLanguage","closeLanguage","componentWillLoad","menuItems","metanavItems","languages","localization","stzhComponents","utils","fetchTranslations","componentDidRender","flyoutElement","flyoutResizeObserver","observe","componentDidLoad","createFocusTrap","createBaseFocusTrapOptions","initialFocus","ResizeObserver","connectedCallback","resizeObserver","disconnectedCallback","disconnect","render","metanavBeforeUsed","hasSlot","metanavAfterUsed","classes","stay","stayAndShowInMobileMenu","length","languageStay","searchAction","activeLanguage","getLocale","activeLanguageOption","find","renderMetanavItemButton","additionalClasses","additionalAttributes","Element","items","itemButton","href","h","target","class","important","labelHidden","labelShort","label","icon","iconOpen","name","badge","badgeEmpty","type","badgeType","Host","ref","el","logoAnalyticsId","menuId","onClick","menuLabel","action","role","searchId","searchFieldName","onChange","onInput","searchLabel","metanavId","Fragment","e","placement","distance","variant","size","slot","childItem","importantSubmenu","counter","languageId","languageLabel","text","language","active","navigationLabel","onFocusout","menuBackLabel","_d","_e","iconOnly","closeMetanavMenuLabel","replace","_f","dialogLanguageTitle"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/*\n @prop --logo-width: Width of logo\n * @prop --logo-height: Height of logo\n * @prop --logobar-background-color: Background color of logobar\n * @prop --stzh-header-logobar-background-color: Global: Background color of logobar\n \n @prop --stzh-header-height: Global: Height of header (readonly variable on `<html>`)\n * @prop --stzh-header-main-height: Global: Height of main header part (readonly variable on `<html>`)\n * @prop --stzh-header-metabar-height: Global: Height of metabar header (readonly variable on `<html>`)\n * @prop --stzh-header-logobar-height: Global: Height of logobar header (readonly variable on `<html>`)\n * @prop --stzh-header-is-stuck: Global: Whether head is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-header-is-not-stuck: Global: Whether head is currently not sticky (readonly variable on `<html>`)\n /\n\n:host {\n --logo-width: auto;\n --logo-height: 100%;\n --logobar-background-color: #{$headerLogobarBackgroundColor};\n\n @media print {\n display: none;\n }\n\n &[logo-type=\"vbz\"],\n &[logo-type=\"aoz\"],\n &[logo-type=\"pkzh\"],\n &[logo-type=\"uvz\"] {\n --logo-height: 31px;\n\n @include mq($from: medium) {\n --logo-height: 35px;\n }\n\n @include mq($from: ultra) {\n --logo-height: 53px;\n }\n }\n\n ::slotted([slot=\"logo\"]) {\n width: var(--logo-width);\n height: var(--logo-height);\n }\n}\n\n.stzh-header {\n @include fontSize('milli');\n color: $colorGrey90;\n\n &__inner,\n &__main {\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n // transition-property: box-shadow;\n // transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__inner {\n @include mq($from: small) {\n position: relative;\n z-index: $zIndexHeader;\n }\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__main {\n display: flex;\n flex-direction: column;\n background-color: $colorWhite;\n\n\t\t@include mq($to: small) {\n position: relative;\n z-index: $zIndexHeader;\n }\n }\n\n &__metabar {\n background-color: $colorCoolgrey10;\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: center;\n height: $headerMetabarHeight;\n\n\t\t// @include mq($to: medium) {\n // // overwrite container margin for regular\n // // to be able to use fullwidth of metabar\n // margin: 0 auto;\n // }\n\n\t\t@include mq($from: medium) {\n height: $headerMetabarHeightMediumUp;\n }\n }\n\n &__burger,\n &__search,\n &__metanav-item {\n color: $colorGrey90;\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n\n &:hover {\n color: $colorBlack;\n }\n }\n\n &__burger {\n @include font('heavy');\n @include fontSize('milli');\n display: flex;\n align-items: center;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0;\n margin-right: space('medium');\n gap: space('medium');\n color: $colorPrimary70;\n\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n margin-right: space('xxxxlarge');\n }\n }\n\n &__burger-icon {\n &.is-open {\n display: none;\n }\n }\n\n &__burger.is-open &__burger-icon.is-open {\n display: inline-flex;\n }\n\n &__burger.is-open &__burger-icon.is-close {\n display: none;\n }\n\n &__metabar-search {\n overflow: hidden; // prevents input from going out in smaller viewports\n margin-right: space('medium');\n transition-property: width;\n transition-duration: $baseTransitionAnimationSpeed;\n width: 40px;\n max-width: 345px;\n\n &:focus-within {\n width: 100%;\n }\n\n @include mq($from: small) {\n width: 96px;\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n // flex-shrink: 0; // prevent shrinking when metanav is in way\n width: 160px;\n margin-left: 0;\n margin-right: space('xxxxlarge');\n }\n }\n\n &__search {\n position: relative;\n display: block;\n width: 100%;\n }\n\n &__search-input {\n // width: 96px;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n color: transparent;\n font-family: inherit;\n font-size: inherit;\n border: none;\n padding: space('xsmall');\n padding-left: 0;\n padding-right: 0;\n height: $formInputHeightSmall;\n transition-property: padding-left, padding-right, background-color, color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n color: $colorSecondary60;\n padding-left: calc(#{iconSize()} + #{space('medium')});\n }\n\n &:focus {\n // width: 345px;\n color: $colorSecondary60;\n background-color: $colorWhite;\n padding-left: calc(#{space('medium')} + #{iconSize()} + #{space('medium')});\n padding-right: space('xlarge');\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n }\n\n &__search-input:focus ~ &__search-icon,\n &__search-input:focus ~ &__search-text {\n transform: translate(space('medium'), -50%);\n }\n\n &__search-input:focus ~ &__search-text {\n color: $colorGrey70;\n }\n\n &__search-text,\n &__search-icon {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n transition: transform $baseTransitionAnimationSpeed;\n }\n\n &__search-icon {\n left: 0px;\n\n @include mq($to: small) {\n transform: translate((40px - 24px) / 2, -50%);\n }\n }\n\n &__search-text {\n pointer-events: none;\n left: calc(#{iconSize()} + #{space('medium')});\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__metabar-nav {\n display: flex;\n align-items: center;\n margin-left: auto;\n gap: space('medium');\n\n @include mq($from: small) {\n gap: space('xlarge');\n }\n\n @include mq($from: medium) {\n gap: space('xxlarge');\n }\n }\n\n &__metanav-popover {\n --width: auto;\n --min-width: 254px;\n\n &.is-langnav {\n --min-width: 140px;\n }\n }\n\n &__metanav-item {\n display: none;\n gap: space('small');\n align-items: center;\n justify-content: center;\n appearance: none;\n background-color: transparent;\n padding: 0;\n border: none;\n text-decoration: none;\n font-size: 100%;\n font-family: inherit;\n white-space: nowrap;\n min-width: 40px;\n\n @include mq($from: medium) {\n display: flex;\n }\n\n &[aria-expanded=\"true\"] {\n color: $colorPrimary70;\n }\n\n &.is-heavy {\n @include font('heavy');\n }\n\n &.is-stay {\n display: flex;\n }\n\n &.is-popover-mobile {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &.is-popover-desktop {\n display: none;\n\n @include mq($from: medium) {\n display: flex;\n }\n }\n }\n\n &__metanav-menu-item {\n &.is-heavy {\n @include font('heavy');\n }\n }\n\n &__metanav-item-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n\n &.is-vhidden {\n @include visuallyhidden;\n }\n\n &.has-no-short-label {\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n }\n\n &__metanav-item-text-label-long {\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__metanav-item-text-label-short {\n @include mq($from: small) {\n display: none;\n }\n }\n\n &__metanav-icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__metanav-icon-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n }\n\n &__metanav-icon {\n &.is-open {\n display: none;\n }\n }\n\n &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-open {\n display: inline-flex;\n }\n\n &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-close {\n display: none;\n }\n\n // &__metabar-login {\n // display: flex;\n // flex-basis: 50%;\n\n // &:not(:empty) {\n // \t\t@include mq($from: medium) {\n // flex-basis: auto;\n // margin-left: space('small');\n // }\n // }\n // }\n\n // &__metabar-langnav {\n // &:not(:empty) {\n // @include mq($from: medium) {\n // margin-left: space('medium');\n // }\n // }\n // }\n\n &__logobar {\n display: flex;\n\n @include mq($from: ultra) {\n margin-left: auto;\n margin-right: auto;\n width: $containerMaxWidth;\n }\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n overflow: hidden;\n flex-shrink: 0;\n }\n\n &__logobar-decoration {\n background-color: var(--logobar-background-color);\n flex-grow: 1;\n\n\t\t@include mq($from: ultra) {\n width: calc((100% - 553px) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n\t\t}\n }\n\n &__logo-link {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n padding-top: 14px;\n padding-bottom: 11px;\n padding-left: $containerMargin;\n display: inline-flex;\n width: 288px;\n\t\theight: 66px;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n width: 300px;\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: medium) {\n width: 399px;\n\t\t\theight: 88px;\n padding-top: 18px;\n padding-bottom: 18px;\n\t\t\tpadding-left: $containerMarginMedium;\n\t\t}\n\n\t\t@include mq($from: large) {\n width: 617px;\n\t\t\theight: 135px;\n padding-top: 28px;\n padding-bottom: 24px;\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n width: 553px;\n padding-left: 0;\n }\n }\n\n &__flyout {\n @include fontSize('milli');\n z-index: calc(#{$zIndexHeader} - 1);\n position: fixed;\n visibility: hidden;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100dvw;\n height: 100dvh;\n overflow: auto;\n transition: visibility $baseTransitionAnimationSpeed;\n\n @media (min-height: 580px) {\n overflow: hidden;\n }\n\n @include mq($from: medium) {\n overflow: hidden;\n }\n }\n\n &__flyout-backdrop {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: $colorBlack40op;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__menu {\n position: absolute;\n width: 100%;\n height: auto;\n background-color: $colorSecondary30;\n display: grid;\n grid-template-rows: auto auto;\n transition-property: opacity, transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(-100%);\n opacity: 0;\n\n @media (min-height: 580px) {\n height: 100%;\n grid-template-rows: minmax(0, 1fr) auto;\n }\n\n @include mq($from: medium) {\n height: 100%;\n grid-template-rows: minmax(0, 1fr) auto;\n }\n\n @include mq($from: medium) {\n width: 335px;\n }\n\n @include mq($from: large) {\n width: 374px;\n }\n\n @include mq($from: large) {\n width: 439px;\n }\n\n @include mq($from: ultra) {\n width: calc((439px - #{$containerMarginLarge}) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2))\n }\n }\n\n &__menu-nav {\n position: relative;\n overflow-x: hidden;\n overflow-y: hidden;\n\n @media (min-height: 580px) {\n overflow-y: auto;\n }\n\n @include mq($from: medium) {\n overflow-y: auto;\n position: static;\n }\n }\n\n &__menu-metanav {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'medium');\n background-color: $colorSecondary20;\n\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__menu-metanav-nav {\n max-width: 375px;\n }\n\n &__menu-list,\n &__menu-metanav-list {\n display: block;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n &__menu-list,\n &__menu-metanav-list.is-level-2 {\n padding-top: calc(var(--stzh-header-main-height) + #{space('xxxlarge')});\n padding-bottom: space('xxxlarge');\n\n @include mq($from: medium) {\n padding-top: calc(var(--stzh-header-main-height) + #{space('huge')});\n }\n }\n\n &__menu-list.is-level-2,\n &__menu-metanav-list.is-level-2 {\n overflow: auto;\n background-color: $colorSecondary20;\n visibility: hidden;\n opacity: 0;\n transform: translateX(100%);\n position: absolute;\n z-index: 200;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: opacity, visibility, transform;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: medium) {\n z-index: initial;\n width: 315px;\n transform: none;\n left: 100%;\n // transition-property: opacity, visibility, transform;\n transition-property: opacity, visibility;\n }\n\n @include mq($from: large) {\n width: 334px;\n }\n\n @include mq($from: ultra) {\n width: 345px;\n }\n }\n\n &__menu-list.is-level-2 {\n height: max-content;\n\n @media (min-height: 580px) {\n height: 100%;\n }\n\n @include mq($from: medium) {\n height: 100%;\n }\n }\n\n &__menu-metanav-list.is-level-2 {\n background-color: $colorSecondary30;\n transform: none;\n transition-property: opacity, visibility;\n }\n\n // we add closing transition delay only to menu-list if hovering/focusing of another is currently active\n // to prevent showing background (flickering) when transitioning from one menu-list to another (on the same level)\n &__menu-list:where(:has(> #{&}__menu-list-item:hover > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list),\n &__menu-list:where(:has(> #{&}__menu-list-item.is-open > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list) {\n @include mq($from: medium) {\n transition-delay: $baseTransitionAnimationSpeed;\n }\n }\n\n &__menu-list-item:hover > &__menu-list,\n &__menu-list-item.is-open > &__menu-list {\n @include mq($from: medium) {\n z-index: 200;\n transition-delay: 0ms;\n visibility: visible;\n opacity: 1;\n // transform: translateX(0);\n }\n }\n\n &__menu-list-item:hover > &__menu-item,\n &__menu-list-item.is-open > &__menu-item {\n @include mq($from: medium) {\n background-color: $colorSecondary40;\n }\n\n &.is-level-2 {\n @include mq($from: medium) {\n background-color: $colorSecondary10;\n }\n }\n }\n\n &__menu-nav:has(#{&}__menu-list-item.is-open), // hide menu when any menu-list has been opened\n &__menu:has(#{&}__menu-metanav-list-item.is-open) &__menu-nav, // hide menu when menu metanav menu-list has been opened\n &__menu-list:has(#{&}__menu-list-item.is-open), // hide parent menu-list when sub menu-list has been opened\n &__menu-metanav-list:has(#{&}__menu-metanav-list-item.is-open) { // hide parent metanav menu-list when sub menu-list has been opened\n @include mq($to: medium) {\n transition-property: visibility;\n transition-duration: 0ms;\n transition-delay: $baseTransitionAnimationSpeed;\n visibility: hidden;\n // background-color: red;\n }\n }\n\n // force showing menu-list that is currently open\n &__menu-list-item.is-open > :where(#{&}__menu-list),\n &__menu-metanav-list-item.is-open > :where(#{&}__menu-metanav-list) {\n @include mq($to: medium) {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n // background-color: green;\n }\n }\n\n &__menu-list-item,\n &__menu-metanav-list-item {\n display: grid;\n }\n\n &__menu-list-item {\n &.is-backlink {\n display: block;\n }\n }\n\n &__menu-item,\n &__menu-metanav-item {\n @include font;\n @include fontSize('milli');\n display: flex;\n align-items: center;\n appearance: none;\n border: none;\n text-decoration: none;\n background-color: transparent;\n color: $colorPrimary70;\n padding-left: space('xxxlarge');\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__menu-item,\n &__menu-metanav-item {\n @include font('heavy');\n gap: space('xsmall');\n padding-top: space('small');\n padding-bottom: space('small');\n padding-right: space('large');\n }\n\n &__menu-item,\n &__menu-metanav-item {\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 variant /\n\n &--is-sticky &__logobar {\n transition-property: opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &--is-sticky &__inner,\n &--is-sticky &__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 // &--is-sticky-disabled &__main {\n // @include mq($from: medium) {\n // padding-top: $headerMetabarHeightMediumUp;\n // }\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} 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 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\" = \"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() 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 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 if (this.sticky === \"disabled\") {\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 return;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.stickyActive && this.belowStartStickyPoint) {\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 } else {\n if (this.stickyActive && this.belowStayStickyPoint) {\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 } else {\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 }\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 \|\| (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive);\n\n this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n this.hideLogo = 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 /* 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 headerHeight: 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 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-sticky-disabled\": this.sticky === \"disabled\",\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--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 };\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 {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 <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.label} 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} 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} class=\"stzh-header__menu-item is-level-2\">\n {item.label}\n </a>\n </li>\n )}\n </ul>\n }\n </li>\n )}\n </ul>\n </nav>\n\n {(this._metanavItems?.length > 0 \|\| this._languages?.length > 0) &&\n <div class=\"stzh-header__menu-metanav\">\n <nav class=\"stzh-header__menu-metanav-nav\">\n <ul class=\"stzh-header__menu-metanav-list is-level-1\">\n {this._metanavItems.map((item) =>\n <li\n class={{\n 'stzh-header__menu-metanav-list-item': true,\n 'is-open': item === this.currentOpenMetanavItem\n }}>\n {item.items?.length > 0\n ?\n <button\n aria-expanded={item === this.currentOpenMetanavItem ? \"true\" : \"false\"}\n aria-controls={item.id}\n class={{\n \"stzh-header__menu-metanav-item is-level-1\": true,\n \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n }}\n onClick={(e: MouseEvent) => {\n if (item === this.currentOpenMetanavItem) {\n this.closeMetanavItem();\n } else {\n this.openMetanavItem(e, item)\n }\n\n this.handleMetanavItemClick(e, item);\n }}\n >\n <span\n class={{\n \"stzh-header__menu-metanav-item-text\": true,\n \"is-vhidden\": item.labelHidden,\n }}\n >\n {item.label}\n </span>\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n </button>\n :\n <a\n href={item.href}\n class={{\n \"stzh-header__menu-metanav-item is-level-1\": true,\n \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n }}\n onClick={(e: MouseEvent) => {\n this.handleMetanavItemClick(e, item);\n }}\n >\n <span\n class={{\n \"stzh-header__menu-metanav-item-text\": true,\n \"is-vhidden\": item.labelHidden,\n }}\n >\n {item.label}\n </span>\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n </a>\n }\n {item.items?.length > 0 &&\n <ul\n id={item.id}\n class=\"stzh-header__menu-metanav-list is-level-2\"\n >\n <li class=\"stzh-header__menu-metanav-list-item\">\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n <span>{item.label}</span>\n <stzh-button\n class=\"stzh-header__menu-metanav-item-icon\"\n variant=\"tertiary\"\n icon=\"close\"\n iconOnly={true}\n label={this.localization.closeMetanavMenuLabel?.replace(/\\{itemLabel\\}/gi, item.label)}\n onClick={() => this.closeMetanavItem()}\n ></stzh-button>\n </div>\n </li>\n {item.items.map((item) =>\n <li class=\"stzh-header__menu-metanav-list-item\">\n <a href={item.href} class=\"stzh-header__menu-metanav-item is-level-2\">\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n <span class=\"stzh-header__menu-metanav-item-text\">\n <span>{item.label}</span>\n {item.counter &&\n <span class=\"stzh-header__menu-metanav-item-counter\">({item.counter})</span>\n }\n </span>\n </a>\n </li>\n )}\n\n {item.itemButton &&\n <li class=\"stzh-header__menu-metanav-list-item\">\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-action\">\n <stzh-button\n href={item.itemButton.href}\n target={item.itemButton.target}\n >\n {item.itemButton.label}\n </stzh-button>\n </div>\n </li>\n }\n </ul>\n }\n </li>\n )}\n\n {this._languages?.length > 0 &&\n <li\n class={{\n 'stzh-header__menu-metanav-list-item': true,\n 'is-open': this.currentOpenLanguage\n }}\n >\n <button\n aria-expanded={this.currentOpenLanguage ? \"true\" : \"false\"}\n aria-controls=\"submenu-languages\"\n class=\"stzh-header__menu-metanav-item is-level-1\"\n onClick={(e) => this.openLanguage(e)}\n >\n <span>{activeLanguageOption?.text}</span>\n <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"angle-down\"></stzh-icon>\n </button>\n <ul\n id=\"submenu-languages\"\n class=\"stzh-header__menu-metanav-list is-level-2\"\n >\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n <span>{this.localization.dialogLanguageTitle}</span>\n <stzh-button\n class=\"stzh-header__menu-metanav-item-icon\"\n variant=\"tertiary\"\n icon=\"close\"\n iconOnly={true}\n label={\"Sprach-Dialog schliessen\"}\n onClick={() => this.closeLanguage()}\n ></stzh-button>\n </div>\n {this._languages.map((language) =>\n <li class=\"stzh-header__menu-metanav-list-item\">\n <a\n class=\"stzh-header__menu-metanav-item is-level-2 is-language\"\n href={language.value}\n onClick={(event) => this.handleLanguageClick(event, language)}\n >\n <span>{language.text}</span>\n {activeLanguageOption?.value === language.value &&\n <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"checkmark\"></stzh-icon>}\n </a>\n </li>\n )}\n </ul>\n </li>\n }\n </ul>\n </nav>\n </div>\n }\n </div>\n </div>\n }\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["stzhHeaderCss","CLASS_BODY_OPEN","StzhHeader","this","lastOpener","flyoutOpenedByMetanavItem","handleMenuListFocusout","event","isNextFocusOutOfMenuList","currentTarget","contains","relatedTarget","isMedium","closeMenuItem","handleBurgerClick","async","closeMetanavItem","flyoutOpen","element","querySelector","window","setTimeout","focus","updatePosition","handleBackdropClick","handleMetanavItemClick","item","stzhMetanavItemClick","emit","component","originalEvent","handleSearchInput","searchValue","searchInput","value","stzhSearchChange","handleSearchChange","stzhSearchChanged","handleLanguageClick","dropdownOption","languagePreventUrlchange","preventDefault","languageActive","stzhLanguageChange","handleFlyoutResize","resizeMenunavElement","handleResize","sticky","debounceResize","cancelAnimationFrame","requestAnimationFrame","readTask","media","matches","mainHeight","_a","mainElement","offsetHeight","metabarHeight","_b","metabarElement","logobarHeight","_c","logobarElement","headerTop","offsetTop","headerHeight","writeTask","document","documentElement","style","setProperty","scrollListener","handleKeydown","key","flyoutOpenWatcher","open","currentOpenMenuItem","currentOpenMetanavItem","currentOpenLanguage","body","classList","remove","enableSiblings","trap","deactivate","add","disableSiblings","activate","fixedWatcher","paddingTop","fixed","waitForNextRender","fixedTransition","stickyWatcher","stickyActive","scrollingUp","belowStayStickyPoint","belowStartStickyPoint","currentScrollY","scrollY","lastScrollY","headerOverlap","hideLogo","searchValueWatcher","newValue","searchFilled","menuItemsWatcher","_menuItems","JSON","parse","map","menuItem","index","Object","assign","id","metanavItemsWatcher","_metanavItems","metanavItem","languagesWatcher","_languages","getSiblings","parentElement","Array","from","children","filter","child","forEach","sibling","setAttribute","removeAttribute","Promise","resolve","renderPromiseResolve","openSubmenuElement","menunavElement","height","getBoundingClientRect","openMenuItem","scrollTop","firstButtonOrLink","tabbable","focusOpener","openMetanavItem","openMetanavSubmenuElement","openLanguage","closeLanguage","componentWillLoad","menuItems","metanavItems","languages","localization","stzhComponents","utils","fetchTranslations","componentDidRender","flyoutElement","flyoutResizeObserver","observe","componentDidLoad","createFocusTrap","createBaseFocusTrapOptions","initialFocus","ResizeObserver","connectedCallback","resizeObserver","disconnectedCallback","disconnect","render","metanavBeforeUsed","hasSlot","metanavAfterUsed","classes","stay","stayAndShowInMobileMenu","length","languageStay","searchAction","activeLanguage","getLocale","activeLanguageOption","find","renderMetanavItemButton","additionalClasses","additionalAttributes","Element","items","itemButton","href","h","target","class","important","labelHidden","labelShort","label","icon","iconOpen","name","badge","badgeEmpty","type","badgeType","Host","ref","el","logoAnalyticsId","menuId","onClick","menuLabel","action","role","searchId","searchFieldName","onChange","onInput","searchLabel","metanavId","Fragment","e","placement","distance","variant","size","slot","childItem","importantSubmenu","counter","languageId","languageLabel","text","language","active","navigationLabel","onFocusout","menuBackLabel","_d","_e","iconOnly","closeMetanavMenuLabel","replace","_f","dialogLanguageTitle"],"sources":["src/components/stzh-header/stzh-header.scss?tag=stzh-header&encapsulation=scoped","src/components/stzh-header/stzh-header.tsx"],"sourcesContent":["/*\n @prop --logo-width: Width of logo\n * @prop --logo-height: Height of logo\n * @prop --logobar-background-color: Background color of logobar\n * @prop --stzh-header-logobar-background-color: Global: Background color of logobar\n \n @prop --stzh-header-height: Global: Height of header (readonly variable on `<html>`)\n * @prop --stzh-header-main-height: Global: Height of main header part (readonly variable on `<html>`)\n * @prop --stzh-header-metabar-height: Global: Height of metabar header (readonly variable on `<html>`)\n * @prop --stzh-header-logobar-height: Global: Height of logobar header (readonly variable on `<html>`)\n * @prop --stzh-header-is-stuck: Global: Whether head is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-header-is-not-stuck: Global: Whether head is currently not sticky (readonly variable on `<html>`)\n /\n\n:host {\n --logo-width: auto;\n --logo-height: 100%;\n --logobar-background-color: #{$headerLogobarBackgroundColor};\n\n @media print {\n display: none;\n }\n\n &[logo-type=\"vbz\"],\n &[logo-type=\"aoz\"],\n &[logo-type=\"pkzh\"],\n &[logo-type=\"uvz\"] {\n --logo-height: 31px;\n\n @include mq($from: medium) {\n --logo-height: 35px;\n }\n\n @include mq($from: ultra) {\n --logo-height: 53px;\n }\n }\n\n ::slotted([slot=\"logo\"]) {\n width: var(--logo-width);\n height: var(--logo-height);\n }\n}\n\n.stzh-header {\n @include fontSize('milli');\n color: $colorGrey90;\n\n &__inner,\n &__main {\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n // transition-property: box-shadow;\n // transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__inner {\n @include mq($from: small) {\n position: relative;\n z-index: $zIndexHeader;\n }\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__main {\n display: flex;\n flex-direction: column;\n background-color: $colorWhite;\n\n\t\t@include mq($to: small) {\n position: relative;\n z-index: $zIndexHeader;\n }\n }\n\n &__metabar {\n background-color: $colorCoolgrey10;\n }\n\n &__metabar-inner {\n @include container;\n display: flex;\n align-items: center;\n height: $headerMetabarHeight;\n\n\t\t// @include mq($to: medium) {\n // // overwrite container margin for regular\n // // to be able to use fullwidth of metabar\n // margin: 0 auto;\n // }\n\n\t\t@include mq($from: medium) {\n height: $headerMetabarHeightMediumUp;\n }\n }\n\n &__burger,\n &__search,\n &__metanav-item {\n color: $colorGrey90;\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n\n &:hover {\n color: $colorBlack;\n }\n }\n\n &__burger {\n @include font('heavy');\n @include fontSize('milli');\n display: flex;\n align-items: center;\n appearance: none;\n background-color: transparent;\n border: none;\n padding: 0;\n margin-right: space('medium');\n gap: space('medium');\n color: $colorPrimary70;\n\n @include mq($from: small) {\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n margin-right: space('xxxxlarge');\n }\n }\n\n &__burger-icon {\n &.is-open {\n display: none;\n }\n }\n\n &__burger.is-open &__burger-icon.is-open {\n display: inline-flex;\n }\n\n &__burger.is-open &__burger-icon.is-close {\n display: none;\n }\n\n &__metabar-search {\n overflow: hidden; // prevents input from going out in smaller viewports\n margin-right: space('medium');\n transition-property: width;\n transition-duration: $baseTransitionAnimationSpeed;\n width: 40px;\n max-width: 345px;\n\n &:focus-within {\n width: 100%;\n }\n\n @include mq($from: small) {\n width: 96px;\n margin-right: space('xxlarge');\n }\n\n @include mq($from: medium) {\n // flex-shrink: 0; // prevent shrinking when metanav is in way\n width: 160px;\n margin-left: 0;\n margin-right: space('xxxxlarge');\n }\n }\n\n &__search {\n position: relative;\n display: block;\n width: 100%;\n }\n\n &__search-input {\n // width: 96px;\n width: 100%;\n max-width: 100%;\n background-color: transparent;\n color: transparent;\n font-family: inherit;\n font-size: inherit;\n border: none;\n padding: space('xsmall');\n padding-left: 0;\n padding-right: 0;\n height: $formInputHeightSmall;\n transition-property: padding-left, padding-right, background-color, color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n color: $colorSecondary60;\n padding-left: calc(#{iconSize()} + #{space('medium')});\n }\n\n &:focus {\n // width: 345px;\n color: $colorSecondary60;\n background-color: $colorWhite;\n padding-left: calc(#{space('medium')} + #{iconSize()} + #{space('medium')});\n padding-right: space('xlarge');\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n }\n\n &__search-input:focus ~ &__search-icon,\n &__search-input:focus ~ &__search-text {\n transform: translate(space('medium'), -50%);\n }\n\n &__search-input:focus ~ &__search-text {\n color: $colorGrey70;\n }\n\n &__search-text,\n &__search-icon {\n position: absolute;\n top: 50%;\n transform: translate(0, -50%);\n transition: transform $baseTransitionAnimationSpeed;\n }\n\n &__search-icon {\n left: 0px;\n\n @include mq($to: small) {\n transform: translate((40px - 24px) / 2, -50%);\n }\n }\n\n &__search-text {\n pointer-events: none;\n left: calc(#{iconSize()} + #{space('medium')});\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__metabar-nav {\n display: flex;\n align-items: center;\n margin-left: auto;\n gap: space('medium');\n\n @include mq($from: small) {\n gap: space('xlarge');\n }\n\n @include mq($from: medium) {\n gap: space('xxlarge');\n }\n }\n\n &__metanav-popover {\n --width: auto;\n --min-width: 254px;\n\n &.is-langnav {\n --min-width: 140px;\n }\n }\n\n &__metanav-item {\n display: none;\n gap: space('small');\n align-items: center;\n justify-content: center;\n appearance: none;\n background-color: transparent;\n padding: 0;\n border: none;\n text-decoration: none;\n font-size: 100%;\n font-family: inherit;\n white-space: nowrap;\n min-width: 40px;\n\n @include mq($from: medium) {\n display: flex;\n }\n\n &[aria-expanded=\"true\"] {\n color: $colorPrimary70;\n }\n\n &.is-heavy {\n @include font('heavy');\n }\n\n &.is-stay {\n display: flex;\n }\n\n &.is-popover-mobile {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &.is-popover-desktop {\n display: none;\n\n @include mq($from: medium) {\n display: flex;\n }\n }\n }\n\n &__metanav-menu-item {\n &.is-heavy {\n @include font('heavy');\n }\n }\n\n &__metanav-item-text {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n\n &.is-vhidden {\n @include visuallyhidden;\n }\n\n &.has-no-short-label {\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n }\n\n &__metanav-item-text-label-long {\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__metanav-item-text-label-short {\n @include mq($from: small) {\n display: none;\n }\n }\n\n &__metanav-icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__metanav-icon-badge {\n position: absolute;\n top: -4px;\n right: -4px;\n }\n\n &__metanav-icon {\n &.is-open {\n display: none;\n }\n }\n\n &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-open {\n display: inline-flex;\n }\n\n &__metanav-item[aria-expanded=\"true\"] &__metanav-icon.is-close {\n display: none;\n }\n\n // &__metabar-login {\n // display: flex;\n // flex-basis: 50%;\n\n // &:not(:empty) {\n // \t\t@include mq($from: medium) {\n // flex-basis: auto;\n // margin-left: space('small');\n // }\n // }\n // }\n\n // &__metabar-langnav {\n // &:not(:empty) {\n // @include mq($from: medium) {\n // margin-left: space('medium');\n // }\n // }\n // }\n\n &__logobar {\n display: flex;\n\n @include mq($from: ultra) {\n margin-left: auto;\n margin-right: auto;\n width: $containerMaxWidth;\n }\n }\n\n &__logobar-logo {\n box-sizing: content-box;\n display: flex;\n overflow: hidden;\n flex-shrink: 0;\n }\n\n &__logobar-decoration {\n background-color: var(--logobar-background-color);\n flex-grow: 1;\n\n\t\t@include mq($from: ultra) {\n width: calc((100% - 553px) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2));\n margin-right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / -2);\n\t\t}\n }\n\n &__logo-link {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n padding-top: 14px;\n padding-bottom: 11px;\n padding-left: $containerMargin;\n display: inline-flex;\n width: 288px;\n\t\theight: 66px;\n transition: opacity $baseTransitionAnimationSpeed;\n\n\t\t@include mq($from: small) {\n width: 300px;\n\t\t\tpadding-left: $containerMarginSmall;\n\t\t}\n\n\t\t@include mq($from: medium) {\n width: 399px;\n\t\t\theight: 88px;\n padding-top: 18px;\n padding-bottom: 18px;\n\t\t\tpadding-left: $containerMarginMedium;\n\t\t}\n\n\t\t@include mq($from: large) {\n width: 617px;\n\t\t\theight: 135px;\n padding-top: 28px;\n padding-bottom: 24px;\n\t\t\tpadding-left: $containerMarginLarge;\n }\n\n\t\t@include mq($from: ultra) {\n width: 553px;\n padding-left: 0;\n }\n }\n\n &__flyout {\n @include fontSize('milli');\n z-index: calc(#{$zIndexHeader} - 1);\n position: fixed;\n visibility: hidden;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100dvw;\n height: 100dvh;\n overflow: auto;\n transition: visibility $baseTransitionAnimationSpeed;\n\n @media (min-height: 580px) {\n overflow: hidden;\n }\n\n @include mq($from: medium) {\n overflow: hidden;\n }\n }\n\n &__flyout-backdrop {\n position: absolute;\n width: 100%;\n height: 100%;\n background-color: $colorBlack40op;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__menu {\n position: absolute;\n width: 100%;\n height: auto;\n background-color: $colorSecondary30;\n display: grid;\n grid-template-rows: auto auto;\n transition-property: opacity, transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(-100%);\n opacity: 0;\n\n @media (min-height: 580px) {\n height: 100%;\n grid-template-rows: minmax(0, 1fr) auto;\n }\n\n @include mq($from: medium) {\n height: 100%;\n grid-template-rows: minmax(0, 1fr) auto;\n }\n\n @include mq($from: medium) {\n width: 335px;\n }\n\n @include mq($from: large) {\n width: 374px;\n }\n\n @include mq($from: large) {\n width: 439px;\n }\n\n @include mq($from: ultra) {\n width: calc((439px - #{$containerMarginLarge}) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2))\n }\n }\n\n &__menu-nav {\n position: relative;\n overflow-x: hidden;\n overflow-y: hidden;\n\n @media (min-height: 580px) {\n overflow-y: auto;\n }\n\n @include mq($from: medium) {\n overflow-y: auto;\n position: static;\n }\n }\n\n &__menu-metanav {\n @include spaceCurve('padding-top', 'tiny');\n @include spaceCurve('padding-bottom', 'medium');\n background-color: $colorSecondary20;\n\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__menu-metanav-nav {\n max-width: 375px;\n }\n\n &__menu-list,\n &__menu-metanav-list {\n display: block;\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n &__menu-list,\n &__menu-metanav-list.is-level-2 {\n padding-top: calc(var(--stzh-header-main-height) + #{space('xxxlarge')});\n padding-bottom: space('xxxlarge');\n\n @include mq($from: medium) {\n padding-top: calc(var(--stzh-header-main-height) + #{space('huge')});\n }\n }\n\n &__menu-list.is-level-2,\n &__menu-metanav-list.is-level-2 {\n overflow: auto;\n background-color: $colorSecondary20;\n visibility: hidden;\n opacity: 0;\n transform: translateX(100%);\n position: absolute;\n z-index: 200;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transition-property: opacity, visibility, transform;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: medium) {\n z-index: initial;\n width: 315px;\n transform: none;\n left: 100%;\n // transition-property: opacity, visibility, transform;\n transition-property: opacity, visibility;\n }\n\n @include mq($from: large) {\n width: 334px;\n }\n\n @include mq($from: ultra) {\n width: 345px;\n }\n }\n\n &__menu-list.is-level-2 {\n height: max-content;\n\n @media (min-height: 580px) {\n height: 100%;\n }\n\n @include mq($from: medium) {\n height: 100%;\n }\n }\n\n &__menu-metanav-list.is-level-2 {\n background-color: $colorSecondary30;\n transform: none;\n transition-property: opacity, visibility;\n }\n\n // we add closing transition delay only to menu-list if hovering/focusing of another is currently active\n // to prevent showing background (flickering) when transitioning from one menu-list to another (on the same level)\n &__menu-list:where(:has(> #{&}__menu-list-item:hover > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list),\n &__menu-list:where(:has(> #{&}__menu-list-item.is-open > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list) {\n @include mq($from: medium) {\n transition-delay: $baseTransitionAnimationSpeed;\n }\n }\n\n &__menu-list-item:hover > &__menu-list,\n &__menu-list-item.is-open > &__menu-list {\n @include mq($from: medium) {\n z-index: 200;\n transition-delay: 0ms;\n visibility: visible;\n opacity: 1;\n // transform: translateX(0);\n }\n }\n\n &__menu-list-item:hover > &__menu-item,\n &__menu-list-item.is-open > &__menu-item {\n @include mq($from: medium) {\n background-color: $colorSecondary40;\n }\n\n &.is-level-2 {\n @include mq($from: medium) {\n background-color: $colorSecondary10;\n }\n }\n }\n\n &__menu-nav:has(#{&}__menu-list-item.is-open), // hide menu when any menu-list has been opened\n &__menu:has(#{&}__menu-metanav-list-item.is-open) &__menu-nav, // hide menu when menu metanav menu-list has been opened\n &__menu-list:has(#{&}__menu-list-item.is-open), // hide parent menu-list when sub menu-list has been opened\n &__menu-metanav-list:has(#{&}__menu-metanav-list-item.is-open) { // hide parent metanav menu-list when sub menu-list has been opened\n @include mq($to: medium) {\n transition-property: visibility;\n transition-duration: 0ms;\n transition-delay: $baseTransitionAnimationSpeed;\n visibility: hidden;\n // background-color: red;\n }\n }\n\n // force showing menu-list that is currently open\n &__menu-list-item.is-open > :where(#{&}__menu-list),\n &__menu-metanav-list-item.is-open > :where(#{&}__menu-metanav-list) {\n @include mq($to: medium) {\n transform: translateX(0);\n opacity: 1;\n visibility: visible;\n // background-color: green;\n }\n }\n\n &__menu-list-item,\n &__menu-metanav-list-item {\n display: grid;\n }\n\n &__menu-list-item {\n &.is-backlink {\n display: block;\n }\n }\n\n &__menu-item,\n &__menu-metanav-item {\n @include font;\n @include fontSize('milli');\n display: flex;\n align-items: center;\n appearance: none;\n border: none;\n text-decoration: none;\n background-color: transparent;\n color: $colorPrimary70;\n padding-left: space('xxxlarge');\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__menu-item,\n &__menu-metanav-item {\n @include font('heavy');\n gap: space('xsmall');\n padding-top: space('small');\n padding-bottom: space('small');\n padding-right: space('large');\n }\n\n &__menu-item,\n &__menu-metanav-item {\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 variant /\n\n &--is-sticky &__logobar {\n transition-property: opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &--is-sticky &__inner,\n &--is-sticky &__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 // &--is-sticky-disabled &__main {\n // @include mq($from: medium) {\n // padding-top: $headerMetabarHeightMediumUp;\n // }\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} 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 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\" = \"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() 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 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 if (this.sticky === \"disabled\") {\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 return;\n }\n\n if (this.scrollingUp && this.belowStayStickyPoint) {\n if (!this.stickyActive && this.belowStartStickyPoint) {\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 } else {\n if (this.stickyActive && this.belowStayStickyPoint) {\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 } else {\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 }\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 \|\| (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive);\n\n this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n this.hideLogo = 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 /* 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 headerHeight: 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 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-sticky-disabled\": this.sticky === \"disabled\",\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--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 };\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 {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 <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} 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} 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} class=\"stzh-header__menu-item is-level-2\">\n {item.label}\n </a>\n </li>\n )}\n </ul>\n }\n </li>\n )}\n </ul>\n </nav>\n\n {(this._metanavItems?.length > 0 \|\| this._languages?.length > 0) &&\n <div class=\"stzh-header__menu-metanav\">\n <nav class=\"stzh-header__menu-metanav-nav\">\n <ul class=\"stzh-header__menu-metanav-list is-level-1\">\n {this._metanavItems.map((item) =>\n <li\n class={{\n 'stzh-header__menu-metanav-list-item': true,\n 'is-open': item === this.currentOpenMetanavItem\n }}>\n {item.items?.length > 0\n ?\n <button\n aria-expanded={item === this.currentOpenMetanavItem ? \"true\" : \"false\"}\n aria-controls={item.id}\n class={{\n \"stzh-header__menu-metanav-item is-level-1\": true,\n \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n }}\n onClick={(e: MouseEvent) => {\n if (item === this.currentOpenMetanavItem) {\n this.closeMetanavItem();\n } else {\n this.openMetanavItem(e, item)\n }\n\n this.handleMetanavItemClick(e, item);\n }}\n >\n <span\n class={{\n \"stzh-header__menu-metanav-item-text\": true,\n \"is-vhidden\": item.labelHidden,\n }}\n >\n {item.label}\n </span>\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n </button>\n :\n <a\n href={item.href}\n class={{\n \"stzh-header__menu-metanav-item is-level-1\": true,\n \"is-hidden\": item.stay && !item.stayAndShowInMobileMenu\n }}\n onClick={(e: MouseEvent) => {\n this.handleMetanavItemClick(e, item);\n }}\n >\n <span\n class={{\n \"stzh-header__menu-metanav-item-text\": true,\n \"is-vhidden\": item.labelHidden,\n }}\n >\n {item.label}\n </span>\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n </a>\n }\n {item.items?.length > 0 &&\n <ul\n id={item.id}\n class=\"stzh-header__menu-metanav-list is-level-2\"\n >\n <li class=\"stzh-header__menu-metanav-list-item\">\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n <span>{item.label}</span>\n <stzh-button\n class=\"stzh-header__menu-metanav-item-icon\"\n variant=\"tertiary\"\n icon=\"close\"\n iconOnly={true}\n label={this.localization.closeMetanavMenuLabel?.replace(/\\{itemLabel\\}/gi, item.label)}\n onClick={() => this.closeMetanavItem()}\n ></stzh-button>\n </div>\n </li>\n {item.items.map((item) =>\n <li class=\"stzh-header__menu-metanav-list-item\">\n <a href={item.href} class=\"stzh-header__menu-metanav-item is-level-2\">\n {item.icon && <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>}\n <span class=\"stzh-header__menu-metanav-item-text\">\n <span>{item.label}</span>\n {item.counter &&\n <span class=\"stzh-header__menu-metanav-item-counter\">({item.counter})</span>\n }\n </span>\n </a>\n </li>\n )}\n\n {item.itemButton &&\n <li class=\"stzh-header__menu-metanav-list-item\">\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-action\">\n <stzh-button\n href={item.itemButton.href}\n target={item.itemButton.target}\n >\n {item.itemButton.label}\n </stzh-button>\n </div>\n </li>\n }\n </ul>\n }\n </li>\n )}\n\n {this._languages?.length > 0 &&\n <li\n class={{\n 'stzh-header__menu-metanav-list-item': true,\n 'is-open': this.currentOpenLanguage\n }}\n >\n <button\n aria-expanded={this.currentOpenLanguage ? \"true\" : \"false\"}\n aria-controls=\"submenu-languages\"\n class=\"stzh-header__menu-metanav-item is-level-1\"\n onClick={(e) => this.openLanguage(e)}\n >\n <span>{activeLanguageOption?.text}</span>\n <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"angle-down\"></stzh-icon>\n </button>\n <ul\n id=\"submenu-languages\"\n class=\"stzh-header__menu-metanav-list is-level-2\"\n >\n <div class=\"stzh-header__menu-metanav-item is-level-2 is-title\">\n <span>{this.localization.dialogLanguageTitle}</span>\n <stzh-button\n class=\"stzh-header__menu-metanav-item-icon\"\n variant=\"tertiary\"\n icon=\"close\"\n iconOnly={true}\n label={\"Sprach-Dialog schliessen\"}\n onClick={() => this.closeLanguage()}\n ></stzh-button>\n </div>\n {this._languages.map((language) =>\n <li class=\"stzh-header__menu-metanav-list-item\">\n <a\n class=\"stzh-header__menu-metanav-item is-level-2 is-language\"\n href={language.value}\n onClick={(event) => this.handleLanguageClick(event, language)}\n >\n <span>{language.text}</span>\n {activeLanguageOption?.value === language.value &&\n <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name=\"checkmark\"></stzh-icon>}\n </a>\n </li>\n )}\n </ul>\n </li>\n }\n </ul>\n </nav>\n </div>\n }\n </div>\n </div>\n }\n </header>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-d2f7c020.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as s,h as i,a as o,g as h}from"./p-c7bfac7a.js";import{c as e,a as r,A as a,o as l,f as n,s as c,b as p}from"./p-a2da1df4.js";import{c as d}from"./p-ed63ed76.js";import{i as z}from"./p-7e304ea3.js";import{w as f}from"./p-54bd842e.js";import{s as u,a as m}from"./p-7e2354d0.js";import"./p-9b063923.js";const b=".sc-stzh-tooltip-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-tooltip-h{display:none}.sc-stzh-tooltip-h .sc-stzh-tooltip,.sc-stzh-tooltip-h .sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::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-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";const v={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};const g={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};const w={ESC:27};let _=0;const y=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=t=>{if(t.keyCode===w.ESC){this.hide()}};this.computePosition=async()=>{if(!this.open){return}const{x:t=0,y:s=0,strategy:i="absolute",placement:o,middlewareData:h}=await e(this.triggerFirstElement,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[l({mainAxis:this.distance,crossAxis:this.skidding}),n({padding:5}),c({padding:5}),p({element:this.arrowElement,padding:5})]});this.middlewareData=h;this.computedPlacement=o;Object.assign(this.contentElement.style,{position:i,left:`${t}px`,top:`${s}px`});Object.assign(this.arrowElement.style,{left:t!=null?`${h.arrow.x}px`:"",top:s!=null?`${h.arrow.y}px`:""})};this.onClickTrigger=()=>{if(this.hasTrigger("click")){this.toggle()}};this.onMouseEnterTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=true;this.show()}};this.onMouseLeaveTrigger=()=>{if(this.hasTrigger("hover")){this.isHovering=false;document.addEventListener("mousemove",this.onMouseMoveDocument)}};this.onFocusTrigger=()=>{if(this.hasTrigger("focus")){this.show()}};this.onBlurTrigger=()=>{if(this.hasTrigger("focus")){this.hide()}};this.onMouseMoveDocument=t=>{const{clientX:s,clientY:i}=t;if(!this.computedPlacement){return true}const o=this.computedPlacement.split("-")[0];const h=this.middlewareData.offset;const e=this.contentElement.getBoundingClientRect();if(!h){return true}const r=o==="bottom"?h.y:0;const a=o==="top"?h.y:0;const l=o==="right"?h.x:0;const n=o==="left"?h.x:0;const c=e.top-i>r;const p=i-e.bottom>a;const d=e.left-s>l;const z=s-e.right>n;if(c\|\|p\|\|d\|\|z){document.removeEventListener("mousemove",this.onMouseMoveDocument);if(!this.isHovering){this.hide()}}};this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.size="default";this.skidding=0;this.distance=12;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return f(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return f(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async update(){return await this.computePosition()}async openWatcher(t){if(!this.contentElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}await u(this.contentElement);this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;await m(this.contentElement,v.keyframes,v.options);if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}await u(this.contentElement);await m(this.contentElement,g.keyframes,g.options);this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}}this.toggledByMethod=false}triggerWatcher(t){this._trigger=t.split(" ")}handleDocumentClick(t){if(!this.open){return}const s=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;const i=t.target===this.triggerElement\|\|this.triggerElement.contains(t.target);if(s&&!i&&this.hasTrigger("click")){this.hide()}}hasTrigger(t){return this._trigger.indexOf(t)>-1}async componentWillLoad(){this.id=`stzh-tooltip-${_++}`;this.triggerWatcher(this.trigger);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"tooltip")}}componentDidRender(){this.computePosition();const t=z(this.triggerFirstElement);if(this.hasTrigger("click")){this.triggerFirstElement.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")\|\|!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-trigger-description`)}if(t&&!this.triggerFirstElement.getAttribute("a11y-label")\|\|!t&&!this.triggerFirstElement.getAttribute("aria-label")){this.triggerFirstElement.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerFirstElement.getAttribute("analytics-id")\|\|!t&&!this.triggerFirstElement.getAttribute("s-object-id")){this.triggerFirstElement.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerFirstElement.getAttribute("a11y-describedby")\|\|!t&&!this.triggerFirstElement.getAttribute("aria-describedby")){this.triggerFirstElement.setAttribute(t?"a11y-describedby":"aria-describedby",`${this.id}-content`)}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}}componentDidUpdate(){if(this.trap){this.trap.updateContainerElements(this.contentElement)}}componentDidLoad(){this.autoUpdateCleanup=r(this.element,this.contentElement,this.computePosition);if(this.interactive){this.trap=d(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.trap.activate()}}this.contentElement.hidden=!this.open}connectedCallback(){var t;let s=(t=this.triggerElement)===null\|\|t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){this.triggerFirstElement=s;s.addEventListener("click",this.onClickTrigger);s.addEventListener("mouseenter",this.onMouseEnterTrigger);s.addEventListener("mouseleave",this.onMouseLeaveTrigger);s.addEventListener("focusin",this.onFocusTrigger);s.addEventListener("focusout",this.onBlurTrigger)}}disconnectedCallback(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerFirstElement){this.triggerFirstElement.removeEventListener("click",this.onClickTrigger);this.triggerFirstElement.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerFirstElement.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerFirstElement.removeEventListener("focusin",this.onFocusTrigger);this.triggerFirstElement.removeEventListener("focusout",this.onBlurTrigger)}}render(){const t={"stzh-tooltip":true,[`stzh-tooltip--open`]:this.open,[`stzh-tooltip--placement-${this.computedPlacement}`]:!!this.computedPlacement};return i(o,null,i("div",{class:t},i("div",{class:"stzh-tooltip__trigger",ref:t=>this.triggerElement=t},i("slot",null)),this.hasTrigger("click")&&i("div",{class:"stzh-tooltip__vhidden",id:`${this.id}-trigger-description`},this.localization.open),i("div",{class:"stzh-tooltip__content",id:`${this.id}-content`,ref:t=>this.contentElement=t,tabindex:"-1","aria-labelledby":this.label?`${this.id}-label`:null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},i("div",{class:"stzh-tooltip__arrow",ref:t=>this.arrowElement=t,innerHTML:a}),this.label&&i("h2",{id:`${this.id}-label`,class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&i("button",{class:"stzh-tooltip__close",onClick:()=>this.hide(),type:"button"},i("stzh-icon",{name:"close",class:"stzh-tooltip__icon"}),i("span",{class:"stzh-tooltip__vhidden"},this.localization.close)),i("stzh-text",{curve:"none",class:"stzh-tooltip__content-slot"},this.content?this.content:i("slot",{name:"content"})))))}get element(){return h(this)}static get watchers(){return{open:["openWatcher"],trigger:["triggerWatcher"]}}};y.style=b;export{y as stzh_tooltip};
2	+ //# sourceMappingURL=p-d2f7c020.entry.js.map

package/dist/stzh-components/p-d2f7c020.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhTooltipCss","ANIMATION_SHOW","keyframes","opacity","options","duration","easing","ANIMATION_HIDE","keyCode","ESC","tooltipCounter","StzhTooltip","this","toggledByMethod","isHovering","onEscKey","event","hide","computePosition","async","open","x","y","strategy","placement","middlewareData","triggerFirstElement","contentElement","middleware","offset","mainAxis","distance","crossAxis","skidding","flip","padding","shift","arrow","element","arrowElement","computedPlacement","Object","assign","style","position","left","top","onClickTrigger","hasTrigger","toggle","onMouseEnterTrigger","show","onMouseLeaveTrigger","document","addEventListener","onMouseMoveDocument","onFocusTrigger","onBlurTrigger","clientX","clientY","basePlacement","split","offsetData","popperRect","getBoundingClientRect","topDistance","bottomDistance","leftDistance","rightDistance","exceedsTop","exceedsBottom","bottom","exceedsLeft","exceedsRight","right","removeEventListener","waitForEvent","update","openWatcher","newValue","stzhOpen","emit","component","stopAnimations","willChange","hidden","animateTo","stzhOpened","stzhClose","stzhClosed","triggerWatcher","_trigger","handleDocumentClick","isClickOutside","target","contains","isClickTrigger","triggerElement","trigger","indexOf","componentWillLoad","id","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","isStzh","isStzhElement","setAttribute","getAttribute","label","trap","activate","deactivate","componentDidUpdate","updateContainerElements","componentDidLoad","autoUpdateCleanup","autoUpdate","interactive","createFocusTrap","fallbackFocus","clickOutsideDeactivates","returnFocusOnDeactivate","connectedCallback","_a","firstElementChild","defaultSlot","Array","from","children","find","child","hasAttribute","disconnectedCallback","render","classes","h","Host","class","ref","el","tabindex","onKeyDown","onMouseEnter","onMouseLeave","onFocusin","onFocusout","innerHTML","Arrow","onClick","type","name","close","curve","content"],"sources":["src/components/stzh-tooltip/stzh-tooltip.scss?tag=stzh-tooltip&encapsulation=scoped","src/components/stzh-tooltip/stzh-tooltip.tsx"],"sourcesContent":["/**\n * @prop --width: Width of tooltip\n * @prop --min-width: Minimum width of tooltip\n * @prop --max-width: Maximum width of tooltip\n * @prop --padding: Padding of tooltip\n * @prop --border-radius: Border radius of tooltip\n *\n * @prop --stzh-tooltip-width: **Global**: Width of tooltip (default `auto`)\n * @prop --stzh-tooltip-min-width: **Global**: Minimum width of tooltip (default `initial`)\n * @prop --stzh-tooltip-max-width: **Global**: Maximum width of tooltip (default `334px`)\n * @prop --stzh-tooltip-padding: **Global**: Padding of tooltip (default `var(--stzh-space-small)`)\n * @prop --stzh-tooltip-border-radius: **Global**: Border radius of tooltip (default `3px`)\n * @prop --stzh-tooltip-drop-shadow: **Global**: Border radius of tooltip (default `drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.16))`)\n */\n\n:host {\n display: contents;\n\n --color: #{$colorWhite};\n --background-color: #{$colorCoolgrey60};\n --width: #{$tooltipWidth};\n --min-width: #{$tooltipMinWidth};\n --max-width: #{$tooltipMaxWidth};\n --padding: #{$tooltipPadding};\n --border-radius: #{$tooltipBorderRadius};\n --link-color: #{$colorWhite};\n\n --hover-link-color: #{$colorWhite70op};\n\n &[size=\"small\"] {\n --padding: #{$tooltipSmallPadding};\n }\n}\n\n.stzh-tooltip {\n @include tooltip-arrow;\n display: contents;\n\n &__trigger {\n display: contents;\n }\n\n &__content {\n @include tooltip-fontsize;\n @include tooltip-dropshadow;\n position: absolute;\n z-index: $zIndexPopover;\n border-radius: var(--border-radius);\n background-color: var(--background-color);\n color: var(--color);\n width: var(--width);\n min-width: var(--min-width);\n max-width: var(--max-width);\n display: flex;\n flex-direction: row-reverse;\n\n --stzh-base-color: var(--color);\n --stzh-link-color: var(--link-color);\n // TODO: check with designer which color it should be for hover\n --stzh-link-hover-color: var(--hover-link-color);\n }\n\n &__content-slot {\n padding: var(--padding);\n }\n\n &__close {\n @include tooltip__close;\n }\n\n &__icon {\n @include tooltip__icon;\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n}\n","import {\n Host,\n Element,\n Component,\n Prop,\n h,\n Event,\n EventEmitter,\n Method,\n Listen,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhTooltipOpenEvent,\n StzhTooltipOpenedEvent,\n StzhTooltipCloseEvent,\n StzhTooltipClosedEvent\n} from \"../../index\";\n\nimport {\n arrow,\n computePosition,\n offset,\n shift,\n flip,\n autoUpdate,\n Placement,\n MiddlewareData\n} from \"@floating-ui/dom\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo } from \"../../utils/animation-utils\";\n\nimport { StzhTooltipLocalizedText } from \"./stzh-tooltip.localization\";\n\nimport Arrow from \"./assets/arrow.svg\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { opacity: \"0\" },\n { opacity: \"1\" }\n ],\n options: { duration: 100, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { opacity: \"1\" },\n { opacity: \"0\" }\n ],\n options: { duration: 200, easing: \"linear\" }\n};\n\nconst keyCode = {\n ESC: 27\n};\n\nlet tooltipCounter = 0;\n\n/**\n * @slot Trigger element inside\n * @slot content - Content of tooltip\n */\n@Component({\n tag: \"stzh-tooltip\",\n styleUrl: \"stzh-tooltip.scss\",\n scoped: true\n})\nexport class StzhTooltip {\n /** Whether tooltip should be open */\n @Prop({ mutable: true }) open: boolean = false;\n\n /** Label of tooltip (used for screenreaders) */\n @Prop() label: string = \"\";\n\n /** Content of tooltip (use instead of content slot) */\n @Prop() content: string = \"\";\n\n /** Default placement of tooltip relative to trigger element */\n @Prop() placement: Placement = \"bottom\";\n\n /** Position strategy */\n @Prop() strategy: \"absolute\" | \"fixed\" = \"absolute\";\n\n /** Shifting of tooltip content */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Shifting of tooltip content */\n @Prop() skidding: number = 0;\n\n /** Distance from tooltip content to trigger (default: arrow height (8px) + spacing (4px) = 12) */\n @Prop() distance: number = 12;\n\n /** Whether tooltip is interactive */\n @Prop() interactive: boolean = false;\n\n /**\n * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n */\n @Prop() trigger: string = \"hover focus\";\n private _trigger: string[];\n\n /** Translation strings */\n @Prop() localization: StzhTooltipLocalizedText;\n\n @Element() element: HTMLStzhTooltipElement;\n\n /** Tooltip open event */\n @Event() stzhOpen: EventEmitter<StzhTooltipOpenEvent>;\n\n /** Tooltip opened event (after animation) */\n @Event() stzhOpened: EventEmitter<StzhTooltipOpenedEvent>;\n\n /** Tooltip close event */\n @Event() stzhClose: EventEmitter<StzhTooltipCloseEvent>;\n\n /** Tooltip closed event (after animation) */\n @Event() stzhClosed: EventEmitter<StzhTooltipClosedEvent>;\n\n /** Show tooltip content */\n @Method()\n async show() {\n if (this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /** Hide tooltip content */\n @Method()\n async hide() {\n if (!this.open) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /** Toggle tooltip content */\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n @Method()\n async update() {\n return await this.computePosition();\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.contentElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n\n // safari seems to need will-change,\n // otherwise it has problems animating the element with the drop shadow\n this.contentElement.style.willChange = \"transform, opacity, position, top, left, bottom, right\";\n this.contentElement.hidden = false;\n\n await animateTo(\n this.contentElement,\n ANIMATION_SHOW.keyframes,\n ANIMATION_SHOW.options\n );\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-tooltip\"\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-tooltip\",\n });\n }\n\n await stopAnimations(this.contentElement);\n await animateTo(\n this.contentElement,\n ANIMATION_HIDE.keyframes,\n ANIMATION_HIDE.options\n );\n\n this.contentElement.hidden = true;\n this.contentElement.style.willChange = \"auto\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-tooltip\"\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n @Watch(\"trigger\")\n triggerWatcher(newValue: string) {\n this._trigger = newValue.split(\" \");\n }\n\n @Listen(\"click\", { target: \"document\", capture: true })\n handleDocumentClick(event: MouseEvent) {\n if (!this.open) {\n return\n }\n\n const isClickOutside = event.target !== this.contentElement\n && this.contentElement.contains(event.target as HTMLElement) === false\n\n const isClickTrigger = event.target === this.triggerElement\n || this.triggerElement.contains(event.target as HTMLElement)\n\n if (isClickOutside && !isClickTrigger && this.hasTrigger(\"click\")) {\n this.hide()\n }\n }\n\n @State() computedPlacement: Placement;\n\n private toggledByMethod: boolean = false;\n private middlewareData: MiddlewareData;\n private triggerElement: HTMLElement;\n private triggerFirstElement: HTMLElement;\n private contentElement: HTMLElement;\n private arrowElement: HTMLElement;\n private autoUpdateCleanup: Function;\n private id: string;\n private trap: FocusTrap;\n private isHovering: boolean = false;\n\n private hasTrigger(trigger: string) {\n return this._trigger.indexOf(trigger) > -1;\n }\n\n private onEscKey = (event: KeyboardEvent) => {\n if (event.keyCode === keyCode.ESC) {\n this.hide()\n }\n }\n\n private computePosition = async () => {\n if (!this.open) {\n return;\n }\n\n const { x = 0, y = 0, strategy = \"absolute\", placement, middlewareData }\n = await computePosition(this.triggerFirstElement, this.contentElement, {\n strategy: this.strategy,\n placement: this.placement,\n middleware: [\n offset({\n mainAxis: this.distance,\n crossAxis: this.skidding\n }),\n flip({\n padding: 5\n }),\n shift({\n padding: 5\n }),\n arrow({\n element: this.arrowElement,\n padding: 5\n })\n ],\n });\n\n this.middlewareData = middlewareData;\n this.computedPlacement = placement;\n\n Object.assign(this.contentElement.style, {\n position: strategy,\n left: `${x}px`,\n top: `${y}px`,\n });\n\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${middlewareData.arrow.x}px` : \"\",\n top: y != null ? `${middlewareData.arrow.y}px` : \"\",\n });\n }\n\n private onClickTrigger = () => {\n if (this.hasTrigger(\"click\")) {\n this.toggle();\n }\n }\n\n private onMouseEnterTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = true;\n this.show();\n }\n }\n\n private onMouseLeaveTrigger = () => {\n if (this.hasTrigger(\"hover\")) {\n this.isHovering = false;\n document.addEventListener(\"mousemove\", this.onMouseMoveDocument);\n }\n }\n\n private onFocusTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.show();\n }\n }\n\n private onBlurTrigger = () => {\n if (this.hasTrigger(\"focus\")) {\n this.hide();\n }\n }\n\n private onMouseMoveDocument = (event: MouseEvent) => {\n const { clientX, clientY } = event;\n\n if (!this.computedPlacement) {\n return true;\n }\n\n const basePlacement = this.computedPlacement.split(\"-\")[0];\n const offsetData = this.middlewareData.offset;\n const popperRect = this.contentElement.getBoundingClientRect();\n\n if (!offsetData) {\n return true;\n }\n\n const topDistance = basePlacement === \"bottom\" ? offsetData.y : 0;\n const bottomDistance = basePlacement === \"top\" ? offsetData.y : 0;\n const leftDistance = basePlacement === \"right\" ? offsetData.x : 0;\n const rightDistance = basePlacement === \"left\" ? offsetData.x : 0;\n\n const exceedsTop =\n popperRect.top - clientY > topDistance;\n const exceedsBottom =\n clientY - popperRect.bottom > bottomDistance;\n const exceedsLeft =\n popperRect.left - clientX > leftDistance;\n const exceedsRight =\n clientX - popperRect.right > rightDistance;\n\n if (exceedsTop || exceedsBottom || exceedsLeft || exceedsRight) {\n document.removeEventListener(\"mousemove\", this.onMouseMoveDocument);\n\n if (!this.isHovering) {\n this.hide();\n }\n }\n }\n\n async componentWillLoad() {\n this.id = `stzh-tooltip-${tooltipCounter++}`;\n\n this.triggerWatcher(this.trigger);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"tooltip\");\n }\n }\n\n componentDidRender() {\n this.computePosition();\n\n const isStzh = isStzhElement(this.triggerFirstElement);\n\n if (this.hasTrigger(\"click\")) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-trigger-description`);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-label\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-label\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-label\" : \"aria-label\", this.label);\n }\n\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"analytics-id\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"s-object-id\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"analytics-id\" : \"s-object-id\", this.label);\n }\n } else {\n if ((isStzh && !this.triggerFirstElement.getAttribute(\"a11y-describedby\"))\n || (!isStzh && !this.triggerFirstElement.getAttribute(\"aria-describedby\"))\n ) {\n this.triggerFirstElement\n .setAttribute(isStzh ? \"a11y-describedby\" : \"aria-describedby\", `${this.id}-content`);\n }\n }\n\n if (this.trap) {\n this.open ? this.trap.activate() : this.trap.deactivate();\n }\n }\n\n componentDidUpdate() {\n if (this.trap) {\n this.trap.updateContainerElements(this.contentElement);\n }\n }\n\n componentDidLoad() {\n this.autoUpdateCleanup = autoUpdate(\n this.element,\n this.contentElement,\n this.computePosition\n );\n\n if (this.interactive) {\n this.trap = createFocusTrap(this.contentElement, {\n fallbackFocus: this.contentElement,\n clickOutsideDeactivates: true,\n returnFocusOnDeactivate: true\n });\n\n if (this.open) {\n this.trap.activate();\n }\n }\n\n this.contentElement.hidden = !this.open;\n }\n\n connectedCallback() {\n let trigger = this.triggerElement?.firstElementChild;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute('slot'))\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n this.triggerFirstElement = trigger as HTMLElement;\n\n trigger.addEventListener(\"click\", this.onClickTrigger);\n trigger.addEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n trigger.addEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n trigger.addEventListener(\"focusin\", this.onFocusTrigger);\n trigger.addEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n disconnectedCallback() {\n if (this.autoUpdateCleanup) {\n this.autoUpdateCleanup();\n }\n\n if (this.triggerFirstElement) {\n this.triggerFirstElement.removeEventListener(\"click\", this.onClickTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseenter\", this.onMouseEnterTrigger);\n this.triggerFirstElement.removeEventListener(\"mouseleave\", this.onMouseLeaveTrigger);\n this.triggerFirstElement.removeEventListener(\"focusin\", this.onFocusTrigger);\n this.triggerFirstElement.removeEventListener(\"focusout\", this.onBlurTrigger);\n }\n }\n\n render() {\n const classes = {\n \"stzh-tooltip\": true,\n [`stzh-tooltip--open`]: this.open,\n [`stzh-tooltip--placement-${this.computedPlacement}`]: !!this.computedPlacement\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n class=\"stzh-tooltip__trigger\"\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n >\n <slot></slot>\n </div>\n {this.hasTrigger(\"click\") &&\n <div class=\"stzh-tooltip__vhidden\" id={`${this.id}-trigger-description`}>\n {this.localization.open}\n </div>\n }\n <div\n class=\"stzh-tooltip__content\"\n id={`${this.id}-content`}\n ref={(el) => (this.contentElement = el as HTMLDivElement)}\n tabindex=\"-1\"\n aria-labelledby={this.label ? `${this.id}-label` : null}\n aria-hidden={this.open ? \"false\" : \"true\"}\n onKeyDown={this.onEscKey}\n onMouseEnter={this.onMouseEnterTrigger}\n onMouseLeave={this.onMouseLeaveTrigger}\n onFocusin={this.onFocusTrigger}\n onFocusout={this.onBlurTrigger}\n >\n <div\n class=\"stzh-tooltip__arrow\"\n ref={(el) => (this.arrowElement = el as HTMLDivElement)}\n innerHTML={Arrow}\n ></div>\n {this.label &&\n <h2 id={`${this.id}-label`} class=\"stzh-tooltip__vhidden\">\n {this.label}\n </h2>\n }\n {this.hasTrigger(\"click\") &&\n <button\n class=\"stzh-tooltip__close\"\n onClick={() => this.hide()}\n type=\"button\"\n >\n <stzh-icon name=\"close\" class=\"stzh-tooltip__icon\"></stzh-icon>\n <span class=\"stzh-tooltip__vhidden\">{this.localization.close}</span>\n </button>\n }\n <stzh-text curve=\"none\" class=\"stzh-tooltip__content-slot\">\n {this.content ? this.content : <slot name=\"content\"></slot>}\n </stzh-text>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}