@oiz/stzh-components 4.0.0-beta3 → 4.0.1-beta

package/dist/stzh-components/{p-6b57e800.entry.js.map → p-29ff3759.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirkenStyle0","StzhSkinPortalMitwirken","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host","key"],"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,6k2OACnC,MAAAC,EAAeD,E,MCYFE,EAAuB,M,yBAClC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4C"}
+{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirkenStyle0","StzhSkinPortalMitwirken","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host","key"],"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,84mPACnC,MAAAC,EAAeD,E,MCYFE,EAAuB,M,yBAClC,gBAAAC,GAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,CAG3E,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4C"}

package/dist/stzh-components/{p-0971c453.entry.js → p-2b22da62.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,a,g as i}from"./p-ef5985a3.js";import{StzhSocialmediastreamItemActionVariant as s}from"./index.esm.js";const o=":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],:host[stzh-hidden]{display:none}: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}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80);}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}";const r=o;const c=class{constructor(e){t(this,e);this.init=()=>{this.itemWatcher(this.item)};this.item="";this.localization=undefined;this.dateAdapter=undefined}itemWatcher(t){if(!t){this._item=undefined}else if(typeof t==="string"){try{this._item=JSON.parse(t)}catch(t){this._item=undefined}}else{this._item=t}}getIconName(t){switch(t.channel){case"facebook":return"facebook";case"twitter":case"x":return"twitter";case"instagram":return"instagram";case"youtube":return"youtube";default:return"warning"}}getActionIconName(t){switch(t){case s.comments:return"facebook-comment";case s.likes:return"like-hand";case s.shares:return"share"}}getParsedDate(t){const e=new Date(t);if(isNaN(e.getTime())){return null}return e}connectedCallback(){this.init()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"socialmediastream-item")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}render(){const t={"stzh-socialmediastream-item":true};return e(a,{key:"d0d38e82f0566ad1e5d7b1047337be0afc09ebf6"},e("a",{key:"bb3791833ad0e743227a9b6d80e478429e2c2198",class:t,href:this._item.link,target:"_blank"},this._item.image&&e("div",{key:"dfbe111151965ee75e29fbaf2f421635ad8af625",class:"stzh-socialmediastream-item__image"},e("stzh-ratio",{key:"440d44f48a10091b3a03d08b7c36f83dd0fa41e2",ratio:"1:1"}),e("div",{key:"b76f8dce5ade82b505d7785aa8f3e2ef148d7f58",class:"stzh-socialmediastream-item__image-inner-wrapper"},e("img",{key:"40b90b2e5f9eb29bb2945b2ce6c51459a9c94323",src:this._item.image,alt:this._item.account.title}))),e("div",{key:"4f7288d877bfa62853a4622f54bbe73dd7480773",class:"stzh-socialmediastream-item__content"},e("div",{key:"387eef5ffe7e6f730d56af3dc37ec5dd71343ea8",class:"stzh-socialmediastream-item__content-head"},e("stzh-text",{key:"1e6cf71e83e3d11531e4394359a1ac7eb96c3570",size:"nano",class:"stzh-socialmediastream-item__content-title"},e("strong",{key:"595260b9ab1b2d5fd3ffa5e4438a4707af791066"},this._item.account.title),e("br",{key:"25270462d3b3fd4753d739d14ffc8fd9da3cf162"}),this.dateAdapter.format(this.getParsedDate(this._item.date),"dateInput")),e("stzh-icon",{key:"e8c9d3fa0469977581205be5cfc9df0a45fa3fec",name:this.getIconName(this._item)})),e("div",{key:"ac7fe169099d966c7e38887a0cc5b63bdba9c33c",class:"stzh-socialmediastream-item__content-body",innerHTML:this._item.text}),e("div",{key:"40e91fb81d0b50cd2475e6f6cf6c9d987aeba809",class:"stzh-socialmediastream-item__content-footer 1q23"},this._item.actions&&this._item.actions.map((t=>e("a",{href:t.url,title:t.title,class:"stzh-socialmediastream-item__action",target:"_blank"},e("stzh-icon",{name:this.getActionIconName(t.variant)}),t.count)))))))}get element(){return i(this)}static get watchers(){return{item:["itemWatcher"]}}};c.style=r;export{c as stzh_socialmediastream_item};
-//# sourceMappingURL=p-0971c453.entry.js.map
+import{r as t,h as e,a,g as i}from"./p-ef5985a3.js";import{StzhSocialmediastreamItemActionVariant as s}from"./index.esm.js";const o=":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],:host[stzh-hidden]{display:none}: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}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80);}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}";const r=o;const c=class{constructor(e){t(this,e);this.init=()=>{this.itemWatcher(this.item)};this.item="";this.localization=undefined;this.dateAdapter=undefined}itemWatcher(t){if(!t){this._item=undefined}else if(typeof t==="string"){try{this._item=JSON.parse(t)}catch(t){this._item=undefined}}else{this._item=t}}getIconName(t){switch(t.channel){case"facebook":return"facebook";case"twitter":case"x":return"twitter";case"instagram":return"instagram";case"youtube":return"youtube";default:return"warning"}}getActionIconName(t){switch(t){case s.comments:return"facebook-comment";case s.likes:return"like-hand";case s.shares:return"share"}}getParsedDate(t){const e=new Date(t);if(isNaN(e.getTime())){return null}return e}connectedCallback(){this.init()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"socialmediastream-item")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}render(){const t={"stzh-socialmediastream-item":true};return e(a,{key:"e7f3fb9d2144bef2d5286859074f362f9fd69f80"},e("a",{key:"b25d73abbf4980e0d128a04512b0bf69f533b684",class:t,href:this._item.link,target:"_blank"},this._item.image&&e("div",{key:"82d1444277d3e2400a46b9a04a7515f68b5d0d29",class:"stzh-socialmediastream-item__image"},e("stzh-ratio",{key:"ef5f6241799c23e04401536d8f6cf205cc4ff464",ratio:"1:1"}),e("div",{key:"5ded83cee583fd0c68eaad813a6b9133acd58a79",class:"stzh-socialmediastream-item__image-inner-wrapper"},e("img",{key:"c825fc5d0c2fc32ae8310e09b115a5d66c38f52b",src:this._item.image,alt:this._item.account.title}))),e("div",{key:"325bbbec6db81cd162c202e1db3d081a0a9bc90a",class:"stzh-socialmediastream-item__content"},e("div",{key:"bb430c5d0d6da2b71ed5683c4ec95dff3a9afddb",class:"stzh-socialmediastream-item__content-head"},e("stzh-text",{key:"7aa2374ae540a323a58a3e2981c77ea9f4d1953b",size:"nano",class:"stzh-socialmediastream-item__content-title"},e("strong",{key:"d6f8340db17ae3b8c5bb5eb694db94aac767b791"},this._item.account.title),e("br",{key:"b6f7af663bcda2f17bec69e016c0ef8568c19e88"}),this.dateAdapter.format(this.getParsedDate(this._item.date),"dateInput")),e("stzh-icon",{key:"c3aad8d18ca03df7ce5944d5f70e54826415cfbf",name:this.getIconName(this._item)})),e("div",{key:"326a2cc358d734650d8f0b868b4cceff2f6de79a",class:"stzh-socialmediastream-item__content-body",innerHTML:this._item.text}),e("div",{key:"4b15cf37d4255fd2a5b2a0b65ac29b8376936f24",class:"stzh-socialmediastream-item__content-footer 1q23"},this._item.actions&&this._item.actions.map((t=>e("a",{href:t.url,title:t.title,class:"stzh-socialmediastream-item__action",target:"_blank"},e("stzh-icon",{name:this.getActionIconName(t.variant)}),t.count)))))))}get element(){return i(this)}static get watchers(){return{item:["itemWatcher"]}}};c.style=r;export{c as stzh_socialmediastream_item};
+//# sourceMappingURL=p-2b22da62.entry.js.map

package/dist/stzh-components/{p-e5935628.entry.js → p-3edb8127.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as e,h as t,F as a,a as i,g as r}from"./p-ef5985a3.js";import{a as h}from"./p-1b0f45c6.js";import{r as n,h as c}from"./p-24caf6c1.js";import{m as d,a as l,r as o}from"./p-f4adb3cd.js";import{d as m}from"./p-6997324b.js";import"./p-dae15605.js";import"./p-1ab64d01.js";const f=':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],:host[stzh-hidden]{display:none}: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}stzh-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:"filters-main filters-main filters-main filters-main" "results results results results"}stzh-search[hidden],stzh-search[stzh-hidden]{display:none}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside" "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant=teaser]:not([has-aside-filters])),stzh-search:where([fullwidth=true]:not([has-aside-filters])){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results results results results results"}}.stzh-search{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__header-heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-large);background-color:var(--filter-background-color)}@media screen and (min-width: 600px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-large);background-color:var(--filter-background-color)}@media screen and (min-width: 600px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xxsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid;--stzh-datalist-grid-template-areas:"list list list list list list list list"}.stzh-search__results-header{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-search__results-header{flex-direction:row;align-items:center}}.stzh-search__results-sort{display:flex}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__filters-main-chips{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-large)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-sort,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}.stzh-search--is-breakout{--filter-background-color:var(--stzh-color-cobaltblue20);background-color:var(--stzh-color-white)}.stzh-search--is-breakout .stzh-search{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header-wrapper{background-color:var(--stzh-color-cobaltblue20)}.stzh-search--is-breakout .stzh-search__filters-main{padding-left:1.25rem;padding-right:1.25rem;position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-large);background-color:var(--stzh-color-cobaltblue20);display:flex;justify-content:space-between}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxxlarge)}}';const z=f;function p(s,e){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      hyphens-enabled="${this.hyphensEnabled}"\n      ${e.eventDateStart&&'event-date-start="{eventDateStart}"'}\n      ${e.eventDateEnd&&'event-date-end="{eventDateEnd}"'}\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${e.imagePosition&&'image-position="{imagePosition}"'}\n      ${e.download&&'download="{download}"'}\n      style="\n        ${e.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${e.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${e.image?e.imagePosition==="right"?`<img src="${e.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${e.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function u(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const g=class{constructor(t){s(this,t);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this._sortOptions=[];this._showMoreLink=false;this.fetch=async(s=false,e=false)=>{var t,a;this.loading=true;this.error="";if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}let i=this.api.replace(/\{lang\}/gi,this.localization.$locale);let r=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(e){const s=new URLSearchParams(location.search).get("search");if(s){const e=new URLSearchParams(s).get("limit");if(e){r=e}}}this.params.set("limit",r);this.currentController=new AbortController;let n={};try{const s=await h(i,{params:this.params,signal:this.currentController.signal});n=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=n.resultsHeading||"";this.resultsText=n.resultsText||"";this.totalCount=((t=n.meta)===null||t===void 0?void 0:t.total)||0;if(n.error){this.error=n.message||this.localization.error}if(n.chipResults&&n.chipResults.length){this.chipResultsHeading=(a=n.chipResultsHeading)!==null&&a!==void 0?a:"";this.chipResults=n.chipResults}else{this.chipResultsHeading="";this.chipResults=[]}if(n.results){if(s){this.results=[...this.results,...n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))]}else{this.results=n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))}}if(!e&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const e=new URLSearchParams(this.params);e.delete("offset");e.set("limit",this.results.length.toString());s.set("search",e.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(e||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=m(this.fetch,this.debounceTime);this.onDropdownSortChange=async s=>{const e=s.target;const t=await e.getValue();if(t){this._sortBy=t}await this.updateParams();this.debouncedFetch()};this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=d("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.localization=undefined;this.variant="default";this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.hideResultsHeading=false;this.sortBy=undefined;this.sortOptions=[];this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.hyphensEnabled=false;this.templateResult=p;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=u;this.resultHeadingLevel="3";this.emptyText=undefined;this.heading=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.subscribeLabel="Subscribe";this.subscribePath=undefined;this.subscribeAdditionalQueryParameters=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.chipResultsHeading=undefined;this.chipResults=[];this.resultsHeading=undefined;this.resultsText=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false;this.isStzhAnchornavVisible=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}sortOptionsWatcher(s){if(typeof s==="string"){this._sortOptions=JSON.parse(s)}else{this._sortOptions=s}}sortByWatcher(s){if(typeof s==="string"){this._sortBy=s}else{this._sortBy=undefined}}renderResultTemplate(s,e){let t=s||(typeof this.templateResult==="function"?this.templateResult(this.element,e):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","eventDateStart","eventDateEnd","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=e[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}t=t.replace(a,i)}));return t}async updateParams(s=false){const e=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);let e=s.get("search");const t=s.get("q");const a=s.get("query");if(!e){if(a){e=`query=${a}`}else if(t){e=`q=${t}`}}if(e){this.initialFetch=true;const s=new URLSearchParams(e);[...new Set(s.keys())].forEach((e=>{const t=s.getAll(e);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${e}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${e}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${e}"]`));a.forEach((s=>{s.value=t[0]}));i.forEach((s=>{s.value=t}));r.forEach((s=>{s.items=t}))}))}}await n();e();let t=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const h=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const c=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));c.forEach((e=>{const a=!e.checked;if(!s){e.invalid=a}if(a){t=false}}));a.forEach((e=>{const a=e.value===""||e.minlength&&e.minlength>e.value.length||e.maxlength&&e.maxlength<e.value.length;if(!s){e.invalid=a}if(a){t=false}}));i.forEach((e=>{const a=e.items.length===0;if(!s){e.invalid=a}if(a){t=false}}));h.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalid=a}if(a){t=false}}));r.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalidYear=a;e.invalidMonth=a}if(a){t=false}}));this.hasRequiredParams=t}async componentDidLoad(){this.isStzhAnchornavVisible=document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible")==="1";await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}this.isStzhAnchornavVisible=document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible")==="1";this.sortOptionsWatcher(this.sortOptions);this.sortByWatcher(this.sortBy)}connectedCallback(){l(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){o(this.handleMediaChange)}renderResultsText(){return t("stzh-text",{class:"stzh-search__results-text",color:"primary",innerHTML:this.resultsText})}renderSubscribeButton(){const s=new URLSearchParams;let e=this.subscribeAdditionalQueryParameters;if(typeof this.subscribeAdditionalQueryParameters==="string"){try{e=JSON.parse(this.subscribeAdditionalQueryParameters)}catch(s){}}for(const t of e){for(const[e,a]of Object.entries(t)){if(a){s.set(e,a)}}}const a=new URLSearchParams(window.location.search);const i=a.get("search");if(i){const e=new URLSearchParams(i);for(const[t,a]of e.entries()){if(["variant","limit"].indexOf(t)===-1&&a){s.append(t,a)}}}const r=`${this.subscribePath}?${s.toString()}`;return t("div",{class:"stzh-search__results-subscribe"},t("stzh-button",{variant:"secondary",size:"small",href:r},this.subscribeLabel))}render(){const s=c(this.element,"filters-main");const e=c(this.element,"filters-aside");let r=true;if(s){const s=this.element.querySelector("[slot='filters-main'] stzh-chipselect");const e=this.element.querySelector("[slot='filters-main'] stzh-chipgroup");if(!s&&!e){r=false}}else{r=false}const h=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const n={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":e,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":h,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const d=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const l=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(i,{key:"04b14cd63060feec9fa81f04ef167b2b3952fb02","has-aside-filters":e,fullwidth:this.isStzhAnchornavVisible.toString()},t("form",{key:"bdeb6bacdcedb642a0bc5b81c17dbe2bf94c8ab7",ref:s=>this.formElement=s,novalidate:true,class:n,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{key:"78ff3d89431bc547932b28c2d730ffe80391cd86",class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},!!this.heading&&t("stzh-heading",{key:"d6120207362a2712503d8feae1baaaca7a4827bc",class:"stzh-search__header-heading",curve:"h2"},this.heading),t("slot",{key:"736d817eccb4e13d69b86eabc6addc2ba5a33f69",name:"filters-main"}),!r&&this.chipResults.length>0&&t("div",{key:"4eed32976365beb6056ae8210f79db724e51593c",class:"stzh-search__filters-main-chips"},this.chipResultsHeading&&t("stzh-text",{key:"754c958ebd601b3fc89d947bffcfe59d1aa78703",font:"heavy",size:"milli",color:"primary"},this.chipResultsHeading),this.chipResults[0].options?t("stzh-chipgroup",null,this.chipResults.map((s=>t("stzh-dropdown",{label:s.label,name:s.value,variant:"filter",size:"large","no-search":true,"hide-optional":true,inline:true,options:s.options})))):t("stzh-chipselect",{multiple:true,name:"subject",label:this.chipResultsHeading,"label-hidden":true,data:this.chipResults.map((s=>({label:s.label,value:s.value,counter:`${s.amount}`,variant:"filter",size:"large"})))}))),e&&t(a,{key:"62f681a61516414f96c7edb21a13896b0564b7ce"},t("div",{key:"107ec7f0d0c1da7e17bc3dd923f92e9936448218",class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{key:"3fead9696cad86a188d41d36448bea140de36ab8",class:"stzh-search__filters-aside-inner"},t("div",{key:"a04a8ff65ab54b5403e19d647e2878c5034dc154",class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{key:"e10a75fb5b35741d2aee9b15e955b75708c53cdb",open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{key:"b91f91478132b20f80e9ceb68e13f5b2dd545a71",class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{key:"442243f983c87358ea8130861697a682d3b4c2b3",slot:"content"},t("slot",{key:"817c99137fb4c507b9b79cb90022214b1b0b47d4",name:"filters-aside"})))))),t("div",{key:"00a76515982c55455a90ffadfdb2c2671d995dab",class:"stzh-search__results-wrapper"},h&&t(a,{key:"3828982de0b708e276e6837a4fd098d5f38bc9e7"},this.results.length===0?t(a,null,this.variant!=="teaser"&&this.resultsHeading&&!this.hideResultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.resultsText&&this.renderResultsText(),this.subscribePath&&this.renderSubscribeButton(),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(a,null,t("div",{class:"stzh-search__results-header"},this.variant!=="teaser"&&this.resultsHeading&&!this.hideResultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,htmlContent:this.resultsHeading}),this._sortOptions.length>0&&t("div",{class:"stzh-search__results-sort"},t("stzh-dropdown",{"hide-optional":true,inline:true,"no-search":true,"no-wrap":true,class:"stzh-search__results-sort-dropdown",variant:"plain",size:"small",sizeMedium:"tiny",name:"sortby",items:[this._sortBy],options:this._sortOptions,onStzhChange:this.onDropdownSortChange}))),this.resultsText&&this.renderResultsText(),this.subscribePath&&this.renderSubscribeButton(),t(d,Object.assign({class:"stzh-search__results","max-3-columns":e},l),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,disabled:this.loading,a11yDisabled:this.loading})))),this.error&&t("div",{key:"d75bb2c631a5f76f405b29f8b5042a6d9f2d6467",class:"stzh-search__error"},t("stzh-message",{key:"5fc3748a4f51db659b63c90ecb461d6ad15fb6c0",type:"error",label:this.error})),this.loading&&t("stzh-loader",{key:"15719c5aa201ed8e06b97b73ab61b1481f17950a",class:"stzh-search__loader"})),t("slot",{key:"ac7cbd25af23a283c45c4018f9538eb76809b8b9"})))}get element(){return r(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"],sortOptions:["sortOptionsWatcher"],sortBy:["sortByWatcher"]}}};g.style=z;export{g as stzh_search};
-//# sourceMappingURL=p-e5935628.entry.js.map
+import{r as s,c as e,h as t,F as a,a as i,g as r}from"./p-ef5985a3.js";import{a as h}from"./p-1b0f45c6.js";import{r as n,h as c}from"./p-24caf6c1.js";import{m as d,a as l,r as o}from"./p-f4adb3cd.js";import{d as m}from"./p-6997324b.js";import"./p-dae15605.js";import"./p-1ab64d01.js";const f=':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],:host[stzh-hidden]{display:none}: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}stzh-search{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;--filter-background-color:var(--stzh-search-filter-background-color, var(--stzh-color-grey10));--grid-template-areas:"filters-main filters-main filters-main filters-main" "results results results results"}stzh-search[hidden],stzh-search[stzh-hidden]{display:none}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside" "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside" "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=false]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant=teaser]:not([has-aside-filters])),stzh-search:where([fullwidth=true]:not([has-aside-filters])){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main" "results results results results results results results results results results results results"}}.stzh-search{column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__header-heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__header-heading{margin-bottom:var(--stzh-space-xlarge)}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-large);background-color:var(--filter-background-color)}@media screen and (min-width: 600px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-large);background-color:var(--filter-background-color)}@media screen and (min-width: 600px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xxsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid;--stzh-datalist-grid-template-areas:"list list list list list list list list"}.stzh-search__results-header{display:flex;flex-direction:column}@media screen and (min-width: 900px){.stzh-search__results-header{flex-direction:row;align-items:center}}.stzh-search__results-sort{display:flex}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-text,.stzh-search__results-sort,.stzh-search__results-subscribe{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-heading{margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__filters-main-chips{margin-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main-chips{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-large)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-sort,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}.stzh-search--is-breakout{--filter-background-color:var(--stzh-color-cobaltblue20);background-color:var(--stzh-color-white)}.stzh-search--is-breakout .stzh-search{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header-wrapper{background-color:var(--stzh-color-cobaltblue20)}.stzh-search--is-breakout .stzh-search__filters-main{padding-left:1.25rem;padding-right:1.25rem;position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:4rem;padding-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__filters-main{padding-left:calc((100vw - 84.25rem) / 2);padding-right:calc((100vw - 84.25rem) / 2)}}.stzh-search--is-breakout .stzh-search__header{margin-left:1.25rem;margin-right:1.25rem;padding-top:var(--stzh-space-large);background-color:var(--stzh-color-cobaltblue20);display:flex;justify-content:space-between}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-search--is-breakout .stzh-search__header{margin-left:auto;margin-right:auto;max-width:84.25rem}}@media screen and (min-width: 600px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--is-breakout .stzh-search__header{padding-top:var(--stzh-space-xxxlarge)}}';const z=f;function p(s,e){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      hyphens-enabled="${this.hyphensEnabled}"\n      ${e.eventDateStart&&'event-date-start="{eventDateStart}"'}\n      ${e.eventDateEnd&&'event-date-end="{eventDateEnd}"'}\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${e.imagePosition&&'image-position="{imagePosition}"'}\n      ${e.download&&'download="{download}"'}\n      style="\n        ${e.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${e.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${e.image?e.imagePosition==="right"?`<img src="${e.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${e.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function u(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const g=class{constructor(t){s(this,t);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this._sortOptions=[];this._showMoreLink=false;this.fetch=async(s=false,e=false)=>{var t,a;this.loading=true;this.error="";if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}let i=this.api.replace(/\{lang\}/gi,this.localization.$locale);let r=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(e){const s=new URLSearchParams(location.search).get("search");if(s){const e=new URLSearchParams(s).get("limit");if(e){r=e}}}this.params.set("limit",r);this.currentController=new AbortController;let n={};try{const s=await h(i,{params:this.params,signal:this.currentController.signal});n=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=n.resultsHeading||"";this.resultsText=n.resultsText||"";this.totalCount=((t=n.meta)===null||t===void 0?void 0:t.total)||0;if(n.error){this.error=n.message||this.localization.error}if(n.chipResults&&n.chipResults.length){this.chipResultsHeading=(a=n.chipResultsHeading)!==null&&a!==void 0?a:"";this.chipResults=n.chipResults}else{this.chipResultsHeading="";this.chipResults=[]}if(n.results){if(s){this.results=[...this.results,...n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))]}else{this.results=n.results.map((s=>{var e;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((e=n.templates)===null||e===void 0?void 0:e.result),s)})}))}}if(!e&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const e=new URLSearchParams(this.params);e.delete("offset");e.set("limit",this.results.length.toString());s.set("search",e.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(e||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=m(this.fetch,this.debounceTime);this.onDropdownSortChange=async s=>{const e=s.target;const t=await e.getValue();if(t){this._sortBy=t}await this.updateParams();this.debouncedFetch()};this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=d("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.localization=undefined;this.variant="default";this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.hideResultsHeading=false;this.sortBy=undefined;this.sortOptions=[];this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.hyphensEnabled=false;this.templateResult=p;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=u;this.resultHeadingLevel="3";this.emptyText=undefined;this.heading=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.subscribeLabel="Subscribe";this.subscribePath=undefined;this.subscribeAdditionalQueryParameters=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.chipResultsHeading=undefined;this.chipResults=[];this.resultsHeading=undefined;this.resultsText=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false;this.isStzhAnchornavVisible=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}sortOptionsWatcher(s){if(typeof s==="string"){this._sortOptions=JSON.parse(s)}else{this._sortOptions=s}}sortByWatcher(s){if(typeof s==="string"){this._sortBy=s}else{this._sortBy=undefined}}renderResultTemplate(s,e){let t=s||(typeof this.templateResult==="function"?this.templateResult(this.element,e):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","eventDateStart","eventDateEnd","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=e[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}t=t.replace(a,i)}));return t}async updateParams(s=false){const e=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);let e=s.get("search");const t=s.get("q");const a=s.get("query");if(!e){if(a){e=`query=${a}`}else if(t){e=`q=${t}`}}if(e){this.initialFetch=true;const s=new URLSearchParams(e);[...new Set(s.keys())].forEach((e=>{const t=s.getAll(e);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${e}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${e}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${e}"]`));a.forEach((s=>{s.value=t[0]}));i.forEach((s=>{s.value=t}));r.forEach((s=>{s.items=t}))}))}}await n();e();let t=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const h=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const c=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));c.forEach((e=>{const a=!e.checked;if(!s){e.invalid=a}if(a){t=false}}));a.forEach((e=>{const a=e.value===""||e.minlength&&e.minlength>e.value.length||e.maxlength&&e.maxlength<e.value.length;if(!s){e.invalid=a}if(a){t=false}}));i.forEach((e=>{const a=e.items.length===0;if(!s){e.invalid=a}if(a){t=false}}));h.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalid=a}if(a){t=false}}));r.forEach((e=>{const a=e.value.toString().length===0;if(!s){e.invalidYear=a;e.invalidMonth=a}if(a){t=false}}));this.hasRequiredParams=t}async componentDidLoad(){this.isStzhAnchornavVisible=document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible")==="1";await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}this.isStzhAnchornavVisible=document.documentElement.style.getPropertyValue("--stzh-anchornav-is-visible")==="1";this.sortOptionsWatcher(this.sortOptions);this.sortByWatcher(this.sortBy)}connectedCallback(){l(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){o(this.handleMediaChange)}renderResultsText(){return t("stzh-text",{class:"stzh-search__results-text",color:"primary",innerHTML:this.resultsText})}renderSubscribeButton(){const s=new URLSearchParams;let e=this.subscribeAdditionalQueryParameters;if(typeof this.subscribeAdditionalQueryParameters==="string"){try{e=JSON.parse(this.subscribeAdditionalQueryParameters)}catch(s){}}for(const t of e){for(const[e,a]of Object.entries(t)){if(a){s.set(e,a)}}}const a=new URLSearchParams(window.location.search);const i=a.get("search");if(i){const e=new URLSearchParams(i);for(const[t,a]of e.entries()){if(["variant","limit"].indexOf(t)===-1&&a){s.append(t,a)}}}const r=`${this.subscribePath}?${s.toString()}`;return t("div",{class:"stzh-search__results-subscribe"},t("stzh-button",{variant:"secondary",size:"small",href:r},this.subscribeLabel))}render(){const s=c(this.element,"filters-main");const e=c(this.element,"filters-aside");let r=true;if(s){const s=this.element.querySelector("[slot='filters-main'] stzh-chipselect");const e=this.element.querySelector("[slot='filters-main'] stzh-chipgroup");if(!s&&!e){r=false}}else{r=false}const h=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const n={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":e,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":h,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const d=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const l=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(i,{key:"c674f925f42a86a2325126c2d4dff957ba3e1328","has-aside-filters":e,fullwidth:this.isStzhAnchornavVisible.toString()},t("form",{key:"194bb64ff606903c181548538f18a7094b1a38f6",ref:s=>this.formElement=s,novalidate:true,class:n,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{key:"d023ef1594df804d1646b02d517819b3ac39e313",class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},!!this.heading&&t("stzh-heading",{key:"56c3589649ebe805514dc147419ddafa6152b7b3",class:"stzh-search__header-heading",curve:"h2"},this.heading),t("slot",{key:"a6269f252a873fdee21bd8621a03792132e12dc8",name:"filters-main"}),!r&&this.chipResults.length>0&&t("div",{key:"7443fbd9e8deea64102ba759ac5e34b659125181",class:"stzh-search__filters-main-chips"},this.chipResultsHeading&&t("stzh-text",{key:"468937cc2eb83d47fc8ea084ea4f54ce15f94c90",font:"heavy",size:"milli",color:"primary"},this.chipResultsHeading),this.chipResults[0].options?t("stzh-chipgroup",null,this.chipResults.map((s=>t("stzh-dropdown",{label:s.label,name:s.value,variant:"filter",size:"large","no-search":true,"hide-optional":true,inline:true,options:s.options})))):t("stzh-chipselect",{multiple:true,name:"subject",label:this.chipResultsHeading,"label-hidden":true,data:this.chipResults.map((s=>({label:s.label,value:s.value,counter:`${s.amount}`,variant:"filter",size:"large"})))}))),e&&t(a,{key:"74f5fe22505a2a0edddf67845febb9a62eb51138"},t("div",{key:"4f6a96dd6d0d6b5aa86958c88c14597c8cf72bf6",class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{key:"8d250de88a52ee3f462946563828c053ba58e496",class:"stzh-search__filters-aside-inner"},t("div",{key:"ebe5bd60cb7eb87e25840482eb8dbc6ee5e09db5",class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{key:"dbb87cfa02364039bd2440d3adb4c1dfa47911d1",open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{key:"2644dfe13e26cbe61cfd2f8be8bbcf37d5bfb507",class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{key:"57748cfc1d3afa41ace39f41e527857cab0977de",slot:"content"},t("slot",{key:"165ca236789b8440f4919be9c095ca085df69692",name:"filters-aside"})))))),t("div",{key:"f22e24207b3c95c233a1f49db2e76ca8651579f7",class:"stzh-search__results-wrapper"},h&&t(a,{key:"87e63ea254dc2a9ec9a340644840259ce3de3218"},this.results.length===0?t(a,null,this.variant!=="teaser"&&this.resultsHeading&&!this.hideResultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.resultsText&&this.renderResultsText(),this.subscribePath&&this.renderSubscribeButton(),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(a,null,t("div",{class:"stzh-search__results-header"},this.variant!=="teaser"&&this.resultsHeading&&!this.hideResultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,htmlContent:this.resultsHeading}),this._sortOptions.length>0&&t("div",{class:"stzh-search__results-sort"},t("stzh-dropdown",{"hide-optional":true,inline:true,"no-search":true,"no-wrap":true,class:"stzh-search__results-sort-dropdown",variant:"plain",size:"small",sizeMedium:"tiny",name:"sortby",items:[this._sortBy],options:this._sortOptions,onStzhChange:this.onDropdownSortChange}))),this.resultsText&&this.renderResultsText(),this.subscribePath&&this.renderSubscribeButton(),t(d,Object.assign({class:"stzh-search__results","max-3-columns":e},l),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,disabled:this.loading,a11yDisabled:this.loading})))),this.error&&t("div",{key:"e942f4732330748b1c58807646208fae7542d6fe",class:"stzh-search__error"},t("stzh-message",{key:"6ef273c26a7977901223d9ed8264051f37662488",type:"error",label:this.error})),this.loading&&t("stzh-loader",{key:"b6a84ee18dbd3f6e7c77b6d48c141c6e9e987910",class:"stzh-search__loader"})),t("slot",{key:"e25476df1dcd0156b8d9d35f1d572e590fbe9597"})))}get element(){return r(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"],sortOptions:["sortOptionsWatcher"],sortBy:["sortByWatcher"]}}};g.style=z;export{g as stzh_search};
+//# sourceMappingURL=p-3edb8127.entry.js.map

package/dist/stzh-components/p-43390ffd.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,a,g as e,F as l}from"./p-ef5985a3.js";import{m as h,a as d,r as n}from"./p-f4adb3cd.js";import{d as o}from"./p-24caf6c1.js";import"./p-dae15605.js";const r='.sc-stzh-datalist-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-datalist-h,[stzh-hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::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-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      "list list list list"\n  );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        "list list list list"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        "list list list list list list list list"\n    );--grid-template-columns:var(\n        --stzh-datalist-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h.sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h.sc-stzh-datalist-s>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=""]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=""]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=""]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=""]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--stzh-datalist-item-wrapper-display:flex;--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}@media screen and (max-width: 599px){.stzh-datalist--table.stzh-datalist--big-label.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{--list-display:flex;flex-direction:column;gap:var(--stzh-space-xxxsmall)}}';const c=r;const m=class{constructor(i){t(this,i);this.stzhVariantChange=s(this,"stzhVariantChange",7);this.stzhBigLabelChange=s(this,"stzhBigLabelChange",7);this.stzhDirectionChange=s(this,"stzhDirectionChange",7);this._items=[];this.setCurrentDirection=()=>{if(h("ultra").matches&&this.directionUltra){this.currentDirection=this.directionUltra}else if(h("large").matches&&this.directionLarge){this.currentDirection=this.directionLarge}else if(h("medium").matches&&this.directionMedium){this.currentDirection=this.directionMedium}else if(h("small").matches&&this.directionSmall){this.currentDirection=this.directionSmall}else{this.currentDirection=this.direction}};this.setCurrentColumns=()=>{if(h("ultra").matches&&this.columnsUltra){this.currentColumns=this.columnsUltra}else if(h("large").matches&&this.columnsLarge){this.currentColumns=this.columnsLarge}else if(h("medium").matches&&this.columnsMedium){this.currentColumns=this.columnsMedium}else if(h("small").matches&&this.columnsSmall){this.currentColumns=this.columnsSmall}else{this.currentColumns=this.columns}};this.resizeHandler=()=>{this.setCurrentDirection();this.setCurrentColumns()};this.variant="default";this.bigLabel=false;this.columns=1;this.columnsSmall=undefined;this.columnsMedium=undefined;this.columnsLarge=undefined;this.columnsUltra=undefined;this.direction="vertical";this.directionSmall=undefined;this.directionMedium=undefined;this.directionLarge=undefined;this.directionUltra=undefined;this.items=[];this.currentColumns=1;this.currentDirection=undefined}directionWatcher(){this.setCurrentDirection()}columnsWatcher(){this.setCurrentColumns()}currentDirectionWatcher(t){this.stzhDirectionChange.emit({component:"stzh-datalist",value:t})}variantWatcher(t){this.stzhVariantChange.emit({component:"stzh-datalist",value:t})}bigLabelWatcher(t){this.stzhBigLabelChange.emit({component:"stzh-datalist",value:t})}itemsWatcher(t){if(typeof t==="string"){this._items=JSON.parse(t)}else{this._items=t}}async getCurrentDirection(){return this.currentDirection}async componentWillLoad(){this.itemsWatcher(this.items);this.bigLabelWatcher(this.bigLabel);this.resizeHandler()}connectedCallback(){d(this.resizeHandler)}disconnectedCallback(){n(this.resizeHandler)}render(){const t={"stzh-datalist":true,"stzh-datalist--has-multiple-columns":this.currentColumns>1,"stzh-datalist--big-label":this.bigLabel,[`stzh-datalist--direction-${this.currentDirection}`]:!!this.currentDirection,[`stzh-datalist--${this.variant}`]:!!this.variant};return i(a,{key:"0bdddc392ebfcd52b8bcb2e96ae0b3bc6184f2e6","is-direction":this.currentDirection,style:{"--columns":this.currentColumns?this.currentColumns.toString():null}},i("div",{key:"2d20560299296dbc05d0599cd73aacda298acf63",class:t},i("div",{key:"eac7721b52975576e6e97b827cd1c16c34622946",class:"stzh-datalist__wrapper"},i("div",{key:"f182ab8b45b155ebadc4b63425eb3d616dcf0131",class:"stzh-datalist__list",role:"list"},this._items.map((t=>i("stzh-datalist-item",Object.assign({},t),t.items&&t.items.length>0&&i("stzh-datalist",{items:t.items})))),i("slot",{key:"f1fcc75fa2468bb4056a8f540d05e210fa1c83c3"})))))}get element(){return e(this)}static get watchers(){return{direction:["directionWatcher"],directionSmall:["directionWatcher"],directionMedium:["directionWatcher"],directionLarge:["directionWatcher"],directionUltra:["directionWatcher"],columns:["columnsWatcher"],columnsSmall:["columnsWatcher"],columnsMedium:["columnsWatcher"],columnsLarge:["columnsWatcher"],columnsUltra:["columnsWatcher"],currentDirection:["currentDirectionWatcher"],variant:["variantWatcher"],bigLabel:["bigLabelWatcher"],items:["itemsWatcher"]}}};m.style=c;const z='.sc-stzh-datalist-item-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-datalist-item-h,[stzh-hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::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-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);--text-overflow:clip;--white-space:normal;--overflow:visible;--width:initial;--max-width:initial;display:contents}[href].sc-stzh-datalist-item-h:not([href=""]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.value-truncate.sc-stzh-datalist-item-h{--text-overflow:ellipsis;--white-space:nowrap;--overflow:hidden;--max-width:100%}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column;min-width:0}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;min-width:0;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);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{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-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item__readspeaker.sc-stzh-datalist-item{width:-moz-fit-content;width:fit-content}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:inherit}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__readspeaker.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:var(--stzh-space-xxsmall);padding-left:var(--stzh-space-medium)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{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)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{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-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-color-grey80)}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:0;padding-bottom:0}@media screen and (min-width: 600px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}}.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}@media screen and (max-width: 599px){.stzh-datalist-item--table.stzh-datalist-item--big-label.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:0}}';const u=z;let p=0;const f=class{constructor(i){t(this,i);this.stzhItemActionClick=s(this,"stzhItemActionClick",7);this.stzhClick=s(this,"stzhClick",7);this._meta=[];this.external=false;this.isPhone=false;this.onActionClick=t=>{this.stzhItemActionClick.emit({component:"stzh-datalist-item",originalEvent:t})};this.onClick=t=>{this.stzhClick.emit({component:"stzh-datalist-item",originalEvent:t,href:this.href})};this.handleDirectionChange=t=>{this.direction=t.detail.value};this.handleVariantChange=t=>{this.variant=t.detail.value};this.handleBigLabelChange=t=>{this.bigLabel=t.detail.value};this.localization=undefined;this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.leadingIcon=undefined;this.icon=undefined;this.iconPosition="right";this.iconLabel=undefined;this.iconTooltip=undefined;this.iconHref=undefined;this.label="";this.value="";this.valueTruncate=false;this.readspeakerLabel="";this.readspeakerHref="";this.meta="";this.statusLabel="";this.statusType="default";this.a11yExpanded=undefined;this.a11yControls=undefined;this.direction="vertical";this.variant="default";this.bigLabel=false}metaWatcher(t){if(typeof t==="string"){try{this._meta=JSON.parse(t)}catch(s){this._meta=t===""?[]:[t]}}else{this._meta=t}}externalWatcher(){this.external=this.rel&&this.rel.includes("external")}hrefWatcher(){this.isPhone=this.href&&(this.href.startsWith("tel:")||this.href.startsWith("fax:"))}addWordBreakToLinks(){var t;const s=Array.from(((t=this.element)===null||t===void 0?void 0:t.getElementsByClassName("stzh-datalist-item__value-text"))||[]);o(s)}renderInner(t,s){const a=t?"button":this.href?"a":"div";const e=()=>i(l,null,(this.href||this.icon)&&!s&&!t&&i("div",{class:"stzh-datalist-item__label-icon"},i("stzh-icon",{class:"stzh-datalist-item__icon",name:this.icon?this.icon:this.isPhone?"phone":this.external&&"external-link"})),t&&i("div",{class:"stzh-datalist-item__label-icon"},i("stzh-icon",{class:"stzh-datalist-item__icon is-closed",name:this.icon?this.icon:"plus"}),i("stzh-icon",{class:"stzh-datalist-item__icon is-open",name:this.icon?this.icon:"minus"})));return i(l,null,this.variant==="table"&&i(a,{"aria-hidden":this.label?null:"true",tabindex:"-1",id:`${this.datalistItemId}-label`,class:{"stzh-datalist-item__label":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.label),i(a,{id:`${this.datalistItemId}-value`,class:{"stzh-datalist-item__value":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,"aria-labelledby":a!=="div"?`${this.variant==="table"?`${this.datalistItemId}-label`:""} ${this.datalistItemId}-value ${this.datalistItemId}-meta`:null,"aria-controls":this.a11yControls||null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,onClick:this.onClick},this.variant==="default"&&i("div",{class:"stzh-datalist-item__label"},this.label),this.external&&i("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&i("div",{class:"stzh-datalist-item__vhidden"},this.localization.$globals.downloadLinkLabel),i("div",{class:"stzh-datalist-item__value-wrapper"},this.iconPosition==="left"&&i(e,null),this.value?i("stzh-text",{curve:"none",class:"stzh-datalist-item__value-text",innerHTML:this.value}):i("stzh-text",{curve:"none",class:"stzh-datalist-item__value-text"},i("slot",{name:"value"})),this.iconPosition==="right"&&i(e,null))),i(a,{"aria-hidden":this.statusLabel||this._meta.length>0?null:"true",tabindex:"-1",id:`${this.datalistItemId}-meta`,class:{"stzh-datalist-item__meta":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.statusLabel&&i("stzh-status",{class:"stzh-datalist-item__meta-status",label:this.statusLabel,type:this.statusType}),this._meta.length>0&&i("span",{class:"stzh-datalist-item__meta-text"},this._meta.map(((t,s)=>i(l,null,i("span",{class:"stzh-datalist-item__meta-text-inner"},t),s+1!==this._meta.length&&i("span",{class:"stzh-datalist-item__meta-separator"},"|")))))),this.readspeakerHref&&this.readspeakerLabel&&i("stzh-button",{class:"stzh-datalist-item__readspeaker",variant:"tertiary-plain","no-padding-left":"true","no-padding-right":"true","icon-position":"right",icon:"volume-medium",size:"small",href:this.readspeakerHref,target:"_blank"},this.readspeakerLabel))}renderLeadingIcon(t){const s=t?"button":this.href?"a":"div";return i(s,{role:"presentation","aria-hidden":"true",tabindex:"-1",class:{"stzh-datalist-item__leading":true,"is-button":t,"is-link":!!this.href},href:this.href,rel:this.rel,target:this.target,download:this.download,onClick:this.onClick},this.leadingIcon&&i("div",{class:"stzh-datalist-item__leading-icon-container"},i("stzh-icon",{class:"stzh-datalist-item__leading-icon",name:this.leadingIcon})))}async componentDidLoad(){this.connectedCallback();this.addWordBreakToLinks()}async componentWillLoad(){this.datalistItemId=`stzh-datalist-item-${p++}`;this.metaWatcher(this.meta);this.externalWatcher();this.hrefWatcher();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datalist-item")}}async connectedCallback(){var t,s,i;this.datalist=this.element.closest("stzh-datalist");if(this.datalist){this.variant=this.datalist.variant;this.bigLabel=this.datalist.bigLabel;this.direction=await this.datalist.getCurrentDirection();(t=this.datalist)===null||t===void 0?void 0:t.addEventListener("stzhDirectionChange",this.handleDirectionChange);(s=this.datalist)===null||s===void 0?void 0:s.addEventListener("stzhVariantChange",this.handleVariantChange);(i=this.datalist)===null||i===void 0?void 0:i.addEventListener("stzhBigLabelChange",this.handleBigLabelChange)}}disconnectedCallback(){var t,s,i;if(this.datalist){(t=this.datalist)===null||t===void 0?void 0:t.removeEventListener("stzhDirectionChange",this.handleDirectionChange);(s=this.datalist)===null||s===void 0?void 0:s.removeEventListener("stzhVariantChange",this.handleVariantChange);(i=this.datalist)===null||i===void 0?void 0:i.removeEventListener("stzhBigLabelChange",this.handleBigLabelChange);this.datalist=null}}render(){const t=typeof this.a11yExpanded!=="undefined"||typeof this.a11yControls!=="undefined";const s=!!((!this.href||this.iconHref||this.iconTooltip)&&this.icon);const e={"stzh-datalist-item":true,"stzh-datalist-item--is-interactive":!!this.href||t,"stzh-datalist-item--is-link":!!this.href,"stzh-datalist-item--is-button":t,"stzh-datalist-item--is-expanded":this.a11yExpanded,"stzh-datalist-item--big-label":this.bigLabel,[`stzh-datalist-item--direction-${this.direction}`]:!!this.direction&&this.variant==="default",[`stzh-datalist-item--${this.variant}`]:!!this.variant};let h=t?"button":s?"div":"a";const d=()=>i("stzh-button",{class:{"stzh-datalist-item__action":true,"is-button":true},variant:"tertiary",size:"small","aria-label":this.iconLabel,iconOnly:true,href:this.iconHref,icon:this.icon,onClick:this.onActionClick});return i(a,{role:"listitem",class:{"value-truncate":this.valueTruncate}},i("div",{class:e},this.direction==="horizontal"||this.variant==="table"?i(l,null,this.renderLeadingIcon(t),this.renderInner(t,s)):i(l,null,this.renderLeadingIcon(t),i("div",{class:"stzh-datalist-item__wrapper"},this.renderInner(t,s))),i(h,{role:s?null:"presentation","aria-hidden":s?null:"true",tabindex:"-1",class:{"stzh-datalist-item__action-list":true,"is-button":t,"is-link":!!this.href&&!this.iconHref},href:!this.iconHref?this.href:null,rel:!this.iconHref?this.rel:null,target:!this.iconHref?this.target:null,download:!this.iconHref?this.download:null},s&&(this.iconTooltip?i("stzh-tooltip",{content:this.iconTooltip},d()):d())),i("div",{class:"stzh-datalist-item__spacer"})),i("div",{class:"stzh-datalist-item__nested"},i("div",{class:"stzh-datalist-item__nested-inner"},i("slot",null))))}get element(){return e(this)}static get watchers(){return{meta:["metaWatcher"],rel:["externalWatcher"],href:["hrefWatcher"]}}};f.style=u;export{m as stzh_datalist,f as stzh_datalist_item};
+//# sourceMappingURL=p-43390ffd.entry.js.map

package/dist/stzh-components/p-43390ffd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhDatalistCss","StzhDatalistStyle0","StzhDatalist","this","_items","setCurrentDirection","media","matches","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","setCurrentColumns","columnsUltra","currentColumns","columnsLarge","columnsMedium","columnsSmall","columns","resizeHandler","directionWatcher","columnsWatcher","currentDirectionWatcher","newValue","stzhDirectionChange","emit","component","value","variantWatcher","stzhVariantChange","bigLabelWatcher","stzhBigLabelChange","itemsWatcher","JSON","parse","getCurrentDirection","componentWillLoad","items","bigLabel","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","variant","h","Host","key","style","toString","class","role","map","item","Object","assign","length","stzhDatalistItemCss","StzhDatalistItemStyle0","datalistItemCounter","StzhDatalistItem","_meta","external","isPhone","onActionClick","originalEvent","stzhItemActionClick","onClick","event","stzhClick","href","handleDirectionChange","detail","handleVariantChange","handleBigLabelChange","metaWatcher","ex","externalWatcher","rel","includes","hrefWatcher","startsWith","addWordBreakToLinks","links","Array","from","_a","element","getElementsByClassName","renderInner","isButton","hasActionButton","Item","Icon","Fragment","icon","name","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","iconPosition","curve","innerHTML","statusLabel","type","statusType","meta","index","readspeakerHref","readspeakerLabel","size","renderLeadingIcon","leadingIcon","componentDidLoad","window","stzhComponents","utils","fetchTranslations","datalist","closest","addEventListener","_b","_c","removeEventListener","iconHref","iconTooltip","ActionItem","ActionButton","iconLabel","iconOnly","valueTruncate","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-datalist-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n\n  /* Table variant with big label */\n\n  &--table#{&}--big-label &__list {\n    @include mq($to: small) {\n      --list-display: flex;\n      flex-direction: column;\n      gap: space('xxxsmall');\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemEntry,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true,\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n  /** With big label */\n  @Prop({ reflect: true }) bigLabel: boolean = false;\n\n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Big label attribute change event */\n  @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"bigLabel\")\n  bigLabelWatcher(newValue: boolean) {\n    this.stzhBigLabelChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  };\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  };\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.bigLabelWatcher(this.bigLabel);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n      \"stzh-datalist--big-label\": this.bigLabel,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\n            <div class=\"stzh-datalist__list\" role=\"list\">\n              {this._items.map(item => (\n                <stzh-datalist-item {...item}>\n                  {item.items && item.items.length > 0 && <stzh-datalist items={item.items}></stzh-datalist>}\n                </stzh-datalist-item>\n              ))}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  --text-overflow: clip;\n  --white-space: normal;\n  --overflow: visible;\n  --width: initial;\n  --max-width: initial;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n:host(.value-truncate) {\n  --text-overflow: ellipsis;\n  --white-space: nowrap;\n  --overflow: hidden;\n  --max-width: 100%;\n}\n\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n    min-width: 0;\n  }\n\n  &__value-text {\n    --color: initial;\n    min-width: 0;\n\n    @include fontCurve('p1');\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space('xsmall');\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__readspeaker {\n    width: fit-content;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__wrapper {\n    flex-grow: inherit;\n  }\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('xsmall');\n    }\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      padding-top: space('xxsmall');\n      padding-bottom: space('xxsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    padding-bottom: space('xxsmall');\n    padding-top: calc(#{space('xxsmall')} + 12px);\n  }\n\n  &--direction-horizontal &__readspeaker {\n    padding-bottom: space('xxsmall');\n    padding-top: space('xxsmall');\n    padding-left: space('medium');\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize('nano');\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize('milli');\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('small');\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  /** Big label */\n\n  &--table#{&}--big-label &__label {\n    @include font('heavy');\n    @include fontSize('milli');\n    color: $colorGrey80;\n  }\n\n  &--table#{&}--big-label &__leading,\n  &--table#{&}--big-label &__value,\n  &--table#{&}--big-label &__label,\n  &--table#{&}--big-label &__meta,\n  &--table#{&}--big-label &__action-list {\n    &:not(:empty) {\n      padding-top: 0;\n      padding-bottom: 0;\n\n      @include mq($from: small) {\n        padding-top: space('xsmall');\n        padding-bottom: space('small');\n      }\n    }\n  }\n\n  &--table#{&}--big-label &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n\n    @include mq($to: small) {\n      padding-left: 0;\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistItemClickEvent,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhStatusType,\n} from \"../../index\";\n\nimport { addWordBreakToLinks } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n * @slot readspeaker - Slot for readspeaker\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true,\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Whether value should be truncate or not */\n  @Prop() valueTruncate: boolean = false;  \n\n  /** Readspeaker label */\n  @Prop() readspeakerLabel: string = \"\";\n\n  /** Readspeaker link */\n  @Prop() readspeakerHref: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n  @State() bigLabel: boolean = false;\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent,\n    });\n  };\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href,\n    });\n  };\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  };\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  };\n\n  private handleBigLabelChange = (event: CustomEvent<StzhDatalistBigLabelChangeEvent>) => {\n    this.bigLabel = event.detail.value;\n  };\n\n  private addWordBreakToLinks() {\n    const links = Array.from(\n      this.element?.getElementsByClassName(\"stzh-datalist-item__value-text\") || []\n    );\n    addWordBreakToLinks(links as HTMLElement[]);\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon\n              class=\"stzh-datalist-item__icon\"\n              name={this.icon ? this.icon : this.isPhone ? \"phone\" : this.external && \"external-link\"}\n            ></stzh-icon>\n          </div>\n        )}\n\n        {isButton && (\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        )}\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" && (\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href,\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        )}\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={\n            Item !== \"div\"\n              ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : \"\"} ${this.datalistItemId}-value ${\n                  this.datalistItemId\n                }-meta`\n              : null\n          }\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\" ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" && <div class=\"stzh-datalist-item__label\">{this.label}</div>}\n\n          {this.external && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>\n          )}\n          {this.download && (\n            <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>\n          )}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value ? (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n            ) : (\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            )}\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href,\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel && (\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          )}\n          {this._meta.length > 0 && (\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) => (\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length && <span class=\"stzh-datalist-item__meta-separator\">|</span>}\n                </Fragment>\n              ))}\n            </span>\n          )}\n        </Item>\n\n        {this.readspeakerHref && this.readspeakerLabel && (\n          <stzh-button\n            class=\"stzh-datalist-item__readspeaker\"\n            variant=\"tertiary-plain\"\n            no-padding-left=\"true\"\n            no-padding-right=\"true\"\n            icon-position=\"right\"\n            icon=\"volume-medium\"\n            size=\"small\"\n            href={this.readspeakerHref}\n            target=\"_blank\"\n          >\n            {this.readspeakerLabel}\n          </stzh-button>\n        )}\n      </Fragment>\n    );\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : this.href ? \"a\" : \"div\";\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href,\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon && (\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        )}\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n    this.addWordBreakToLinks();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.bigLabel = this.datalist.bigLabel;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.addEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist?.removeEventListener(\"stzhBigLabelChange\", this.handleBigLabelChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\" || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--big-label\": this.bigLabel,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant,\n    };\n\n    let ActionItem = isButton ? \"button\" : hasActionButton ? \"div\" : \"a\";\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true,\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    };\n\n    return (\n      <Host role=\"listitem\" class={{'value-truncate': this.valueTruncate}}>\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ? (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n          ) : (\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">{this.renderInner(isButton, hasActionButton)}</div>\n            </Fragment>\n          )}\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref,\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {hasActionButton &&\n              (this.iconTooltip ? (\n                <stzh-tooltip content={this.iconTooltip}>{ActionButton()}</stzh-tooltip>\n              ) : (\n                ActionButton()\n              ))}\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gLAAA,MAAMA,EAAkB,4wKACxB,MAAAC,EAAeD,E,MCoBFE,EAAY,M,8LAsDfC,KAAAC,OAAkC,GAyElCD,KAAAE,oBAAsB,KAC5B,GAAIC,EAAM,SAASC,SAAWJ,KAAKK,eAAgB,CACjDL,KAAKM,iBAAmBN,KAAKK,c,MACxB,GAAIF,EAAM,SAASC,SAAWJ,KAAKO,eAAgB,CACxDP,KAAKM,iBAAmBN,KAAKO,c,MACxB,GAAIJ,EAAM,UAAUC,SAAWJ,KAAKQ,gBAAiB,CAC1DR,KAAKM,iBAAmBN,KAAKQ,e,MACxB,GAAIL,EAAM,SAASC,SAAWJ,KAAKS,eAAgB,CACxDT,KAAKM,iBAAmBN,KAAKS,c,KACxB,CACLT,KAAKM,iBAAmBN,KAAKU,S,GAIzBV,KAAAW,kBAAoB,KAC1B,GAAIR,EAAM,SAASC,SAAWJ,KAAKY,aAAc,CAC/CZ,KAAKa,eAAiBb,KAAKY,Y,MACtB,GAAIT,EAAM,SAASC,SAAWJ,KAAKc,aAAc,CACtDd,KAAKa,eAAiBb,KAAKc,Y,MACtB,GAAIX,EAAM,UAAUC,SAAWJ,KAAKe,cAAe,CACxDf,KAAKa,eAAiBb,KAAKe,a,MACtB,GAAIZ,EAAM,SAASC,SAAWJ,KAAKgB,aAAc,CACtDhB,KAAKa,eAAiBb,KAAKgB,Y,KACtB,CACLhB,KAAKa,eAAiBb,KAAKiB,O,GAI/BjB,KAAAkB,cAAgB,KACdlB,KAAKE,sBACLF,KAAKW,mBAAmB,E,aA3J8B,U,cAGX,M,aAGF,E,gIAeiB,W,oIA8BV,G,oBAuEhB,E,gCApDlC,gBAAAQ,GACEnB,KAAKE,qB,CAQP,cAAAkB,GACEpB,KAAKW,mB,CAIP,uBAAAU,CAAwBC,GACtBtB,KAAKuB,oBAAoBC,KAAK,CAC5BC,UAAW,gBACXC,MAAOJ,G,CAKX,cAAAK,CAAeL,GACbtB,KAAK4B,kBAAkBJ,KAAK,CAC1BC,UAAW,gBACXC,MAAOJ,G,CAKX,eAAAO,CAAgBP,GACdtB,KAAK8B,mBAAmBN,KAAK,CAC3BC,UAAW,gBACXC,MAAOJ,G,CAKX,YAAAS,CAAaT,GACX,UAAWA,IAAa,SAAU,CAChCtB,KAAKC,OAAS+B,KAAKC,MAAMX,E,KACpB,CACLtB,KAAKC,OAASqB,C,EAMlB,yBAAMY,GACJ,OAAOlC,KAAKM,gB,CAuCd,uBAAM6B,GACJnC,KAAK+B,aAAa/B,KAAKoC,OACvBpC,KAAK6B,gBAAgB7B,KAAKqC,UAC1BrC,KAAKkB,e,CAGP,iBAAAoB,GACEC,EAAuBvC,KAAKkB,c,CAG9B,oBAAAsB,GACEC,EAA0BzC,KAAKkB,c,CAGjC,MAAAwB,GACE,MAAMC,EAAU,CACd,gBAAiB,KACjB,sCAAuC3C,KAAKa,eAAiB,EAC7D,2BAA4Bb,KAAKqC,SACjC,CAAC,4BAA4BrC,KAAKM,sBAAuBN,KAAKM,iBAC9D,CAAC,kBAAkBN,KAAK4C,aAAc5C,KAAK4C,SAG7C,OACEC,EAACC,EAAI,CAAAC,IAAA,0DACW/C,KAAKM,iBACnB0C,MAAO,CACL,YAAahD,KAAKa,eAAiBb,KAAKa,eAAeoC,WAAa,OAGtEJ,EAAA,OAAAE,IAAA,2CAAKG,MAAOP,GACVE,EAAA,OAAAE,IAAA,2CAAKG,MAAM,0BACTL,EAAA,OAAAE,IAAA,2CAAKG,MAAM,sBAAsBC,KAAK,QACnCnD,KAAKC,OAAOmD,KAAIC,GACfR,EAAA,qBAAAS,OAAAC,OAAA,GAAwBF,GACrBA,EAAKjB,OAASiB,EAAKjB,MAAMoB,OAAS,GAAKX,EAAA,iBAAeT,MAAOiB,EAAKjB,WAGvES,EAAA,QAAAE,IAAA,gD,ghBC3Nd,MAAMU,EAAsB,gxaAC5B,MAAAC,EAAeD,ECef,IAAIE,EAAsB,E,MAYbC,EAAgB,M,uHAmDnB5D,KAAA6D,MAAkB,GAiDlB7D,KAAA8D,SAAoB,MACpB9D,KAAA+D,QAAmB,MAInB/D,KAAAgE,cAAiBC,IACvBjE,KAAKkE,oBAAoB1C,KAAK,CAC5BC,UAAW,qBACXwC,iBACA,EAGIjE,KAAAmE,QAAWC,IACjBpE,KAAKqE,UAAU7C,KAAK,CAClBC,UAAW,qBACXwC,cAAeG,EACfE,KAAMtE,KAAKsE,MACX,EAGItE,KAAAuE,sBAAyBH,IAC/BpE,KAAKU,UAAY0D,EAAMI,OAAO9C,KAAK,EAG7B1B,KAAAyE,oBAAuBL,IAC7BpE,KAAK4C,QAAUwB,EAAMI,OAAO9C,KAAK,EAG3B1B,KAAA0E,qBAAwBN,IAC9BpE,KAAKqC,SAAW+B,EAAMI,OAAO9C,KAAK,E,kLA1GK,Q,uFAYjB,G,WAGA,G,mBAGS,M,sBAGE,G,qBAGD,G,UAGiB,G,iBAIJ,G,gBAGV,U,uEAuCO,W,aACJ,U,cACX,K,CAxB7B,WAAAiD,CAAYrD,GACV,UAAWA,IAAa,SAAU,CAChC,IACEtB,KAAK6D,MAAQ7B,KAAKC,MAAMX,E,CACxB,MAAOsD,GACP5E,KAAK6D,MAAQvC,IAAa,GAAK,GAAK,CAACA,E,MAElC,CACLtB,KAAK6D,MAAQvC,C,EAKjB,eAAAuD,GACE7E,KAAK8D,SAAW9D,KAAK8E,KAAO9E,KAAK8E,IAAIC,SAAS,W,CAIhD,WAAAC,GACEhF,KAAK+D,QAAU/D,KAAKsE,OAAStE,KAAKsE,KAAKW,WAAW,SAAWjF,KAAKsE,KAAKW,WAAW,Q,CAuC5E,mBAAAC,G,MACN,MAAMC,EAAQC,MAAMC,OAClBC,EAAAtF,KAAKuF,WAAO,MAAAD,SAAA,SAAAA,EAAEE,uBAAuB,oCAAqC,IAE5EN,EAAoBC,E,CAGd,WAAAM,CAAYC,EAAmBC,GACrC,MAAMC,EAAOF,EAAW,SAAW1F,KAAKsE,KAAO,IAAM,MAErD,MAAMuB,EAAO,IACXhD,EAACiD,EAAQ,MACL9F,KAAKsE,MAAQtE,KAAK+F,QAAUJ,IAAoBD,GAChD7C,EAAA,OAAKK,MAAM,kCACTL,EAAA,aACEK,MAAM,2BACN8C,KAAMhG,KAAK+F,KAAO/F,KAAK+F,KAAO/F,KAAK+D,QAAU,QAAU/D,KAAK8D,UAAY,mBAK7E4B,GACC7C,EAAA,OAAKK,MAAM,kCACTL,EAAA,aAAWK,MAAM,qCAAqC8C,KAAMhG,KAAK+F,KAAO/F,KAAK+F,KAAO,SACpFlD,EAAA,aAAWK,MAAM,mCAAmC8C,KAAMhG,KAAK+F,KAAO/F,KAAK+F,KAAO,YAM1F,OACElD,EAACiD,EAAQ,KACN9F,KAAK4C,UAAY,SAChBC,EAAC+C,EAAI,eACU5F,KAAKiG,MAAQ,KAAO,OACjCC,SAAS,KACTC,GAAI,GAAGnG,KAAKoG,uBACZlD,MAAO,CACL,4BAA6B,KAC7B,YAAawC,EACb,YAAa1F,KAAKsE,MAEpBA,KAAMtE,KAAKsE,KACXQ,IAAK9E,KAAK8E,IACVuB,OAAQrG,KAAKqG,OACbC,SAAUtG,KAAKsG,SACfnC,QAASnE,KAAKmE,SAEbnE,KAAKiG,OAIVpD,EAAC+C,EAAI,CACHO,GAAI,GAAGnG,KAAKoG,uBACZlD,MAAO,CACL,4BAA6B,KAC7B,YAAawC,EACb,YAAa1F,KAAKsE,MAEpBA,KAAMtE,KAAKsE,KACXQ,IAAK9E,KAAK8E,IACVuB,OAAQrG,KAAKqG,OACbC,SAAUtG,KAAKsG,SAAQ,kBAGrBV,IAAS,MACL,GAAG5F,KAAK4C,UAAY,QAAU,GAAG5C,KAAKoG,uBAAyB,MAAMpG,KAAKoG,wBACxEpG,KAAKoG,sBAEP,KAAI,gBAEKpG,KAAKuG,cAAgB,KAAI,uBAClBvG,KAAKwG,eAAiB,YAAexG,KAAKwG,aAAe,OAAS,QAAW,KACnGrC,QAASnE,KAAKmE,SAEbnE,KAAK4C,UAAY,WAAaC,EAAA,OAAKK,MAAM,6BAA6BlD,KAAKiG,OAE3EjG,KAAK8D,UACJjB,EAAA,OAAKK,MAAM,+BAA+BlD,KAAKyG,aAAaC,SAASC,mBAEtE3G,KAAKsG,UACJzD,EAAA,OAAKK,MAAM,+BAA+BlD,KAAKyG,aAAaC,SAASE,mBAGvE/D,EAAA,OAAKK,MAAM,qCACRlD,KAAK6G,eAAiB,QAAUhE,EAACgD,EAAI,MACrC7F,KAAK0B,MACJmB,EAAA,aAAWiE,MAAM,OAAO5D,MAAM,iCAAiC6D,UAAW/G,KAAK0B,QAE/EmB,EAAA,aAAWiE,MAAM,OAAO5D,MAAM,kCAC5BL,EAAA,QAAMmD,KAAK,WAGdhG,KAAK6G,eAAiB,SAAWhE,EAACgD,EAAI,QAI3ChD,EAAC+C,EAAI,eACU5F,KAAKgH,aAAehH,KAAK6D,MAAML,OAAS,EAAI,KAAO,OAChE0C,SAAS,KACTC,GAAI,GAAGnG,KAAKoG,sBACZlD,MAAO,CACL,2BAA4B,KAC5B,YAAawC,EACb,YAAa1F,KAAKsE,MAEpBA,KAAMtE,KAAKsE,KACXQ,IAAK9E,KAAK8E,IACVuB,OAAQrG,KAAKqG,OACbC,SAAUtG,KAAKsG,SACfnC,QAASnE,KAAKmE,SAEbnE,KAAKgH,aACJnE,EAAA,eACEK,MAAM,kCACN+C,MAAOjG,KAAKgH,YACZC,KAAMjH,KAAKkH,aAGdlH,KAAK6D,MAAML,OAAS,GACnBX,EAAA,QAAMK,MAAM,iCACTlD,KAAK6D,MAAMT,KAAI,CAAC+D,EAAMC,IACrBvE,EAACiD,EAAQ,KACPjD,EAAA,QAAMK,MAAM,uCAAuCiE,GAClDC,EAAQ,IAAMpH,KAAK6D,MAAML,QAAUX,EAAA,QAAMK,MAAM,sCAAoC,UAO7FlD,KAAKqH,iBAAmBrH,KAAKsH,kBAC5BzE,EAAA,eACEK,MAAM,kCACNN,QAAQ,iBAAgB,kBACR,OAAM,mBACL,OAAM,gBACT,QACdmD,KAAK,gBACLwB,KAAK,QACLjD,KAAMtE,KAAKqH,gBACXhB,OAAO,UAENrG,KAAKsH,kB,CAOR,iBAAAE,CAAkB9B,GACxB,MAAME,EAAOF,EAAW,SAAW1F,KAAKsE,KAAO,IAAM,MAErD,OACEzB,EAAC+C,EAAI,CACHzC,KAAK,eAAc,cACP,OACZ+C,SAAS,KACThD,MAAO,CACL,8BAA+B,KAC/B,YAAawC,EACb,YAAa1F,KAAKsE,MAEpBA,KAAMtE,KAAKsE,KACXQ,IAAK9E,KAAK8E,IACVuB,OAAQrG,KAAKqG,OACbC,SAAUtG,KAAKsG,SACfnC,QAASnE,KAAKmE,SAEbnE,KAAKyH,aACJ5E,EAAA,OAAKK,MAAM,8CACTL,EAAA,aAAWK,MAAM,mCAAmC8C,KAAMhG,KAAKyH,e,CAOzE,sBAAMC,GAEJ1H,KAAKsC,oBACLtC,KAAKkF,qB,CAGP,uBAAM/C,GACJnC,KAAKoG,eAAiB,sBAAsBzC,MAC5C3D,KAAK2E,YAAY3E,KAAKmH,MACtBnH,KAAK6E,kBACL7E,KAAKgF,cAEL,IAAKhF,KAAKyG,aAAc,CACtBzG,KAAKyG,mBAAqBkB,OAAOC,eAAeC,MAAMC,kBAAkB9H,KAAKuF,QAAS,gB,EAI1F,uBAAMjD,G,UACJtC,KAAK+H,SAAW/H,KAAKuF,QAAQyC,QAAQ,iBAErC,GAAIhI,KAAK+H,SAAU,CACjB/H,KAAK4C,QAAU5C,KAAK+H,SAASnF,QAC7B5C,KAAKqC,SAAWrC,KAAK+H,SAAS1F,SAC9BrC,KAAKU,gBAAkBV,KAAK+H,SAAS7F,uBAErCoD,EAAAtF,KAAK+H,YAAQ,MAAAzC,SAAA,SAAAA,EAAE2C,iBAAiB,sBAAuBjI,KAAKuE,wBAC5D2D,EAAAlI,KAAK+H,YAAQ,MAAAG,SAAA,SAAAA,EAAED,iBAAiB,oBAAqBjI,KAAKyE,sBAC1D0D,EAAAnI,KAAK+H,YAAQ,MAAAI,SAAA,SAAAA,EAAEF,iBAAiB,qBAAsBjI,KAAK0E,qB,EAI/D,oBAAAlC,G,UACE,GAAIxC,KAAK+H,SAAU,EACjBzC,EAAAtF,KAAK+H,YAAQ,MAAAzC,SAAA,SAAAA,EAAE8C,oBAAoB,sBAAuBpI,KAAKuE,wBAC/D2D,EAAAlI,KAAK+H,YAAQ,MAAAG,SAAA,SAAAA,EAAEE,oBAAoB,oBAAqBpI,KAAKyE,sBAC7D0D,EAAAnI,KAAK+H,YAAQ,MAAAI,SAAA,SAAAA,EAAEC,oBAAoB,qBAAsBpI,KAAK0E,sBAC9D1E,KAAK+H,SAAW,I,EAIpB,MAAArF,GACE,MAAMgD,SAAkB1F,KAAKwG,eAAiB,oBAAsBxG,KAAKuG,eAAiB,YAE1F,MAAMZ,OAAuB3F,KAAKsE,MAAQtE,KAAKqI,UAAYrI,KAAKsI,cAAgBtI,KAAK+F,MAErF,MAAMpD,EAAU,CACd,qBAAsB,KACtB,uCAAwC3C,KAAKsE,MAAQoB,EACrD,gCAAiC1F,KAAKsE,KACtC,gCAAiCoB,EACjC,kCAAmC1F,KAAKwG,aACxC,gCAAiCxG,KAAKqC,SACtC,CAAC,iCAAiCrC,KAAKU,eAAgBV,KAAKU,WAAaV,KAAK4C,UAAY,UAC1F,CAAC,uBAAuB5C,KAAK4C,aAAc5C,KAAK4C,SAGlD,IAAI2F,EAAa7C,EAAW,SAAWC,EAAkB,MAAQ,IAEjE,MAAM6C,EAAe,IAEjB3F,EAAA,eACEK,MAAO,CACL,6BAA8B,KAC9B,YAAa,MAEfN,QAAQ,WACR2E,KAAK,QAAO,aACAvH,KAAKyI,UACjBC,SAAU,KACVpE,KAAMtE,KAAKqI,SACXtC,KAAM/F,KAAK+F,KACX5B,QAASnE,KAAKgE,gBAKpB,OACEnB,EAACC,EAAI,CAACK,KAAK,WAAWD,MAAO,CAAC,iBAAkBlD,KAAK2I,gBACnD9F,EAAA,OAAKK,MAAOP,GACT3C,KAAKU,YAAc,cAAgBV,KAAK4C,UAAY,QACnDC,EAACiD,EAAQ,KACN9F,KAAKwH,kBAAkB9B,GACvB1F,KAAKyF,YAAYC,EAAUC,IAG9B9C,EAACiD,EAAQ,KACN9F,KAAKwH,kBAAkB9B,GACxB7C,EAAA,OAAKK,MAAM,+BAA+BlD,KAAKyF,YAAYC,EAAUC,KAGzE9C,EAAC0F,EAAU,CACTpF,KAAMwC,EAAkB,KAAO,eAAc,cAChCA,EAAkB,KAAO,OACtCO,SAAS,KACThD,MAAO,CACL,kCAAmC,KACnC,YAAawC,EACb,YAAa1F,KAAKsE,OAAStE,KAAKqI,UAElC/D,MAAOtE,KAAKqI,SAAWrI,KAAKsE,KAAO,KACnCQ,KAAM9E,KAAKqI,SAAWrI,KAAK8E,IAAM,KACjCuB,QAASrG,KAAKqI,SAAWrI,KAAKqG,OAAS,KACvCC,UAAWtG,KAAKqI,SAAWrI,KAAKsG,SAAW,MAE1CX,IACE3F,KAAKsI,YACJzF,EAAA,gBAAc+F,QAAS5I,KAAKsI,aAAcE,KAE1CA,MAIN3F,EAAA,OAAKK,MAAM,gCAGbL,EAAA,OAAKK,MAAM,8BACTL,EAAA,OAAKK,MAAM,oCACTL,EAAA,e"}