@oiz/stzh-components 3.1.0 → 3.2.0-beta1

package/dist/stzh-components/{p-012dc71e.entry.js.map → p-bcaef6d7.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirken","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-old-truegreen);\n  --warning: var(--stzh-color-old-warning);\n  --alert: var(--stzh-color-error60);\n  --highlight: var(--stzh-color-coral);\n  --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n  a.muted,\n  .inline-filters button.muted[data-toggle] {\n    color: $colorWhite;\n    background-color: $colorOldGrey13;\n    border-color: $colorOldGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorOldGrey13;\n      border-color: $colorOldGrey13;\n    }\n  }\n}\n\n// Only modals\n.reveal-overlay {\n  background-color: rgba(5, 127, 172, 0.8);\n\n  /* Dialog */\n\n  .reveal__title {\n    margin-top: 0;\n  }\n\n  .reveal {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  .close-button {\n    color: $baseLeadColor;\n  }\n}\n\n// Only header\n.mod_header {\n  .mod_header__logobar-logo img {\n    background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n    width: 0;\n    padding-left: 208px;\n  }\n}\n\n// Main Content Modules\nmain {\n  accent-color: $colorPrimary;\n\n  /* Resets */\n  @include richtext-host;\n  @include richtext-slotted($withLists: false);\n\n  &, label, tfoot, thead {\n    color: $baseColor;\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n  }\n\n  .field label {\n    @include font('heavy');\n    display: block;\n  }\n\n  input[type=checkbox],\n  input[type=radio] {\n    width: 24px;\n    height: 24px;\n  }\n\n  label > [type=checkbox],\n  label > [type=radio] {\n    margin-right: space('small');\n  }\n\n  .filters__section--general label,\n  .filters__section label {\n    @include fontSize('milli');\n    display: flex;\n    line-height: 24px;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .filters__has-subfilters {\n    align-items: center;\n\n    [data-toggle] {\n      margin-bottom: space('small');\n    }\n  }\n\n  .form-input-extra-before,\n  .form-error {\n    @include font;\n    @include fontCurve('caption');\n  }\n\n  .form-error,\n  .is-invalid-label {\n    color: $colorError60;\n  }\n\n  [type=color],\n  [type=date],\n  [type=datetime-local],\n  [type=datetime],\n  [type=email],\n  [type=month],\n  [type=number],\n  [type=password],\n  [type=search],\n  [type=tel],\n  [type=text],\n  [type=time],\n  [type=url],\n  [type=week],\n  textarea,\n  .inline-filters button[data-toggle],\n  select,\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    @include font;\n\t  @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    height: $formInputHeight;\n    color: $colorPrimary;\n    appearance: none;\n    margin-bottom: space('medium');\n    text-decoration-line: none;\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    &::after {\n      float: none;\n      margin-top: 0;\n    }\n  }\n\n  .inline-filters button[data-toggle],\n  select {\n    padding-right: space('xxlarge');\n  }\n\n  textarea {\n    min-height: $formInputHeight;\n    resize: vertical;\n\n    &[rows] {\n      height: auto;\n    }\n  }\n\n  .input-group .input-group-field {\n    margin-bottom: 0;\n  }\n\n  .section > p,\n  .floating-helper__content p {\n    margin-top: 0;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .add-message,\n  .card,\n  .chart-tooltip,\n  .comment-thread,\n  .conference-registration,\n  .conference-speaker .speaker-bio {\n    margin-bottom: space('xxlarge');\n    border-color: $baseBorderColor;\n    background-color: $colorWhite;\n  }\n\n  .ql-editor ol,\n  .ql-editor ul {\n    padding-left: 0;\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul li:not(.card-data__item) {\n      padding-left: space('large');\n\n      &::before {\n        content: \"–\";\n        margin-left: 0;\n        margin-right: 0;\n        text-align: left;\n        width: auto;\n      }\n    }\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul.tags li:not(.card-data__item) {\n      padding-left: 0;\n\n      &::before {\n        content: none;\n      }\n    }\n  }\n\n  .m-bottom {\n    margin-bottom: space('medium');\n  }\n\n  .mb-sm {\n    margin-bottom: space('xxlarge');\n  }\n\n  p {\n    color: $baseColor;\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th {\n    @include font('heavy');\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th,\n  tbody td,\n  tbody th {\n    padding: space('xmall');\n  }\n\n  table,\n  td,\n  tr,\n  .questionnaire-question-matrix table,\n  .questionnaire-question-matrix td,\n  .questionnaire-question-matrix tr,\n  .questionnaire-question-matrix tr:nth-child(2n) {\n    border-color: $baseBorderColor;\n  }\n\n\n  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full .process-header .process-header__container .process-header__info .card__title,\n  .process-header .process-header__container .process-header__info .card--full .card__title,\n  .process-header .process-header__container .process-header__info .heading2 {\n    @include font('title');\n    @include fontCurve('hero', 'heading');\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n    border-bottom: none;\n    padding-bottom: 0;\n  }\n\n  .process-header .process-header__container {\n    padding: 0 space('xxxxlarge');\n\n    @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n      padding: space('xxxxlarge');\n      padding-bottom: space('big');\n    }\n\n    @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n      padding: space('xxlarge') $containerMargin space('xxxlarge');\n    }\n  }\n\n  .process-header__info {\n    padding: 0;\n  }\n\n  .process-header .process-header__container .process-header__info .heading-small {\n    @include fontCurve('h3', 'heading');\n    color: $baseInvertColor;\n    margin-top: 0;\n  }\n\n  .process-header__hashtag a {\n    color: $baseInvertColor;\n    text-decoration-line: none;\n\n    &:hover {\n      color: $baseInvertColor;\n    }\n\n    .external-link-indicator {\n      background: $baseInvertColor;\n      padding: space('xxsmall');\n      box-sizing: content-box;\n      border-radius: $buttonBorderRadius;\n      margin: 0;\n      margin-bottom: -4px;\n      margin-left: 4px;\n    }\n  }\n\n  .phase-subtitle--initiatives,\n  .phase-title,\n  .phase-title--initiatives {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $baseLeadColor;\n  }\n\n  .process-header__progress {\n    display: flex;\n    align-items: center;\n  }\n\n  .process-header__phase {\n    padding: space('medium');\n    margin-top: space('medium');\n    margin-bottom: 0;\n  }\n\n  .phase-date {\n    @include font('regular');\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .phase-current {\n    @include fontCurve('caption');\n    margin-left: space('xxsmall');\n    color: $baseColor;\n  }\n\n  .process-header__progress {\n    margin-bottom: space('xsmall');\n  }\n\n  .process-header__phase .button,\n  .process-header__phase .meeting-polls__button,\n  .process-phase .button,\n  .process-phase .meeting-polls__button {\n    margin-top: space('xsmall');\n  }\n\n  /* Links */\n\n  a,\n  .link {\n    text-decoration-line: underline;\n    transition: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  /* Buttons */\n\n  .button {\n    @include fontSize('milli');\n    display: inline-flex;\n    align-items: center;\n    height: auto;\n    min-height: $formInputHeight;\n    line-height: $formInputHeight - 2px;\n    line-height: inherit;\n    margin: 0;\n    text-decoration-line: none;\n    appearance: none;\n    border: 1px solid $colorPrimary;\n    padding: space('xsmall') space('xlarge');\n    transition: all $baseTransitionAnimationSpeed;\n\n    &.small {\n      @include fontSize('micro');\n      min-height: $formInputHeightSmall;\n      line-height: $formInputHeightSmall - 2px;\n    }\n\n    &.tiny {\n      @include fontSize('micro');\n      min-height: 32px;\n    }\n\n    &.process-nav__more i {\n      background-color: currentColor;\n      margin-bottom: 0;\n    }\n\n    &.process-nav__more i:first-child {\n      margin-left: space('xsmall');\n    }\n  }\n\n  .button--icon {\n    .icon-wrap {\n      display: flex;\n      align-items: center;\n    }\n\n    .icon-wrap .icon {\n      margin-right: space('xxsmall');\n    }\n  }\n\n  .button--icon.meeting-polls__button .icon,\n  .button--icon.small .icon {\n    width: iconSize('xxsmall');\n    height: iconSize('xxsmall');\n  }\n\n  .extra .button.follow-button {\n    margin-top: 0;\n  }\n\n  .button-group.meeting-polls__button .button,\n  .button-group.meeting-polls__button .meeting-polls__button,\n  .button-group.small .button,\n  .button-group.small .meeting-polls__button,\n  .button-group.tiny .button,\n  .button-group.tiny .meeting-polls__button {\n    @include fontSize('micro');\n  }\n\n  .button.primary,\n  .button.primary.disabled,\n  .button.primary.disabled:focus,\n  .button.primary.disabled:hover,\n  .button.primary[disabled],\n  .button.primary[disabled]:focus,\n  .button.primary[disabled]:hover,\n  .primary.meeting-polls__button {\n    background-color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      background-color: $colorPrimaryHover;\n    }\n  }\n\n  .button.budget-vote-button {\n    @include font;\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    margin-bottom: space('medium');\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      background-color: $colorWhite;\n    }\n  }\n\n  .button--vote-button {\n    margin-bottom: space('large');\n  }\n\n  .view-side > .button {\n    margin-bottom: space('medium');\n  }\n\n  .button.clear,\n  .button.clear.disabled,\n  .button.clear.disabled:focus,\n  .button.clear.disabled:hover,\n  .button.clear[disabled],\n  .button.clear[disabled]:focus,\n  .button.clear[disabled]:hover,\n  .clear.meeting-polls__button {\n    color: $colorError60;\n  }\n\n\n  /* Wrapper / Layout */\n\n  .wrapper {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    .wrapper--inner {\n      background-color: $colorOldGrey5;\n    }\n\n    // .row.column {\n    //   padding-left: 0;\n    //   padding-right: 0;\n    // }\n\n    .row:not(.column) .floating-helper-container {\n      padding-right: 0.625rem;\n      padding-left: 0.625rem;\n    }\n\n    @media screen and (min-width: #{$mobileBreakpoint}) {\n      .row:not(.column) .floating-helper-container {\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n      }\n    }\n  }\n\n\n  /* Headings */\n\n  .heading1, h1,\n  .heading2, h2,\n  .heading3, h3,\n  .heading4, h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1, h1 {\n    @include font('title');\n    @include fontCurve('h1', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .section-heading,\n  .heading2, h2 {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .heading3, h3 {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4 {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4,\n  .timeline__item--current .timeline__date {\n    color: $colorPrimary;\n  }\n\n  #most-commented .section-heading {\n    margin-top: 0;\n  }\n\n  #most-commented a {\n    text-decoration-line: none;\n  }\n\n\n  /* Section */\n\n  .section {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  .section-heading {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .section-heading .text-sm,\n  .section-heading .text-small {\n    @include fontCurve('h3', 'heading');\n  }\n\n\n  /* Dropdown */\n\n  .order-by__dropdown,\n  .results-per-page__dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  .order-by__text,\n  .results-per-page__text {\n    margin-right: space('xsmall');\n  }\n\n  .is-dropdown-submenu {\n    box-shadow: $boxShadowPopover;\n    border: none;\n    border-radius: var(--stzh-popover-border-radius);\n    margin-top: var(--stzh-space-xsmall);\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a {\n    @include font;\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    background: $colorWhite;\n    padding: space('xsmall') space('medium');\n    padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n    min-height: $formInputHeight;\n    border: 1px solid $formBorderColor;\n    margin: 0;\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n    border-color: $colorPrimary transparent transparent;\n    right: space('medium');\n  }\n\n  .dropdown .is-dropdown-submenu a,\n  .comment__header__context-menu__content-item {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    justify-content: stretch;\n    appearance: none;\n    text-decoration-line: none;\n    border: none;\n    padding: space('xsmall') space('medium');\n    padding-left: space('large');\n    color: $colorOldGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorOldGrey70;\n      background-color: $colorOldGrey5;\n      text-decoration-line: none;\n    }\n  }\n\n  .comment__header__context-menu__content-item {\n    grid-gap: space('small');\n    gap: space('small');\n  }\n\n\n  /* Comments */\n\n  .comments {\n    padding-top: 0;\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  .comments .section-heading {\n    margin-top: 0;\n  }\n\n  .comment__header,\n  .comment__footer,\n  .add-comment {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .add-comment {\n    background-color: transparent;\n    padding: 0;\n  }\n\n  .add-comment .remaining-character-count {\n    color: $baseColor;\n    padding: space('xsmall') space('small');\n  }\n\n  .comment-threads {\n    margin-bottom: space('xxxlarge');\n  }\n\n  .comment__content {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n\n    p {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .comment__footer {\n    @include fontCurve('p2');\n  }\n\n  .comment__votes {\n    margin-top: 0;\n  }\n\n  .comment__header__context-menu__content {\n    box-shadow: $boxShadowPopover;\n  }\n\n  .opinion-toggle {\n    margin: space('xlarge') 0;\n  }\n\n  .button:hover,\n  .meeting-polls__button:hover,\n  .opinion-toggle--meh.is-active,\n  .opinion-toggle--meh:focus,\n  .opinion-toggle--meh:hover {\n    background-color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n  }\n\n  .opinion-toggle--ko.is-active,\n  .opinion-toggle--ko:focus,\n  .opinion-toggle--ko:hover {\n    background-color: $colorError60;\n    border-color: $colorError60;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorFirgreen50;\n    border-color: $colorFirgreen50;\n  }\n\n\n  /* Process Nav */\n\n  .process-nav__content {\n    border-bottom: none;\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav__content {\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav li {\n      padding: space('xsmall') space('small');\n    }\n  }\n\n\n  /* Statistics */\n\n  .statistics-cell {\n    margin: space('xxlarge') 0;\n  }\n\n  .statistics-cell .statistic__number {\n    @include font('regular');\n    color: $colorPrimary;\n  }\n\n  .statistics-cell .statistic__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseLeadColor;\n    margin-top: 0;\n    text-transform: none;\n  }\n\n  .statistics-cell .statistic__data:after {\n    border-left: 2px solid $baseBorderColor;\n  }\n\n\n  /* Richtext */\n\n  .ql-editor {\n    @include richtext-host;\n    @include richtext-slotted($withLists: false);\n\n    *:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .help-text {\n    color: $baseColor;\n  }\n\n  .help-text .ql-editor p {\n    @include fontCurve('caption');\n  }\n\n\n  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    color: $baseColor;\n  }\n\n  .accountability .categories .categories--header .icon--arrow-bottom {\n    fill: $baseColor;\n  }\n\n  .accountability .categories .categories--header {\n    border-color: $baseBorderColor;\n    margin-bottom: space('medium');\n    padding-bottom: space('medium');\n  }\n\n  .accountability .intro .progress-level p {\n    @include font('heavy');\n    @include spaceCurve('margin-bottom', 'small');\n    margin-top: 0;\n  }\n\n  .accountability .categories .progress-figure {\n    margin-top: 0;\n  }\n\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    margin-top: space('xxxsmall');\n  }\n\n  .accountability .title-action {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\n  /* Breadrumb */\n\n  .lines-breadcrumb a,\n  .muted-link {\n    @include font;\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n\n  /* Lead */\n\n  .lead .ql-editor p {\n    @include font('light');\n    @include fontCurve('h3');\n    @include spaceCurve('margin-bottom', 'big');\n    margin-top: space('xxlarge');\n  }\n\n\n  /* Message / Callout / Floating Helper */\n\n  .callout.secondary,\n  .callout.warning,\n  .callout.success,\n  .floating-helper__content {\n    @include spaceCurve('padding', 'regular');\n    padding: space('medium');\n    display: block;\n    box-shadow: $boxShadowMessage;\n    background-color: $colorWhite;\n    margin-bottom: space('xxxxlarge') !important;\n  }\n\n  .callout {\n    @include font('heavy');\n    border-left-width: 5px;\n\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .floating-helper__content {\n    border-top: none;\n    padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n  }\n\n  .floating-helper__wrapper {\n    position: relative;\n  }\n\n  .floating-helper__content-close {\n    @include spaceCurve('top', 'regular');\n    @include spaceCurve('right', 'regular');\n    box-sizing: content-box;\n    position: absolute;\n    width: iconSize('medium');\n    height: iconSize('medium');\n    padding: var(--stzh-space-xsmall);\n    margin: calc(var(--stzh-space-xsmall) * -1);\n    background-color: transparent;\n    color: var(--stzh-base-lead-color);\n\n    .icon {\n      width: iconSize('xxsmall');\n      height: iconSize('xxsmall');\n    }\n  }\n\n  .floating-helper__icon-big {\n    width: iconSize('large');\n    height: iconSize('large');\n    background-color: $colorOldPrimary8;\n\n    .icon {\n      width: iconSize('xsmall');\n      height: iconSize('xsmall');\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .floating-helper__content-inner > * {\n      margin: 0;\n    }\n\n    .floating-helper__icon-big {\n      margin-right: space('small');\n    }\n  }\n\n  .floating-helper-block .mb-s {\n    margin: 0 !important;\n  }\n\n\n  /* Sidebar */\n\n  .extra,\n  .tech-info {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  .extra__date,\n  .extra__suport-number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  .extra__month {\n    @include fontCurve('caption');\n  }\n\n  .extra__time,\n  .extra__suport-text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n\n  /* Filters */\n\n  .filters__help p:first-of-type {\n    @include fontCurve('p2');\n    margin-top: 0;\n  }\n\n  #participatory-space-filters legend {\n    margin-right: space('xsmall');\n  }\n\n\n  /* Mini Title */\n\n  .mini-title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .mini-title__strong--highlight {\n    @include font('title');\n    @include fontCurve('h4');\n  }\n\n\n  /* Tags */\n\n  .tags {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:last-child {\n      margin-bottom: calc(#{space('xsmall')} * -1);\n    }\n  }\n\n  .tags li {\n    margin-right: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  .tags li a {\n    @include fontSize('micro');\n    height: 32px;\n    line-height: 32px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: 16px;\n    padding: 0 space('medium');\n    color: $colorPrimary;\n    appearance: none;\n    border: 1px solid $colorOldGrey13;\n    background-color: $colorWhite;\n    transition: all $baseTransitionAnimationSpeed;\n    text-decoration-line: none;\n  }\n\n  /* Card */\n\n  .card {\n    color: $baseColor;\n  }\n\n  .card__top .badge-card__content,\n  .card__top .card__content {\n    @include fontCurve('caption');\n    padding: space('xsmall') space('large');\n    align-items: center;\n\n    span.muted {\n      font-size: inherit;\n    }\n  }\n\n  .card__top .card__content {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .card__top .card__content .card__link {\n    display: block;\n  }\n\n  .card > .card__content,\n  .card.definition-data,\n  .card .definition-data,\n  .badge-card__content,\n  .card__support,\n  .filters__section,\n  .filters__section--general,\n  .filters__section--general:first-of-type,\n  .filters__section:first-of-type {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card-data__item,\n  .filters__section,\n  .filters__section--general,\n  .card__block ul,\n  .card__icondata ul,\n  .card__footer,\n  .card__top {\n    border-color: $baseBorderColor;\n  }\n\n  .card__link {\n    display: flex;\n    flex-direction: column;\n    text-decoration-line: none;\n    color: $baseColor;\n\n    &:hover {\n      text-decoration-line: none;\n    }\n\n    .text-small {\n      @include fontCurve('p2');\n    }\n  }\n\n  .card__header {\n    margin-bottom: space('small');\n  }\n\n  .card__text {\n    @include fontCurve('p1');\n\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  .card .card__title,\n  .card--list__heading {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: $colorPrimary;\n    margin-top: 0;\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  .card:not(.card--secondary):hover .card__title {\n    color: $colorPrimaryHover;\n  }\n\n  .collapsible-list .card__text--paragraph {\n    color: $baseColor !important;\n  }\n\n  .card__block ul li:not(:first-child),\n  .card__icondata ul li:not(:first-child) {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card-data__item {\n    @include fontCurve('caption');\n    color: $baseColor;\n\n    .heading1,\n    .heading2,\n    .heading3,\n    .heading4 {\n      margin-top: 0;\n    }\n\n    strong {\n      display: block;\n    }\n\n    br {\n      display: none;\n    }\n  }\n\n  .card-data__item.creation_date_status strong {\n    color: $baseColor;\n    color: inherit;\n  }\n\n  .card__status .card-data__item {\n    padding: space('xsmall');\n  }\n\n  .card--meta {\n    color: $baseColor;\n  }\n\n  .card__block ul li:not(:first-child) strong,\n  .card__icondata ul li:not(:first-child) strong {\n    font-size: inherit;\n    letter-spacing: inherit;\n  }\n\n  .add-message:not(.card--secondary),\n  .card:not(.card--secondary),\n  .chart-tooltip:not(.card--secondary),\n  .conference-registration:not(.card--secondary),\n  .conference-speaker .speaker-bio:not(.card--secondary) {\n    &:hover {\n      box-shadow: $boxShadowPopover;\n    }\n  }\n\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n    @include font;\n    @include fontCurve('p1');\n    color: $baseColor;\n  }\n\n  // Progress bar\n\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n  .progress__bar .progress__bar__title {\n    @include font;\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card__support__number,\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n  .progress__bar .progress__bar__title .progress__bar__number,\n  .extra__suport-text,\n  .progress__bar.progress__bar--vertical .progress__bar__text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .progress__bar.progress__bar--vertical .progress__bar__number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  // Card list\n\n  .card--list__item {\n    padding: 0;\n  }\n\n  .card--list__text {\n    padding: 0;\n    display: block;\n  }\n\n  .card--list__icon {\n    fill: $colorPrimary;\n  }\n\n  .card--list__item .card__link {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card--list__text .card__link:hover .card--list__heading {\n    color: $colorPrimaryHover;\n  }\n\n  .card--list__text .card__link .text-small {\n    color: $baseColor;\n  }\n\n  .card--list__data {\n    background-color: $colorOldGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorOldGrey70;\n  }\n\n  // Side cards\n\n  .card.extra,\n  .view-side .card:not(.card--secondary),\n  .comment-thread:not(.card--secondary) {\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  // Definition Card\n\n  .definition__title {\n    color: $colorOldGrey70;\n  }\n\n  .definition-data {\n    color: $colorOldGrey55;\n  }\n\n  .definition-data__item {\n    @include fontCurve('p2');\n    padding: 0;\n    padding-bottom: space('small');\n    margin-bottom: space('small');\n    border-bottom: 1px solid $baseBorderColor;\n\n    &:last-child {\n      border-bottom: none;\n      margin-bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .definition-data__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin-bottom: 0;\n  }\n\n  .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorOldGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA6B,o14N,MCatBC,EAAuB,M,yBAClC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,K"}
+{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirken","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-old-truegreen);\n  --warning: var(--stzh-color-old-warning);\n  --alert: var(--stzh-color-error60);\n  --highlight: var(--stzh-color-coral);\n  --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n  a.muted,\n  .inline-filters button.muted[data-toggle] {\n    color: $colorWhite;\n    background-color: $colorOldGrey13;\n    border-color: $colorOldGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorOldGrey13;\n      border-color: $colorOldGrey13;\n    }\n  }\n}\n\n// Only modals\n.reveal-overlay {\n  background-color: rgba(5, 127, 172, 0.8);\n\n  /* Dialog */\n\n  .reveal__title {\n    margin-top: 0;\n  }\n\n  .reveal {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  .close-button {\n    color: $baseLeadColor;\n  }\n}\n\n// Only header\n.mod_header {\n  .mod_header__logobar-logo img {\n    background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n    width: 0;\n    padding-left: 208px;\n  }\n}\n\n// Main Content Modules\nmain {\n  accent-color: $colorPrimary;\n\n  /* Resets */\n  @include richtext-host;\n  @include richtext-slotted($withLists: false);\n\n  &, label, tfoot, thead {\n    color: $baseColor;\n  }\n\n  svg {\n    overflow: visible;\n  }\n\n  label {\n    display: flex;\n    align-items: center;\n  }\n\n  .field label {\n    @include font('heavy');\n    display: block;\n  }\n\n  input[type=checkbox],\n  input[type=radio] {\n    width: 24px;\n    height: 24px;\n  }\n\n  label > [type=checkbox],\n  label > [type=radio] {\n    margin-right: space('small');\n  }\n\n  .filters__section--general label,\n  .filters__section label {\n    @include fontSize('milli');\n    display: flex;\n    line-height: 24px;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .filters__has-subfilters {\n    align-items: center;\n\n    [data-toggle] {\n      margin-bottom: space('small');\n    }\n  }\n\n  .form-input-extra-before,\n  .form-error {\n    @include font;\n    @include fontCurve('caption');\n  }\n\n  .form-error,\n  .is-invalid-label {\n    color: $colorError60;\n  }\n\n  [type=color],\n  [type=date],\n  [type=datetime-local],\n  [type=datetime],\n  [type=email],\n  [type=month],\n  [type=number],\n  [type=password],\n  [type=search],\n  [type=tel],\n  [type=text],\n  [type=time],\n  [type=url],\n  [type=week],\n  textarea,\n  .inline-filters button[data-toggle],\n  select,\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    @include font;\n\t  @include fontSize('milli');\n    border: 1px solid $formBorderColor;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: $formInputBorderRadius;\n    padding: space('xsmall') space('medium');\n    width: 100%;\n    height: $formInputHeight;\n    color: $colorPrimary;\n    appearance: none;\n    margin-bottom: space('medium');\n    text-decoration-line: none;\n\n    @include placeholder {\n      color: $formInputPlaceholderColor;\n    }\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      border-color: $colorPrimaryHover;\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n  }\n\n  .data-picker .picker-prompt a,\n  .data-picker.picker-single .picker-values div a {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    &::after {\n      float: none;\n      margin-top: 0;\n    }\n  }\n\n  .inline-filters button[data-toggle],\n  select {\n    padding-right: space('xxlarge');\n  }\n\n  textarea {\n    min-height: $formInputHeight;\n    resize: vertical;\n\n    &[rows] {\n      height: auto;\n    }\n  }\n\n  .input-group .input-group-field {\n    margin-bottom: 0;\n  }\n\n  .section > p,\n  .floating-helper__content p {\n    margin-top: 0;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .add-message,\n  .card,\n  .chart-tooltip,\n  .comment-thread,\n  .conference-registration,\n  .conference-speaker .speaker-bio {\n    margin-bottom: space('xxlarge');\n    border-color: $baseBorderColor;\n    background-color: $colorWhite;\n  }\n\n  .ql-editor ol,\n  .ql-editor ul {\n    padding-left: 0;\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul li:not(.card-data__item) {\n      padding-left: space('large');\n\n      &::before {\n        content: \"–\";\n        margin-left: 0;\n        margin-right: 0;\n        text-align: left;\n        width: auto;\n      }\n    }\n  }\n\n  .badge-card__content,\n  .card__content,\n  .card__text--paragraph,\n  .floating-helper__content-inner,\n  .lead,\n  .process-header + .wrapper .section,\n  .timeline__content {\n    ul.tags li:not(.card-data__item) {\n      padding-left: 0;\n\n      &::before {\n        content: none;\n      }\n    }\n  }\n\n  .m-bottom {\n    margin-bottom: space('medium');\n  }\n\n  .mb-sm {\n    margin-bottom: space('xxlarge');\n  }\n\n  p {\n    color: $baseColor;\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th {\n    @include font('heavy');\n  }\n\n  tfoot td,\n  tfoot th,\n  thead td,\n  thead th,\n  tbody td,\n  tbody th {\n    padding: space('xmall');\n  }\n\n  table,\n  td,\n  tr,\n  .questionnaire-question-matrix table,\n  .questionnaire-question-matrix td,\n  .questionnaire-question-matrix tr,\n  .questionnaire-question-matrix tr:nth-child(2n) {\n    border-color: $baseBorderColor;\n  }\n\n\n  /* Process Header */\n\n  .process-header .process-header__inner {\n    background-color: $colorPrimary;\n  }\n\n  .card--full .process-header .process-header__container .process-header__info .card__title,\n  .process-header .process-header__container .process-header__info .card--full .card__title,\n  .process-header .process-header__container .process-header__info .heading2 {\n    @include font('title');\n    @include fontCurve('hero', 'heading');\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n    border-bottom: none;\n    padding-bottom: 0;\n  }\n\n  .process-header .process-header__container {\n    padding: 0 space('xxxxlarge');\n\n    @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n      padding: space('xxxxlarge');\n      padding-bottom: space('big');\n    }\n\n    @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n      padding: space('xxlarge') $containerMargin space('xxxlarge');\n    }\n  }\n\n  .process-header__info {\n    padding: 0;\n  }\n\n  .process-header .process-header__container .process-header__info .heading-small {\n    @include fontCurve('h3', 'heading');\n    color: $baseInvertColor;\n    margin-top: 0;\n  }\n\n  .process-header__hashtag a {\n    color: $baseInvertColor;\n    text-decoration-line: none;\n\n    &:hover {\n      color: $baseInvertColor;\n    }\n\n    .external-link-indicator {\n      background: $baseInvertColor;\n      padding: space('xxsmall');\n      box-sizing: content-box;\n      border-radius: $buttonBorderRadius;\n      margin: 0;\n      margin-bottom: -4px;\n      margin-left: 4px;\n    }\n  }\n\n  .phase-subtitle--initiatives,\n  .phase-title,\n  .phase-title--initiatives {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $baseLeadColor;\n  }\n\n  .process-header__progress {\n    display: flex;\n    align-items: center;\n  }\n\n  .process-header__phase {\n    padding: space('medium');\n    margin-top: space('medium');\n    margin-bottom: 0;\n  }\n\n  .phase-date {\n    @include font('regular');\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .phase-current {\n    @include fontCurve('caption');\n    margin-left: space('xxsmall');\n    color: $baseColor;\n  }\n\n  .process-header__progress {\n    margin-bottom: space('xsmall');\n  }\n\n  .process-header__phase .button,\n  .process-header__phase .meeting-polls__button,\n  .process-phase .button,\n  .process-phase .meeting-polls__button {\n    margin-top: space('xsmall');\n  }\n\n  /* Links */\n\n  a,\n  .link {\n    text-decoration-line: underline;\n    transition: $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $linkHoverColor;\n    }\n  }\n\n  /* Buttons */\n\n  .button {\n    @include fontSize('milli');\n    display: inline-flex;\n    align-items: center;\n    height: auto;\n    min-height: $formInputHeight;\n    line-height: $formInputHeight - 2px;\n    line-height: inherit;\n    margin: 0;\n    text-decoration-line: none;\n    appearance: none;\n    border: 1px solid $colorPrimary;\n    padding: space('xsmall') space('xlarge');\n    transition: all $baseTransitionAnimationSpeed;\n\n    &.small {\n      @include fontSize('micro');\n      min-height: $formInputHeightSmall;\n      line-height: $formInputHeightSmall - 2px;\n    }\n\n    &.tiny {\n      @include fontSize('micro');\n      min-height: 32px;\n    }\n\n    &.process-nav__more i {\n      background-color: currentColor;\n      margin-bottom: 0;\n    }\n\n    &.process-nav__more i:first-child {\n      margin-left: space('xsmall');\n    }\n  }\n\n  .button--icon {\n    .icon-wrap {\n      display: flex;\n      align-items: center;\n    }\n\n    .icon-wrap .icon {\n      margin-right: space('xxsmall');\n    }\n  }\n\n  .button--icon.meeting-polls__button .icon,\n  .button--icon.small .icon {\n    width: iconSize('xxsmall');\n    height: iconSize('xxsmall');\n  }\n\n  .extra .button.follow-button {\n    margin-top: 0;\n  }\n\n  .button-group.meeting-polls__button .button,\n  .button-group.meeting-polls__button .meeting-polls__button,\n  .button-group.small .button,\n  .button-group.small .meeting-polls__button,\n  .button-group.tiny .button,\n  .button-group.tiny .meeting-polls__button {\n    @include fontSize('micro');\n  }\n\n  .button.primary,\n  .button.primary.disabled,\n  .button.primary.disabled:focus,\n  .button.primary.disabled:hover,\n  .button.primary[disabled],\n  .button.primary[disabled]:focus,\n  .button.primary[disabled]:hover,\n  .primary.meeting-polls__button {\n    background-color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      background-color: $colorPrimaryHover;\n    }\n  }\n\n  .button.budget-vote-button {\n    @include font;\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    margin-bottom: space('medium');\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n      background-color: $colorWhite;\n    }\n  }\n\n  .button--vote-button {\n    margin-bottom: space('large');\n  }\n\n  .view-side > .button {\n    margin-bottom: space('medium');\n  }\n\n  .button.clear,\n  .button.clear.disabled,\n  .button.clear.disabled:focus,\n  .button.clear.disabled:hover,\n  .button.clear[disabled],\n  .button.clear[disabled]:focus,\n  .button.clear[disabled]:hover,\n  .clear.meeting-polls__button {\n    color: $colorError60;\n  }\n\n\n  /* Wrapper / Layout */\n\n  .wrapper {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n\n    padding-left: $containerMargin;\n    padding-right: $containerMargin;\n\n    @include mq($from: small) {\n      padding-left: $containerMarginSmall;\n      padding-right: $containerMarginSmall;\n    }\n\n    @include mq($from: medium) {\n      padding-left: $containerMarginMedium;\n      padding-right: $containerMarginMedium;\n    }\n\n    @include mq($from: large) {\n      padding-left: $containerMarginLarge;\n      padding-right: $containerMarginLarge;\n    }\n\n    .wrapper--inner {\n      background-color: $colorOldGrey5;\n    }\n\n    // .row.column {\n    //   padding-left: 0;\n    //   padding-right: 0;\n    // }\n\n    .row:not(.column) .floating-helper-container {\n      padding-right: 0.625rem;\n      padding-left: 0.625rem;\n    }\n\n    @media screen and (min-width: #{$mobileBreakpoint}) {\n      .row:not(.column) .floating-helper-container {\n        padding-right: 0.9375rem;\n        padding-left: 0.9375rem;\n      }\n    }\n  }\n\n\n  /* Headings */\n\n  .heading1, h1,\n  .heading2, h2,\n  .heading3, h3,\n  .heading4, h4 {\n    color: $colorPrimary;\n  }\n\n  .heading1, h1 {\n    @include font('title');\n    @include fontCurve('h1', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .section-heading,\n  .heading2, h2 {\n    @include font('title');\n    @include fontCurve('h2', 'heading');\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n    @include spaceCurve('padding-bottom', 'tiny');\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .heading3, h3 {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4 {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  .heading4, h4,\n  .timeline__item--current .timeline__date {\n    color: $colorPrimary;\n  }\n\n  #most-commented .section-heading {\n    margin-top: 0;\n  }\n\n  #most-commented a {\n    text-decoration-line: none;\n  }\n\n\n  /* Section */\n\n  .section {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  .section-heading {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .section-heading .text-sm,\n  .section-heading .text-small {\n    @include fontCurve('h3', 'heading');\n  }\n\n\n  /* Dropdown */\n\n  .order-by__dropdown,\n  .results-per-page__dropdown {\n    display: flex;\n    align-items: center;\n  }\n\n  .order-by__text,\n  .results-per-page__text {\n    margin-right: space('xsmall');\n  }\n\n  .is-dropdown-submenu {\n    box-shadow: $boxShadowPopover;\n    border: none;\n    border-radius: var(--stzh-popover-border-radius);\n    margin-top: var(--stzh-space-xsmall);\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a {\n    @include font;\n    @include fontSize('milli');\n    display: flex;\n    align-items: center;\n    background: $colorWhite;\n    padding: space('xsmall') space('medium');\n    padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n    min-height: $formInputHeight;\n    border: 1px solid $formBorderColor;\n    margin: 0;\n  }\n\n  .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n    border-color: $colorPrimary transparent transparent;\n    right: space('medium');\n  }\n\n  .dropdown .is-dropdown-submenu a,\n  .comment__header__context-menu__content-item {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    justify-content: stretch;\n    appearance: none;\n    text-decoration-line: none;\n    border: none;\n    padding: space('xsmall') space('medium');\n    padding-left: space('large');\n    color: $colorOldGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorOldGrey70;\n      background-color: $colorOldGrey5;\n      text-decoration-line: none;\n    }\n  }\n\n  .comment__header__context-menu__content-item {\n    grid-gap: space('small');\n    gap: space('small');\n  }\n\n\n  /* Comments */\n\n  .comments {\n    padding-top: 0;\n    margin-top: space('medium');\n    margin-bottom: space('medium');\n  }\n\n  .comments .section-heading {\n    margin-top: 0;\n  }\n\n  .comment__header,\n  .comment__footer,\n  .add-comment {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .add-comment {\n    background-color: transparent;\n    padding: 0;\n  }\n\n  .add-comment .remaining-character-count {\n    color: $baseColor;\n    padding: space('xsmall') space('small');\n  }\n\n  .comment-threads {\n    margin-bottom: space('xxxlarge');\n  }\n\n  .comment__content {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n\n    p {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n  }\n\n  .comment__footer {\n    @include fontCurve('p2');\n  }\n\n  .comment__votes {\n    margin-top: 0;\n  }\n\n  .comment__header__context-menu__content {\n    box-shadow: $boxShadowPopover;\n  }\n\n  .opinion-toggle {\n    margin: space('xlarge') 0;\n  }\n\n  .button:hover,\n  .meeting-polls__button:hover,\n  .opinion-toggle--meh.is-active,\n  .opinion-toggle--meh:focus,\n  .opinion-toggle--meh:hover {\n    background-color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n  }\n\n  .opinion-toggle--ko.is-active,\n  .opinion-toggle--ko:focus,\n  .opinion-toggle--ko:hover {\n    background-color: $colorError60;\n    border-color: $colorError60;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorFirgreen50;\n    border-color: $colorFirgreen50;\n  }\n\n\n  /* Process Nav */\n\n  .process-nav__content {\n    border-bottom: none;\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav__content {\n      border-bottom: 1px solid $baseBorderColor;\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .process-nav li {\n      padding: space('xsmall') space('small');\n    }\n  }\n\n\n  /* Statistics */\n\n  .statistics-cell {\n    margin: space('xxlarge') 0;\n  }\n\n  .statistics-cell .statistic__number {\n    @include font('regular');\n    color: $colorPrimary;\n  }\n\n  .statistics-cell .statistic__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseLeadColor;\n    margin-top: 0;\n    text-transform: none;\n  }\n\n  .statistics-cell .statistic__data:after {\n    border-left: 2px solid $baseBorderColor;\n  }\n\n\n  /* Richtext */\n\n  .ql-editor {\n    @include richtext-host;\n    @include richtext-slotted($withLists: false);\n\n    *:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .help-text {\n    color: $baseColor;\n  }\n\n  .help-text .ql-editor p {\n    @include fontCurve('caption');\n  }\n\n\n  /* Accountability */\n\n  .accountability .categories .categories--header span,\n  .accountability .categories .progress-figure,\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    color: $baseColor;\n  }\n\n  .accountability .categories .categories--header .icon--arrow-bottom {\n    fill: $baseColor;\n  }\n\n  .accountability .categories .categories--header {\n    border-color: $baseBorderColor;\n    margin-bottom: space('medium');\n    padding-bottom: space('medium');\n  }\n\n  .accountability .intro .progress-level p {\n    @include font('heavy');\n    @include spaceCurve('margin-bottom', 'small');\n    margin-top: 0;\n  }\n\n  .accountability .categories .progress-figure {\n    margin-top: 0;\n  }\n\n  .accountability .categories .categories--group .category--title .progress-info .category--count {\n    margin-top: space('xxxsmall');\n  }\n\n  .accountability .title-action {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\n  /* Breadrumb */\n\n  .lines-breadcrumb a,\n  .muted-link {\n    @include font;\n    color: $linkColor;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n\n    &:hover,\n    &:focus {\n      color: $linkHoverColor;\n    }\n  }\n\n\n  /* Lead */\n\n  .lead .ql-editor p {\n    @include font('light');\n    @include fontCurve('h3');\n    @include spaceCurve('margin-bottom', 'big');\n    margin-top: space('xxlarge');\n  }\n\n\n  /* Message / Callout / Floating Helper */\n\n  .callout.secondary,\n  .callout.warning,\n  .callout.success,\n  .floating-helper__content {\n    @include spaceCurve('padding', 'regular');\n    padding: space('medium');\n    display: block;\n    box-shadow: $boxShadowMessage;\n    background-color: $colorWhite;\n    margin-bottom: space('xxxxlarge') !important;\n  }\n\n  .callout {\n    @include font('heavy');\n    border-left-width: 5px;\n\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .floating-helper__content {\n    border-top: none;\n    padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n  }\n\n  .floating-helper__wrapper {\n    position: relative;\n  }\n\n  .floating-helper__content-close {\n    @include spaceCurve('top', 'regular');\n    @include spaceCurve('right', 'regular');\n    box-sizing: content-box;\n    position: absolute;\n    width: iconSize('medium');\n    height: iconSize('medium');\n    padding: var(--stzh-space-xsmall);\n    margin: calc(var(--stzh-space-xsmall) * -1);\n    background-color: transparent;\n    color: var(--stzh-base-lead-color);\n\n    .icon {\n      width: iconSize('xxsmall');\n      height: iconSize('xxsmall');\n    }\n  }\n\n  .floating-helper__icon-big {\n    width: iconSize('large');\n    height: iconSize('large');\n    background-color: $colorOldPrimary8;\n\n    .icon {\n      width: iconSize('xsmall');\n      height: iconSize('xsmall');\n    }\n  }\n\n  @media screen and (min-width: #{$mobileBreakpoint}) {\n    .floating-helper__content-inner > * {\n      margin: 0;\n    }\n\n    .floating-helper__icon-big {\n      margin-right: space('small');\n    }\n  }\n\n  .floating-helper-block .mb-s {\n    margin: 0 !important;\n  }\n\n\n  /* Sidebar */\n\n  .extra,\n  .tech-info {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  .extra__date,\n  .extra__suport-number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  .extra__month {\n    @include fontCurve('caption');\n  }\n\n  .extra__time,\n  .extra__suport-text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n\n  /* Filters */\n\n  .filters__help p:first-of-type {\n    @include fontCurve('p2');\n    margin-top: 0;\n  }\n\n  #participatory-space-filters legend {\n    margin-right: space('xsmall');\n  }\n\n\n  /* Mini Title */\n\n  .mini-title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    color: $baseColor;\n    margin-bottom: space('small');\n  }\n\n  .mini-title__strong--highlight {\n    @include font('title');\n    @include fontCurve('h4');\n  }\n\n\n  /* Tags */\n\n  .tags {\n    display: flex;\n    flex-wrap: wrap;\n\n    &:last-child {\n      margin-bottom: calc(#{space('xsmall')} * -1);\n    }\n  }\n\n  .tags li {\n    margin-right: space('xsmall');\n    margin-bottom: space('xsmall');\n  }\n\n  .tags li a {\n    @include fontSize('micro');\n    height: 32px;\n    line-height: 32px;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: 16px;\n    padding: 0 space('medium');\n    color: $colorPrimary;\n    appearance: none;\n    border: 1px solid $colorOldGrey13;\n    background-color: $colorWhite;\n    transition: all $baseTransitionAnimationSpeed;\n    text-decoration-line: none;\n  }\n\n  /* Card */\n\n  .card {\n    color: $baseColor;\n  }\n\n  .card__top .badge-card__content,\n  .card__top .card__content {\n    @include fontCurve('caption');\n    padding: space('xsmall') space('large');\n    align-items: center;\n\n    span.muted {\n      font-size: inherit;\n    }\n  }\n\n  .card__top .card__content {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  .card__top .card__content .card__link {\n    display: block;\n  }\n\n  .card > .card__content,\n  .card.definition-data,\n  .card .definition-data,\n  .badge-card__content,\n  .card__support,\n  .filters__section,\n  .filters__section--general,\n  .filters__section--general:first-of-type,\n  .filters__section:first-of-type {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card-data__item,\n  .filters__section,\n  .filters__section--general,\n  .card__block ul,\n  .card__icondata ul,\n  .card__footer,\n  .card__top {\n    border-color: $baseBorderColor;\n  }\n\n  .card__link {\n    display: flex;\n    flex-direction: column;\n    text-decoration-line: none;\n    color: $baseColor;\n\n    &:hover {\n      text-decoration-line: none;\n    }\n\n    .text-small {\n      @include fontCurve('p2');\n    }\n  }\n\n  .card__header {\n    margin-bottom: space('small');\n  }\n\n  .card__text {\n    @include fontCurve('p1');\n\n    &:not(:last-child) {\n      margin-bottom: space('small');\n    }\n  }\n\n  .card .card__title,\n  .card--list__heading {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: $colorPrimary;\n    margin-top: 0;\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  .card:not(.card--secondary):hover .card__title {\n    color: $colorPrimaryHover;\n  }\n\n  .collapsible-list .card__text--paragraph {\n    color: $baseColor !important;\n  }\n\n  .card__block ul li:not(:first-child),\n  .card__icondata ul li:not(:first-child) {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card-data__item {\n    @include fontCurve('caption');\n    color: $baseColor;\n\n    .heading1,\n    .heading2,\n    .heading3,\n    .heading4 {\n      margin-top: 0;\n    }\n\n    strong {\n      display: block;\n    }\n\n    br {\n      display: none;\n    }\n  }\n\n  .card-data__item.creation_date_status strong {\n    color: $baseColor;\n    color: inherit;\n  }\n\n  .card__status .card-data__item {\n    padding: space('xsmall');\n  }\n\n  .card--meta {\n    color: $baseColor;\n  }\n\n  .card__block ul li:not(:first-child) strong,\n  .card__icondata ul li:not(:first-child) strong {\n    font-size: inherit;\n    letter-spacing: inherit;\n  }\n\n  .add-message:not(.card--secondary),\n  .card:not(.card--secondary),\n  .chart-tooltip:not(.card--secondary),\n  .conference-registration:not(.card--secondary),\n  .conference-speaker .speaker-bio:not(.card--secondary) {\n    &:hover {\n      box-shadow: $boxShadowPopover;\n    }\n  }\n\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n  div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n    @include font;\n    @include fontCurve('p1');\n    color: $baseColor;\n  }\n\n  // Progress bar\n\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n  .progress__bar .progress__bar__title {\n    @include font;\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .card__support__number,\n  .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n  .progress__bar .progress__bar__title .progress__bar__number,\n  .extra__suport-text,\n  .progress__bar.progress__bar--vertical .progress__bar__text {\n    @include fontCurve('p2');\n    color: $baseColor;\n  }\n\n  .progress__bar.progress__bar--vertical .progress__bar__number {\n    @include font('heavy');\n    @include fontCurve('h2');\n  }\n\n  // Card list\n\n  .card--list__item {\n    padding: 0;\n  }\n\n  .card--list__text {\n    padding: 0;\n    display: block;\n  }\n\n  .card--list__icon {\n    fill: $colorPrimary;\n  }\n\n  .card--list__item .card__link {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  .card--list__text .card__link:hover .card--list__heading {\n    color: $colorPrimaryHover;\n  }\n\n  .card--list__text .card__link .text-small {\n    color: $baseColor;\n  }\n\n  .card--list__data {\n    background-color: $colorOldGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorOldGrey70;\n  }\n\n  // Side cards\n\n  .card.extra,\n  .view-side .card:not(.card--secondary),\n  .comment-thread:not(.card--secondary) {\n    &:hover {\n      box-shadow: none;\n    }\n  }\n\n  // Definition Card\n\n  .definition__title {\n    color: $colorOldGrey70;\n  }\n\n  .definition-data {\n    color: $colorOldGrey55;\n  }\n\n  .definition-data__item {\n    @include fontCurve('p2');\n    padding: 0;\n    padding-bottom: space('small');\n    margin-bottom: space('small');\n    border-bottom: 1px solid $baseBorderColor;\n\n    &:last-child {\n      border-bottom: none;\n      margin-bottom: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  .definition-data__title {\n    @include font('heavy');\n    @include fontCurve('p2');\n    margin-bottom: 0;\n  }\n\n  .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n    background-color: $colorOldGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorOldGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA6B,+ttO,MCatBC,EAAuB,M,yBAClC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,K"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,a,g as s}from"./p-c7bfac7a.js";import{s as i,h}from"./p-e30a5acc.js";import{m as r}from"./p-10e2901a.js";import"./p-9b063923.js";const l=".sc-stzh-pagetitle-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-pagetitle-h{display:none}.sc-stzh-pagetitle-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagetitle-h *.sc-stzh-pagetitle,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::before,.sc-stzh-pagetitle-h *.sc-stzh-pagetitle::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-pagetitle-h .has-focus.sc-stzh-pagetitle{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle{outline-style:none !important}.sc-stzh-pagetitle-h .stzh-fylingfocus-focused.sc-stzh-pagetitle::-moz-focus-inner{border:0 !important}.sc-stzh-pagetitle-h{--background-color:var(--stzh-pagetitle-background-color, var(--stzh-pagetitle-background-color));--image-background-color:var(--stzh-ratio-background-color)}.sc-stzh-pagetitle-h .sc-stzh-pagetitle-s>[slot=image]{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}[background=default].sc-stzh-pagetitle-h{--stzh-readspeaker-background-color:var(--background-color);--stzh-readspeaker-audio-track-progress-background-color:var(--stzh-color-white)}[background=transparent].sc-stzh-pagetitle-h{--background-color:transparent}.stzh-pagetitle.sc-stzh-pagetitle{background-color:var(--background-color)}.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-pagetitle__container.sc-stzh-pagetitle{margin-left:auto;margin-right:auto;max-width:84.25rem}}.stzh-pagetitle__wrapper.sc-stzh-pagetitle{position:relative;display:grid}.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge);display:flex;flex-direction:column;justify-content:center}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xbig)}}.stzh-pagetitle__image-wrapper.sc-stzh-pagetitle{position:relative}.stzh-pagetitle__ratio.sc-stzh-pagetitle{--background-color:var(--image-background-color)}.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{background-color:var(--image-background-color);position:absolute;inset:0;height:100%;margin-left:calc(1.25rem / -1);margin-right:calc(1.25rem / -1)}@media screen and (min-width: 600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:calc(2rem / -1);margin-right:calc(2rem / -1)}}@media screen and (min-width: 900px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{margin-left:0;margin-right:0;width:calc(100% + 2.5rem)}}@media screen and (min-width: 1260px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + 4rem)}}@media screen and (min-width: 1600px){.stzh-pagetitle__image-inner-wrapper.sc-stzh-pagetitle{width:calc(100% + ((100rem - 84.25rem) / 2))}}.stzh-pagetitle__meta.sc-stzh-pagetitle{display:flex;flex-direction:column-reverse;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-pagetitle__meta.sc-stzh-pagetitle{flex-direction:row}}.stzh-pagetitle__tag.sc-stzh-pagetitle:not(:empty){margin-right:auto}@media screen and (min-width: 600px) and (max-width: 899px){.stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-position:relative;--stzh-readspeaker-dropdown-top:auto}}.stzh-pagetitle__dateline.sc-stzh-pagetitle{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);color:var(--stzh-color-primary70);margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__dateline.sc-stzh-pagetitle{margin-top:var(--stzh-space-xxlarge)}}.stzh-pagetitle__lead.sc-stzh-pagetitle{--stzh-base-lead-color:var(--stzh-heading-color)}.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle__heading.sc-stzh-pagetitle:not(:empty)+.stzh-pagetitle__lead.sc-stzh-pagetitle:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:var(--stzh-z-index-sticky);position:fixed;left:0;right:0;bottom:0}@media screen and (min-width: 900px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{z-index:initial;position:absolute;width:calc(((100% - 7 * var(--stzh-grid-gutter-medium)) / 8 * 3) + 2 * var(--stzh-grid-gutter-medium));left:auto;bottom:calc((var(--stzh-space-big) - var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 1260px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-large)) / 12 * 4) + 3 * var(--stzh-grid-gutter-large));bottom:calc(var(--stzh-space-huge) / -1)}}@media screen and (min-width: 1600px){.stzh-pagetitle__disturber.sc-stzh-pagetitle{width:calc(((100% - 11 * var(--stzh-grid-gutter-ultra)) / 12 * 4) + 3 * var(--stzh-grid-gutter-ultra))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__ratio.sc-stzh-pagetitle{display:none}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))}@media screen and (min-width: 600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 4}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__meta.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__dateline.sc-stzh-pagetitle,.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{grid-column:1/span 8}}@media screen and (min-width: 900px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 6}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-no-image.sc-stzh-pagetitle .stzh-pagetitle__lead.sc-stzh-pagetitle{grid-column:1/span 7}}@media screen and (min-width: 900px){.stzh-pagetitle--has-image.sc-stzh-pagetitle .stzh-pagetitle__wrapper.sc-stzh-pagetitle{grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--stzh-space-xxlarge)}}.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--has-meta.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagetitle--has-tag.sc-stzh-pagetitle .stzh-pagetitle__readspeaker.sc-stzh-pagetitle{--stzh-readspeaker-dropdown-left:auto;--stzh-readspeaker-dropdown-right:0px;--stzh-readspeaker-dropdown-settings-left:auto;--stzh-readspeaker-dropdown-settings-right:0px}}.stzh-pagetitle--background-default.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{--stzh-selection-background-color:var(--stzh-color-white)}.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-pagetitle--background-transparent.sc-stzh-pagetitle .stzh-pagetitle__text.sc-stzh-pagetitle{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-pagetitle--hyphens.sc-stzh-pagetitle .stzh-pagetitle__heading.sc-stzh-pagetitle{-webkit-hyphens:auto;hyphens:auto}";const g=class{constructor(e){t(this,e);this.isDisturberOpen=false;this.update=()=>{var t;if(!this.disturberElement){return}const e=r("medium").matches;const a=((t=this.disturberElement)===null||t===void 0?void 0:t.offsetHeight)||0;const s=a&&this.isDisturberOpen;const i=s&&!e;document.documentElement.style.setProperty("--stzh-pagetitle-disturber-height",s?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-stuck-height",i?`${a}px`:"0px");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-stuck",i?"1":"0");document.documentElement.style.setProperty("--stzh-pagetitle-disturber-is-not-stuck",i?"0":"1")};this.init=()=>{const t=this.element.querySelector('stzh-heading[slot="heading"], [slot="heading"] stzh-heading');const e=this.element.querySelector('stzh-disturber[slot="disturber"], [slot="disturber"] stzh-disturber');const a=this.element.querySelectorAll('stzh-text[slot="lead"], [slot="lead"] stzh-text');const s=this.element.querySelector('stzh-show[slot="disturber"], [slot="disturber"] stzh-show');const h=this.element.querySelector('[slot="readspeaker"] stzh-button');const r=this.element.querySelector('stzh-tag[slot="tag"], [slot="tag"] stzh-tag');if(t){i(t,{curve:"hero",level:"1"})}if(e){i(e,{initialOpenAnimation:true})}if(s){i(s,{mikro:true})}if(r){i(r,{type:"secondary",size:"large",nonInteractive:true})}if(h){i(h,{variant:"tertiary-plain",noPaddingLeft:true,noPaddingRight:true,size:"small",sizeMedium:"tiny",buttonAccesskey:"L"})}a.forEach((t=>{i(t,{lead:true})}))};this.background="default";this.hyphensEnabled=false;this.dateline=undefined}handleResize(){if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.update)}handleStzhOpen(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=true;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}handleStzhClose(t){if(t.detail.component==="stzh-disturber"){this.isDisturberOpen=false;requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}}componentDidRender(){requestAnimationFrame((()=>{requestAnimationFrame(this.update)}))}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var t;(t=this.observer)===null||t===void 0?void 0:t.disconnect()}render(){const t=h(this.element,"image");const s=h(this.element,"lead");const i=h(this.element,"tag");const r=h(this.element,"readspeaker");const l={"stzh-pagetitle":true,"stzh-pagetitle--has-image":t,"stzh-pagetitle--has-no-image":!t,"stzh-pagetitle--has-lead":s,"stzh-pagetitle--has-tag":i,"stzh-pagetitle--has-meta":i||r,"stzh-pagetitle--hyphens":this.hyphensEnabled,[`stzh-pagetitle--background-${this.background}`]:!!this.background};return e(a,null,e("div",{class:l},e("div",{class:"stzh-pagetitle__container"},e("div",{class:"stzh-pagetitle__wrapper"},e("div",{class:"stzh-pagetitle__text"},e("div",{class:"stzh-pagetitle__meta"},e("div",{class:"stzh-pagetitle__tag"},e("slot",{name:"tag"})),e("div",{class:"stzh-pagetitle__readspeaker"},e("slot",{name:"readspeaker"}))),this.dateline&&e("div",{class:"stzh-pagetitle__dateline"},this.dateline),e("div",{class:"stzh-pagetitle__heading"},e("slot",{name:"heading"})),e("div",{class:"stzh-pagetitle__lead"},e("slot",{name:"lead"}))),e("div",{class:"stzh-pagetitle__image-wrapper"},e("stzh-ratio",{ratio:"16:9",ratioSmall:"3:2",ratioMedium:"16:9",class:"stzh-pagetitle__ratio"}),e("div",{class:"stzh-pagetitle__image-inner-wrapper"},e("slot",{name:"image"}))),e("div",{class:"stzh-pagetitle__disturber",ref:t=>this.disturberElement=t},e("slot",{name:"disturber"}))))))}get element(){return s(this)}};g.style=l;export{g as stzh_pagetitle};
+//# sourceMappingURL=p-bdff55a6.entry.js.map

package/dist/stzh-components/{p-78a16599.entry.js.map → p-bdff55a6.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","level","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","hyphensEnabled","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n */\n\n:host {\n  --background-color: #{$pagetitleBackgroundColor};\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-height\",\n      hasDisturber ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-stuck-height\",\n      isStuck ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true,\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true,\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true,\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const tagSlotUsed = hasSlot(this.element, \"tag\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sJAAA,MAAMA,EAAmB,6iW,MCmBZC,EAAa,M,yBA4ChBC,KAAAC,gBAA2B,MAE3BD,KAAAE,OAAS,K,MACf,IAAKF,KAAKG,iBAAkB,CAC1B,M,CAGF,MAAMC,EAAWC,EAAM,UAAUC,QACjC,MAAMC,IAAkBC,EAAAR,KAAKG,oBAAgB,MAAAK,SAAA,SAAAA,EAAEC,eAAgB,EAC/D,MAAMC,EAAeH,GAAmBP,KAAKC,gBAC7C,MAAMU,EAAUD,IAAiBN,EAEjCQ,SAASC,gBAAgBC,MAAMC,YAC7B,oCACAL,EAAe,GAAGH,MAAsB,OAE1CK,SAASC,gBAAgBC,MAAMC,YAC7B,0CACAJ,EAAU,GAAGJ,MAAsB,OAErCK,SAASC,gBAAgBC,MAAMC,YAAY,sCAAuCJ,EAAU,IAAM,KAClGC,SAASC,gBAAgBC,MAAMC,YAAY,0CAA2CJ,EAAU,IAAM,IAAI,EAKpGX,KAAAgB,KAAO,KACb,MAAMC,EAAUjB,KAAKkB,QAAQC,cAAc,+DAC3C,MAAMC,EAAYpB,KAAKkB,QAAQC,cAAc,uEAC7C,MAAME,EAAQrB,KAAKkB,QAAQI,iBAAiB,mDAC5C,MAAMC,EAAOvB,KAAKkB,QAAQC,cAAc,6DACxC,MAAMK,EAAoBxB,KAAKkB,QAAQC,cAAc,oCACrD,MAAMM,EAAMzB,KAAKkB,QAAQC,cAAc,+CAEvC,GAAIF,EAAS,CACXS,EAAeT,EAAS,CACtBU,MAAO,OACPC,MAAO,K,CAIX,GAAIR,EAAW,CACbM,EAAeN,EAAW,CACxBS,qBAAsB,M,CAI1B,GAAIN,EAAM,CACRG,EAAeH,EAAM,CACnBO,MAAO,M,CAIX,GAAIL,EAAK,CACPC,EAAeD,EAAK,CAClBM,KAAM,YACNC,KAAM,QACNC,eAAgB,M,CAIpB,GAAIT,EAAmB,CACrBE,EAAeF,EAAmB,CAChCU,QAAS,iBACTC,cAAe,KACfC,eAAgB,KAChBJ,KAAM,QACNK,WAAY,OACZC,gBAAiB,K,CAIrBjB,EAAMkB,SAAQC,IACZd,EAAec,EAAM,CACnBA,KAAM,MACiB,GACzB,E,gBApH6D,U,oBAGd,M,wBAMnD,YAAAC,GACE,GAAIzC,KAAK0C,eAAgB,CACvBC,OAAOC,qBAAqB5C,KAAK0C,e,CAGnC1C,KAAK0C,eAAiBG,sBAAsB7C,KAAKE,O,CAInD,cAAA4C,CAAeC,GACb,GAAIA,EAAMC,OAAOC,YAAc,iBAAkB,CAC/CjD,KAAKC,gBAAkB,KACvB4C,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,EAMxC,eAAAgD,CAAgBH,GACd,GAAIA,EAAMC,OAAOC,YAAc,iBAAkB,CAC/CjD,KAAKC,gBAAkB,MACvB4C,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,EAuFxC,kBAAAiD,GACEN,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,CAItC,iBAAAkD,GACEpD,KAAKgB,OAELhB,KAAKqD,SAAW,IAAIC,iBAAiBtD,KAAKgB,MAC1ChB,KAAKqD,SAASE,QAAQvD,KAAKkB,QAAS,CAClCsC,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,G,OACElD,EAAAR,KAAKqD,YAAQ,MAAA7C,SAAA,SAAAA,EAAEmD,Y,CAGjB,MAAAC,GACE,MAAMC,EAAgBC,EAAQ9D,KAAKkB,QAAS,SAC5C,MAAM6C,EAAeD,EAAQ9D,KAAKkB,QAAS,QAC3C,MAAM8C,EAAcF,EAAQ9D,KAAKkB,QAAS,OAC1C,MAAM+C,EAAsBH,EAAQ9D,KAAKkB,QAAS,eAElD,MAAMgD,EAAU,CACd,iBAAkB,KAClB,4BAA6BL,EAC7B,gCAAiCA,EACjC,2BAA4BE,EAC5B,0BAA2BC,EAC3B,2BAA4BA,GAAeC,EAC3C,0BAA2BjE,KAAKmE,eAChC,CAAC,8BAA8BnE,KAAKoE,gBAAiBpE,KAAKoE,YAG5D,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMG,KAAK,SAGbH,EAAA,OAAKE,MAAM,+BACTF,EAAA,QAAMG,KAAK,kBAIdxE,KAAKyE,UAAYJ,EAAA,OAAKE,MAAM,4BAA4BvE,KAAKyE,UAE9DJ,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,aAGbH,EAAA,OAAKE,MAAM,wBACTF,EAAA,QAAMG,KAAK,WAIfH,EAAA,OAAKE,MAAM,iCACTF,EAAA,cACEK,MAAO,OACPC,WAAY,MACZC,YAAa,OACbL,MAAM,0BAERF,EAAA,OAAKE,MAAM,uCACTF,EAAA,QAAMG,KAAK,YAIfH,EAAA,OAAKE,MAAM,4BAA4BM,IAAKC,GAAO9E,KAAKG,iBAAmB2E,GACzET,EAAA,QAAMG,KAAK,kB"}
+{"version":3,"names":["stzhPagetitleCss","StzhPagetitle","this","isDisturberOpen","update","disturberElement","isMedium","media","matches","disturberHeight","_a","offsetHeight","hasDisturber","isStuck","document","documentElement","style","setProperty","init","heading","element","querySelector","disturber","leads","querySelectorAll","show","readspeakerButton","tag","setPropsIfNull","curve","level","initialOpenAnimation","mikro","type","size","nonInteractive","variant","noPaddingLeft","noPaddingRight","sizeMedium","buttonAccesskey","forEach","lead","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleStzhOpen","event","detail","component","handleStzhClose","componentDidRender","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageSlotUsed","hasSlot","leadSlotUsed","tagSlotUsed","readspeakerSlotUsed","classes","hyphensEnabled","background","h","Host","class","name","dateline","ratio","ratioSmall","ratioMedium","ref","el"],"sources":["src/components/stzh-pagetitle/stzh-pagetitle.scss?tag=stzh-pagetitle&encapsulation=scoped","src/components/stzh-pagetitle/stzh-pagetitle.tsx"],"sourcesContent":["/**\n * @prop --background-color: Background color\n * @prop --image-background-color: Background color of image\n *\n * @prop --stzh-pagetitle-disturber-height: Global: Disturber height\n * @prop --stzh-pagetitle-disturber-stuck-height: Global: Disturber height when sticky (below medium breakpoint)\n * @prop --stzh-pagetitle-disturber-is-stuck: **Global**: Whether disturber is currently sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-disturber-is-not-stuck: **Global**: Whether disturber is currently not sticky (readonly variable on `<html>`)\n * @prop --stzh-pagetitle-background-color: **Global**: Background color of pagetitle.\n */\n\n:host {\n  --background-color: var(--stzh-pagetitle-background-color, #{$pagetitleBackgroundColor});\n  --image-background-color: #{$ratioBackgroundColor};\n\n  ::slotted([slot=\"image\"]) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  &[background=\"default\"] {\n    --stzh-readspeaker-background-color: var(--background-color);\n    --stzh-readspeaker-audio-track-progress-background-color: #{$colorWhite};\n  }\n\n  &[background=\"transparent\"] {\n    --background-color: transparent;\n  }\n}\n\n.stzh-pagetitle {\n  background-color: var(--background-color);\n\n  &__container {\n    @include container;\n  }\n\n  &__wrapper {\n    position: relative;\n    display: grid;\n  }\n\n  &__text {\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &__image-wrapper {\n    position: relative;\n  }\n\n  &__ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__image-inner-wrapper {\n    background-color: var(--image-background-color);\n    position: absolute;\n    inset: 0;\n    height: 100%;\n    margin-left: calc(#{$containerMargin} / -1);\n    margin-right: calc(#{$containerMargin} / -1);\n\n    @include mq($from: small) {\n      margin-left: calc(#{$containerMarginSmall} / -1);\n      margin-right: calc(#{$containerMarginSmall} / -1);\n    }\n\n    @include mq($from: medium) {\n      margin-left: 0;\n      margin-right: 0;\n      width: calc(100% + #{$containerMarginMedium});\n    }\n\n    @include mq($from: large) {\n      width: calc(100% + #{$containerMarginLarge});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + ((#{map-get($breakpoints, 'ultra')} - #{$containerMaxWidth}) / 2));\n    }\n  }\n\n  &__meta {\n    display: flex;\n    flex-direction: column-reverse;\n    row-gap: space('xsmall');\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &__tag {\n    &:not(:empty) {\n      margin-right: auto;\n    }\n  }\n\n  &__readspeaker {\n    @include mq($from: small, $to: medium) {\n      --stzh-readspeaker-dropdown-position: relative;\n      --stzh-readspeaker-dropdown-top: auto;\n    }\n  }\n\n  &__dateline {\n    @include fontSize('milli');\n    @include spaceCurve('margin-top', 'regular');\n    color: $colorPrimary70;\n    margin-bottom: space('xsmall');\n  }\n\n  &__lead {\n    --stzh-base-lead-color: #{$headingColor};\n  }\n\n  &__heading:not(:empty) + &__lead:not(:empty) {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  &__disturber {\n    z-index: $zIndexSticky;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n    @include mq($from: medium) {\n      z-index: initial;\n      position: absolute;\n      width: calc(((100% - 7 * #{$gridGutterMedium}) / 8 * 3) + 2 * #{$gridGutterMedium});\n      left: auto;\n      bottom: calc((#{spaceCurveValue('huge', 'medium')} - #{spaceCurveValue('regular', 'medium')}) / -1);\n    }\n\n    @include mq($from: large) {\n      width: calc(((100% - 11 * #{$gridGutterLarge}) / 12 * 4) + 3 * #{$gridGutterLarge});\n      bottom: calc(#{spaceCurveValue('huge', 'large')} / -1);\n    }\n\n    @include mq($from: ultra) {\n      width: calc(((100% - 11 * #{$gridGutterUltra}) / 12 * 4) + 3 * #{$gridGutterUltra});\n    }\n  }\n\n  /* Has no image variant */\n\n  &--has-no-image &__ratio {\n    display: none;\n  }\n\n  &--has-no-image &__text {\n    @include grid;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading,\n  &--has-no-image &__lead {\n    grid-column: 1 / span 4;\n  }\n\n  &--has-no-image &__meta,\n  &--has-no-image &__dateline,\n  &--has-no-image &__heading {\n    @include mq($from: medium) {\n      grid-column: 1 / span 8;\n    }\n  }\n\n  &--has-no-image &__lead {\n    @include mq($from: medium) {\n      grid-column: 1 / span 6;\n    }\n\n    @include mq($from: large) {\n      grid-column: 1 / span 7;\n    }\n  }\n\n  /* Has image variant */\n\n  &--has-image &__wrapper {\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: space('xxlarge');\n    }\n  }\n\n  /* Has meta */\n\n  &--has-meta &__text {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__readspeaker {\n    @include mq($from: medium) {\n      --stzh-readspeaker-dropdown-left: auto;\n      --stzh-readspeaker-dropdown-right: 0px;\n\n      --stzh-readspeaker-dropdown-settings-left: auto;\n      --stzh-readspeaker-dropdown-settings-right: 0px;\n    }\n  }\n\n  /* Default background */\n\n  &--background-default &__text {\n    --stzh-selection-background-color: #{$colorWhite};\n  }\n\n  /* Transparent background */\n\n  &--background-transparent &__text {\n    @include spaceCurve('padding-bottom', 'large');\n  }\n\n  /* Hyphens */\n  &--hyphens &__heading {\n    hyphens: auto;\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop } from \"@stencil/core\";\n\nimport { StzhDisturberCloseEvent, StzhDisturberOpenEvent } from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from \"../../utils/media-utils\";\n\n/**\n * @slot heading - Slot for `stzh-heading` element\n * @slot image - Slot for `stzh-figure` or `img` element\n * @slot lead - Slot for `stzh-text` element\n * @slot tag - Slot for `stzh-tag` element\n * @slot readspeaker - Slot for `stzh-readspeaker` element\n */\n@Component({\n  tag: \"stzh-pagetitle\",\n  styleUrl: \"stzh-pagetitle.scss\",\n  scoped: true,\n})\nexport class StzhPagetitle {\n  @Element() element: HTMLStzhPagetitleElement;\n\n  /** Background color */\n  @Prop({ reflect: true }) background: \"default\" | \"transparent\" = \"default\";\n\n  /** Background color */\n  @Prop({ reflect: true }) hyphensEnabled: boolean = false;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleResize() {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  @Listen(\"stzhOpen\")\n  handleStzhOpen(event: CustomEvent<StzhDisturberOpenEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = true;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  @Listen(\"stzhClose\")\n  handleStzhClose(event: CustomEvent<StzhDisturberCloseEvent>) {\n    if (event.detail.component === \"stzh-disturber\") {\n      this.isDisturberOpen = false;\n      requestAnimationFrame(() => {\n        requestAnimationFrame(this.update);\n      });\n    }\n  }\n\n  private observer: MutationObserver;\n  private debounceResize: number;\n  private disturberElement: HTMLDivElement;\n  private isDisturberOpen: boolean = false;\n\n  private update = () => {\n    if (!this.disturberElement) {\n      return;\n    }\n\n    const isMedium = media(\"medium\").matches;\n    const disturberHeight = this.disturberElement?.offsetHeight || 0;\n    const hasDisturber = disturberHeight && this.isDisturberOpen;\n    const isStuck = hasDisturber && !isMedium;\n\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-height\",\n      hasDisturber ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\n      \"--stzh-pagetitle-disturber-stuck-height\",\n      isStuck ? `${disturberHeight}px` : \"0px\"\n    );\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-stuck\", isStuck ? \"1\" : \"0\");\n    document.documentElement.style.setProperty(\"--stzh-pagetitle-disturber-is-not-stuck\", isStuck ? \"0\" : \"1\");\n\n    // document.documentElement.classList.toggle(\"stzh-pagetitle-disturber-is-stuck\", isStuck);\n  };\n\n  private init = () => {\n    const heading = this.element.querySelector('stzh-heading[slot=\"heading\"], [slot=\"heading\"] stzh-heading');\n    const disturber = this.element.querySelector('stzh-disturber[slot=\"disturber\"], [slot=\"disturber\"] stzh-disturber');\n    const leads = this.element.querySelectorAll('stzh-text[slot=\"lead\"], [slot=\"lead\"] stzh-text');\n    const show = this.element.querySelector('stzh-show[slot=\"disturber\"], [slot=\"disturber\"] stzh-show');\n    const readspeakerButton = this.element.querySelector('[slot=\"readspeaker\"] stzh-button');\n    const tag = this.element.querySelector('stzh-tag[slot=\"tag\"], [slot=\"tag\"] stzh-tag');\n\n    if (heading) {\n      setPropsIfNull(heading, {\n        curve: \"hero\",\n        level: \"1\",\n      } as HTMLStzhHeadingElement);\n    }\n\n    if (disturber) {\n      setPropsIfNull(disturber, {\n        initialOpenAnimation: true,\n      } as HTMLStzhDisturberElement);\n    }\n\n    if (show) {\n      setPropsIfNull(show, {\n        mikro: true,\n      } as HTMLStzhShowElement);\n    }\n\n    if (tag) {\n      setPropsIfNull(tag, {\n        type: \"secondary\",\n        size: \"large\",\n        nonInteractive: true,\n      } as HTMLStzhTagElement);\n    }\n\n    if (readspeakerButton) {\n      setPropsIfNull(readspeakerButton, {\n        variant: \"tertiary-plain\",\n        noPaddingLeft: true,\n        noPaddingRight: true,\n        size: \"small\",\n        sizeMedium: \"tiny\",\n        buttonAccesskey: \"L\",\n      } as HTMLStzhButtonElement);\n    }\n\n    leads.forEach(lead => {\n      setPropsIfNull(lead, {\n        lead: true,\n      } as HTMLStzhTextElement);\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(this.update);\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  render() {\n    const imageSlotUsed = hasSlot(this.element, \"image\");\n    const leadSlotUsed = hasSlot(this.element, \"lead\");\n    const tagSlotUsed = hasSlot(this.element, \"tag\");\n    const readspeakerSlotUsed = hasSlot(this.element, \"readspeaker\");\n\n    const classes = {\n      \"stzh-pagetitle\": true,\n      \"stzh-pagetitle--has-image\": imageSlotUsed,\n      \"stzh-pagetitle--has-no-image\": !imageSlotUsed,\n      \"stzh-pagetitle--has-lead\": leadSlotUsed,\n      \"stzh-pagetitle--has-tag\": tagSlotUsed,\n      \"stzh-pagetitle--has-meta\": tagSlotUsed || readspeakerSlotUsed,\n      \"stzh-pagetitle--hyphens\": this.hyphensEnabled,\n      [`stzh-pagetitle--background-${this.background}`]: !!this.background,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagetitle__container\">\n            <div class=\"stzh-pagetitle__wrapper\">\n              <div class=\"stzh-pagetitle__text\">\n                <div class=\"stzh-pagetitle__meta\">\n                  <div class=\"stzh-pagetitle__tag\">\n                    <slot name=\"tag\"></slot>\n                  </div>\n\n                  <div class=\"stzh-pagetitle__readspeaker\">\n                    <slot name=\"readspeaker\"></slot>\n                  </div>\n                </div>\n\n                {this.dateline && <div class=\"stzh-pagetitle__dateline\">{this.dateline}</div>}\n\n                <div class=\"stzh-pagetitle__heading\">\n                  <slot name=\"heading\"></slot>\n                </div>\n\n                <div class=\"stzh-pagetitle__lead\">\n                  <slot name=\"lead\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__image-wrapper\">\n                <stzh-ratio\n                  ratio={\"16:9\"}\n                  ratioSmall={\"3:2\"}\n                  ratioMedium={\"16:9\"}\n                  class=\"stzh-pagetitle__ratio\"\n                ></stzh-ratio>\n                <div class=\"stzh-pagetitle__image-inner-wrapper\">\n                  <slot name=\"image\"></slot>\n                </div>\n              </div>\n\n              <div class=\"stzh-pagetitle__disturber\" ref={el => (this.disturberElement = el as HTMLDivElement)}>\n                <slot name=\"disturber\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sJAAA,MAAMA,EAAmB,qlW,MCmBZC,EAAa,M,yBA4ChBC,KAAAC,gBAA2B,MAE3BD,KAAAE,OAAS,K,MACf,IAAKF,KAAKG,iBAAkB,CAC1B,M,CAGF,MAAMC,EAAWC,EAAM,UAAUC,QACjC,MAAMC,IAAkBC,EAAAR,KAAKG,oBAAgB,MAAAK,SAAA,SAAAA,EAAEC,eAAgB,EAC/D,MAAMC,EAAeH,GAAmBP,KAAKC,gBAC7C,MAAMU,EAAUD,IAAiBN,EAEjCQ,SAASC,gBAAgBC,MAAMC,YAC7B,oCACAL,EAAe,GAAGH,MAAsB,OAE1CK,SAASC,gBAAgBC,MAAMC,YAC7B,0CACAJ,EAAU,GAAGJ,MAAsB,OAErCK,SAASC,gBAAgBC,MAAMC,YAAY,sCAAuCJ,EAAU,IAAM,KAClGC,SAASC,gBAAgBC,MAAMC,YAAY,0CAA2CJ,EAAU,IAAM,IAAI,EAKpGX,KAAAgB,KAAO,KACb,MAAMC,EAAUjB,KAAKkB,QAAQC,cAAc,+DAC3C,MAAMC,EAAYpB,KAAKkB,QAAQC,cAAc,uEAC7C,MAAME,EAAQrB,KAAKkB,QAAQI,iBAAiB,mDAC5C,MAAMC,EAAOvB,KAAKkB,QAAQC,cAAc,6DACxC,MAAMK,EAAoBxB,KAAKkB,QAAQC,cAAc,oCACrD,MAAMM,EAAMzB,KAAKkB,QAAQC,cAAc,+CAEvC,GAAIF,EAAS,CACXS,EAAeT,EAAS,CACtBU,MAAO,OACPC,MAAO,K,CAIX,GAAIR,EAAW,CACbM,EAAeN,EAAW,CACxBS,qBAAsB,M,CAI1B,GAAIN,EAAM,CACRG,EAAeH,EAAM,CACnBO,MAAO,M,CAIX,GAAIL,EAAK,CACPC,EAAeD,EAAK,CAClBM,KAAM,YACNC,KAAM,QACNC,eAAgB,M,CAIpB,GAAIT,EAAmB,CACrBE,EAAeF,EAAmB,CAChCU,QAAS,iBACTC,cAAe,KACfC,eAAgB,KAChBJ,KAAM,QACNK,WAAY,OACZC,gBAAiB,K,CAIrBjB,EAAMkB,SAAQC,IACZd,EAAec,EAAM,CACnBA,KAAM,MACiB,GACzB,E,gBApH6D,U,oBAGd,M,wBAMnD,YAAAC,GACE,GAAIzC,KAAK0C,eAAgB,CACvBC,OAAOC,qBAAqB5C,KAAK0C,e,CAGnC1C,KAAK0C,eAAiBG,sBAAsB7C,KAAKE,O,CAInD,cAAA4C,CAAeC,GACb,GAAIA,EAAMC,OAAOC,YAAc,iBAAkB,CAC/CjD,KAAKC,gBAAkB,KACvB4C,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,EAMxC,eAAAgD,CAAgBH,GACd,GAAIA,EAAMC,OAAOC,YAAc,iBAAkB,CAC/CjD,KAAKC,gBAAkB,MACvB4C,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,EAuFxC,kBAAAiD,GACEN,uBAAsB,KACpBA,sBAAsB7C,KAAKE,OAAO,G,CAItC,iBAAAkD,GACEpD,KAAKgB,OAELhB,KAAKqD,SAAW,IAAIC,iBAAiBtD,KAAKgB,MAC1ChB,KAAKqD,SAASE,QAAQvD,KAAKkB,QAAS,CAClCsC,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,G,OACElD,EAAAR,KAAKqD,YAAQ,MAAA7C,SAAA,SAAAA,EAAEmD,Y,CAGjB,MAAAC,GACE,MAAMC,EAAgBC,EAAQ9D,KAAKkB,QAAS,SAC5C,MAAM6C,EAAeD,EAAQ9D,KAAKkB,QAAS,QAC3C,MAAM8C,EAAcF,EAAQ9D,KAAKkB,QAAS,OAC1C,MAAM+C,EAAsBH,EAAQ9D,KAAKkB,QAAS,eAElD,MAAMgD,EAAU,CACd,iBAAkB,KAClB,4BAA6BL,EAC7B,gCAAiCA,EACjC,2BAA4BE,EAC5B,0BAA2BC,EAC3B,2BAA4BA,GAAeC,EAC3C,0BAA2BjE,KAAKmE,eAChC,CAAC,8BAA8BnE,KAAKoE,gBAAiBpE,KAAKoE,YAG5D,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,2BACTF,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,wBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMG,KAAK,SAGbH,EAAA,OAAKE,MAAM,+BACTF,EAAA,QAAMG,KAAK,kBAIdxE,KAAKyE,UAAYJ,EAAA,OAAKE,MAAM,4BAA4BvE,KAAKyE,UAE9DJ,EAAA,OAAKE,MAAM,2BACTF,EAAA,QAAMG,KAAK,aAGbH,EAAA,OAAKE,MAAM,wBACTF,EAAA,QAAMG,KAAK,WAIfH,EAAA,OAAKE,MAAM,iCACTF,EAAA,cACEK,MAAO,OACPC,WAAY,MACZC,YAAa,OACbL,MAAM,0BAERF,EAAA,OAAKE,MAAM,uCACTF,EAAA,QAAMG,KAAK,YAIfH,EAAA,OAAKE,MAAM,4BAA4BM,IAAKC,GAAO9E,KAAKG,iBAAmB2E,GACzET,EAAA,QAAMG,KAAK,kB"}

package/dist/stzh-components/{p-ee82f53c.entry.js → p-c169f243.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.stzhClick=e(this,"stzhClick",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}else{this.stzhClick.emit({component:"stzh-button",originalEvent:t,href:this.href})}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
-//# sourceMappingURL=p-ee82f53c.entry.js.map
+import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-e30a5acc.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.stzhClick=e(this,"stzhClick",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}else{this.stzhClick.emit({component:"stzh-button",originalEvent:t,href:this.href})}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
+//# sourceMappingURL=p-c169f243.entry.js.map

package/dist/stzh-components/{p-7d030c40.entry.js → p-c3816fd3.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as s,a as i,g as a}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h='.sc-stzh-pi-teaser-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-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(--stzh-pi-teaser-image-background-color, var(--stzh-color-primary30));display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser__title.sc-stzh-pi-teaser{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-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--stzh-color-black);margin:0}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{display:block;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{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:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-large)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}';const n=class{constructor(s){t(this,s);this.stzhClick=e(this,"stzhClick",7);this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-pi-teaser",originalEvent:t,href:this.href})};this.href=undefined;this.target=undefined;this.analyticsId=undefined;this.dateline="";this.heading="";this.headingLevel="3";this.lead="";this.date=""}componentDidRender(){requestAnimationFrame((()=>{var t,e;const s=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(s){(e=this.titleLinkElement)===null||e===void 0?void 0:e.setAttribute("s-object-id",s)}}))}renderHeading(){const t=`h${this.headingLevel}`;const e=this.href?"a":"button";return s("div",{class:"stzh-pi-teaser__title-wrapper"},this.dateline&&s("p",{class:"stzh-pi-teaser__dateline"},this.dateline),s(t,{class:"stzh-pi-teaser__title"},s(e,{ref:t=>this.titleLinkElement=t,class:"stzh-pi-teaser__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},s("div",{ref:t=>this.headingTextElement=t},this.heading?this.heading:s("slot",{name:"heading"})))))}render(){const t=!!this.lead||r(this.element,"lead");const e=r(this.element,"image");const a=!e;const h={"stzh-pi-teaser":true,"stzh-pi-teaser--has-lead":t,"stzh-pi-teaser--has-image":e};return s(i,{"has-lead":t},s("article",{class:h,"aria-label":this.heading,role:"listitem"},s("div",{class:"stzh-pi-teaser__image"},s("stzh-ratio",{ratio:"2:1"},s("slot",{name:"image"}))),a&&s("stzh-ratio",{class:"stzh-pi-teaser__title-ratio",ratio:"2:1"},this.renderHeading()),s("div",{class:"stzh-pi-teaser__wrapper"},!a&&this.renderHeading(),s("div",{class:"stzh-pi-teaser__lead"},this.lead?this.lead:s("slot",{name:"lead"})),this.date&&s("div",{class:"stzh-pi-teaser__date"},this.date))))}get element(){return a(this)}};n.style=h;export{n as stzh_pi_teaser};
-//# sourceMappingURL=p-7d030c40.entry.js.map
+import{r as t,c as e,h as s,a as i,g as a}from"./p-c7bfac7a.js";import{h as r}from"./p-e30a5acc.js";import"./p-9b063923.js";const h='.sc-stzh-pi-teaser-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-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::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-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(--stzh-pi-teaser-image-background-color, var(--stzh-color-primary30));display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xlarge);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{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-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser__title.sc-stzh-pi-teaser{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-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--stzh-color-black);margin:0}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{display:block;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{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:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-large)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}';const n=class{constructor(s){t(this,s);this.stzhClick=e(this,"stzhClick",7);this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-pi-teaser",originalEvent:t,href:this.href})};this.href=undefined;this.target=undefined;this.analyticsId=undefined;this.dateline="";this.heading="";this.headingLevel="3";this.lead="";this.date=""}componentDidRender(){requestAnimationFrame((()=>{var t,e;const s=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(s){(e=this.titleLinkElement)===null||e===void 0?void 0:e.setAttribute("s-object-id",s)}}))}renderHeading(){const t=`h${this.headingLevel}`;const e=this.href?"a":"button";return s("div",{class:"stzh-pi-teaser__title-wrapper"},this.dateline&&s("p",{class:"stzh-pi-teaser__dateline"},this.dateline),s(t,{class:"stzh-pi-teaser__title"},s(e,{ref:t=>this.titleLinkElement=t,class:"stzh-pi-teaser__title-link",href:this.href,target:this.target,onClick:this.handleCardClick},s("div",{ref:t=>this.headingTextElement=t},this.heading?this.heading:s("slot",{name:"heading"})))))}render(){const t=!!this.lead||r(this.element,"lead");const e=r(this.element,"image");const a=!e;const h={"stzh-pi-teaser":true,"stzh-pi-teaser--has-lead":t,"stzh-pi-teaser--has-image":e};return s(i,{"has-lead":t},s("article",{class:h,"aria-label":this.heading,role:"listitem"},s("div",{class:"stzh-pi-teaser__image"},s("stzh-ratio",{ratio:"2:1"},s("slot",{name:"image"}))),a&&s("stzh-ratio",{class:"stzh-pi-teaser__title-ratio",ratio:"2:1"},this.renderHeading()),s("div",{class:"stzh-pi-teaser__wrapper"},!a&&this.renderHeading(),s("div",{class:"stzh-pi-teaser__lead"},this.lead?this.lead:s("slot",{name:"lead"})),this.date&&s("div",{class:"stzh-pi-teaser__date"},this.date))))}get element(){return a(this)}};n.style=h;export{n as stzh_pi_teaser};
+//# sourceMappingURL=p-c3816fd3.entry.js.map

package/dist/stzh-components/{p-7aac960b.entry.js → p-ce6dbd52.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as e,a as o,g as h}from"./p-c7bfac7a.js";import{h as i}from"./p-7e304ea3.js";import{c}from"./p-9b063923.js";import{S as r}from"./p-fc692303.js";const n=".sc-stzh-checkboxgroup-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-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkboxgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::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-checkboxgroup-h .has-focus.sc-stzh-checkboxgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup{outline-style:none !important}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-checkboxgroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error60)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-top:0}}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);-moz-column-gap:var(--stzh-space-xxlarge);column-gap:var(--stzh-space-xxlarge)}";let a=0;const p=class{constructor(e){t(this,e);this.stzhChange=s(this,"stzhChange",7);this._value=[];this._preventUpdateProperties=[];this.handleReset=async()=>{this.value=[...this.defaultValue]};this.init=()=>{this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.updateCheckboxesProperty("a11y-describedby",`${this.checkboxgroupId}-description`);this.updateCheckboxesProperty("invalid",this.invalid||this.errorUsed);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchHideOptional(this.hideOptional)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.hideOptional=false;this.value="";this.defaultValue=[];this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.checkedCheckbox=null;this.preventUpdateProperties=[]}watchName(t){this.updateCheckboxesProperty("name",t)}watchDisabled(t){this.updateCheckboxesProperty("disabled",t)}watchHideOptional(t){this.updateCheckboxesProperty("hideOptional",t)}watchValue(t){if(typeof t==="string"){this._value=JSON.parse(t)}else{this._value=t}if(JSON.stringify(this._value)!==JSON.stringify(this.value)){this.value=this._value}this.updateCheckedCheckboxByValue(this._value)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}onChange(t){if(t.detail.component==="stzh-checkbox"){if(t.detail.checked){this._value.push(t.detail.value)}else{this._value=this._value.filter((s=>s!==t.detail.value))}t.stopPropagation();this.value=this._value;this.stzhChange.emit({component:"stzh-checkboxgroup",value:this._value})}}get errorUsed(){var t;return i(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0}updateCheckboxesProperty(t,s){this.checkboxes.forEach((e=>{if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){e[c(t)]=s}}))}updateCheckedCheckboxByValue(t){this.checkedCheckbox=this.checkboxes.filter((s=>t.indexOf(s.value)>-1));this.checkboxes.forEach((s=>s.checked=t.indexOf(s.value)>-1))}async componentWillLoad(){this.checkboxgroupId=`stzh-checkboxgroup-${a++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"checkboxgroup")}}componentShouldUpdate(t,s,e){return e!=="checkedCheckbox"}componentDidRender(){this.init()}componentDidLoad(){this.defaultValue=this.defaultValue.length>0?this.defaultValue:[...this._value]}connectedCallback(){if(!this.value.length){this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.value=this.checkboxes.filter((t=>t.checked)).map((t=>t.value))}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=i(this.element,"description")||!!this.description;const s=i(this.element,"description-long")||!!this.descriptionLong;const h={"stzh-checkboxgroup":true,"stzh-checkboxgroup--has-description":t,"stzh-checkboxgroup--has-description-long":s,"stzh-checkboxgroup--has-error":this.errorUsed,"stzh-checkboxgroup--is-disabled":this.disabled,"stzh-checkboxgroup--is-invalid":this.invalid||this.errorUsed,"stzh-checkboxgroup--hide-legend":this.hideLegend,[`stzh-checkboxgroup--direction-${this.direction}`]:!!this.direction};return e(o,{"is-invalid":this.invalid||this.errorUsed},e("fieldset",{class:h},this.legend&&e("legend",{class:"stzh-checkboxgroup__legend"},this.legend),e("div",{class:"stzh-checkboxgroup__fields"},e("slot",null)),e(r,{classPrefix:"stzh-checkboxgroup",id:`${this.checkboxgroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return h(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],hideOptional:["watchHideOptional"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};p.style=n;export{p as stzh_checkboxgroup};
-//# sourceMappingURL=p-7aac960b.entry.js.map
+import{r as t,c as s,h as e,a as o,g as h}from"./p-c7bfac7a.js";import{h as i}from"./p-e30a5acc.js";import{c}from"./p-9b063923.js";import{S as r}from"./p-fc692303.js";const n=".sc-stzh-checkboxgroup-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-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkboxgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::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-checkboxgroup-h .has-focus.sc-stzh-checkboxgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup{outline-style:none !important}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-checkboxgroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error60)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-top:0}}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);-moz-column-gap:var(--stzh-space-xxlarge);column-gap:var(--stzh-space-xxlarge)}";let a=0;const p=class{constructor(e){t(this,e);this.stzhChange=s(this,"stzhChange",7);this._value=[];this._preventUpdateProperties=[];this.handleReset=async()=>{this.value=[...this.defaultValue]};this.init=()=>{this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.updateCheckboxesProperty("a11y-describedby",`${this.checkboxgroupId}-description`);this.updateCheckboxesProperty("invalid",this.invalid||this.errorUsed);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchHideOptional(this.hideOptional)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.hideOptional=false;this.value="";this.defaultValue=[];this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.checkedCheckbox=null;this.preventUpdateProperties=[]}watchName(t){this.updateCheckboxesProperty("name",t)}watchDisabled(t){this.updateCheckboxesProperty("disabled",t)}watchHideOptional(t){this.updateCheckboxesProperty("hideOptional",t)}watchValue(t){if(typeof t==="string"){this._value=JSON.parse(t)}else{this._value=t}if(JSON.stringify(this._value)!==JSON.stringify(this.value)){this.value=this._value}this.updateCheckedCheckboxByValue(this._value)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}onChange(t){if(t.detail.component==="stzh-checkbox"){if(t.detail.checked){this._value.push(t.detail.value)}else{this._value=this._value.filter((s=>s!==t.detail.value))}t.stopPropagation();this.value=this._value;this.stzhChange.emit({component:"stzh-checkboxgroup",value:this._value})}}get errorUsed(){var t;return i(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0}updateCheckboxesProperty(t,s){this.checkboxes.forEach((e=>{if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){e[c(t)]=s}}))}updateCheckedCheckboxByValue(t){this.checkedCheckbox=this.checkboxes.filter((s=>t.indexOf(s.value)>-1));this.checkboxes.forEach((s=>s.checked=t.indexOf(s.value)>-1))}async componentWillLoad(){this.checkboxgroupId=`stzh-checkboxgroup-${a++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"checkboxgroup")}}componentShouldUpdate(t,s,e){return e!=="checkedCheckbox"}componentDidRender(){this.init()}componentDidLoad(){this.defaultValue=this.defaultValue.length>0?this.defaultValue:[...this._value]}connectedCallback(){if(!this.value.length){this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.value=this.checkboxes.filter((t=>t.checked)).map((t=>t.value))}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=i(this.element,"description")||!!this.description;const s=i(this.element,"description-long")||!!this.descriptionLong;const h={"stzh-checkboxgroup":true,"stzh-checkboxgroup--has-description":t,"stzh-checkboxgroup--has-description-long":s,"stzh-checkboxgroup--has-error":this.errorUsed,"stzh-checkboxgroup--is-disabled":this.disabled,"stzh-checkboxgroup--is-invalid":this.invalid||this.errorUsed,"stzh-checkboxgroup--hide-legend":this.hideLegend,[`stzh-checkboxgroup--direction-${this.direction}`]:!!this.direction};return e(o,{"is-invalid":this.invalid||this.errorUsed},e("fieldset",{class:h},this.legend&&e("legend",{class:"stzh-checkboxgroup__legend"},this.legend),e("div",{class:"stzh-checkboxgroup__fields"},e("slot",null)),e(r,{classPrefix:"stzh-checkboxgroup",id:`${this.checkboxgroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return h(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],hideOptional:["watchHideOptional"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};p.style=n;export{p as stzh_checkboxgroup};
+//# sourceMappingURL=p-ce6dbd52.entry.js.map