@oiz/stzh-components 3.3.0-beta6 → 3.3.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhHeaderCss","CLASS_BODY_OPEN","StzhHeader","this","lastOpener","flyoutOpenedByMetanavItem","handleMenuListFocusout","event","isNextFocusOutOfMenuList","currentTarget","contains","relatedTarget","isMedium","closeMenuItem","handleBurgerClick","async","closeMetanavItem","flyoutSearchOpen","flyoutOpen","element","querySelector","window","setTimeout","focus","updatePosition","handleSearchButtonClick","handleBackdropClick","handleBackdropSearchClick","handleMetanavItemClick","item","stzhMetanavItemClick","emit","component","originalEvent","handleMetanavItemChildClick","itemChild","stzhMetanavItemChildClick","handleMetanavItemButtonClick","itemButton","stzhMetanavItemButtonClick","handleMenuItemClick","stzhMenuItemClick","handleSearchInput","searchValue","searchInput","value","stzhSearchChange","handleSearchChange","stzhSearchChanged","handleLanguageClick","dropdownOption","languagePreventUrlchange","preventDefault","languageActive","stzhLanguageChange","handleFlyoutResize","resizeMenunavElement","handleResize","sticky","debounceResize","cancelAnimationFrame","requestAnimationFrame","readTask","media","matches","mainHeight","_a","mainElement","offsetHeight","metabarHeight","_b","metabarElement","logobarHeight","_c","logobarElement","headerTop","offsetTop","headerHeight","writeTask","document","documentElement","style","setProperty","scrollListener","handleKeydown","key","flyoutCloseClicked","flyoutOpenWatcher","open","currentOpenMenuItem","currentOpenMetanavItem","currentOpenLanguage","body","classList","remove","enableSiblings","trap","deactivate","add","disableSiblings","activate","fixedWatcher","paddingTop","fixed","waitForNextRender","fixedTransition","stickyWatcher","activateSticky","stickyActive","disableSticky","belowStayStickyPoint","scrollingUp","belowStartStickyPoint","currentScrollY","scrollY","lastScrollY","headerOverlap","hideLogo","searchValueWatcher","newValue","searchFilled","menuItemsWatcher","_menuItems","JSON","parse","map","menuItem","index","Object","assign","id","metanavItemsWatcher","_metanavItems","metanavItem","appNavItemsWatcher","_appNavItems","userSpecificMetanavItemsNotLoggedInWatcher","_userSpecificMetanavItemsNotLoggedIn","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","requestUserSpecificMetanavItems","userSpecificMetanavItemsEndpoint","combinedMetanavItems","response","fetch","userSpecificMetanavItemsLoggedIn","json","error","console","loginErrorMessage","toast","type","componentWillLoad","menuItems","metanavItems","appNavItems","languages","userSpecificMetanavItemsNotLoggedIn","localization","stzhComponents","utils","fetchTranslations","componentDidRender","flyoutElement","flyoutResizeObserver","observe","flyoutSearchElement","componentDidLoad","createFocusTrap","createBaseFocusTrapOptions","initialFocus","ResizeObserver","connectedCallback","parentElement","resizeObserver","disconnectedCallback","disconnect","render","metanavBeforeUsed","hasSlot","metanavAfterUsed","classes","stay","stayAndShowInMobileMenu","length","languageStay","searchAction","activeLanguage","getLocale","activeLanguageOption","find","renderMetanavItemButton","additionalClasses","additionalAttributes","Element","items","href","h","target","order","cssOrder","class","important","labelHidden","labelShort","label","icon","iconOpen","name","badge","badgeEmpty","badgeType","Host","ref","el","logoAnalyticsId","hideMetabar","menuId","onClick","menuLabel","action","role","searchId","searchFieldName","onChange","onInput","searchLabel","iconPosition","variant","size","slot","metanavId","Fragment","e","placement","distance","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=\"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  &[logo-type=\"vbz\"] {\n    --logo-height: 29px;\n\n    @include mq($from: medium) {\n      --logo-height: 53px;\n    }\n\n    @include mq($from: ultra) {\n      --logo-height: 60px;\n    }\n  }\n\n  &[logo-type=\"vbz\"] ::slotted([slot=\"logo\"]) {\n    align-self: center;\n  }\n\n  ::slotted([slot=\"logo\"]) {\n    width: var(--logo-width);\n    height: var(--logo-height);\n  }\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    @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    // @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    @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: medium) {\n        @include visuallyhidden;\n      }\n    }\n  }\n\n  &__metanav-item-text-label-long {\n    @include mq($to: medium) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__metanav-item-text-label-short {\n    display: none;\n    @include mq($from: small) {\n      display: flex;\n    }\n    @include mq($from: medium) {\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    @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    }\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    height: 66px;\n    transition: opacity $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: 300px;\n      padding-left: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      width: 399px;\n      height: 88px;\n      padding-top: 18px;\n      padding-bottom: 18px;\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      width: 617px;\n      height: 135px;\n      padding-top: 28px;\n      padding-bottom: 24px;\n      padding-left: $containerMarginLarge;\n    }\n\n    @include mq($from: ultra) {\n      width: 553px;\n      padding-left: 0;\n    }\n  }\n\n  &__flyout,\n  &__flyout-search {\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\n  &__flyout {\n    @media (min-height: 580px) {\n      overflow: hidden;\n    }\n\n    @include mq($from: medium) {\n      overflow: hidden;\n    }\n  }\n\n  &__flyout-backdrop {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: $colorBlack40op;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__menu {\n    position: absolute;\n    width: 100%;\n    height: auto;\n    background-color: $colorSecondary30;\n    display: grid;\n    grid-template-rows: auto auto;\n    transition-property: opacity, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateX(-100%);\n    opacity: 0;\n\n    @media (min-height: 580px) {\n      height: 100%;\n      grid-template-rows: minmax(0, 1fr) auto;\n    }\n\n    @include mq($from: medium) {\n      height: 100%;\n      grid-template-rows: minmax(0, 1fr) auto;\n    }\n\n    @include mq($from: medium) {\n      width: 335px;\n    }\n\n    @include mq($from: large) {\n      width: 374px;\n    }\n\n    @include mq($from: large) {\n      width: 439px;\n    }\n\n    @include mq($from: ultra) {\n      width: calc((439px - #{$containerMarginLarge}) + ((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2))\n    }\n  }\n\n  &__menu-nav {\n    position: relative;\n    overflow-x: hidden;\n    overflow-y: hidden;\n\n    @media (min-height: 580px) {\n      overflow-y: auto;\n    }\n\n    @include mq($from: medium) {\n      overflow-y: auto;\n      position: static;\n    }\n  }\n\n  &__menu-metanav {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'medium');\n    background-color: $colorSecondary20;\n\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__menu-metanav-nav {\n    max-width: 375px;\n  }\n\n  &__menu-list,\n  &__menu-metanav-list {\n    display: block;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n\n  &__menu-list,\n  &__menu-metanav-list.is-level-2 {\n    padding-top: calc(var(--stzh-header-main-height) + #{space('xxxlarge')});\n    padding-bottom: space('xxxlarge');\n\n    @include mq($from: medium) {\n      padding-top: calc(var(--stzh-header-main-height) + #{space('huge')});\n    }\n  }\n\n  &__menu-list.is-level-2,\n  &__menu-metanav-list.is-level-2 {\n    overflow: auto;\n    background-color: $colorSecondary20;\n    visibility: hidden;\n    opacity: 0;\n    transform: translateX(100%);\n    position: absolute;\n    z-index: 200;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    transition-property: opacity, visibility, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      width: 315px;\n      transform: none;\n      left: 100%;\n      // transition-property: opacity, visibility, transform;\n      transition-property: opacity, visibility;\n    }\n\n    @include mq($from: large) {\n      width: 334px;\n    }\n\n    @include mq($from: ultra) {\n      width: 345px;\n    }\n  }\n\n  &__menu-list.is-level-2 {\n    height: max-content;\n\n    @media (min-height: 580px) {\n      height: 100%;\n    }\n\n    @include mq($from: medium) {\n      height: 100%;\n    }\n  }\n\n  &__menu-metanav-list.is-level-2 {\n    background-color: $colorSecondary30;\n    transform: none;\n    transition-property: opacity, visibility;\n  }\n\n  // we add closing transition delay only to menu-list if hovering/focusing of another is currently active\n  // to prevent showing background (flickering) when transitioning from one menu-list to another (on the same level)\n  &__menu-list:where(:has(> #{&}__menu-list-item:hover > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list),\n  &__menu-list:where(:has(> #{&}__menu-list-item.is-open > #{&}__menu-list) > #{&}__menu-list-item > #{&}__menu-list) {\n    @include mq($from: medium) {\n      transition-delay: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__menu-list-item:hover > &__menu-list,\n  &__menu-list-item.is-open > &__menu-list {\n    @include mq($from: medium) {\n      z-index: 200;\n      transition-delay: 0ms;\n      visibility: visible;\n      opacity: 1;\n      // transform: translateX(0);\n    }\n  }\n\n  &__menu-list-item:hover > &__menu-item,\n  &__menu-list-item.is-open > &__menu-item {\n    @include mq($from: medium) {\n      background-color: $colorSecondary40;\n    }\n\n    &.is-level-2 {\n      @include mq($from: medium) {\n        background-color: $colorSecondary10;\n      }\n    }\n  }\n\n  &__menu-nav:has(#{&}__menu-list-item.is-open), // hide menu when any menu-list has been opened\n  &__menu:has(#{&}__menu-metanav-list-item.is-open) &__menu-nav, // hide menu when menu metanav menu-list has been opened\n  &__menu-list:has(#{&}__menu-list-item.is-open), // hide parent menu-list when sub menu-list has been opened\n  &__menu-metanav-list:has(#{&}__menu-metanav-list-item.is-open) { // hide parent metanav menu-list when sub menu-list has been opened\n    @include mq($to: medium) {\n      transition-property: visibility;\n      transition-duration: 0ms;\n      transition-delay: $baseTransitionAnimationSpeed;\n      visibility: hidden;\n      // background-color: red;\n    }\n  }\n\n  // force showing menu-list that is currently open\n  &__menu-list-item.is-open > :where(#{&}__menu-list),\n  &__menu-metanav-list-item.is-open > :where(#{&}__menu-metanav-list) {\n    @include mq($to: medium) {\n      transform: translateX(0);\n      opacity: 1;\n      visibility: visible;\n      // background-color: green;\n    }\n  }\n\n  &__menu-list-item,\n  &__menu-metanav-list-item {\n    display: grid;\n  }\n\n  &__menu-list-item {\n    &.is-backlink {\n      display: block;\n    }\n  }\n\n  &__menu-item,\n  &__menu-metanav-item {\n    @include font('heavy');\n    @include fontSize('milli');\n    text-align: left;\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    appearance: none;\n    border: none;\n    text-decoration: none;\n    background-color: transparent;\n    color: $colorPrimary70;\n    padding-left: space('xxxlarge');\n    padding-top: space('small');\n    padding-bottom: space('small');\n    padding-right: space('large');\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n  }\n\n  &__menu-item,\n  &__menu-metanav-item.is-title {\n    @include fontSize('deci');\n    min-height: 56px;\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n    }\n  }\n\n  &__menu-item {\n    &.is-level-1 {\n      @include mq($from: ultra) {\n        padding-left: 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      @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  /* app-nav */\n\n  &__app-nav {\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n  }\n\n  &__app-nav-bottom {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    z-index: $zIndexHeader;\n\n    @include mq($from: medium) {\n      display: none;\n    }\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  /* 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    @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: transform;\n      transition-duration: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &--is-fixed-transition &__main {\n    @include mq($to: small) {\n      transition-property: transform;\n      transition-duration: $baseTransitionAnimationSpeed;\n    }\n  }\n\n  /* Sticky (transition) variant */\n\n  &--is-sticky-transition &__logobar {\n    transition-property: opacity, visibility;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &--is-sticky-transition &__inner,\n  &--is-sticky-transition &__main {\n    transition-property: transform, margin-top;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &--is-sticky &__inner {\n    @include mq($from: small) {\n      transform: translateY(0);\n    }\n  }\n\n  &--is-sticky &__main {\n    @include mq($to: small) {\n      transform: translateY(0);\n    }\n  }\n\n  &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__inner {\n    @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    @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@include mq($from: small, $to: medium) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar-mobile) &__main {\n  // \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  &--is-sticky:where(#{&}--has-empty-metabar) &__inner {\n    @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    @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@include mq($from: small) {\n  //     box-shadow: none;\n  //   }\n  // }\n\n  // &--is-sticky:where(#{&}--has-empty-metabar) &__main {\n  // \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@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@include mq($from: small) {\n  //     // box-shadow: $boxShadowHeader;\n  //     margin-top: calc((var(--stzh-header-logobar-height)) / -1);\n  //   }\n  // }\n\n  /* Sticky disabled */\n\n  // &--sticky-disabled &__main {\n  //   @include mq($from: medium) {\n  //     padding-top: $headerMetabarHeightMediumUp;\n  //   }\n  // }\n\n  /* Sticky always */\n\n  &--sticky-always-full &__inner,\n  &--sticky-always-full &__main {\n    margin-top: 0px;\n  }\n\n  &--sticky-always-full &__logobar {\n    visibility: visible;\n    opacity: 1;\n  }\n\n  /* Flyout open */\n\n  &__flyout-search-main {\n    position: absolute;\n    width: 100%;\n    transition-property: opacity, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n    transform: translateY(-100px);\n    opacity: 0;\n    margin-top: var(--stzh-header-main-height);\n    overflow: auto;\n  }\n\n  &--is-flyout-open &__flyout,\n  &--is-flyout-search-open &__flyout-search {\n    visibility: visible;\n  }\n\n  &--is-flyout-open &__flyout-backdrop,\n  &--is-flyout-search-open &__flyout-backdrop {\n    opacity: 1;\n  }\n\n  &--is-flyout-open &__flyout-scrollbar,\n  &--is-flyout-search-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-search-open &__flyout-search-main {\n    opacity: 1;\n    transform: translateX(0);\n  }\n\n  &--is-flyout-open &__inner,\n  &--is-flyout-search-open &__inner {\n    @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    }\n  }\n\n  &--is-flyout-open &__main,\n  &--is-flyout-search-open &__main {\n    @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    }\n  }\n\n  &--is-flyout-open &__logobar,\n  &--is-flyout-search-open &__logobar {\n    opacity: 1;\n  }\n\n  &--is-flyout-open &__logobar,\n  &--is-flyout-search-open &__logobar,\n  &--is-flyout-open &__metabar,\n  &--is-flyout-search-open &__metabar {\n    visibility: visible;\n  }\n\n  &--is-flyout-open &__logo-link,\n  &--is-flyout-search-open &__logo-link {\n    opacity: 1;\n    transition: none;\n  }\n\n  /**\n   * Search button.\n   */\n  &__search-button--is-hidden {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  readTask,\n  State,\n  Watch,\n  writeTask,\n} from \"@stencil/core\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\nimport {\n  StzhDropdownOption,\n  StzhHeaderLanguageChangeEvent,\n  StzhHeaderMenuItem,\n  StzhHeaderMenuItemClickEvent,\n  StzhHeaderMetanavItem,\n  StzhHeaderMetanavItemButton,\n  StzhHeaderMetanavItemButtonClickEvent,\n  StzhHeaderMetanavItemChild,\n  StzhHeaderMetanavItemChildClickEvent,\n  StzhHeaderMetanavItemClickEvent,\n  StzhHeaderSearchChangedEvent,\n  StzhHeaderSearchChangeEvent,\n  StzhAppNavItem,\n} from \"../../index\";\n\nimport { tabbable } from \"tabbable\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nimport { StzhHeaderLocalizedText } from \"./stzh-header.localization\";\n\nconst CLASS_BODY_OPEN = \"stzh-header-open\";\n\n// for flyout a11y see also: https://www.w3.org/WAI/tutorials/menus/flyout/\n\n/**\n * @slot logo - Slot for brand logo\n * @slot menu-before - Slot for custom elements before other menu elements\n * @slot menu-after - Slot for custom elements after other menu elements\n * @slot metanav-before - Slot for custom elements before other metanav elements\n * @slot metanav-after - Slot for custom elements after other metanav elements\n * @slot search - Slot for search element\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  /** Generic meta navigation items */\n  @Prop() metanavItems: StzhHeaderMetanavItem[] | string = [];\n  private _metanavItems: StzhHeaderMetanavItem[];\n\n  /** User specific meta navigation items when the user is not logged in or the api call failed */\n  @Prop() userSpecificMetanavItemsNotLoggedIn: StzhHeaderMetanavItem[] = [];\n  private _userSpecificMetanavItemsNotLoggedIn: StzhHeaderMetanavItem[];\n\n  /** App-Nav items */\n  @Prop() appNavItems: StzhAppNavItem[] | string = [];\n  private _appNavItems: StzhAppNavItem[];\n\n  /** Endpoint for cart and user menu when logged in */\n  @Prop() userSpecificMetanavItemsEndpoint: string;\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  /** Whether language switch should stay on mobile */\n  @Prop() hideMetabar: boolean = false;\n\n  /** Search form action (if given, searchfield will be shown) */\n  @Prop() searchAction: string;\n\n  /** Search field name */\n  @Prop() searchFieldName: string = \"q\";\n\n  /** Search input value */\n  @Prop() searchValue: string = \"\";\n\n  /** Sticky behaviour */\n  @Prop() sticky: \"default\" | \"disabled\" | \"always-full\" | \"always\" = \"default\";\n\n  /** Is sent to stzh-toastbar when the fetch for the user specific data fails */\n  @Prop() loginErrorMessage: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value is \"Header Logo\".\n   */\n  @Prop() logoAnalyticsId: string;\n\n  @State() hideLogo: boolean = false;\n  @State() headerHeight: number;\n  @State() paddingTop: number;\n  @State() stickyActive: boolean = false;\n  @State() flyoutOpen: boolean = false;\n  @State() flyoutSearchOpen: 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\n  @State() userSpecificMetanavItemsLoggedIn: StzhHeaderMetanavItem[] = [];\n\n  @State() combinedMetanavItems: StzhHeaderMetanavItem[] = [];\n\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      this.flyoutSearchOpen = false;\n    }\n  }\n\n  @Listen(\"stzhOverlayCloseClick\")\n  flyoutCloseClicked() {\n    this.flyoutSearchOpen = false;\n    this.updatePosition();\n  }\n\n  @Watch(\"flyoutOpen\")\n  @Watch(\"flyoutSearchOpen\")\n  async flyoutOpenWatcher(open: boolean) {\n    if (!open) {\n      // reset current open menu when flyout was closed\n      this.currentOpenMenuItem = null;\n      this.currentOpenMetanavItem = null;\n      this.currentOpenLanguage = null;\n      // reset further flags\n      this.flyoutOpenedByMetanavItem = false;\n\n      document.body.classList.remove(CLASS_BODY_OPEN);\n      this.enableSiblings();\n\n      if (this.trap) {\n        this.trap.deactivate();\n      }\n    } else {\n      document.body.classList.add(CLASS_BODY_OPEN);\n      this.disableSiblings();\n\n      if (this.trap) {\n        this.trap.activate();\n      }\n    }\n  }\n\n  @Watch(\"fixed\")\n  @Watch(\"flyoutOpen\")\n  @Watch(\"flyoutSearchOpen\")\n  @Watch(\"headerHeight\")\n  async fixedWatcher() {\n    this.paddingTop = this.fixed || this.flyoutOpen || this.flyoutSearchOpen ? 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 || this.flyoutSearchOpen;\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 || this.flyoutSearchOpen) {\n      return;\n    }\n\n    const activateSticky = () => {\n      this.stickyActive = true;\n      document.documentElement.style.setProperty(\"--stzh-header-is-stuck\", \"1\");\n      document.documentElement.style.setProperty(\"--stzh-header-is-not-stuck\", \"0\");\n    };\n\n    const disableSticky = () => {\n      document.documentElement.style.setProperty(\"--stzh-header-is-stuck\", \"0\");\n      document.documentElement.style.setProperty(\"--stzh-header-is-not-stuck\", \"1\");\n      this.stickyActive = false;\n    };\n\n    if (this.sticky === \"disabled\") {\n      disableSticky();\n    } else if (this.sticky === \"always-full\") {\n      activateSticky();\n    } else if (this.sticky === \"always\") {\n      if (this.belowStayStickyPoint) {\n        activateSticky();\n      } else {\n        disableSticky();\n      }\n    } else {\n      if (this.scrollingUp && this.belowStayStickyPoint) {\n        if (!this.stickyActive && this.belowStartStickyPoint) {\n          activateSticky();\n        }\n      } else {\n        if (this.stickyActive && this.belowStayStickyPoint) {\n          disableSticky();\n        } else {\n          disableSticky();\n        }\n      }\n    }\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  scrollListener() {\n    if (this.sticky === \"disabled\") {\n      return;\n    }\n\n    readTask(() => {\n      this.currentScrollY = window.scrollY;\n      this.scrollingUp = this.lastScrollY && this.lastScrollY > this.currentScrollY;\n      this.lastScrollY = this.currentScrollY;\n\n      this.belowStayStickyPoint = this.currentScrollY > this.logobarHeight;\n      this.belowStartStickyPoint = this.currentScrollY > this.headerHeight;\n\n      this.fixed =\n        this.belowStartStickyPoint ||\n        (this.scrollingUp && this.belowStayStickyPoint && this.stickyActive) ||\n        (this.sticky === \"always\" && this.belowStayStickyPoint) ||\n        this.sticky === \"always-full\";\n\n      this.headerOverlap = (this.headerTop - this.currentScrollY) / -1;\n      this.hideLogo = this.sticky !== \"always-full\" && this.isMedium && this.headerOverlap > 1;\n    });\n\n    writeTask(() => {\n      this.updatePosition();\n    });\n  }\n\n  /** Metanav item click event */\n  @Event() stzhMetanavItemClick: EventEmitter<StzhHeaderMetanavItemClickEvent>;\n\n  /** Metanav item child click event */\n  @Event() stzhMetanavItemChildClick: EventEmitter<StzhHeaderMetanavItemChildClickEvent>;\n\n  /** Metanav item button click event */\n  @Event() stzhMetanavItemButtonClick: EventEmitter<StzhHeaderMetanavItemButtonClickEvent>;\n\n  /** Metanav item click event */\n  @Event() stzhMenuItemClick: EventEmitter<StzhHeaderMenuItemClickEvent>;\n\n  /** Language change event */\n  @Event() stzhLanguageChange: EventEmitter<StzhHeaderLanguageChangeEvent>;\n\n  /** Search input change event */\n  @Event() stzhSearchChange: EventEmitter<StzhHeaderSearchChangeEvent>;\n\n  /** Search input changed event */\n  @Event() stzhSearchChanged: EventEmitter<StzhHeaderSearchChangedEvent>;\n\n  @Watch(\"searchValue\")\n  searchValueWatcher(newValue: string) {\n    this.searchFilled = newValue !== \"\";\n  }\n\n  @Watch(\"menuItems\")\n  menuItemsWatcher(newValue: StzhHeaderMenuItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._menuItems = JSON.parse(newValue);\n    } else {\n      this._menuItems = newValue;\n    }\n\n    this._menuItems = this._menuItems.map((menuItem, index) => ({\n      id: `submenu-${index}`,\n      ...menuItem,\n    }));\n  }\n\n  @Watch(\"metanavItems\")\n  metanavItemsWatcher(newValue: StzhHeaderMetanavItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._metanavItems = JSON.parse(newValue);\n    } else {\n      this._metanavItems = newValue;\n    }\n\n    this._metanavItems = this._metanavItems.map((metanavItem, index) => ({\n      id: `metanav-submenu-${index}`,\n      ...metanavItem,\n    }));\n  }\n\n  @Watch(\"appNavItems\")\n  appNavItemsWatcher(newValue: StzhAppNavItem[] | string) {\n\n    if (typeof newValue === \"string\") {\n      this._appNavItems = JSON.parse(newValue);\n    } else {\n      this._appNavItems = newValue;\n    }\n  }\n\n  @Watch(\"userSpecificMetanavItemsNotLoggedIn\")\n  userSpecificMetanavItemsNotLoggedInWatcher(\n    newValue: StzhHeaderMetanavItem[]\n  ) {\n    this._userSpecificMetanavItemsNotLoggedIn = newValue;\n  }\n\n  @Watch(\"languages\")\n  languagesWatcher(newValue: StzhDropdownOption[] | string) {\n    if (typeof newValue === \"string\") {\n      this._languages = JSON.parse(newValue);\n    } else {\n      this._languages = newValue;\n    }\n  }\n\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private currentScrollY: number;\n  private lastScrollY: number;\n  private headerOverlap: number;\n  private scrollingUp: boolean;\n  private belowStayStickyPoint: boolean;\n  private belowStartStickyPoint: boolean;\n\n  private headerTop: number;\n  // private innerHeight: number;\n  private mainHeight: number;\n  private metabarHeight: number;\n  private logobarHeight: number;\n\n  private isMedium: boolean;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private flyoutResizeObserver: ResizeObserver;\n\n  // private innerElement: HTMLDivElement;\n  private mainElement: HTMLDivElement;\n  private logobarElement: HTMLDivElement;\n  private metabarElement: HTMLDivElement;\n  private menunavElement: HTMLElement;\n  private flyoutElement: HTMLElement;\n  private flyoutSearchElement: 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(child => child !== this.element);\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 && 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 && 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 && 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).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.flyoutSearchOpen = false;\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    this.updatePosition();\n  };\n\n  private handleSearchButtonClick = async () => {\n    this.flyoutOpen = false;\n    this.flyoutSearchOpen = !this.flyoutSearchOpen;\n\n    // focus first search input\n    const element = this.element.querySelector(\".stzh-search input[type='search']\") as HTMLElement;\n\n    if (element) {\n      window.setTimeout(() => {\n        element.focus();\n      }, 100);\n    }\n    this.updatePosition();\n  };\n\n  private handleBackdropClick = async () => {\n    this.flyoutOpen = false;\n    this.updatePosition();\n  };\n\n  private handleBackdropSearchClick = async () => {\n    this.flyoutSearchOpen = false;\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 handleMetanavItemChildClick = (event: MouseEvent, itemChild: StzhHeaderMetanavItemChild) => {\n    this.stzhMetanavItemChildClick.emit({\n      component: \"stzh-header\",\n      itemChild: itemChild,\n      originalEvent: event,\n    });\n  };\n\n  private handleMetanavItemButtonClick = (event: MouseEvent, itemButton: StzhHeaderMetanavItemButton) => {\n    this.stzhMetanavItemButtonClick.emit({\n      component: \"stzh-header\",\n      itemButton: itemButton,\n      originalEvent: event,\n    });\n  };\n\n  private handleMenuItemClick = (event: MouseEvent, item: StzhHeaderMenuItem) => {\n    this.flyoutOpen = false;\n    this.stzhMenuItemClick.emit({\n      component: \"stzh-header\",\n      item,\n      originalEvent: event,\n    });\n  };\n\n  private handleSearchInput = (event: InputEvent) => {\n    this.searchValue = this.searchInput.value;\n\n    this.stzhSearchChange.emit({\n      component: \"stzh-header\",\n      originalEvent: event,\n      value: this.searchValue,\n    });\n  };\n\n  private handleSearchChange = (event: InputEvent) => {\n    this.searchValue = this.searchInput.value;\n    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    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\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  private async requestUserSpecificMetanavItems() {\n    if (!this.userSpecificMetanavItemsEndpoint) {\n      this.combinedMetanavItems = [...this._metanavItems, ...this._userSpecificMetanavItemsNotLoggedIn];\n      return;\n    }\n    try {\n      const response = await fetch(this.userSpecificMetanavItemsEndpoint);\n      this.userSpecificMetanavItemsLoggedIn = await response.json();\n      this.combinedMetanavItems = [...this._metanavItems, ...this.userSpecificMetanavItemsLoggedIn];\n\n    } catch (error) {\n      this.combinedMetanavItems = [...this._metanavItems, ...this._userSpecificMetanavItemsNotLoggedIn]; // fallback to not logged in items\n      console.error('Error fetching data:', error);\n      if (this.loginErrorMessage) {\n        document.querySelector('stzh-toastbar')\n          .toast(this.loginErrorMessage, {\n            type: 'error',\n          });\n      }\n    }\n  }\n\n  async componentWillLoad() {\n    this.menuItemsWatcher(this.menuItems);\n    this.metanavItemsWatcher(this.metanavItems);\n    this.appNavItemsWatcher(this.appNavItems);\n    this.languagesWatcher(this.languages);\n    this.searchValueWatcher(this.searchValue);\n    this.userSpecificMetanavItemsNotLoggedInWatcher(this.userSpecificMetanavItemsNotLoggedIn);\n    this.requestUserSpecificMetanavItems()\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(\n        this.element,\n        \"header\"\n      );\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    if (this.flyoutSearchElement && this.flyoutResizeObserver) {\n      this.flyoutResizeObserver.observe(this.flyoutSearchElement);\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-flyout-search-open\": this.flyoutSearchOpen,\n      \"stzh-header--is-search-filled\": this.searchFilled,\n      \"stzh-header--is-fixed\": this.fixed,\n      \"stzh-header--is-fixed-transition\": this.fixedTransition,\n      \"stzh-header--is-sticky\": this.stickyActive,\n      \"stzh-header--is-sticky-transition\":\n        this.stickyActive && this.fixedTransition,\n      \"stzh-header--hide-logo\": this.hideLogo,\n      \"stzh-header--has-empty-metabar-mobile\":\n        !metanavBeforeUsed &&\n        !metanavAfterUsed &&\n        this._metanavItems.filter(\n          (item) => item.stay || item.stayAndShowInMobileMenu\n        ).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\":\n        !metanavBeforeUsed &&\n        !metanavAfterUsed &&\n        this._metanavItems.length === 0 &&\n        this._menuItems.length === 0 &&\n        this._languages.length === 0 &&\n        !this.searchAction,\n      [`stzh-header--sticky-${this.sticky}`]: !!this.sticky,\n    };\n\n    const activeLanguage =\n      this.languageActive ||\n      window.stzhComponents.utils.getLocale(this.element);\n    const activeLanguageOption =\n      this._languages?.find(({ value }) => value === activeLanguage) ||\n      this._languages?.[0] ||\n      null;\n\n    const renderMetanavItemButton = (\n      item: StzhHeaderMetanavItem,\n      additionalClasses?: { [className: string]: boolean },\n      additionalAttributes?: any\n    ) => {\n      const Element =\n        item.items?.length > 0 || item.itemButton || !item.href\n          ? \"button\"\n          : \"a\";\n\n      return (\n        <Element\n          {...additionalAttributes}\n          href={Element === \"a\" && item.href}\n          target={Element === \"a\" && item.target}\n          style={{ order: item.cssOrder }}\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\">\n              {item.labelShort}\n            </span>\n          </span>\n          {item.icon && (\n            <span class=\"stzh-header__metanav-icon-wrapper\">\n              {item.icon && (\n                <stzh-icon\n                  class={`stzh-header__metanav-icon ${item.iconOpen ? \"is-close\" : \"\"}`}\n                  name={item.icon}\n                ></stzh-icon>\n              )}\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\n                  class=\"stzh-header__metanav-icon-badge\"\n                  label={item.badge}\n                  type={typeof item.badgeType === \"undefined\" ? \"error\" : item.badgeType}\n                ></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            {this._appNavItems.length > 0 && (\n              <div class=\"stzh-header__app-nav-bottom\">\n                <stzh-app-nav items={this._appNavItems}></stzh-app-nav>\n              </div>\n            )}\n            <div\n              class=\"stzh-header__inner\"\n            // ref={(el) => (this.innerElement = el as HTMLDivElement)}\n            >\n              <div class=\"stzh-header__main\" ref={el => (this.mainElement = el as HTMLDivElement)}>\n                <div class=\"stzh-header__logobar\" ref={el => (this.logobarElement = el as HTMLDivElement)}>\n                  <div class=\"stzh-header__logobar-logo\">\n                    <a\n                      href={this.href}\n                      class=\"stzh-header__logo-link\"\n                      s-object-id={this.logoAnalyticsId || \"Header Logo\"}\n                    >\n                      <slot name=\"logo\"></slot>\n                    </a>\n                  </div>\n                  <div class=\"stzh-header__logobar-decoration\"></div>\n                </div>\n\n                {!this.hideMetabar && (\n                  <div class=\"stzh-header__metabar\" ref={el => (this.metabarElement = el as HTMLDivElement)}>\n                    <div class=\"stzh-header__metabar-inner\">\n                      <slot name=\"menu-before\"></slot>\n\n                      {this._menuItems.length > 0 && (\n                        <button\n                          id={this.menuId}\n                          class={`stzh-header__burger ${this.flyoutOpen && !this.flyoutOpenedByMetanavItem && \"is-open\"\n                            }`}\n                          onClick={this.handleBurgerClick}\n                        >\n                          <stzh-icon class=\"stzh-header__burger-icon is-close\" name=\"menu\"></stzh-icon>\n                          <stzh-icon class=\"stzh-header__burger-icon is-open\" name=\"close\"></stzh-icon>\n                          <div class=\"stzh-header__burger-text\">{this.localization.menuLabel}</div>\n                        </button>\n                      )}\n                      {this.searchAction && !hasSlot(this.element, \"search\") && (\n                        <form class=\"stzh-header__metabar-search\" action={this.searchAction} role=\"search\">\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                      {hasSlot(this.element, \"search\") && (\n                        <stzh-button\n                          iconPosition={\"left\"}\n                          onClick={this.handleSearchButtonClick}\n                          variant=\"tertiary-plain\"\n                          size=\"small\"\n                        >\n                          <stzh-icon\n                            slot=\"icon\"\n                            name=\"search\"\n                            class={this.flyoutSearchOpen ? \"stzh-header__search-button--is-hidden\" : \"\"}\n                          ></stzh-icon>\n                          <stzh-icon\n                            slot=\"icon\"\n                            name=\"close\"\n                            class={this.flyoutSearchOpen ? \"\" : \"stzh-header__search-button--is-hidden\"}\n                          ></stzh-icon>\n                          {this.localization.searchLabel}\n                        </stzh-button>\n                      )}\n\n                      <slot name=\"menu-after\"></slot>\n\n                      {this._appNavItems.length > 0 && (\n                        <div class=\"stzh-header__app-nav\">\n                          <stzh-app-nav items={this._appNavItems}></stzh-app-nav>\n                        </div>\n                      )}\n\n                      <div class=\"stzh-header__metabar-nav\" id={this.metanavId}>\n                        <slot name=\"metanav-before\"></slot>\n                        {this.combinedMetanavItems.map((item) =>\n                          item.items?.length > 0 || item.itemButton ? (\n                            <Fragment>\n                              {renderMetanavItemButton(\n                                item,\n                                {\n                                  \"is-popover-mobile\": true,\n                                },\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                              )}\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(\n                                  item,\n                                  {\n                                    \"is-popover-desktop\": true,\n                                  },\n                                  {\n                                    onClick: (e: MouseEvent) => {\n                                      this.handleMetanavItemClick(e, item);\n                                    },\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\":\n                                              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                                          onClick={(e: MouseEvent) => { this.handleMetanavItemChildClick(e, childItem) }}\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                                    onClick={(e: MouseEvent) => { this.handleMetanavItemButtonClick(e, item.itemButton) }}\n                                  >\n                                    {item.itemButton.label}\n                                  </stzh-button>\n                                )}\n                              </stzh-popover>\n                            </Fragment>\n                          ) : (\n                            renderMetanavItemButton(\n                              item,\n                              {},\n                              {\n                                onClick: (e: MouseEvent) => {\n                                  this.handleMetanavItemClick(e, item);\n                                },\n                              }\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                )}\n              </div>\n            </div>\n          </div>\n\n          {this._menuItems.length > 0 && (\n            <div ref={el => (this.flyoutElement = el as HTMLElement)} class=\"stzh-header__flyout\">\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                          <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\n                            href={item.href}\n                            onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)}\n                            class=\"stzh-header__menu-item is-level-1\"\n                          >\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\n                                class=\"stzh-header__menu-item is-level-2 is-backlink\"\n                                onClick={() => this.closeMenuItem()}\n                              >\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\n                                href={item.href}\n                                onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)}\n                                class=\"stzh-header__menu-item is-level-2 is-main\"\n                              >\n                                {item.label}\n                              </a>\n                            </li>\n                            {item.items.map(item => (\n                              <li class=\"stzh-header__menu-list-item\">\n                                <a\n                                  href={item.href}\n                                  onClick={(e: MouseEvent) => this.handleMenuItemClick(e, item)}\n                                  class=\"stzh-header__menu-item is-level-2\"\n                                >\n                                  {item.label}\n                                </a>\n                              </li>\n                            ))}\n                          </ul>\n                        )}\n                      </li>\n                    ))}\n                  </ul>\n                </nav>\n\n                {(this.combinedMetanavItems?.length > 0 ||\n                  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.combinedMetanavItems.map((item) => (\n                            <li\n                              class={{\n                                \"stzh-header__menu-metanav-list-item\": true,\n                                \"is-open\": item === this.currentOpenMetanavItem,\n                              }}\n                            >\n                              {item.items?.length > 0 ? (\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 && (\n                                    <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>\n                                  )}\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 && (\n                                    <stzh-icon class=\"stzh-header__menu-metanav-item-icon\" name={item.icon}></stzh-icon>\n                                  )}\n                                </a>\n                              )}\n                              {item.items?.length > 0 && (\n                                <ul id={item.id} class=\"stzh-header__menu-metanav-list is-level-2\">\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(\n                                          /\\{itemLabel\\}/gi,\n                                          item.label\n                                        )}\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 && (\n                                          <stzh-icon\n                                            class=\"stzh-header__menu-metanav-item-icon\"\n                                            name={item.icon}\n                                          ></stzh-icon>\n                                        )}\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 href={item.itemButton.href} target={item.itemButton.target}>\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 id=\"submenu-languages\" class=\"stzh-header__menu-metanav-list is-level-2\">\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\n                                          class=\"stzh-header__menu-metanav-item-icon\"\n                                          name=\"checkmark\"\n                                        ></stzh-icon>\n                                      )}\n                                    </a>\n                                  </li>\n                                ))}\n                              </ul>\n                            </li>\n                          )}\n                        </ul>\n                      </nav>\n                    </div>\n                  )}\n              </div>\n            </div>\n          )}\n\n          {hasSlot(this.element, \"search\") && (\n            <div ref={el => (this.flyoutSearchElement = el as HTMLElement)} class=\"stzh-header__flyout-search\">\n              <div class=\"stzh-header__flyout-backdrop\" onClick={this.handleBackdropSearchClick}></div>\n              <div class=\"stzh-header__flyout-scrollbar\"></div>\n              <div class=\"stzh-header__flyout-search-main\">\n                <slot name=\"search\"></slot>\n              </div>\n            </div>\n          )}\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-24feb79f.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,a as e,g as n}from"./p-c7bfac7a.js";import{t as a}from"./p-41529de9.js";import{p as h,a as p}from"./p-23d404e1.js";import{h as o}from"./p-d789f265.js";import"./p-9b063923.js";const r=".sc-stzh-appointments-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-appointments-h{display:none}.sc-stzh-appointments-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-appointments-h *.sc-stzh-appointments,.sc-stzh-appointments-h *.sc-stzh-appointments::before,.sc-stzh-appointments-h *.sc-stzh-appointments::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-appointments-h .has-focus.sc-stzh-appointments{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments{outline-style:none !important}.sc-stzh-appointments-h .stzh-fylingfocus-focused.sc-stzh-appointments::-moz-focus-inner{border:0 !important}.sc-stzh-appointments-h{--background-color:var(--stzh-color-secondary10)}.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__heading.sc-stzh-appointments:not(:empty){margin-bottom:var(--stzh-space-xlarge)}}.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);display:flex;flex-direction:column;padding-left:var(--stzh-space-large);padding-right:var(--stzh-space-large);background-color:var(--background-color)}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-appointments__wrapper.sc-stzh-appointments{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-appointments__wrapper.sc-stzh-appointments{flex-direction:row}}.stzh-appointments__calendar-wrapper.sc-stzh-appointments{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-appointments__calendar-wrapper.sc-stzh-appointments{margin-right:var(--stzh-space-xxlarge)}}.stzh-appointments__appointments-wrapper.sc-stzh-appointments{flex-grow:1;display:flex;flex-direction:column}.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-small);display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 900px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-appointments__calendar-title-wrapper.sc-stzh-appointments,.stzh-appointments__appointments-title-wrapper.sc-stzh-appointments{margin-bottom:var(--stzh-space-large)}}.stzh-appointments__calendar-title.sc-stzh-appointments,.stzh-appointments__appointments-title.sc-stzh-appointments{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-primary70);display:flex;align-items:center}.stzh-appointments__calendar-icon.sc-stzh-appointments,.stzh-appointments__appointments-icon.sc-stzh-appointments{--size:var(--stzh-icon-size-large);margin-right:var(--stzh-space-xsmall)}.stzh-appointments__calendar-content.sc-stzh-appointments,.stzh-appointments__calendar-content-medium.sc-stzh-appointments{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content.sc-stzh-appointments{display:none}}.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:none;background-color:var(--stzh-color-white);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-appointments__calendar-content-medium.sc-stzh-appointments{display:block}}.stzh-appointments__appointments-content.sc-stzh-appointments{flex-grow:1}.stzh-appointments__appointments-radiogroup.sc-stzh-appointments{margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-xsmall)}.stzh-appointments__more-link.sc-stzh-appointments{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:var(--stzh-space-medium)}.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:var(--stzh-space-large)}@media screen and (min-width: 900px){.stzh-appointments--has-calendar.sc-stzh-appointments .stzh-appointments__appointments-wrapper.sc-stzh-appointments{margin-top:0}}";const m=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.showMoreLink=false;this.moreItemsLeft=0;this.showCalendar=false;this.showSort=false;this.showSortStart=false;this.showSortPlace=false;this.showAppointmentsTitle=false;this.allAppointsmentOnSameDay=true;this.sortOptions=[];this.isDateDisabled=t=>{const s=!!this._appointments.find((s=>s.start.getFullYear()===t.getFullYear()&&s.start.getMonth()===t.getMonth()&&s.start.getDate()===t.getDate()));return!s};this.onNextActiveDateClick=async()=>{if(this.nextDate){this.currentDate=this.nextDate;const t=await this.datepickerElement.getPopover();if(t){t.hide()}}};this.onMoreClick=()=>{this.showItems=this.stepItems+this.showItems;const t=this.inputElement.querySelector("stzh-radio");t.focus()};this.onDropdownChange=async t=>{const s=t.target;const i=await s.getValue();if(i){this.sortBy=i}};this.onDatepickerChange=t=>{if(t.detail.component!=="stzh-datepicker"||!t.detail.valueAsDate){return}this.currentDate=t.detail.valueAsDate;this.showItems=this._initialShowItems};this.onRadioChange=t=>{this.value=t.detail.value;this.stzhChange.emit({component:"stzh-appointments",value:this.value})};this.localization=undefined;this.disableSort=false;this.sortBy="start";this.appointments=[];this.currentDate=undefined;this.value="";this.name="appointment";this.showItems=5;this.stepItems=5;this.calendarTitle="";this.appointmentsTitle="";this.dateAdapter=undefined}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}currentDateWatcher(t){if(!t){this._currentDate=this.dateByValue||this.earliestDate;if(!this.dateByValue){this.setValueToFirstAppointmentOfCurrentDate()}}else if(typeof t==="string"){this._currentDate=h(t);this.setValueToFirstAppointmentOfCurrentDate()}else{this._currentDate=t;const s=this.getCurrentDateAppointments().map((t=>t.value));if(!s.includes(this.value)){this.setValueToFirstAppointmentOfCurrentDate()}}}sortByWatcher(){this.setValueToFirstAppointmentOfCurrentDate()}valueWatcher(){this.updateDateByValue();this.currentDateWatcher(this.currentDate)}appointmentsWatcher(t){if(typeof t==="string"){this._appointments=JSON.parse(t)}else{this._appointments=t}this._appointments=this._appointments.map((t=>Object.assign(Object.assign({},t),{start:new Date(t.start),end:new Date(t.end)})));if(this._appointments.length>0){this._appointments.sort(((t,s)=>t["start"]>s["start"]?1:-1));this.earliestDate=this._appointments[0].start;this.latestDate=this._appointments[this._appointments.length-1].start;this.updateDateByValue()}if(this._appointments.length>1){const t=this._appointments[0].start;this.allAppointsmentOnSameDay=this._appointments.map((t=>t.start)).every((s=>`${s.getFullYear()}-${s.getMonth()}-${s.getDate()}`===`${t.getFullYear()}-${t.getMonth()}-${t.getDate()}`))}this.showCalendar=!this.allAppointsmentOnSameDay;this.showAppointmentsTitle=this._appointments.length>1;this.currentDateWatcher(this.currentDate)}updateDateByValue(){this.dateByValue=this.value&&this._appointments.find((t=>t.value===this.value)).start}getCurrentDateAppointments(){let t=0;const s=this._appointments.filter(((s,i)=>{const e=s.start.getFullYear()===this._currentDate.getFullYear()&&s.start.getMonth()===this._currentDate.getMonth()&&s.start.getDate()===this._currentDate.getDate();if(e){t=i}return e}));if(this._appointments[t+1]){this.nextDate=this._appointments[t+1].start}else{this.nextDate=null}s.sort(((t,s)=>t[this.sortBy]>s[this.sortBy]?1:-1));return s}setValueToFirstAppointmentOfCurrentDate(){const t=this.getCurrentDateAppointments().filter((t=>!t.disabled));if(t.length>0){this.value=t[0].value;this.stzhChange.emit({component:"stzh-appointments",value:this.value})}}async componentWillLoad(){this._initialShowItems=this.showItems;this.appointmentsWatcher(this.appointments);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"appointments")}this.dateAdapterWatcher(this.dateAdapter)}componentWillRender(){const t=this.getCurrentDateAppointments();this.appointmentsShown=t.slice(0,this.showItems);this.showMoreLink=this.showItems<t.length;this.moreItemsLeft=t.length-this.showItems;this.showSortStart=!this.disableSort&&t.map((t=>this.dateAdapter.format(t.start,"time"))).filter(((t,s,i)=>i.indexOf(t)==s)).length>1;this.showSortPlace=!this.disableSort&&t.map((t=>t.place)).filter(((t,s,i)=>i.indexOf(t)==s)).length>1;this.sortOptions=[];if(this.showSortStart){this.sortOptions.push({text:this.localization.sortByTime,value:"start"})}if(this.showSortPlace){this.sortOptions.push({text:this.localization.sortByPlace,value:"place"})}this.showSort=!this.disableSort&&this.appointmentsShown.length>1;this._sortBy=this.showSortStart&&!this.showSortPlace&&"start"||!this.showSortStart&&this.showSortPlace&&"place"||this.sortBy}componentDidRender(){if(this.datepickerElement){this.datepickerElement.setDate(this._currentDate)}if(this.datepickerElementMedium){this.datepickerElementMedium.setDate(this._currentDate)}}render(){const t=o(this.element,"heading");const s={"stzh-appointments":true,"stzh-appointments--has-calendar":this.showCalendar,"stzh-appointments--has-appointments-title":this.showAppointmentsTitle,"stzh-appointments--has-sort":this.showSort};return i(e,{"has-heading":t},i("div",{class:s},i("div",{class:"stzh-appointments__heading"},i("slot",{name:"heading"})),i("div",{class:"stzh-appointments__wrapper"},this.showCalendar&&i("div",{class:"stzh-appointments__calendar-wrapper"},i("div",{class:"stzh-appointments__calendar-title-wrapper"},i("div",{class:"stzh-appointments__calendar-title"},i("stzh-icon",{class:"stzh-appointments__calendar-icon",name:"calendar"}),i("span",{class:"stzh-appointments__calendar-title-text"},this.calendarTitle||this.localization.calendarTitle))),i("div",{class:"stzh-appointments__calendar-content"},i("stzh-datepicker",{"hide-optional":true,ref:t=>this.datepickerElement=t,onStzhChange:this.onDatepickerChange,label:this.localization.datepickerLabel,calendarIsDateDisabled:this.isDateDisabled,calendarMin:p(this.earliestDate),calendarMax:p(this.latestDate)},i("stzh-link",{slot:"action",size:"inherit",disabled:!this.nextDate,onClick:this.onNextActiveDateClick},this.localization.nextDayWithAppointments))),i("div",{class:"stzh-appointments__calendar-content-medium"},i("stzh-datepicker",{"hide-optional":true,ref:t=>this.datepickerElementMedium=t,onStzhChange:this.onDatepickerChange,inline:true,calendarIsDateDisabled:this.isDateDisabled,calendarMin:p(this.earliestDate),calendarMax:p(this.latestDate)},this.nextDate&&i("stzh-link",{slot:"action",size:"inherit",onClick:this.onNextActiveDateClick},this.localization.nextDayWithAppointments)))),i("div",{class:"stzh-appointments__appointments-wrapper"},this.showAppointmentsTitle&&i("div",{class:"stzh-appointments__appointments-title-wrapper"},i("div",{class:"stzh-appointments__appointments-title"},i("stzh-icon",{class:"stzh-appointments__appointments-icon",name:"clock"}),i("span",{class:"stzh-appointments__appointments-title-text"},this.appointmentsTitle||this.localization.appointmentsTitle)),this.showSort&&i("div",{class:"stzh-appointments__sort"},i("stzh-dropdown",{"hide-optional":true,inline:true,"no-search":true,class:"stzh-appointments__sort-dropdown",variant:"plain",size:"small",sizeMedium:"tiny",items:[this._sortBy],options:this.sortOptions,onStzhChange:this.onDropdownChange}))),i("div",{class:"stzh-appointments__appointments-content"},i("stzh-radiogroup",{class:"stzh-appointments__appointments-radiogroup",ref:t=>this.inputElement=t,legend:this.localization.inputLegend,"hide-legend":true,name:this.name,value:this.value,preventUpdateProperties:["disabled"]},this.appointmentsShown.map((t=>i("stzh-radio",{onStzhChange:this.onRadioChange,value:t.value,disabled:typeof t.disabled!=="undefined"?t.disabled:false},i("stzh-text",{font:"heavy",size:"centi"},!this.showCalendar&&i("span",null,this.dateAdapter.format(t.start,"dateLong"),", "),this.dateAdapter.formatSpan(t.start,t.end,"time")),i("stzh-text",{size:"milli"},t.caption))))),this.showMoreLink&&i("stzh-link",{class:"stzh-appointments__more-link",size:"inherit",onClick:this.onMoreClick},a(this.localization.moreTextItems,this.moreItemsLeft>this.stepItems?this.stepItems:this.moreItemsLeft)))))))}get element(){return n(this)}static get watchers(){return{dateAdapter:["dateAdapterWatcher"],currentDate:["currentDateWatcher"],sortBy:["sortByWatcher"],value:["valueWatcher"],appointments:["appointmentsWatcher"]}}};m.style=r;export{m as stzh_appointments};
-//# sourceMappingURL=p-24feb79f.entry.js.map

package/dist/stzh-components/p-24feb79f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAppointmentsCss","StzhAppointments","this","showMoreLink","moreItemsLeft","showCalendar","showSort","showSortStart","showSortPlace","showAppointmentsTitle","allAppointsmentOnSameDay","sortOptions","isDateDisabled","date","dateHasAppointment","_appointments","find","appointment","start","getFullYear","getMonth","getDate","onNextActiveDateClick","async","nextDate","currentDate","popover","datepickerElement","getPopover","hide","onMoreClick","showItems","stepItems","radio","inputElement","querySelector","focus","onDropdownChange","event","target","sortBy","getValue","onDatepickerChange","detail","component","valueAsDate","_initialShowItems","onRadioChange","value","stzhChange","emit","dateAdapterWatcher","newValue","dateAdapter","window","stzhComponents","utils","createFormatParseAdapter","localization","$formats","$globals","currentDateWatcher","_currentDate","dateByValue","earliestDate","setValueToFirstAppointmentOfCurrentDate","parseISODate","appointmentsForNewDate","getCurrentDateAppointments","map","appt","includes","sortByWatcher","valueWatcher","updateDateByValue","appointmentsWatcher","JSON","parse","Object","assign","Date","end","length","sort","a","b","latestDate","firstDate","every","indexOfLastCurrentDayDate","appointmentsCurrentDate","filter","index","dateIsInCurrentDay","appointments","disabled","componentWillLoad","fetchTranslations","element","componentWillRender","appointmentsShown","slice","disableSort","format","item","pos","self","indexOf","place","push","text","sortByTime","sortByPlace","_sortBy","componentDidRender","setDate","datepickerElementMedium","render","headingUsed","hasSlot","classes","h","Host","class","name","calendarTitle","ref","el","onStzhChange","label","datepickerLabel","calendarIsDateDisabled","calendarMin","printISODate","calendarMax","slot","size","onClick","nextDayWithAppointments","inline","appointmentsTitle","variant","sizeMedium","items","options","legend","inputLegend","preventUpdateProperties","font","formatSpan","caption","tc","moreTextItems"],"sources":["src/components/stzh-appointments/stzh-appointments.scss?tag=stzh-appointments&encapsulation=scoped","src/components/stzh-appointments/stzh-appointments.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorSecondary10};\n}\n\n.stzh-appointments {\n  &__heading {\n    &:not(:empty) {\n      @include spaceCurve('padding-bottom', 'tiny');\n      margin-bottom: space('xsmall');\n\n      @include mq($from: small) {\n        margin-bottom: space('small');\n      }\n\n      @include mq($from: medium) {\n        margin-bottom: space('medium');\n      }\n\n      @include mq($from: large) {\n        margin-bottom: space('xlarge');\n      }\n    }\n  }\n\n  // &__actions {\n  //   &:not(:empty) {\n  //     @include spaceCurve('margin-top', 'medium');\n  //   }\n  // }\n\n  &__wrapper {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    display: flex;\n    flex-direction: column;\n    padding-left: space('large');\n    padding-right: space('large');\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__calendar-wrapper {\n    display: flex;\n    flex-direction: column;\n\n    @include mq($from: medium) {\n      margin-right: space('xxlarge');\n    }\n  }\n\n  &__appointments-wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  &__calendar-title-wrapper,\n  &__appointments-title-wrapper {\n    @include spaceCurve('margin-bottom', 'small');\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  &__calendar-title,\n  &__appointments-title {\n    @include font('heavy');\n    @include fontSize('centi');\n    color: $colorPrimary70;\n    display: flex;\n    align-items: center;\n  }\n\n  &__calendar-icon,\n  &__appointments-icon {\n    --size: #{iconSize('large')};\n    margin-right: space('xsmall');\n  }\n\n  &__calendar-content,\n  &__calendar-content-medium {\n    @include fontSize('milli');\n  }\n\n  &__calendar-content {\n    @include mq($from: medium) {\n      display: none;\n    }\n  }\n\n  &__calendar-content-medium {\n    display: none;\n    background-color: $colorWhite;\n    padding-bottom: space('medium');\n\n    @include mq($from: medium) {\n      display: block;\n    }\n  }\n\n  &__appointments-content {\n    flex-grow: 1;\n  }\n\n  &__appointments-radiogroup {\n    margin-top: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  &__more-link {\n    @include fontSize('milli');\n    margin-top: space('medium');\n  }\n\n  &--has-calendar &__appointments-wrapper {\n    margin-top: space('large');\n\n    @include mq($from: medium) {\n      margin-top: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAppointmentsChangeEvent,\n  StzhRadioChangeEvent,\n  StzhDatepickerChangeEvent,\n  StzhDropdownChangeEvent,\n} from \"../../index\";\n\nimport { tc } from \"../../utils/translation-utils\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\";\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\";\n\nimport { StzhAppointmentsLocalizedText } from \"./stzh-appointments.localization\"\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-appointments\",\n  styleUrl: \"stzh-appointments.scss\",\n  scoped: true\n})\nexport class StzhAppointments {\n  /** Translation strings */\n  @Prop() localization: StzhAppointmentsLocalizedText;\n\n  /** Hides the sort dropdown when true */\n  @Prop() disableSort = false;\n\n  /** Sort by */\n  @Prop({ mutable: true }) sortBy: \"start\" | \"place\" = \"start\";\n  private _sortBy: \"start\" | \"place\";\n\n  /** Initial selected values */\n  @Prop() appointments: any[] | string = [];\n  private _appointments: any[];\n  private appointmentsShown: any[];\n\n  /** Current selected date (if undefined, earliest appointment date in list is taken or current selected one by value) */\n  @Prop({ mutable: true }) currentDate: Date | string;\n  private _currentDate: Date;\n\n  /* Selected appointment by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /* Name of radiogroup form element */\n  @Prop({ reflect: true }) name: string = \"appointment\";\n\n  /** Nr of items shown */\n  @Prop({ mutable: true }) showItems: number = 5;\n  private _initialShowItems: number;\n\n  /** Nr of items shown when more link is clicked */\n  @Prop() stepItems: number = 5;\n\n  /** Overwrite default calendar title */\n  @Prop() calendarTitle = \"\";\n\n  /** Overwrite default appointments title */\n  @Prop() appointmentsTitle = \"\";\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be an object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhAppointmentsElement;\n\n  /** Appointments change event */\n  @Event() stzhChange: EventEmitter<StzhAppointmentsChangeEvent>;\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"currentDate\")\n  currentDateWatcher(newValue: Date | string) {\n    if (!newValue) {\n      this._currentDate = this.dateByValue || this.earliestDate;\n\n      if (!this.dateByValue) {\n        this.setValueToFirstAppointmentOfCurrentDate();\n      }\n    } else if (typeof newValue === \"string\") {\n      this._currentDate = parseISODate(newValue);\n      this.setValueToFirstAppointmentOfCurrentDate();\n    } else {\n      this._currentDate = newValue;\n      // Check if value already corresponds to a valid appointment on the new date\n      const appointmentsForNewDate = this.getCurrentDateAppointments().map(appt => appt.value);\n      if (!appointmentsForNewDate.includes(this.value)) {\n        this.setValueToFirstAppointmentOfCurrentDate();\n      }\n    }\n  }\n\n  @Watch(\"sortBy\")\n  sortByWatcher() {\n    this.setValueToFirstAppointmentOfCurrentDate();\n  }\n\n  @Watch(\"value\")\n  valueWatcher() {\n    this.updateDateByValue();\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  @Watch(\"appointments\")\n  appointmentsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._appointments = JSON.parse(newValue);\n    } else {\n      this._appointments = newValue;\n    }\n\n    // convert start and end field to date\n    this._appointments = this._appointments.map(appointment => ({\n      ...appointment,\n      start: new Date(appointment.start),\n      end: new Date(appointment.end),\n    }))\n\n    if (this._appointments.length > 0) {\n      // sort with start field and find earliest and latest date\n      this._appointments.sort((a, b) => a['start'] > b['start'] ? 1 : -1);\n      this.earliestDate = this._appointments[0].start;\n      this.latestDate = this._appointments[this._appointments.length - 1].start;\n      this.updateDateByValue();\n    }\n\n    // determine whether all appointments are from the same day\n    if (this._appointments.length > 1) {\n      const firstDate = this._appointments[0].start;\n      this.allAppointsmentOnSameDay = this._appointments\n        .map(appointment => appointment.start)\n        .every(date => `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`\n          === `${firstDate.getFullYear()}-${firstDate.getMonth()}-${firstDate.getDate()}`);\n    }\n\n    // update flags\n    this.showCalendar = !this.allAppointsmentOnSameDay;\n    this.showAppointmentsTitle = this._appointments.length > 1;\n\n    // update current date if user has not choosen one\n    this.currentDateWatcher(this.currentDate);\n  }\n\n  private dateByValue: Date;\n  private earliestDate: Date;\n  private latestDate: Date;\n  private nextDate: Date;\n\n  private showMoreLink: boolean = false;\n  private moreItemsLeft: number = 0;\n  private showCalendar: boolean = false;\n  private showSort: boolean = false;\n  private showSortStart: boolean = false;\n  private showSortPlace: boolean = false;\n  private showAppointmentsTitle: boolean = false;\n  private allAppointsmentOnSameDay: boolean = true;\n  private sortOptions = [];\n\n  private inputElement: HTMLStzhRadiogroupElement;\n  private datepickerElement: HTMLStzhDatepickerElement;\n  private datepickerElementMedium: HTMLStzhDatepickerElement;\n\n  private updateDateByValue() {\n    this.dateByValue = this.value\n      && this._appointments\n        .find(appointment => appointment.value === this.value)\n        .start;\n  }\n\n  private getCurrentDateAppointments() {\n    let indexOfLastCurrentDayDate = 0;\n\n    // filter to current date appointments that can be shown\n    const appointmentsCurrentDate = this._appointments\n      .filter((appointment, index) => {\n        const dateIsInCurrentDay = appointment.start.getFullYear() === this._currentDate.getFullYear()\n          && appointment.start.getMonth() === this._currentDate.getMonth()\n          && appointment.start.getDate() === this._currentDate.getDate();\n\n        if (dateIsInCurrentDay) {\n          indexOfLastCurrentDayDate = index;\n        }\n\n        return dateIsInCurrentDay;\n      });\n\n    // find next day with dates or set to null\n    if (this._appointments[indexOfLastCurrentDayDate + 1]) {\n      this.nextDate = this._appointments[indexOfLastCurrentDayDate + 1].start;\n    } else {\n      this.nextDate = null;\n    }\n\n    // sort\n    appointmentsCurrentDate.sort((a, b) => a[this.sortBy] > b[this.sortBy] ? 1 : -1);\n    return appointmentsCurrentDate;\n  }\n\n  private setValueToFirstAppointmentOfCurrentDate() {\n    // choose the first available appointment from current date\n    const appointments = this.getCurrentDateAppointments()\n      .filter(appointment => !appointment.disabled)\n\n    if (appointments.length > 0) {\n      this.value = appointments[0].value;\n      this.stzhChange.emit({\n        component: \"stzh-appointments\",\n        value: this.value\n      });\n    }\n  }\n\n  private isDateDisabled = (date: Date) => {\n    const dateHasAppointment: boolean = !!this._appointments.find(appointment => {\n      return appointment.start.getFullYear() === date.getFullYear()\n        && appointment.start.getMonth() === date.getMonth()\n        && appointment.start.getDate() === date.getDate();\n    });\n\n    return !dateHasAppointment;\n  }\n\n  private onNextActiveDateClick = async () => {\n    if (this.nextDate) {\n      this.currentDate = this.nextDate;\n\n      const popover = await this.datepickerElement.getPopover();\n\n      if (popover) {\n        popover.hide();\n      }\n    }\n  }\n\n  private onMoreClick = () => {\n    this.showItems = this.stepItems + this.showItems;\n\n    // return focus to radiogroup\n    const radio = this.inputElement.querySelector('stzh-radio');\n    radio.focus();\n  }\n\n  private onDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const target: HTMLStzhDropdownElement = event.target as HTMLStzhDropdownElement;\n\n    const sortBy = await target.getValue() as \"start\" | \"place\" | \"\";\n\n    if (sortBy) {\n      this.sortBy = sortBy;\n    }\n  }\n\n  private onDatepickerChange = (event: CustomEvent<StzhDatepickerChangeEvent>) => {\n    if (event.detail.component !== 'stzh-datepicker' || !event.detail.valueAsDate) {\n      return;\n    }\n\n    this.currentDate = event.detail.valueAsDate;\n    // reset number of items that should be shown\n    this.showItems = this._initialShowItems;\n  }\n\n  private onRadioChange = (event: CustomEvent<StzhRadioChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-appointments\",\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n    this.appointmentsWatcher(this.appointments);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appointments\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n  }\n\n  componentWillRender() {\n    const appointments = this.getCurrentDateAppointments();\n\n    // slice to max that should be visible\n    this.appointmentsShown = appointments.slice(0, this.showItems);\n\n    // set flags\n    this.showMoreLink = this.showItems < appointments.length;\n    this.moreItemsLeft = appointments.length - this.showItems;\n\n    // don't show time sort when only one time in the current day\n    this.showSortStart = !this.disableSort && appointments\n      .map(appointment => {\n        return this.dateAdapter.format(appointment.start, \"time\");\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    // don't show place sort when only one place in the current day\n    this.showSortPlace = !this.disableSort && appointments\n      .map(appointment => {\n        return appointment.place;\n      }).filter((item, pos, self) => {\n        return self.indexOf(item) == pos;\n      }).length > 1;\n\n    this.sortOptions = [];\n\n    if (this.showSortStart) {\n      this.sortOptions.push({\n        text: this.localization.sortByTime,\n        value: \"start\"\n      });\n    }\n\n    if (this.showSortPlace) {\n      this.sortOptions.push({\n        text: this.localization.sortByPlace,\n        value: \"place\"\n      });\n    }\n\n    this.showSort = !this.disableSort && this.appointmentsShown.length > 1;\n\n    // determine sort (force alternative sorting if it makes sense)\n    this._sortBy =\n      (this.showSortStart && !this.showSortPlace && \"start\")\n      || (!this.showSortStart && this.showSortPlace && \"place\")\n      || this.sortBy;\n  }\n\n  componentDidRender() {\n    // set datepickers values to current date\n    if (this.datepickerElement) {\n      this.datepickerElement.setDate(this._currentDate);\n    }\n\n    if (this.datepickerElementMedium) {\n      this.datepickerElementMedium.setDate(this._currentDate);\n    }\n  }\n\n  render() {\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n\n    const classes = {\n      \"stzh-appointments\": true,\n      \"stzh-appointments--has-calendar\": this.showCalendar,\n      \"stzh-appointments--has-appointments-title\": this.showAppointmentsTitle,\n      \"stzh-appointments--has-sort\": this.showSort\n    };\n\n    return (\n      <Host has-heading={headingUsed}>\n        <div class={classes}>\n          <div class=\"stzh-appointments__heading\">\n            <slot name=\"heading\"></slot>\n          </div>\n\n          <div class=\"stzh-appointments__wrapper\">\n            {this.showCalendar &&\n              <div class=\"stzh-appointments__calendar-wrapper\">\n                <div class=\"stzh-appointments__calendar-title-wrapper\">\n                  <div class=\"stzh-appointments__calendar-title\">\n                    <stzh-icon class=\"stzh-appointments__calendar-icon\" name=\"calendar\"></stzh-icon>\n                    <span class=\"stzh-appointments__calendar-title-text\">\n                      {this.calendarTitle || this.localization.calendarTitle}\n                    </span>\n                  </div>\n                </div>\n                <div class=\"stzh-appointments__calendar-content\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElement = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    label={this.localization.datepickerLabel}\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    <stzh-link\n                      slot=\"action\"\n                      size=\"inherit\"\n                      disabled={!this.nextDate}\n                      onClick={this.onNextActiveDateClick}\n                    >\n                      {this.localization.nextDayWithAppointments}\n                    </stzh-link>\n                  </stzh-datepicker>\n                </div>\n                <div class=\"stzh-appointments__calendar-content-medium\">\n                  <stzh-datepicker\n                    hide-optional\n                    ref={(el) => (this.datepickerElementMedium = el as HTMLStzhDatepickerElement)}\n                    onStzhChange={this.onDatepickerChange}\n                    inline\n                    calendarIsDateDisabled={this.isDateDisabled}\n                    calendarMin={printISODate(this.earliestDate)}\n                    calendarMax={printISODate(this.latestDate)}\n                  >\n                    {this.nextDate &&\n                      <stzh-link\n                        slot=\"action\"\n                        size=\"inherit\"\n                        onClick={this.onNextActiveDateClick}\n                      >\n                        {this.localization.nextDayWithAppointments}\n                      </stzh-link>\n                    }\n                  </stzh-datepicker>\n                </div>\n              </div>\n            }\n            <div class=\"stzh-appointments__appointments-wrapper\">\n              {this.showAppointmentsTitle &&\n                <div class=\"stzh-appointments__appointments-title-wrapper\">\n                  <div class=\"stzh-appointments__appointments-title\">\n                    <stzh-icon class=\"stzh-appointments__appointments-icon\" name=\"clock\"></stzh-icon>\n                    <span class=\"stzh-appointments__appointments-title-text\">\n                      {this.appointmentsTitle || this.localization.appointmentsTitle}\n                    </span>\n                  </div>\n                  {this.showSort &&\n                    <div class=\"stzh-appointments__sort\">\n                      <stzh-dropdown\n                        hide-optional\n                        inline\n                        no-search\n                        class=\"stzh-appointments__sort-dropdown\"\n                        variant=\"plain\"\n                        size=\"small\"\n                        sizeMedium={\"tiny\"}\n                        items={[this._sortBy]}\n                        options={this.sortOptions}\n                        onStzhChange={this.onDropdownChange}\n                      ></stzh-dropdown>\n                    </div>\n                  }\n                </div>\n              }\n\n              <div class=\"stzh-appointments__appointments-content\">\n                <stzh-radiogroup\n                  class=\"stzh-appointments__appointments-radiogroup\"\n                  ref={(el) => this.inputElement = el as HTMLStzhRadiogroupElement}\n                  legend={this.localization.inputLegend}\n                  hide-legend\n                  name={this.name}\n                  value={this.value}\n                  preventUpdateProperties={[\"disabled\"]}\n                >\n                  {this.appointmentsShown.map((appointment) =>\n                    <stzh-radio\n                      onStzhChange={this.onRadioChange}\n                      value={appointment.value}\n                      disabled={typeof appointment.disabled !== \"undefined\" ? appointment.disabled : false}\n                    >\n                      <stzh-text font=\"heavy\" size=\"centi\">\n                        {!this.showCalendar && <span>{this.dateAdapter.format(appointment.start, \"dateLong\")},&nbsp;</span>}\n                        {this.dateAdapter.formatSpan(appointment.start, appointment.end, \"time\")}\n                      </stzh-text>\n                      <stzh-text size=\"milli\">{appointment.caption}</stzh-text>\n                    </stzh-radio>\n                  )}\n                </stzh-radiogroup>\n\n                {this.showMoreLink &&\n                  <stzh-link\n                    class=\"stzh-appointments__more-link\"\n                    size=\"inherit\"\n                    onClick={this.onMoreClick}\n                  >\n                    {tc(this.localization.moreTextItems,\n                      this.moreItemsLeft > this.stepItems\n                        ? this.stepItems\n                        : this.moreItemsLeft)}\n                  </stzh-link>\n                }\n              </div>\n            </div>\n          </div>\n\n          {/* <div class=\"stzh-appointments__actions\">\n            <slot name=\"actions\"></slot>\n          </div> */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-287f518f.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as t,h as s,a,g as d}from"./p-c7bfac7a.js";import{s as e}from"./p-d789f265.js";import{c as o}from"./p-3d5f9ac0.js";import{c as h}from"./p-ed63ed76.js";import"./p-9b063923.js";const n=".sc-stzh-dialog-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-dialog-h{display:none}.sc-stzh-dialog-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium);padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge);overflow:auto;flex-grow:1}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding-top:var(--stzh-space-medium);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}";const l="stzh-dialog-open";let r=null;let c=0;const g=class{constructor(s){i(this,s);this.stzhOpen=t(this,"stzhOpen",7);this.stzhClose=t(this,"stzhClose",7);this.handleDialogClick=i=>{const t=i.target;if(t.dataset.stzhDialogClose){this.hide()}else{const i=t.closest("[data-stzh-dialog-close]");if(i){this.hide()}}};this.handleCloseButtonClick=()=>{this.hide()};this.init=()=>{const i=this.element.querySelector('stzh-actions[slot="actions"]');if(i){e(i,{variant:"dialog"})}};this.localization=undefined;this.closeOnEscapeKey=false;this.closeOnBackdropClick=false;this.open=false;this.stay=true;this.size="default";this.hideClose=false;this.heading="";this.a11yRole="alertdialog";this.a11yLabel="";this.closeAnalyticsId=undefined}handleOutsideClick(i){if(!this.open||!this.closeOnBackdropClick){return}const t=i.target!==this.dialogElement&&this.dialogElement.contains(i.target)===false;if(t){this.hide()}}handleKeydown(i){if(i.key==="Escape"&&r===this&&this.closeOnEscapeKey){this.hide()}}handleOpenTriggerClick(i){const t=i.target;if(t.dataset.stzhDialogTrigger===this.element.id){this.show()}else{const i=t.closest("[data-stzh-dialog-trigger]");if(i&&i.dataset.stzhDialogTrigger===this.element.id){this.show()}}}async show(){this.open=true;this.stzhOpen.emit({component:"stzh-dialog"})}async hide(){this.open=false;this.stzhClose.emit({component:"stzh-dialog"})}getSiblings(){if(!this.parentElement){return[]}return Array.from(this.parentElement.children).filter((i=>i!==this.element))}disableSiblings(){this.getSiblings().forEach((i=>{i.setAttribute("aria-hidden","true")}))}enableSiblings(){this.getSiblings().forEach((i=>{i.removeAttribute("aria-hidden")}))}dialogShown(){r=this;document.body.classList.add(l);this.disableSiblings();if(this.trap){this.trap.activate()}}dialogHidden(){document.body.classList.remove(l);this.enableSiblings();if(this.trap){this.trap.deactivate()}r=null}async componentWillLoad(){this.id=`stzh-dialog-${c}`;c++;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"dialog")}}componentDidRender(){this.open?this.dialogShown():this.dialogHidden()}componentDidUpdate(){this.trap.updateContainerElements(this.element)}componentDidLoad(){this.trap=h(this.element,Object.assign({fallbackFocus:this.dialogElement},o()));if(this.open){this.dialogShown()}}connectedCallback(){if(!this.stay&&this.element.parentElement!==document.body){document.body.appendChild(this.element)}this.parentElement=this.element.parentElement;this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){this.dialogHidden();if(this.observer){this.observer.disconnect()}}render(){return s(a,null,s("div",{class:{"stzh-dialog":true,"stzh-dialog--is-open":this.open,"stzh-dialog--has-heading":!!this.heading,"stzh-dialog--has-close-hidden":this.hideClose,[`stzh-dialog--size-${this.size}`]:!!this.size}},s("div",{class:"stzh-dialog__backdrop"}),s("div",{class:"stzh-dialog__content"},s("div",{class:"stzh-dialog__dialog",ref:i=>this.dialogElement=i,tabindex:"-1",role:this.a11yRole,"aria-label":this.a11yLabel||null,"aria-labelledby":this.heading?`${this.id}-heading`:null,"aria-hidden":this.open?"false":"true",onClick:this.handleDialogClick},this.heading&&s("stzh-heading",{id:`${this.id}-heading`,class:"stzh-dialog__heading",level:"2"},this.heading),s("div",{class:"stzh-dialog__dialog-content"},s("slot",null)),s("div",{class:"stzh-dialog__actions"},s("slot",{name:"actions"})),!this.hideClose&&s("stzh-button",{class:"stzh-dialog__close-button",variant:"tertiary",size:"small",icon:"close",iconOnly:true,onClick:this.handleCloseButtonClick,a11yLabel:this.localization.close,analyticsId:this.closeAnalyticsId||this.localization.close})))))}get element(){return d(this)}};g.style=n;export{g as stzh_dialog};
-//# sourceMappingURL=p-287f518f.entry.js.map

package/dist/stzh-components/p-287f518f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhDialogCss","CLASS_BODY_OPEN","activeDialog","dialogCounter","StzhDialog","this","handleDialogClick","event","target","dataset","stzhDialogClose","hide","closest","handleCloseButtonClick","init","actions","element","querySelector","setPropsIfNull","variant","handleOutsideClick","open","closeOnBackdropClick","isClickOutside","dialogElement","contains","handleKeydown","key","closeOnEscapeKey","handleOpenTriggerClick","stzhDialogTrigger","id","show","stzhOpen","emit","component","stzhClose","getSiblings","parentElement","Array","from","children","filter","child","disableSiblings","forEach","sibling","setAttribute","enableSiblings","removeAttribute","dialogShown","document","body","classList","add","trap","activate","dialogHidden","remove","deactivate","componentWillLoad","localization","window","stzhComponents","utils","fetchTranslations","componentDidRender","componentDidUpdate","updateContainerElements","componentDidLoad","createFocusTrap","Object","assign","fallbackFocus","createBaseFocusTrapOptions","connectedCallback","stay","appendChild","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","class","heading","hideClose","size","ref","el","tabindex","role","a11yRole","a11yLabel","onClick","level","name","icon","iconOnly","close","analyticsId","closeAnalyticsId"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve('--padding-top', 'large');\n  @include spaceCurve('--padding-bottom', 'large');\n  @include spaceCurve('--padding-left', 'medium');\n  @include spaceCurve('--padding-right', 'medium');\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    // overflow: visible;\n    overflow: hidden;\n    outline: none;\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve('padding-bottom', 'regular');\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding-top: space('medium');\n      padding-bottom: var(--padding-bottom);\n      padding-left: var(--padding-left);\n      padding-right: var(--padding-right);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space('xsmall');\n    right: space('xsmall');\n\n    @include mq($from: medium) {\n      top: space('large');\n      right: space('large');\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import {\n  Host,\n  Component,\n  Element,\n  Method,\n  Listen,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  StzhDialogOpenEvent,\n  StzhDialogCloseEvent\n} from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\"\n\nimport { createFocusTrap, FocusTrap } from 'focus-trap';\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /** Accessible label for dialog (use if no heading is used) */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return\n    }\n\n    const isClickOutside = event.target !== this.dialogElement\n      && this.dialogElement.contains(event.target as HTMLElement) === false\n\n    if (isClickOutside) {\n      this.hide()\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (\n      event.key === \"Escape\"\n      && activeDialog === this\n      && this.closeOnEscapeKey\n    ) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\"\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private parentElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  }\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  }\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\"\n      } as HTMLStzhActionsElement)\n    }\n  }\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 dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions()\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.parentElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={(el) => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-label={this.a11yLabel || null}\n              aria-labelledby={this.heading ? `${this.id}-heading` : null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              {this.heading &&\n                <stzh-heading\n                  id={`${this.id}-heading`}\n                  class=\"stzh-dialog__heading\"\n                  level=\"2\"\n                >\n                  {this.heading}\n                </stzh-heading>\n              }\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose &&\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              }\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"mappings":"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"}

package/dist/stzh-components/p-41529de9.js

@@ -1,2 +0,0 @@
-function i(i,n){if(!i){return""}const t=i.split("|");let e=t[0].trim();if(t.length===3&&n===1){e=t[1].trim()}else if(t.length===3&&(n>1||n===null)){e=t[2].trim()}if(t.length===2&&n!==1){e=t[1].trim()}return e.replace(/\{n\}/gi,(n===null||n===void 0?void 0:n.toString())||"")}export{i as t};
-//# sourceMappingURL=p-41529de9.js.map

package/dist/stzh-components/p-41529de9.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tc","translation","count","parts","split","part","trim","length","replace","toString"],"sources":["src/utils/translation-utils.ts"],"sourcesContent":["import {\n  StzhDateFormat,\n  StzhDateParse\n} from \"./date-adapter\";\n\nexport type StzhLocaleFormats = {\n  datetime?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  date?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  time?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  timeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n}\n\ntype MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string]\ntype DayNames = [string, string, string, string, string, string, string]\n\nexport type StzhLocaleGlobals = {\n  dateRange: string,\n  timeRange: string,\n  externalLinkLabel: string\n  downloadLinkLabel: string\n  requiredFieldMarker: string\n  requiredFieldText: string\n  optionalFieldMarker: string\n  optionalFieldText: string\n  invalidFieldText: string\n  clearButtonLabel: string\n  moreInfoButtonLabel: string\n  dayNames: DayNames\n  dayNamesShort: DayNames\n  monthNames: MonthsNames\n  monthNamesShort: MonthsNames\n}\n\nexport type StzhLocaleComponent = {\n  $locale: \"de\" | \"en\",\n  $formats: StzhLocaleFormats,\n  $formatsIso: StzhLocaleFormats,\n  $formatsLegacy: StzhLocaleFormats,\n  $globals: StzhLocaleGlobals\n}\n\nexport function tc(translation: string, count: number): string {\n  if (!translation) {\n    return \"\";\n  }\n\n  const parts = translation.split('|');\n  let part = parts[0].trim();\n\n  if (parts.length === 3 && count === 1) {\n    part = parts[1].trim();\n  } else if (parts.length === 3 && (count > 1 || count === null)) {\n    part = parts[2].trim();\n  }\n\n  if (parts.length === 2 && count !== 1) {\n    part = parts[1].trim();\n  }\n\n  return part.replace(/\\{n\\}/ig, count?.toString() || '');\n}\n"],"mappings":"SAqEgBA,EAAGC,EAAqBC,GACtC,IAAKD,EAAa,CAChB,MAAO,E,CAGT,MAAME,EAAQF,EAAYG,MAAM,KAChC,IAAIC,EAAOF,EAAM,GAAGG,OAEpB,GAAIH,EAAMI,SAAW,GAAKL,IAAU,EAAG,CACrCG,EAAOF,EAAM,GAAGG,M,MACX,GAAIH,EAAMI,SAAW,IAAML,EAAQ,GAAKA,IAAU,MAAO,CAC9DG,EAAOF,EAAM,GAAGG,M,CAGlB,GAAIH,EAAMI,SAAW,GAAKL,IAAU,EAAG,CACrCG,EAAOF,EAAM,GAAGG,M,CAGlB,OAAOD,EAAKG,QAAQ,WAAWN,IAAK,MAALA,SAAK,SAALA,EAAOO,aAAc,GACtD,Q"}

package/dist/stzh-components/p-49fcbbfb.js

@@ -1,2 +0,0 @@
-const t="@oiz/stzh-components";const n="3.3.0-beta6";const o=t.substring(t.indexOf("/")+1);const e=t=>{const n=document.querySelector("[autofocus]");if(window.stzhComponents.fixAutofocus&&!document.location.hash&&n&&t.detail.namespace===o&&n.tagName.toLowerCase().indexOf("stzh-")===0&&"focus"in n){n.focus()}else if(window.stzhComponents.fixHashfocus&&document.location.hash){const t=document.querySelector(document.location.hash);if(t){t.scrollIntoView()}}};function s(){window.addEventListener("appload",e)}function i(){const t={threshold:1};const n=t=>{t.forEach((t=>{let n=0;if(t.intersectionRatio<1){n=window.innerWidth-document.documentElement.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",n+"px");document.documentElement.style.setProperty("--stzh-scrollbar-active",n>0?"1":"0")}))};const o=new IntersectionObserver(n,t);o.observe(document.body)}function a(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.format(t,n)}function r(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parse(t,n)}function c(t,n,o="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:e,$globals:s}=window.stzhComponents.translations;const i=f(e,s);return i.formatSpan(t,n,o)}function l(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parseSpan(t,n)}function f(t,n){const o=function(t,o){if(!o||!(o instanceof Date)||isNaN(o.getTime())){return""}let e=o.getDate().toString(10);let s=e;let i=(o.getMonth()+1).toString(10);let a=i;let r=o.getFullYear().toString(10);let c=o.getHours().toString(10);let l=c;let f=o.getMinutes().toString(10);let u=n.monthNames[o.getMonth()];let d=n.monthNamesShort[o.getMonth()];let w=n.dayNames[o.getDay()];let m=n.dayNamesShort[o.getDay()];if(o.getMonth()<9){a=`0${a}`}if(o.getDate()<10){s=`0${s}`}if(o.getHours()<10){l=`0${l}`}if(o.getMinutes()<10){f=`0${f}`}return t.replace(/\{j\}/g,e).replace(/\{d\}/g,s).replace(/\{D\}/g,m).replace(/\{l\}/g,w).replace(/\{n\}/g,i).replace(/\{m\}/g,a).replace(/\{F\}/g,u).replace(/\{M\}/g,d).replace(/\{Y\}/g,r).replace(/\{H\}/g,l).replace(/\{G\}/g,c).replace(/\{i\}/g,f)};const e=function(t,n){if(!n){return}const o=new RegExp(t);const e=n.match(o);if(e){const{groups:t}=e;const n=parseInt(t.Y||"",10);const o=parseInt(t.n||t.m||"",10);const s=parseInt(t.j||t.d||"",10);const i=parseInt(t.G||t.H||"",10);const a=parseInt(t.i||"",10);if(!isNaN(n)&&(n<1e3||n>9999)){return}if(!isNaN(o)&&(o<1||o>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(i)&&(i<0||i>23)){return}if(!isNaN(a)&&(a<0||a>59)){return}const r=new Date(!isNaN(n)?n:null,!isNaN(o)?o-1:null,!isNaN(s)?s:null,!isNaN(i)?i:null,!isNaN(a)?a:null);if(r.getMonth()+1!==o){return}return r}};const s={format:function(n,e="datetime"){const s={...t[e],...window.stzhComponents?.formats[e]||{}};if(typeof s.format==="string"){return o(s.format,n)}else{return s.format(n)}},parse:function(n,o="datetime"){const s={...t[o],...window.stzhComponents?.formats[o]||{}};if(typeof s.parse==="string"){return e(s.parse,n)}else{return s.parse(n)}},formatSpan:function(t,o,e="datetime"){let s=t;let i=o;if(t instanceof Date&&!isNaN(t.getTime())){s=this.format(t,e)}if(o instanceof Date&&!isNaN(o.getTime())){i=this.format(o,e)}let a=n.dateRange;if(e.startsWith("time")){a=n.timeRange}return s+(i&&(!(i instanceof Date)||i instanceof Date&&!isNaN(t.getTime()))?a+i:"")},parseSpan:function(t,o){let e=n.dateRange;if(o.startsWith("time")){e=n.timeRange}const s=t.split(e);const i=this.parse(s[0],o);const a=this.parse(s[1],o);return[i,a,e]}};return s}function u(t){const n=t.closest("[lang]");const o=n&&n.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(o)===-1||!o){return window.stzhComponents.defaultLocale}else{return o}}async function d(t,n){const o=u(t);const e=JSON.parse(sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`));if(window.stzhComponents.cacheTranslations&&window.stzhComponents.version.match(/-dev-snapshot/i)===null&&e&&Object.keys(e).length>0){return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}try{const t=await fetch(`${window.stzhComponents.pathTranslations}/${o}.json`);if(t.ok){const e=await t.json();sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`,JSON.stringify(e));return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}}catch(t){console.error(`Error loading locale: ${o}`,t)}}const w=Object.freeze({__proto__:null,format:a,parse:r,formatSpan:c,parseSpan:l,createFormatParseAdapter:f,getLocale:u,fetchTranslations:d});function m(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null,fixAutofocus:true,fixHashfocus:true},window.stzhComponents||{}),{version:n,supportedLocales:["de","en"],utils:w});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=d(document.documentElement).then((t=>{window.stzhComponents.translations=t})).catch((t=>{console.error("Translations couldn't load:",t)}))}s();i()}const p=m;export{p as g};
-//# sourceMappingURL=p-49fcbbfb.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhSaptchaCss","saptchaCounter","StzhSaptcha","this","_numbers","numbersWatcher","newValue","JSON","parse","errorWatcher","_error","e","componentWillLoad","saptchaId","numbers","error","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","invalid","length","class","id","info","question","map","number","index","answerOr","label","answer","name","disabled","value","required","a11yDescribedby"],"sources":["src/components/stzh-saptcha/stzh-saptcha.scss?tag=stzh-saptcha&encapsulation=scoped","src/components/stzh-saptcha/stzh-saptcha.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n */\n\n:host {\n  --color: #{$colorBlack};\n  --background-color: #{$colorGrey10};\n}\n\n.stzh-saptcha {\n  &__box {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n    color: var(--color);\n    background-color: var(--background-color);\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n      padding-right: space('large');\n    }\n  }\n\n  &__info {\n    @include fontSize('milli');\n  }\n\n  &__answer {\n    @include fontSize('regular');\n    color: $colorPrimary;\n    margin-top: space('xsmall');\n  }\n\n  &__input {\n    margin-top: space('medium');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch\n} from \"@stencil/core\";\n\nimport { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';\n\nlet saptchaCounter = 0;\n\n/**\n * @slot - Slot for content\n */\n@Component({\n  tag: \"stzh-saptcha\",\n  styleUrl: \"stzh-saptcha.scss\",\n  scoped: true\n})\nexport class StzhSaptcha {\n  /** Translation strings */\n  @Prop() localization: StzhSaptchaLocalizedText;\n\n  /** Numbers shown to user for selection */\n  @Prop() numbers: number[] | string = [];\n  private _numbers: number[] = [];\n\n  /** The value of the input element */\n  @Prop() value: string = \"\";\n\n  /** Name of input */\n  @Prop({ reflect: true }) name: string = \"saptcha\";\n\n  /** One or multiple error message */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Element() element: HTMLStzhSaptchaElement;\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: number[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private saptchaId: string;\n\n  async componentWillLoad() {\n    this.saptchaId = `stzh-saptcha-${saptchaCounter++}`;\n\n    this.numbersWatcher(this.numbers);\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'saptcha');\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-saptcha\": true\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this._error.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-saptcha__box\">\n            <div class=\"stzh-saptcha__info\" id={`${this.saptchaId}-info`}>\n              {this.localization.info} {this.localization.question}\n            </div>\n            <div class=\"stzh-saptcha__answer\" id={`${this.saptchaId}-answer`}>\n              {this._numbers.map((number, index) =>\n                <span class=\"stzh-saptcha__number\">\n                  {number}\n                  {index < this._numbers.length - 1 &&\n                    (index === this._numbers.length - 2\n                      ? this.localization.answerOr\n                      : \", \")\n                  }\n                </span>\n              )}\n            </div>\n            <stzh-input\n              class=\"stzh-saptcha__input\"\n              label={this.localization.answer}\n              name={this.name}\n              invalid={this.invalid}\n              error={this.error}\n              disabled={this.disabled}\n              value={this.value}\n              required\n              a11yDescribedby={`${this.saptchaId}-info ${this.saptchaId}-answer`}\n            ></stzh-input>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAiB,8vFCWvB,IAAIC,EAAiB,E,MAURC,EAAW,M,yBAMdC,KAAAC,SAAqB,G,yCADQ,G,WAIb,G,UAGgB,U,kCAOI,M,cAGC,K,CAK7C,cAAAC,CAAeC,GACb,UAAWA,IAAa,SAAU,CAChCH,KAAKC,SAAWG,KAAKC,MAAMF,E,KACtB,CACLH,KAAKC,SAAWE,C,EAKpB,YAAAG,CAAaH,GACX,UAAWA,IAAa,SAAU,CAChC,IACEH,KAAKO,OAASH,KAAKC,MAAMF,E,CACzB,MAAOK,GACP,GAAIL,EAAU,CACZH,KAAKO,OAAS,CAACJ,E,KACV,CACLH,KAAKO,OAAS,E,QAGb,GAAIJ,EAAU,CACnBH,KAAKO,OAASJ,C,KACT,CACLH,KAAKO,OAAS,E,EAMlB,uBAAME,GACJT,KAAKU,UAAY,gBAAgBZ,MAEjCE,KAAKE,eAAeF,KAAKW,SACzBX,KAAKM,aAAaN,KAAKY,OAEvB,IAAKZ,KAAKa,aAAc,CACtBb,KAAKa,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBjB,KAAKkB,QAAS,U,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,MAGlB,OACEC,EAACC,EAAI,cAAatB,KAAKuB,SAAWvB,KAAKO,OAAOiB,OAAS,GACrDH,EAAA,OAAKI,MAAOL,GACVC,EAAA,OAAKI,MAAM,qBACTJ,EAAA,OAAKI,MAAM,qBAAqBC,GAAI,GAAG1B,KAAKU,kBACzCV,KAAKa,aAAac,KAAI,IAAG3B,KAAKa,aAAae,UAE9CP,EAAA,OAAKI,MAAM,uBAAuBC,GAAI,GAAG1B,KAAKU,oBAC3CV,KAAKC,SAAS4B,KAAI,CAACC,EAAQC,IAC1BV,EAAA,QAAMI,MAAM,wBACTK,EACAC,EAAQ/B,KAAKC,SAASuB,OAAS,IAC7BO,IAAU/B,KAAKC,SAASuB,OAAS,EAC9BxB,KAAKa,aAAamB,SAClB,UAKZX,EAAA,cACEI,MAAM,sBACNQ,MAAOjC,KAAKa,aAAaqB,OACzBC,KAAMnC,KAAKmC,KACXZ,QAASvB,KAAKuB,QACdX,MAAOZ,KAAKY,MACZwB,SAAUpC,KAAKoC,SACfC,MAAOrC,KAAKqC,MACZC,SAAQ,KACRC,gBAAiB,GAAGvC,KAAKU,kBAAkBV,KAAKU,uB"}

package/dist/stzh-components/p-acd03caf.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,a as s,g as o}from"./p-c7bfac7a.js";import{j as i}from"./p-1b399113.js";import"./p-7183ba4d.js";const n=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc( var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px) )}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}";const a="stzh-components-toastbar-closed";const r=class{constructor(e){t(this,e);this._initialToasts=[];this.handleSlotchange=()=>{this.toastsAppended();this.hideOverflowingItems()};this.hideAfter=30;this.max=5;this.initialToasts=[]}async toast(t,{type:e,link:s}={type:"info"}){const o=document.createElement("stzh-toast");o.hidden=true;o.label=t;o.role="alert";o.type=e||"info";o.initialOpenAnimation=true;if(s){s.slot="link";s.size="small";o.appendChild(s)}this.element.appendChild(o);return o}initialToastsWatcher(t){if(typeof t==="string"){this._initialToasts=JSON.parse(t)}else{this._initialToasts=t}}toastAppended(t){if(t.getAttribute("data-stzh-toastbar-managed")){return}t.setAttribute("data-stzh-toastbar-managed","");t.addEventListener("stzhClosed",(()=>{t.remove()}));if(t.type!=="error"){let e=(new Date).getTime();let s=this.hideAfter*1e3;let o=window.setTimeout((()=>{t.hide()}),s);t.addEventListener("pointerenter",(()=>{if(o){window.clearTimeout(o);const t=(new Date).getTime()-e;s=s-t}}));t.addEventListener("pointerleave",(()=>{e=(new Date).getTime();o=window.setTimeout((()=>{t.hide()}),s)}))}}toastsAppended(){var t;const e=((t=this.element.getRootNode())===null||t===void 0?void 0:t.host)||this.element;Array.from(e.children).forEach((t=>{this.toastAppended(t)}))}hideOverflowingItems(){var t;const e=((t=this.element.getRootNode())===null||t===void 0?void 0:t.host)||this.element;const s=e.children.length;Array.from(e.children).splice(0,s-this.max).forEach((t=>{t.hide()}))}componentWillLoad(){this.initialToastsWatcher(this.initialToasts)}componentDidLoad(){this._initialToasts.forEach((async t=>{if(t.cookie){const e=i.get(`${a}-${t.cookie}`);if(e){return}}let e=t.link;if(!(e instanceof HTMLElement)){const s=document.createElement("stzh-button");s.slot="link";s.size="small";Object.assign(s,t.link);e=s}const s=await this.toast(t.label,{type:t.type,link:e});if(t.cookie){let e=365;if(t.cookieExpires===0){e=null}else if(t.cookieExpires){e=t.cookieExpires}s.addEventListener("stzhClosed",(()=>{i.set(`${a}-${t.cookie}`,"1",{expires:e})}))}}))}render(){const t={"stzh-toastbar":true};return e(s,null,e("div",{class:t},e("slot",{onSlotchange:this.handleSlotchange})))}get element(){return o(this)}static get watchers(){return{initialToasts:["initialToastsWatcher"]}}};r.style=n;export{r as stzh_toastbar};
-//# sourceMappingURL=p-acd03caf.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["stzhToastbarCss","KEY_PREFIX_CLOSED","StzhToastbar","this","_initialToasts","handleSlotchange","toastsAppended","hideOverflowingItems","toast","label","type","link","document","createElement","hidden","role","initialOpenAnimation","slot","size","appendChild","element","initialToastsWatcher","newValue","JSON","parse","toastAppended","getAttribute","setAttribute","addEventListener","remove","timeoutStarted","Date","getTime","restTime","hideAfter","currentTimeout","window","setTimeout","hide","clearTimeout","timePassed","host","_a","getRootNode","Array","from","children","forEach","childCount","length","splice","max","componentWillLoad","initialToasts","componentDidLoad","async","data","cookie","alreadyClosedBefore","Cookie","get","HTMLElement","generatedLink","Object","assign","cookieExpires","set","expires","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('bottom', 'regular');\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space('small');\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhToastbarInitialToast,\n  StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType, link?: HTMLStzhButtonElement } = { type: \"info\" }\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute('data-stzh-toastbar-managed')) {\n      return;\n    }\n\n    toast.setAttribute('data-stzh-toastbar-managed', '');\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  }\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async (data) => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement\n      })\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n            expires: cookieExpires\n          });\n        });\n      }\n    })\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}