@oiz/stzh-components 4.1.0 → 4.1.1-beta

package/dist/stzh-components/{p-c32b673d.entry.js.map → p-06a4df88.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,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"}
+{"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,41xPACnC,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-24caf6c1.js → p-09b5eb01.js}

@@ -1,2 +1,2 @@
-import{d as t}from"./p-dae15605.js";function e(t,e){if(e){return t.querySelector(`[slot="${e}"]`)!==null}return Array.from(u(t)).some((t=>{if(t.nodeType===t.TEXT_NODE&&t.textContent.trim()!==""){return true}if(t.nodeType===t.ELEMENT_NODE){const e=t;if(!e.hasAttribute("slot")){return true}}return false}))}function n(e,n){Object.keys(n).forEach((r=>{if(e.getAttribute(t(r))===null){e[r]=n[r]}}))}function r(t,e){Object.keys(e).forEach((n=>{t[n]=e[n]}))}function i(t){if(!t||t.nodeType!==1){return false}return t.tagName.toLowerCase().indexOf("stzh-")===0}function s(t){const e=document.querySelector(`meta[name="${t}"],[property="${t}"]`);return e?e.getAttribute("content"):""}function u(t){const e=t.childNodes;if(t["s-sc"]){const t=[];for(let n=0;n<e.length;n++){const r=e[n]["s-nr"];if(r){t.push(r)}}return t}return Array.from(e)}function c(t){if(typeof t.checkVisibility!=="undefined"){return t.checkVisibility({checkOpacity:false,checkVisibilityCSS:false})}else{return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}}function o(t){if(!t.getClientRects().length){return{top:0,left:0}}let e=t.getBoundingClientRect();let n=t.ownerDocument.defaultView;return{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}}async function f(){return new Promise((t=>{requestAnimationFrame((()=>{t()}))}))}var a;(function(t){t["UNKNOWN"]="UNKNOWN";t["DEV"]="DEV";t["UAT"]="UAT";t["PROD"]="PROD"})(a||(a={}));function l(){const t=window.location.href;if(t.includes("test.stadt-zuerich.loc")||t.match(/\.dev\.cmp\.szh\.loc/)){return a.DEV}else if(t.includes("integ.stadt-zuerich.ch")||t.includes("stzh-desi-unic-preview.netlify.app")||t.match(/\.uat\.cmp\.szh\.loc/)){return a.UAT}else if(t.includes("https://www.stadt-zuerich.ch")||t.includes("designsystem.stadt-zuerich.ch")||t.match(/\.cmp\.szh\.loc/)){return a.PROD}else{return a.UNKNOWN}}function d(t){t.forEach((t=>{var e;if((e=t.textContent)===null||e===void 0?void 0:e.includes("_")){t.innerHTML=t.textContent.replace(/_/g,"_<wbr>")}}))}export{r as a,s as b,c,d,l as g,e as h,i,o,f as r,n as s};
-//# sourceMappingURL=p-24caf6c1.js.map
+import{d as t}from"./p-dae15605.js";function e(t,e){if(e){return t.querySelector(`[slot="${e}"]`)!==null}return Array.from(u(t)).some((t=>{if(t.nodeType===t.TEXT_NODE&&t.textContent.trim()!==""){return true}if(t.nodeType===t.ELEMENT_NODE){const e=t;if(!e.hasAttribute("slot")){return true}}return false}))}function n(e,n){Object.keys(n).forEach((r=>{if(e.getAttribute(t(r))===null){e[r]=n[r]}}))}function r(t,e){Object.keys(e).forEach((n=>{t[n]=e[n]}))}function i(t){if(!t||t.nodeType!==1){return false}return t.tagName.toLowerCase().indexOf("stzh-")===0}function s(t){const e=document.querySelector(`meta[name="${t}"],[property="${t}"]`);return e?e.getAttribute("content"):""}function u(t){const e=t.childNodes;if(t["s-sc"]){const t=[];for(let n=0;n<e.length;n++){const r=e[n]["s-nr"];if(r){t.push(r)}}return t}return Array.from(e)}function c(t){if(typeof t.checkVisibility!=="undefined"){return t.checkVisibility({checkOpacity:false,checkVisibilityCSS:false})}else{return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}}function o(t){if(!t.getClientRects().length){return{top:0,left:0}}let e=t.getBoundingClientRect();let n=t.ownerDocument.defaultView;return{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}}async function f(){return new Promise((t=>{requestAnimationFrame((()=>{t()}))}))}var a;(function(t){t["UNKNOWN"]="UNKNOWN";t["DEV"]="DEV";t["UAT"]="UAT";t["PROD"]="PROD"})(a||(a={}));function l(){const t=window.location.href;if(t.includes("test.stadt-zuerich.loc")||t.match(/\.dev\.cmp\.szh\.loc/)){return a.DEV}else if(t.includes("integ.stadt-zuerich.ch")||t.includes("stzh-desi-unic-preview.netlify.app")||t.match(/\.uat\.cmp\.szh\.loc/)){return a.UAT}else if(t.includes("https://www.stadt-zuerich.ch")||t.includes("designsystem.stadt-zuerich.ch")||t.match(/\.cmp\.szh\.loc/)){return a.PROD}else{return a.UNKNOWN}}function h(t){t.forEach((t=>{var e;if((e=t.textContent)===null||e===void 0?void 0:e.includes("_")){t.innerHTML=t.textContent.replace(/_/g,"_<wbr>")}}))}function d(){const t=document.documentElement;return Array.from(t.classList).find((t=>t.startsWith("stzh-theme-")))}export{r as a,l as b,s as c,c as d,h as e,d as g,e as h,i,o,f as r,n as s};
+//# sourceMappingURL=p-09b5eb01.js.map

package/dist/stzh-components/p-09b5eb01.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hasSlot","el","name","querySelector","Array","from","childNodes","some","node","nodeType","TEXT_NODE","textContent","trim","ELEMENT_NODE","hasAttribute","setPropsIfNull","element","attributes","Object","keys","forEach","attribute","getAttribute","dashCase","setProps","isStzhElement","tagName","toLowerCase","indexOf","getMeta","meta","document","result","i","length","slot","push","isVisible","checkVisibility","checkOpacity","checkVisibilityCSS","offsetWidth","offsetHeight","getClientRects","offset","top","left","rect","getBoundingClientRect","win","ownerDocument","defaultView","pageYOffset","pageXOffset","async","raf","Promise","resolve","requestAnimationFrame","StzhEnvironmentEnum","getStzhEnvironment","url","window","location","href","includes","match","DEV","UAT","PROD","UNKNOWN","addWordBreakToLinks","links","link","_a","innerHTML","replace","getTheme","htmlElement","documentElement","classList","find","className","startsWith"],"sources":["src/utils/utils.ts"],"sourcesContent":["import { dashCase } from \"./string-utils\";\n\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\nexport function hasSlot(el: HTMLElement, name?: string) {\n  // Look for a named slot\n  if (name) {\n    return el.querySelector(`[slot=\"${name}\"]`) !== null;\n  }\n\n  // Look for a default slot\n  return Array.from(childNodes(el)).some((node) => {\n    if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== \"\") {\n      return true;\n    }\n\n    if (node.nodeType === node.ELEMENT_NODE) {\n      const el = node as HTMLElement;\n      if (!el.hasAttribute(\"slot\")) {\n        return true;\n      }\n    }\n\n    return false;\n  });\n}\n\nexport function setPropsIfNull(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    if (element.getAttribute(dashCase(attribute)) === null) {\n      element[attribute] = attributes[attribute];\n    }\n  });\n}\n\nexport function setProps(element: Element, attributes: any) {\n  Object.keys(attributes).forEach((attribute) => {\n    element[attribute] = attributes[attribute];\n  });\n}\n\nexport function isStzhElement(element: Element) {\n  if (!element || element.nodeType !== 1) {\n    return false;\n  }\n\n  return element.tagName.toLowerCase().indexOf(\"stzh-\") === 0;\n}\n\n// returns content of <meta name=\"\" content=\"\"> tags or '' if empty/non existant\nexport function getMeta(name) {\n  const meta = document.querySelector(\n    `meta[name=\"${name}\"],[property=\"${name}\"]`\n  );\n  return meta ? meta.getAttribute(\"content\") : \"\";\n}\n\nexport function parents(node: Element | Node) {\n  const parents = [];\n\n  while (node) {\n    parents.unshift(node);\n    node = node.parentNode;\n  }\n\n  return parents;\n}\n\nexport function childNodes(node: Element) {\n  const childNodes = node.childNodes;\n\n  // check if element is stencil element without shadow dom\n  // and then detect elements that were slotted into the element\n  if (node[\"s-sc\"]) {\n    const result = [];\n\n    for (let i = 0; i < childNodes.length; i++) {\n      const slot = childNodes[i][\"s-nr\"];\n\n      if (slot) {\n        result.push(slot);\n      }\n    }\n\n    return result;\n  }\n\n  return Array.from(childNodes);\n}\n\nexport function isVisible(element: HTMLElement): boolean {\n  // @ts-ignore\n  if (typeof element.checkVisibility !== \"undefined\") {\n    // @ts-ignore\n    return element.checkVisibility({\n      checkOpacity: false,\n      checkVisibilityCSS: false\n    });\n  } else {\n    return !!(\n      element.offsetWidth ||\n      element.offsetHeight ||\n      element.getClientRects().length\n    );\n  }\n}\n\nexport function offset(element): { top: number; left: number } {\n  if (!element.getClientRects().length) {\n    return { top: 0, left: 0 };\n  }\n\n  let rect = element.getBoundingClientRect();\n  let win = element.ownerDocument.defaultView;\n\n  return {\n    top: rect.top + win.pageYOffset,\n    left: rect.left + win.pageXOffset\n  };\n}\n\nexport async function raf() {\n  return new Promise<void>((resolve) => {\n    requestAnimationFrame(() => {\n      resolve();\n    });\n  });\n}\n\nexport async function setTimeout(time: number) {\n  return new Promise<void>((resolve) => {\n    window.setTimeout(() => {\n      resolve();\n    }, time);\n  });\n}\n\nexport enum StzhEnvironmentEnum {\n  UNKNOWN = \"UNKNOWN\",\n  DEV = \"DEV\",\n  UAT = \"UAT\",\n  PROD = \"PROD\",\n}\n\nexport function getStzhEnvironment(): StzhEnvironmentEnum {\n  const url = window.location.href;\n  if (\n    url.includes(\"test.stadt-zuerich.loc\") ||\n    url.match(/\\.dev\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.DEV;\n  } else if (\n    url.includes(\"integ.stadt-zuerich.ch\") ||\n    url.includes(\"stzh-desi-unic-preview.netlify.app\") ||\n    url.match(/\\.uat\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.UAT;\n  } else if (\n    url.includes(\"https://www.stadt-zuerich.ch\") ||\n    url.includes(\"designsystem.stadt-zuerich.ch\") ||\n    url.match(/\\.cmp\\.szh\\.loc/)\n  ) {\n    return StzhEnvironmentEnum.PROD;\n  } else {\n    return StzhEnvironmentEnum.UNKNOWN;\n  }\n}\n\nexport function addWordBreakToLinks(links: HTMLElement[]) {\n  links.forEach((link) => {\n    if (link.textContent?.includes(\"_\")) {\n      link.innerHTML = link.textContent.replace(/_/g, \"_<wbr>\");\n    }\n  });\n}\n\nexport function getTheme() {\n  const htmlElement = document.documentElement;\n  return Array.from(htmlElement.classList).find(className => className.startsWith(\"stzh-theme-\"));\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-0e4fb1f6.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as e,F as r,a as i,g as a}from"./p-ef5985a3.js";const o=".sc-stzh-breadcrumb-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-breadcrumb-h,[stzh-hidden].sc-stzh-breadcrumb-h{display:none}.sc-stzh-breadcrumb-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::before,.sc-stzh-breadcrumb-h *.sc-stzh-breadcrumb::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-breadcrumb-h .has-focus.sc-stzh-breadcrumb{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb{outline-style:none !important}.sc-stzh-breadcrumb-h .stzh-fylingfocus-focused.sc-stzh-breadcrumb::-moz-focus-inner{border:0 !important}.sc-stzh-breadcrumb-h{overflow:hidden;--color:var(--stzh-breadcrumb-color, var(--stzh-color-primary70))}@media print{.sc-stzh-breadcrumb-h{display:none}}[variant=teaser].sc-stzh-breadcrumb-h{--color:var(--stzh-color-grey80)}.stzh-breadcrumb.sc-stzh-breadcrumb{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(--color)}.stzh-breadcrumb__list.sc-stzh-breadcrumb,.stzh-breadcrumb__item.sc-stzh-breadcrumb,.stzh-breadcrumb__item-link.sc-stzh-breadcrumb{display:flex;align-items:center}.stzh-breadcrumb__list.sc-stzh-breadcrumb{list-style:none;margin:0;padding:0;white-space:nowrap}.stzh-breadcrumb__item.is-expand.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{cursor:pointer}.stzh-breadcrumb__item.is-hidden.sc-stzh-breadcrumb{position:absolute;visibility:hidden}.stzh-breadcrumb__item.is-last.sc-stzh-breadcrumb .stzh-breadcrumb__item-link.sc-stzh-breadcrumb{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-breadcrumb__item.is-first.sc-stzh-breadcrumb .stzh-breadcrumb__item-label.sc-stzh-breadcrumb{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-breadcrumb__item-link.sc-stzh-breadcrumb{appearance:none;background-color:transparent;border:none;text-decoration:none;color:inherit}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb{cursor:pointer;transition:color var(--stzh-base-transition-animation-speed)}.stzh-breadcrumb__item-link.is-link.sc-stzh-breadcrumb:hover{color:var(--stzh-color-primary90)}.stzh-breadcrumb__item-icon.sc-stzh-breadcrumb{margin-right:var(--stzh-space-xxsmall)}.stzh-breadcrumb__item-icon.is-separator.sc-stzh-breadcrumb{--size:var(--stzh-icon-size-small)}.stzh-breadcrumb__item-label-hidden.sc-stzh-breadcrumb{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-breadcrumb--is-expanded.sc-stzh-breadcrumb .stzh-breadcrumb__list.sc-stzh-breadcrumb{flex-wrap:wrap;white-space:initial}.stzh-breadcrumb--is-expanded.sc-stzh-breadcrumb .is-expand.sc-stzh-breadcrumb{position:absolute}.stzh-breadcrumb--teaser.sc-stzh-breadcrumb{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}";const h=o;const n=1;const c=1;const l=class{constructor(e){t(this,e);this.stzhItemClick=s(this,"stzhItemClick",7);this.updateContainer=()=>{if(!this.navElement||!this.itemSizes){return}const t=this.navElement.clientWidth;const s=this.itemSizes.reduce(((t,s,e)=>{if(e===n){return t}else{return t+s[1]}}),0);if(s>=t&&this.itemSizes.length>2&&!this.expanded){const e=[];const r=this.itemSizes[n][1];let i=n+c;let a=s;do{const t=this.itemSizes[i];e.push(t[0]);a=a-t[1];i=i+c}while(a+r>=t&&i<this.itemSizes.length);this.hasHiddenItems=true;this.itemSizes.forEach((([t],s)=>{if(s===n){t.classList.remove("is-hidden")}else{t.classList.toggle("is-hidden",e.includes(t))}}))}else{this.hasHiddenItems=false;this.itemSizes.forEach((([t],s)=>{if(s===n){t.classList.add("is-hidden")}else{t.classList.remove("is-hidden")}}))}};this.updateItems=()=>{if(!this.navElement){return}const t=Array.from(this.navElement.querySelectorAll(".stzh-breadcrumb__item"));this.itemSizes=[];t.forEach((t=>{const{width:s}=t.getBoundingClientRect();this.itemSizes.push([t,s])}));this.updateContainer()};this.handleContainerResize=()=>{if(this.debounceResize){window.cancelAnimationFrame(this.debounceResize)}this.debounceResize=requestAnimationFrame(this.updateContainer)};this.handleItemResize=()=>{if(this.debounceResizeItems){window.cancelAnimationFrame(this.debounceResizeItems)}this.debounceResizeItems=requestAnimationFrame(this.updateItems)};this.handleExpandClick=()=>{this.expanded=true;const t=Array.from(this.navElement.querySelectorAll(".stzh-breadcrumb__item-link"));t[2].focus()};this.localization=undefined;this.variant="default";this.items=[];this.expanded=false;this.hasHiddenItems=false}itemsWatcher(t){if(!t){this._items=[]}else if(typeof t==="string"){try{this._items=JSON.parse(t)}catch(t){this._items=[]}}else{this._items=t}}expandedWatcher(){this.updateContainer()}handleClick(t,s){this.stzhItemClick.emit({component:"stzh-breadcrumb",item:t,originalEvent:s})}async componentWillLoad(){this.itemsWatcher(this.items);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"breadcrumb")}}componentDidRender(){this.resizeObserver.observe(this.navElement);const t=this.navElement.querySelectorAll(".stzh-breadcrumb__item");t.forEach((t=>{this.resizeItemsObserver.observe(t)}))}connectedCallback(){this.resizeObserver=new ResizeObserver(this.handleContainerResize);this.resizeItemsObserver=new ResizeObserver(this.handleItemResize)}disconnectedCallback(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.resizeItemsObserver){this.resizeItemsObserver.disconnect()}}render(){const t={"stzh-breadcrumb":true,"stzh-breadcrumb--is-expanded":this.expanded,"stzh-breadcrumb--has-hidden-items":this.hasHiddenItems,[`stzh-breadcrumb--${this.variant}`]:!!this.variant,rs_skip:true};return e(i,{key:"63f2db40869b7f6ea6cd12836fc7a9b2cd2b83b8"},e("div",{key:"d39ed088668871617819dce5c2049dbf3d9a5a00",class:t},e("nav",{key:"65b9dde62ed5253304c3de66dc686fe0271a1684",ref:t=>this.navElement=t,class:"stzh-breadcrumb__nav",role:"navigation","aria-label":this.localization.title},e("ol",{key:"be010479331183bf658e91636013ae48af26ab82",class:"stzh-breadcrumb__list"},this._items.map(((t,s)=>e(r,null,e("li",{class:{"stzh-breadcrumb__item":true,"is-last":s+1===this._items.length,"is-first":s===0}},e("a",{"aria-current":s+1===this._items.length?"page":null,href:t.href,onClick:s=>this.handleClick(t,s),class:{"stzh-breadcrumb__item-link":true,"is-link":!!t.href}},s===0?e("stzh-icon",{class:"stzh-breadcrumb__item-icon",name:"home"}):e("stzh-icon",{class:"stzh-breadcrumb__item-icon is-separator",name:"angle-right"}),e("span",{class:"stzh-breadcrumb__item-label",innerHTML:t.label}))),s===0&&e("li",{class:"stzh-breadcrumb__item is-expand"},e("button",{class:"stzh-breadcrumb__item-link",onClick:this.handleExpandClick},e("stzh-icon",{class:"stzh-breadcrumb__item-icon is-separator",name:"angle-right"}),e("span",{class:"stzh-breadcrumb__item-label"},e("span",{"aria-hdiden":"true"},this.localization.expandLabel),e("span",{class:"stzh-breadcrumb__item-label-hidden"},this.localization.expandHiddenLabel)))))))))))}get element(){return a(this)}static get watchers(){return{items:["itemsWatcher"],expanded:["expandedWatcher"]}}};l.style=h;const d=".sc-stzh-tag-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-tag-h,[stzh-hidden].sc-stzh-tag-h{display:none}.sc-stzh-tag-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-tag-h *.sc-stzh-tag,.sc-stzh-tag-h *.sc-stzh-tag::before,.sc-stzh-tag-h *.sc-stzh-tag::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-tag-h .has-focus.sc-stzh-tag{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag{outline-style:none !important}.sc-stzh-tag-h .stzh-fylingfocus-focused.sc-stzh-tag::-moz-focus-inner{border:0 !important}.sc-stzh-tag-h{--color:var(--stzh-tag-color, var(--stzh-color-secondary60));--height:1.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--background-color:var(--stzh-tag-background-color, var(--stzh-color-grey20));--hover-color:var(--stzh-tag-hover-color, var(--stzh-color-secondary60));--hover-background-color:var(--stzh-tag-hover-background-color, var(--background-color));display:inline-flex}[size=large].sc-stzh-tag-h{--height:2rem}[size=default][type=secondary].sc-stzh-tag-h{--background-color:var(--stzh-tag-secondary-background-color, var(--stzh-color-secondary60))}[type=secondary].sc-stzh-tag-h{--color:var(--stzh-tag-secondary-color, var(--stzh-color-white));--background-color:var(--stzh-tag-secondary-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-tag-secondary-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-tag-secondary-hover-background-color, var(--background-color))}[non-interactive].sc-stzh-tag-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-tag-h:not([disabled=false]){--color:var(--stzh-tag-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-tag-disabled-background-color, var(--stzh-color-grey20));--hover-color:var(--color);--hover-background-color:var(--background-color)}.stzh-tag.sc-stzh-tag{position:relative}.stzh-tag__button.sc-stzh-tag{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);font-family:inherit;height:var(--height);display:flex;flex-direction:row;align-items:center;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);appearance:none;border:none;background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-tag__button.is-button.sc-stzh-tag,.stzh-tag__button.is-link.sc-stzh-tag{cursor:pointer}.stzh-tag__label.sc-stzh-tag{text-align:left}.stzh-tag__button.sc-stzh-tag:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-tag--size-large.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{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)}.stzh-tag--is-disabled.sc-stzh-tag .stzh-tag__button.sc-stzh-tag{cursor:not-allowed}";const b=d;const z=class{constructor(e){t(this,e);this.stzhClick=s(this,"stzhClick",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.tag.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-tag",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-tag",originalEvent:t})};this.onClick=t=>{this.stzhClick.emit({component:"stzh-tag",originalEvent:t,href:this.href})};this.label="";this.href="";this.target="";this.nonInteractive=false;this.type="default";this.size="default";this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}componentDidRender(){requestAnimationFrame((()=>{var t;if(!this.nonInteractive){(t=this.tag)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}}))}renderInner(){return e(r,null,e("stzh-clamp",{lines:1,class:"stzh-tag__label",ref:t=>this.text=t},this.label?this.label:e("slot",null)))}render(){const t={"stzh-tag":true,"stzh-tag--is-disabled":this.disabled,[`stzh-tag--size-${this.size}`]:!!this.size,[`stzh-tag--${this.type}`]:!!this.type};const s=this.nonInteractive?"div":this.href?"a":"button";return e(i,{key:"9af778250548e3e88ada71d001f64f0b0885f2d9",tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{key:"4bd7a492c7ff65b62e4753da8171aad802627b87",class:t},this.href?e(s,{ref:t=>this.tag=t,class:{"stzh-tag__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):e(s,{ref:t=>this.tag=t,class:{"stzh-tag__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))}get element(){return a(this)}};z.style=b;export{l as stzh_breadcrumb,z as stzh_tag};
+//# sourceMappingURL=p-0e4fb1f6.entry.js.map

package/dist/stzh-components/p-0e4fb1f6.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhBreadcrumbCss","StzhBreadcrumbStyle0","ITEM_EXPAND_INDEX","SHRINK_DIRECTION","StzhBreadcrumb","this","updateContainer","navElement","itemSizes","containerWidth","clientWidth","totalItemsWidthWithoutExpandItem","reduce","previous","item","index","length","expanded","hideItems","expandItemWidth","currentIndexToHide","totalItemsShownWidthWithoutExpandItem","current","push","hasHiddenItems","forEach","classList","remove","toggle","includes","add","updateItems","items","Array","from","querySelectorAll","width","getBoundingClientRect","handleContainerResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleItemResize","debounceResizeItems","handleExpandClick","itemLinks","focus","itemsWatcher","newValue","_items","JSON","parse","e","expandedWatcher","handleClick","originalEvent","stzhItemClick","emit","component","componentWillLoad","localization","stzhComponents","utils","fetchTranslations","element","componentDidRender","resizeObserver","observe","resizeItemsObserver","connectedCallback","ResizeObserver","disconnectedCallback","disconnect","render","classes","variant","rs_skip","h","Host","key","class","ref","el","role","title","map","Fragment","href","onClick","name","innerHTML","label","expandLabel","expandHiddenLabel","stzhTagCss","StzhTagStyle0","StzhTag","focusedByInput","onRootFocus","tag","onFocus","event","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","stzhClick","nonInteractive","_a","setAttribute","analyticsId","text","innerText","renderInner","lines","disabled","size","type","Tag","tabindex","target","a11yTabindex","a11yLabel","a11yDescribedby"],"sources":["src/components/stzh-breadcrumb/stzh-breadcrumb.scss?tag=stzh-breadcrumb&encapsulation=scoped","src/components/stzh-breadcrumb/stzh-breadcrumb.tsx","src/components/stzh-tag/stzh-tag.scss?tag=stzh-tag&encapsulation=scoped","src/components/stzh-tag/stzh-tag.tsx"],"sourcesContent":[":host {\n  overflow: hidden;\n  --color: var(--stzh-breadcrumb-color, #{$colorPrimary70});\n\n  @media print {\n    display: none;\n  }\n\n  &[variant=\"teaser\"] {\n    --color: #{$colorGrey80};\n  }\n}\n\n.stzh-breadcrumb {\n  @include fontSize('milli');\n  color: var(--color);\n\n  &__list,\n  &__item,\n  &__item-link {\n    display: flex;\n    align-items: center;\n  }\n\n  &__list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    white-space: nowrap;\n  }\n\n  &__item.is-expand &__item-link {\n    cursor: pointer;\n  }\n\n  &__item.is-hidden {\n    position: absolute;\n    visibility: hidden;\n  }\n\n  &__item.is-last &__item-link {\n    @include font('heavy');\n  }\n\n  &__item.is-first &__item-label {\n    @include visuallyhidden;\n  }\n\n  &__item-link {\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    text-decoration: none;\n    color: inherit;\n  }\n\n  &__item-link.is-link {\n    cursor: pointer;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:hover {\n      color: $colorPrimary90;\n    }\n  }\n\n  &__item-icon {\n    margin-right: space('xxsmall');\n\n    &.is-separator {\n      --size: #{iconSize('small')};\n    }\n  }\n\n  &__item-label-hidden {\n    @include visuallyhidden;\n  }\n\n  /* Expanded variant */\n\n  &--is-expanded &__list {\n    flex-wrap: wrap;\n    white-space: initial;\n  }\n\n  &--is-expanded .is-expand {\n    position: absolute;\n  }\n\n  /* Teaser variant */\n\n  &--teaser {\n    @include fontSize('micro');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State,\n  Fragment, Event, EventEmitter,\n} from \"@stencil/core\";\n\nimport { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from \"../../index\";\n\nimport { StzhBreadcrumbLocalizedText } from \"./stzh-breadcrumb.localization\";\n\nconst ITEM_EXPAND_INDEX = 1;\nconst SHRINK_DIRECTION = 1; // 1 = removes item to the right / -1 = removes item to the left\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-breadcrumb\",\n  styleUrl: \"stzh-breadcrumb.scss\",\n  scoped: true\n})\nexport class StzhBreadcrumb {\n  /** Translation strings */\n  @Prop() localization: StzhBreadcrumbLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Breadcrumb items */\n  @Prop() items: StzhBreadcrumbItem[] | string = [];\n  private _items: StzhBreadcrumbItem[];\n\n  /** Whether all items are shown (true) or everything should fit into one line and not wrap (false, default) */\n  @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n  @Element() element: HTMLStzhBreadcrumbElement;\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: StzhBreadcrumbItem[] | string) {\n    if (!newValue) {\n      this._items = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._items = JSON.parse(newValue);\n      } catch (e) {\n        this._items = [];\n      }\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  @Watch(\"expanded\")\n  expandedWatcher() {\n    this.updateContainer();\n  }\n\n  /** Item click event */\n  @Event() stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;\n\n  @State() hasHiddenItems: boolean = false;\n\n  private navElement: HTMLElement;\n  private itemSizes: [HTMLElement, number][];\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n  private debounceResizeItems: number;\n  private resizeItemsObserver: ResizeObserver;\n\n  private handleClick(item: StzhBreadcrumbItem, originalEvent: MouseEvent) {\n    this.stzhItemClick.emit({\n      component: \"stzh-breadcrumb\",\n      item,\n      originalEvent\n    })\n  }\n\n  private updateContainer = () => {\n    if (!this.navElement || !this.itemSizes) {\n      return;\n    }\n\n    const containerWidth = this.navElement.clientWidth;\n\n    const totalItemsWidthWithoutExpandItem = this.itemSizes\n      .reduce((previous, item, index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          return previous;\n        } else {\n          return previous + item[1];\n        }\n      }, 0);\n\n    if (totalItemsWidthWithoutExpandItem >= containerWidth && this.itemSizes.length > 2 && !this.expanded) {\n      const hideItems = [];\n\n      const expandItemWidth = this.itemSizes[ITEM_EXPAND_INDEX][1];\n      let currentIndexToHide = ITEM_EXPAND_INDEX + SHRINK_DIRECTION;\n      let totalItemsShownWidthWithoutExpandItem = totalItemsWidthWithoutExpandItem;\n\n      do {\n        const current = this.itemSizes[currentIndexToHide];\n        hideItems.push(current[0]);\n        totalItemsShownWidthWithoutExpandItem = totalItemsShownWidthWithoutExpandItem - current[1];\n        currentIndexToHide = currentIndexToHide + SHRINK_DIRECTION;\n      } while (\n        totalItemsShownWidthWithoutExpandItem + expandItemWidth >= containerWidth\n        && currentIndexToHide < this.itemSizes.length\n      );\n\n      this.hasHiddenItems = true;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.remove('is-hidden');\n        } else {\n          item.classList.toggle('is-hidden', hideItems.includes(item));\n        }\n      });\n    } else {\n      this.hasHiddenItems = false;\n\n      this.itemSizes.forEach(([item], index) => {\n        if (index === ITEM_EXPAND_INDEX) {\n          item.classList.add('is-hidden');\n        } else {\n          item.classList.remove('is-hidden');\n        }\n      });\n    }\n  }\n\n  private updateItems = () => {\n    if (!this.navElement) {\n      return;\n    }\n\n    // TODO: current updates all item sizes, but could be optimized only to update really resized items with using passed ResizeObserver entries\n    const items = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item')) as HTMLElement[];\n    this.itemSizes = [];\n\n    items.forEach((item) => {\n      const { width } = item.getBoundingClientRect();\n      this.itemSizes.push([item, width]);\n    })\n\n    this.updateContainer();\n  }\n\n  private handleContainerResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateContainer);\n  }\n\n  private handleItemResize = () => {\n    if (this.debounceResizeItems) {\n      window.cancelAnimationFrame(this.debounceResizeItems);\n    }\n\n    this.debounceResizeItems = requestAnimationFrame(this.updateItems);\n  }\n\n  private handleExpandClick = () => {\n    this.expanded = true;\n\n    const itemLinks = Array.from(this.navElement.querySelectorAll('.stzh-breadcrumb__item-link')) as HTMLElement[];\n    itemLinks[2].focus();\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"breadcrumb\");\n    }\n  }\n\n  componentDidRender() {\n    this.resizeObserver.observe(this.navElement);\n\n    const items = this.navElement.querySelectorAll('.stzh-breadcrumb__item');\n    items.forEach((item) => {\n      this.resizeItemsObserver.observe(item);\n    });\n  }\n\n  connectedCallback() {\n    this.resizeObserver = new ResizeObserver(this.handleContainerResize);\n    this.resizeItemsObserver = new ResizeObserver(this.handleItemResize);\n  }\n\n  disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.resizeItemsObserver) {\n      this.resizeItemsObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-breadcrumb\": true,\n      \"stzh-breadcrumb--is-expanded\": this.expanded,\n      \"stzh-breadcrumb--has-hidden-items\": this.hasHiddenItems,\n      [`stzh-breadcrumb--${this.variant}`]: !!this.variant,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <nav\n            ref={(el) => (this.navElement = el as HTMLElement)}\n            class=\"stzh-breadcrumb__nav\"\n            role=\"navigation\"\n            aria-label={this.localization.title}\n          >\n            <ol class=\"stzh-breadcrumb__list\">\n              {this._items.map((item, index) =>\n                <Fragment>\n                  <li\n                    class={{\n                      \"stzh-breadcrumb__item\": true,\n                      \"is-last\": index + 1 === this._items.length,\n                      \"is-first\": index === 0,\n                    }}\n                  >\n                    <a\n                      aria-current={index + 1 === this._items.length ? \"page\" : null}\n                      href={item.href}\n                      onClick={(e) => this.handleClick(item, e)}\n                      class={{\n                        \"stzh-breadcrumb__item-link\": true,\n                        \"is-link\": !!item.href\n                      }}\n                    >\n                      {index === 0 ?\n                        <stzh-icon\n                          class=\"stzh-breadcrumb__item-icon\"\n                          name=\"home\"\n                        ></stzh-icon>\n                      :\n                        <stzh-icon\n                          class=\"stzh-breadcrumb__item-icon is-separator\"\n                          name=\"angle-right\"\n                        ></stzh-icon>\n                      }\n                      <span class=\"stzh-breadcrumb__item-label\" innerHTML={item.label}></span>\n                    </a>\n                  </li>\n                  {index === 0 &&\n                    <li class=\"stzh-breadcrumb__item is-expand\">\n                      <button class=\"stzh-breadcrumb__item-link\" onClick={this.handleExpandClick}>\n                        <stzh-icon\n                          class=\"stzh-breadcrumb__item-icon is-separator\"\n                          name=\"angle-right\"\n                        ></stzh-icon>\n                        <span class=\"stzh-breadcrumb__item-label\">\n                          <span aria-hdiden=\"true\">\n                            {this.localization.expandLabel}\n                          </span>\n                          <span class=\"stzh-breadcrumb__item-label-hidden\">\n                            {this.localization.expandHiddenLabel}\n                          </span>\n                        </span>\n                      </button>\n                    </li>\n                  }\n                </Fragment>\n              )}\n            </ol>\n          </nav>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --color: var(--stzh-tag-color, #{$colorSecondary60});\n  --height: 24px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space('small')};\n  --padding-right: #{space('small')};\n  --background-color: var(--stzh-tag-background-color, #{$colorGrey20});\n\n  --hover-color: var(--stzh-tag-hover-color, #{$colorSecondary60});\n  --hover-background-color: var(--stzh-tag-hover-background-color, var(--background-color));\n\n  display: inline-flex;\n\n  &[size=\"large\"] {\n    --height: 32px;\n  }\n\n  &[size=\"default\"][type=\"secondary\"] {\n    --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n  }\n\n  &[type=\"secondary\"] {\n    --color: var(--stzh-tag-secondary-color, #{$colorWhite});\n    --background-color: var(--stzh-tag-secondary-background-color, #{$colorSecondary60});\n    --hover-color: var(--stzh-tag-secondary-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-tag-secondary-hover-background-color, var(--background-color));\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-tag-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-tag-disabled-background-color, #{$colorGrey20});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n}\n\n.stzh-tag {\n  position: relative;\n\n  &__button {\n    @include fontSize('nano');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__button:hover {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  /* Size */\n\n  &--size-large &__button {\n    @include font('heavy');\n    @include fontSize('milli');\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhTagType,\n  StzhTagSize,\n  StzhTagClickEvent,\n  StzhTagFocusEvent,\n  StzhTagBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-tag__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-tag\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-tag\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type\n    };\n\n    const Tag = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ?\n            <Tag\n              ref={(el) => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n            :\n            <Tag\n              ref={(el) => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-003bfdda.entry.js → p-10a74052.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,a as e,g as n}from"./p-ef5985a3.js";import{i as a}from"./p-24caf6c1.js";import{w as o}from"./p-70ec7e79.js";import{s as h,a as c,b as d}from"./p-2c0bec3e.js";import"./p-dae15605.js";const r=".sc-stzh-details-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-details-h,[stzh-hidden].sc-stzh-details-h{display:none}.sc-stzh-details-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h .has-focus.sc-stzh-details{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details{outline-style:none !important}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details::-moz-focus-inner{border:0 !important}.sc-stzh-details-h{display:contents;--content-width:var(--stzh-details-content-width, 100%);--content-padding-left:0px;--content-padding-right:var(--stzh-details-content-padding-right, 0px);--content-background:transparent;--content-grid-column:var(--stzh-details-content-grid-column, inherit);--content-border-bottom:none;--content-padding-top:var(--stzh-details-content-padding-top, var(--stzh-space-medium));--content-padding-bottom:0}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{width:var(--content-width);overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}@media print{.stzh-details__content.sc-stzh-details{height:auto !important;overflow:visible !important;display:block !important}}.stzh-details__content-inner.sc-stzh-details{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-left:var(--content-padding-left);padding-right:var(--content-padding-right)}";const l=r;const f={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const p={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let z=0;const g=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=()=>{this.toggle()};this.open=false}async openWatcher(t){if(!this.triggerElement){return}if(this.triggerElement.firstElementChild){const s=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(s?"a11y-expanded":"aria-expanded",t?"true":"false")}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.hidden=false;await c(this.bodyElement,d(f.keyframes,{height:this.bodyElement.scrollHeight}),f.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.style.overflow="hidden";await c(this.bodyElement,d(p.keyframes,{height:this.bodyElement.scrollHeight}),p.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return o(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return o(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}componentWillLoad(){this.detailsId=`stzh-details-${z++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden";if(this.triggerElement.firstElementChild){const t=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls",`${this.detailsId}-content`);this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}}connectedCallback(){var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){s.addEventListener("click",this.onClickTrigger)}}disconnectedCallback(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-details":true,"stzh-details--is-open":this.open};return i(e,{key:"cc16263149f3d22d1fe154cc5045c2acd1bc9527"},i("div",{key:"4293f84ec3bcfc308240ca2930f9419816ed92cf",class:t},i("div",{key:"2892dc8608c83b2ad9e611d7fd6063f321e54940",ref:t=>this.triggerElement=t,class:"stzh-details__trigger"},i("slot",{key:"3dbdf3b7b1cd17f9d46563c079e14a145fbaf83c"})),i("div",{key:"9ae83462c9493312655e1d7c6dc230c99ea67327",id:`${this.detailsId}-content`,ref:t=>this.bodyElement=t,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},i("div",{key:"ed1638244932fcb2e4ca46992eb770b9f67a9d30",class:"stzh-details__content-inner"},i("slot",{key:"05cad692af7ec8e643a956dfaf588607b719e9dd",name:"content"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"]}}};g.style=l;export{g as stzh_details};
-//# sourceMappingURL=p-003bfdda.entry.js.map
+import{r as t,c as s,h as i,a as e,g as n}from"./p-ef5985a3.js";import{i as a}from"./p-09b5eb01.js";import{w as o}from"./p-70ec7e79.js";import{s as h,a as c,b as d}from"./p-2c0bec3e.js";import"./p-dae15605.js";const r=".sc-stzh-details-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-details-h,[stzh-hidden].sc-stzh-details-h{display:none}.sc-stzh-details-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-details-h *.sc-stzh-details,.sc-stzh-details-h *.sc-stzh-details::before,.sc-stzh-details-h *.sc-stzh-details::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-details-h .has-focus.sc-stzh-details{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details{outline-style:none !important}.sc-stzh-details-h .stzh-fylingfocus-focused.sc-stzh-details::-moz-focus-inner{border:0 !important}.sc-stzh-details-h{display:contents;--content-width:var(--stzh-details-content-width, 100%);--content-padding-left:0px;--content-padding-right:var(--stzh-details-content-padding-right, 0px);--content-background:transparent;--content-grid-column:var(--stzh-details-content-grid-column, inherit);--content-border-bottom:none;--content-padding-top:var(--stzh-details-content-padding-top, var(--stzh-space-medium));--content-padding-bottom:0}.stzh-details.sc-stzh-details,.stzh-details__trigger.sc-stzh-details{display:contents}.stzh-details__content.sc-stzh-details{width:var(--content-width);overflow:hidden;background-color:var(--content-background);grid-column:var(--content-grid-column);border-bottom:var(--content-border-bottom)}@media print{.stzh-details__content.sc-stzh-details{height:auto !important;overflow:visible !important;display:block !important}}.stzh-details__content-inner.sc-stzh-details{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-left:var(--content-padding-left);padding-right:var(--content-padding-right)}";const l=r;const f={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const p={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let z=0;const g=class{constructor(i){t(this,i);this.stzhOpen=s(this,"stzhOpen",7);this.stzhOpened=s(this,"stzhOpened",7);this.stzhClose=s(this,"stzhClose",7);this.stzhClosed=s(this,"stzhClosed",7);this.toggledByMethod=false;this.onClickTrigger=()=>{this.toggle()};this.open=false}async openWatcher(t){if(!this.triggerElement){return}if(this.triggerElement.firstElementChild){const s=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(s?"a11y-expanded":"aria-expanded",t?"true":"false")}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.hidden=false;await c(this.bodyElement,d(f.keyframes,{height:this.bodyElement.scrollHeight}),f.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await h(this.bodyElement);this.bodyElement.style.overflow="hidden";await c(this.bodyElement,d(p.keyframes,{height:this.bodyElement.scrollHeight}),p.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open){return}this.toggledByMethod=true;this.open=true;return o(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return o(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}componentWillLoad(){this.detailsId=`stzh-details-${z++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden";if(this.triggerElement.firstElementChild){const t=a(this.triggerElement.firstElementChild);this.triggerElement.firstElementChild.setAttribute(t?"a11y-controls":"aria-controls",`${this.detailsId}-content`);this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false")}}connectedCallback(){var t;let s=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!s){const t=Array.from(this.element.children).find((t=>!t.hasAttribute("slot")));s=t}if(s){s.addEventListener("click",this.onClickTrigger)}}disconnectedCallback(){if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger)}}render(){const t={"stzh-details":true,"stzh-details--is-open":this.open};return i(e,{key:"cc16263149f3d22d1fe154cc5045c2acd1bc9527"},i("div",{key:"4293f84ec3bcfc308240ca2930f9419816ed92cf",class:t},i("div",{key:"2892dc8608c83b2ad9e611d7fd6063f321e54940",ref:t=>this.triggerElement=t,class:"stzh-details__trigger"},i("slot",{key:"3dbdf3b7b1cd17f9d46563c079e14a145fbaf83c"})),i("div",{key:"9ae83462c9493312655e1d7c6dc230c99ea67327",id:`${this.detailsId}-content`,ref:t=>this.bodyElement=t,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},i("div",{key:"ed1638244932fcb2e4ca46992eb770b9f67a9d30",class:"stzh-details__content-inner"},i("slot",{key:"05cad692af7ec8e643a956dfaf588607b719e9dd",name:"content"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"]}}};g.style=l;export{g as stzh_details};
+//# sourceMappingURL=p-10a74052.entry.js.map

package/dist/stzh-components/{p-4840a0f7.entry.js → p-13a77a74.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,a as o,g as n}from"./p-ef5985a3.js";import{w as s}from"./p-70ec7e79.js";import{s as r,a,b as l}from"./p-2c0bec3e.js";import{h}from"./p-24caf6c1.js";import"./p-dae15605.js";const c=':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}:host{--content-padding-bottom:var(--stzh-space-medium);--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--description-color:var(--stzh-color-black);--heading-margin-bottom:var(--stzh-space-medium);--button-color:var(--stzh-color-primary70);--button-background-color:transparent;--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-milli-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-milli-heading-line-height));--button-letter-spacing:var(--stzh-timeline-nested-button-line-height, normal);--bullet-color:var(--stzh-color-primary70);--bullet-background-color:var(--stzh-color-grey20);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-centi-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-centi-heading-line-height))}}:host(:where([is-foldable])){--button-background-color:var(--stzh-color-grey10);--bullet-color:var(--stzh-color-black);--bullet-background-color:var(--stzh-color-secondary20);--hover-button-background-color:var(--stzh-color-grey20);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable])){--button-color:Highlight;--hover-button-color:Highlight}}:host(:where([open]:not([open=false]))){--heading-margin-bottom:0px}:host(:where([is-foldable][open]:not([open=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-primary70);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable][open]:not([open=false]))){--button-color:SelectedItem;--bullet-color:SelectedItem;--hover-button-color:SelectedItem;--hover-bullet-color:SelectedItem}}:host(:where([completed]:not([completed=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-secondary60);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}:host(:where([is-foldable][open]:not([open=false]))){--hover-bullet-background-color:var(--stzh-color-secondary70)}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-grey60);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}.stzh-timeline-item{display:flex;flex-direction:column;}.stzh-timeline-item__heading{position:relative;margin:0}.stzh-timeline-item__button{font-size:var(--button-font-size);line-height:var(--button-line-height);letter-spacing:var(--button-letter-spacing);font-family:inherit;width:100%;appearance:none;background-color:transparent;padding:0;border:none;display:flex;color:var(--button-color);text-align:left;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:default}.stzh-timeline-item__button:hover{color:var(--hover-button-color)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button{transition:none}}.stzh-timeline-item__button-inner{display:flex;flex-grow:1;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);background-color:var(--button-background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);min-height:var(--stzh-timeline-bullet-size);padding-left:var(--stzh-space-xsmall);padding-right:var(--stzh-space-small)}.stzh-timeline-item__button:hover .stzh-timeline-item__button-inner{background-color:var(--hover-button-background-color)}.stzh-timeline-item__button,.stzh-timeline-item__content-inner{padding-left:var(--stzh-timeline-bullet-size)}.stzh-timeline-item__button-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);flex-grow:1}.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xsmall);align-self:flex-start;position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xlarge)}}.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform;transition-duration:500ms;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{transition:none}}.stzh-timeline-item__button-icon::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-timeline-item__button-icon::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-timeline-item__bullet{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);position:absolute;top:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--stzh-timeline-bullet-size);height:var(--stzh-timeline-bullet-size);color:var(--bullet-color);background-color:var(--bullet-background-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__bullet{transition:none}}.stzh-timeline-item__button:hover .stzh-timeline-item__bullet{color:var(--hover-bullet-color);background-color:var(--hover-bullet-background-color)}.stzh-timeline-item__bullet-icon-wrapper{--stzh-icon-size:var(--icon-size);display:flex}.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xxsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(--stzh-font-micro-heading-line-height);overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-nested-button-font-size:var(--stzh-font-milli-font-size);--stzh-timeline-nested-button-line-height:var(--stzh-font-milli-heading-line-height)}}@media print{.stzh-timeline-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-timeline-item__content-inner{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-right:var(--content-padding-right)}.stzh-timeline-item__badge{position:absolute;right:-0.3125rem;top:-0.375rem}.stzh-timeline-item__description{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));color:var(--description-color);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-timeline-item__description{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))}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__description{transition:none}}.stzh-timeline-item__heading{margin-bottom:var(--heading-margin-bottom);transition:margin-bottom var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__heading{transition:none}}.stzh-timeline-item__heading-text,.stzh-timeline-item__description{display:block}.stzh-timeline-item--is-foldable .stzh-timeline-item__button{cursor:pointer}.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::before,.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::after{transform:rotate(0) translate(-50%, -50%)}.stzh-timeline-item--is-disabled .stzh-timeline-item__button{cursor:not-allowed}';const d=c;const m={keyframes:[{height:"0"},{height:"auto"}],options:{duration:300,easing:"linear"}};const b={keyframes:[{height:"auto"},{height:"0"}],options:{duration:300,easing:"linear"}};let f=0;const u=class{constructor(i){t(this,i);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.toggledByMethod=false;this.focusedByInput=false;this.shiftPressed=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.buttonElement.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;if(this.shiftPressed){this.rootTabindex=-1}this.stzhFocus.emit({component:"stzh-timeline-item",originalEvent:t})};this.onBlur=t=>{this.rootTabindex=0;this.stzhBlur.emit({component:"stzh-timeline-item",originalEvent:t})};this.handleFoldableChange=t=>{this.foldableWatcher(this.foldable)};this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.timeline||this.timeline.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onButtonKeydown=t=>{let e=null;if(t.key==="ArrowDown"){e="next"}else if(t.key==="ArrowUp"){e="prev"}else if(t.key==="Home"){e="first"}else if(t.key==="End"){e="last"}else if(t.key==="PageDown"&&t.ctrlKey){e="next"}else if(t.key==="PageUp"&&t.ctrlKey){e="prev"}if(t.key==="Shift"){this.rootTabindex=-1}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let e=null;if(t.key==="PageDown"){e="next"}else if(t.key==="PageUp"){e="prev"}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.foldable=undefined;this.collapsible=undefined;this.open=false;this.disabled=false;this.completed=false;this.heading="";this.description="";this.step=1;this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined;this.rootTabindex=0;this._foldable=false}async show(){if(this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=true;return s(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=false;return s(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.hidden=false;await a(this.bodyElement,l(m.keyframes,{height:this.bodyElement.scrollHeight}),m.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-timeline-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.style.overflow="hidden";await a(this.bodyElement,l(b.keyframes,{height:this.bodyElement.scrollHeight}),b.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-timeline-item"})}}this.toggledByMethod=false}foldableWatcher(t){if(typeof t!=="undefined"){this._foldable=t}else if(this.timeline){this._foldable=this.timeline.foldable}if(!this._foldable){this.open=true}}handleKeydown(t){if(t.key==="Shift"){this.shiftPressed=true}}handleKeyup(t){if(t.key==="Shift"){this.shiftPressed=false}}componentWillLoad(){this.timelineItemId=`stzh-timeline-item-${f++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden"}async connectedCallback(){this.timeline=this.element.closest("stzh-timeline");if(this.timeline){this.timeline.addEventListener("stzhFoldableChange",this.handleFoldableChange)}this.foldableWatcher(this.foldable)}disconnectedCallback(){if(this.timeline){this.timeline.removeEventListener("stzhFoldableChange",this.handleFoldableChange);this.timeline=null}}render(){const t=`h${this.headingLevel}`;const e=!!this.icon||h(this.element,"icon");const n={"stzh-timeline-item":true,"stzh-timeline-item--has-description":!!this.description,"stzh-timeline-item--is-open":this.open,"stzh-timeline-item--is-disabled":this.disabled,"stzh-timeline-item--is-foldable":this._foldable,"stzh-timeline-item--is-completed":this.completed};return i(o,{key:"3c2c1bf7f7ed4dc326e9609ab1b03a24c0a6285c",role:"listitem","is-foldable":this._foldable,tabindex:this.disabled?null:this.rootTabindex,onFocus:this.onRootFocus},i("div",{key:"707e8d46f03475e1f5600843ff66f7e3aa044fe8",class:n},i(t,{key:"ac7f344dcb75395f1a7ca24238b623a01a1a9438",id:`${this.timelineItemId}-header`,class:"stzh-timeline-item__heading",onClick:this.handleHeaderClick},i("button",{key:"5f15c93c15f7fc7fb4e7978b81ba48014dc03002",ref:t=>this.buttonElement=t,class:"stzh-timeline-item__button","aria-controls":`${this.timelineItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,"aria-disabled":!this._foldable?"true":"false",disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},i("span",{key:"b37cadceff7a433bcdd8b333752e7078462a4d9b",class:"stzh-timeline-item__bullet"},e||this.completed?i("span",{class:"stzh-timeline-item__bullet-icon-wrapper"},this.icon||this.completed?i("stzh-icon",{class:"stzh-timeline-item__bullet-icon",name:this.icon?this.icon:"checkmark"}):i("slot",{name:"icon"})):i("span",{class:"stzh-timeline-item__bullet-text"},this.step),(this.badge||this.badgeEmpty)&&i("stzh-badge",{key:"cc7e09e2a77952d6b7c369140580860b5fc9d564",class:"stzh-timeline-item__badge",label:this.badge,type:this.badgeType})),i("div",{key:"ecaa29344e2528e5e221281bfe91b91f47bfd777",class:"stzh-timeline-item__button-inner"},i("span",{key:"d11c1f40e12520b9359c616b7b9071c465175e4c",class:"stzh-timeline-item__button-text"},i("span",{key:"b8dd636785f08e39861ffed5968ca1bbc90fd2ca",class:"stzh-timeline-item__heading-text"},this.heading),i("span",{key:"3f5a7ab08e29e6fe1265129210bcf8a8236f54cc",class:"stzh-timeline-item__description"},this.description)),this._foldable&&i("span",{key:"bcdee61767ab8b9c633e08c27d58d364254b5226",class:"stzh-timeline-item__button-icon"})))),i("div",{key:"c41c0451f2d11a484620807b91a2df6332625502",id:`${this.timelineItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-timeline-item__content","aria-labelledby":`${this.timelineItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},i("div",{key:"bee24d04c179fdb8caeffff975d245896a5e752e",class:"stzh-timeline-item__content-inner"},i("slot",{key:"93fded4ab19e0a31433403cf80f3444da21b55b9"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"],foldable:["foldableWatcher"]}}};u.style=d;export{u as stzh_timeline_item};
-//# sourceMappingURL=p-4840a0f7.entry.js.map
+import{r as t,c as e,h as i,a as o,g as n}from"./p-ef5985a3.js";import{w as s}from"./p-70ec7e79.js";import{s as r,a,b as l}from"./p-2c0bec3e.js";import{h}from"./p-09b5eb01.js";import"./p-dae15605.js";const c=':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}:host{--content-padding-bottom:var(--stzh-space-medium);--trigger-size:1.125rem;--icon-size:var(--stzh-icon-size);--description-color:var(--stzh-color-black);--heading-margin-bottom:var(--stzh-space-medium);--button-color:var(--stzh-color-primary70);--button-background-color:transparent;--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-milli-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-milli-heading-line-height));--button-letter-spacing:var(--stzh-timeline-nested-button-line-height, normal);--bullet-color:var(--stzh-color-primary70);--bullet-background-color:var(--stzh-color-grey20);--content-padding-top:var(--stzh-timeline-content-padding-top);--content-padding-right:0px;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}@media screen and (min-width: 600px){:host{--content-padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--content-padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--content-padding-bottom:var(--stzh-space-xxlarge)}}@media print{:host{page-break-inside:avoid;break-inside:avoid}}@media screen and (min-width: 600px){:host{--button-font-size:var(--stzh-timeline-nested-button-font-size, var(--stzh-font-centi-font-size));--button-line-height:var(--stzh-timeline-nested-button-line-height, var(--stzh-font-centi-heading-line-height))}}:host(:where([is-foldable])){--button-background-color:var(--stzh-color-grey10);--bullet-color:var(--stzh-color-black);--bullet-background-color:var(--stzh-color-secondary20);--hover-button-background-color:var(--stzh-color-grey20);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable])){--button-color:Highlight;--hover-button-color:Highlight}}:host(:where([open]:not([open=false]))){--heading-margin-bottom:0px}:host(:where([is-foldable][open]:not([open=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-primary70);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-foldable][open]:not([open=false]))){--button-color:SelectedItem;--bullet-color:SelectedItem;--hover-button-color:SelectedItem;--hover-bullet-color:SelectedItem}}:host(:where([completed]:not([completed=false]))){--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-secondary60);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}:host(:where([is-foldable][open]:not([open=false]))){--hover-bullet-background-color:var(--stzh-color-secondary70)}:host(:where([disabled]:not([disabled=false]))){--button-color:var(--stzh-color-grey80);--bullet-color:var(--stzh-color-white);--bullet-background-color:var(--stzh-color-grey60);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-bullet-color:var(--bullet-color);--hover-bullet-background-color:var(--bullet-background-color)}.stzh-timeline-item{display:flex;flex-direction:column;}.stzh-timeline-item__heading{position:relative;margin:0}.stzh-timeline-item__button{font-size:var(--button-font-size);line-height:var(--button-line-height);letter-spacing:var(--button-letter-spacing);font-family:inherit;width:100%;appearance:none;background-color:transparent;padding:0;border:none;display:flex;color:var(--button-color);text-align:left;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:default}.stzh-timeline-item__button:hover{color:var(--hover-button-color)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button{transition:none}}.stzh-timeline-item__button-inner{display:flex;flex-grow:1;align-items:center;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall);background-color:var(--button-background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);min-height:var(--stzh-timeline-bullet-size);padding-left:var(--stzh-space-xsmall);padding-right:var(--stzh-space-small)}.stzh-timeline-item__button:hover .stzh-timeline-item__button-inner{background-color:var(--hover-button-background-color)}.stzh-timeline-item__button,.stzh-timeline-item__content-inner{padding-left:var(--stzh-timeline-bullet-size)}.stzh-timeline-item__button-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);flex-grow:1}.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xsmall);align-self:flex-start;position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-timeline-item__button-icon{margin-left:var(--stzh-space-xlarge)}}.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform;transition-duration:500ms;transform-origin:top left;background-color:currentColor}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{background-color:CanvasText}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__button-icon::before,.stzh-timeline-item__button-icon::after{transition:none}}.stzh-timeline-item__button-icon::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-timeline-item__button-icon::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-timeline-item__bullet{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);position:absolute;top:0;left:0;z-index:1;display:flex;justify-content:center;align-items:center;width:var(--stzh-timeline-bullet-size);height:var(--stzh-timeline-bullet-size);color:var(--bullet-color);background-color:var(--bullet-background-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__bullet{transition:none}}.stzh-timeline-item__button:hover .stzh-timeline-item__bullet{color:var(--hover-bullet-color);background-color:var(--hover-bullet-background-color)}.stzh-timeline-item__bullet-icon-wrapper{--stzh-icon-size:var(--icon-size);display:flex}.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xxsmall);--stzh-timeline-nested-button-font-size:var(--stzh-font-micro-font-size);--stzh-timeline-nested-button-line-height:var(--stzh-font-micro-heading-line-height);overflow:hidden}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-timeline-item__content{--stzh-timeline-content-padding-top:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-timeline-item__content{--stzh-timeline-nested-button-font-size:var(--stzh-font-milli-font-size);--stzh-timeline-nested-button-line-height:var(--stzh-font-milli-heading-line-height)}}@media print{.stzh-timeline-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-timeline-item__content-inner{padding-top:var(--content-padding-top);padding-bottom:var(--content-padding-bottom);padding-right:var(--content-padding-right)}.stzh-timeline-item__badge{position:absolute;right:-0.3125rem;top:-0.375rem}.stzh-timeline-item__description{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));color:var(--description-color);transition:color var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-timeline-item__description{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))}}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__description{transition:none}}.stzh-timeline-item__heading{margin-bottom:var(--heading-margin-bottom);transition:margin-bottom var(--stzh-base-transition-animation-speed)}@media (prefers-reduced-motion: reduce){.stzh-timeline-item__heading{transition:none}}.stzh-timeline-item__heading-text,.stzh-timeline-item__description{display:block}.stzh-timeline-item--is-foldable .stzh-timeline-item__button{cursor:pointer}.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::before,.stzh-timeline-item--is-open .stzh-timeline-item__button-icon::after{transform:rotate(0) translate(-50%, -50%)}.stzh-timeline-item--is-disabled .stzh-timeline-item__button{cursor:not-allowed}';const d=c;const m={keyframes:[{height:"0"},{height:"auto"}],options:{duration:300,easing:"linear"}};const b={keyframes:[{height:"auto"},{height:"0"}],options:{duration:300,easing:"linear"}};let f=0;const u=class{constructor(i){t(this,i);this.stzhOpen=e(this,"stzhOpen",7);this.stzhOpened=e(this,"stzhOpened",7);this.stzhClose=e(this,"stzhClose",7);this.stzhClosed=e(this,"stzhClosed",7);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.toggledByMethod=false;this.focusedByInput=false;this.shiftPressed=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.buttonElement.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;if(this.shiftPressed){this.rootTabindex=-1}this.stzhFocus.emit({component:"stzh-timeline-item",originalEvent:t})};this.onBlur=t=>{this.rootTabindex=0;this.stzhBlur.emit({component:"stzh-timeline-item",originalEvent:t})};this.handleFoldableChange=t=>{this.foldableWatcher(this.foldable)};this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.timeline||this.timeline.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onButtonKeydown=t=>{let e=null;if(t.key==="ArrowDown"){e="next"}else if(t.key==="ArrowUp"){e="prev"}else if(t.key==="Home"){e="first"}else if(t.key==="End"){e="last"}else if(t.key==="PageDown"&&t.ctrlKey){e="next"}else if(t.key==="PageUp"&&t.ctrlKey){e="prev"}if(t.key==="Shift"){this.rootTabindex=-1}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let e=null;if(t.key==="PageDown"){e="next"}else if(t.key==="PageUp"){e="prev"}if(e){t.preventDefault();this.timeline.setItemFocus(this.element,e)}};this.foldable=undefined;this.collapsible=undefined;this.open=false;this.disabled=false;this.completed=false;this.heading="";this.description="";this.step=1;this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined;this.rootTabindex=0;this._foldable=false}async show(){if(this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=true;return s(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled||!this._foldable){return}this.toggledByMethod=true;this.open=false;return s(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.hidden=false;await a(this.bodyElement,l(m.keyframes,{height:this.bodyElement.scrollHeight}),m.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-timeline-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-timeline-item"})}await r(this.bodyElement);this.bodyElement.style.overflow="hidden";await a(this.bodyElement,l(b.keyframes,{height:this.bodyElement.scrollHeight}),b.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-timeline-item"})}}this.toggledByMethod=false}foldableWatcher(t){if(typeof t!=="undefined"){this._foldable=t}else if(this.timeline){this._foldable=this.timeline.foldable}if(!this._foldable){this.open=true}}handleKeydown(t){if(t.key==="Shift"){this.shiftPressed=true}}handleKeyup(t){if(t.key==="Shift"){this.shiftPressed=false}}componentWillLoad(){this.timelineItemId=`stzh-timeline-item-${f++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden"}async connectedCallback(){this.timeline=this.element.closest("stzh-timeline");if(this.timeline){this.timeline.addEventListener("stzhFoldableChange",this.handleFoldableChange)}this.foldableWatcher(this.foldable)}disconnectedCallback(){if(this.timeline){this.timeline.removeEventListener("stzhFoldableChange",this.handleFoldableChange);this.timeline=null}}render(){const t=`h${this.headingLevel}`;const e=!!this.icon||h(this.element,"icon");const n={"stzh-timeline-item":true,"stzh-timeline-item--has-description":!!this.description,"stzh-timeline-item--is-open":this.open,"stzh-timeline-item--is-disabled":this.disabled,"stzh-timeline-item--is-foldable":this._foldable,"stzh-timeline-item--is-completed":this.completed};return i(o,{key:"3c2c1bf7f7ed4dc326e9609ab1b03a24c0a6285c",role:"listitem","is-foldable":this._foldable,tabindex:this.disabled?null:this.rootTabindex,onFocus:this.onRootFocus},i("div",{key:"707e8d46f03475e1f5600843ff66f7e3aa044fe8",class:n},i(t,{key:"ac7f344dcb75395f1a7ca24238b623a01a1a9438",id:`${this.timelineItemId}-header`,class:"stzh-timeline-item__heading",onClick:this.handleHeaderClick},i("button",{key:"5f15c93c15f7fc7fb4e7978b81ba48014dc03002",ref:t=>this.buttonElement=t,class:"stzh-timeline-item__button","aria-controls":`${this.timelineItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,"aria-disabled":!this._foldable?"true":"false",disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},i("span",{key:"b37cadceff7a433bcdd8b333752e7078462a4d9b",class:"stzh-timeline-item__bullet"},e||this.completed?i("span",{class:"stzh-timeline-item__bullet-icon-wrapper"},this.icon||this.completed?i("stzh-icon",{class:"stzh-timeline-item__bullet-icon",name:this.icon?this.icon:"checkmark"}):i("slot",{name:"icon"})):i("span",{class:"stzh-timeline-item__bullet-text"},this.step),(this.badge||this.badgeEmpty)&&i("stzh-badge",{key:"cc7e09e2a77952d6b7c369140580860b5fc9d564",class:"stzh-timeline-item__badge",label:this.badge,type:this.badgeType})),i("div",{key:"ecaa29344e2528e5e221281bfe91b91f47bfd777",class:"stzh-timeline-item__button-inner"},i("span",{key:"d11c1f40e12520b9359c616b7b9071c465175e4c",class:"stzh-timeline-item__button-text"},i("span",{key:"b8dd636785f08e39861ffed5968ca1bbc90fd2ca",class:"stzh-timeline-item__heading-text"},this.heading),i("span",{key:"3f5a7ab08e29e6fe1265129210bcf8a8236f54cc",class:"stzh-timeline-item__description"},this.description)),this._foldable&&i("span",{key:"bcdee61767ab8b9c633e08c27d58d364254b5226",class:"stzh-timeline-item__button-icon"})))),i("div",{key:"c41c0451f2d11a484620807b91a2df6332625502",id:`${this.timelineItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-timeline-item__content","aria-labelledby":`${this.timelineItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},i("div",{key:"bee24d04c179fdb8caeffff975d245896a5e752e",class:"stzh-timeline-item__content-inner"},i("slot",{key:"93fded4ab19e0a31433403cf80f3444da21b55b9"})))))}get element(){return n(this)}static get watchers(){return{open:["openWatcher"],foldable:["foldableWatcher"]}}};u.style=d;export{u as stzh_timeline_item};
+//# sourceMappingURL=p-13a77a74.entry.js.map

package/dist/stzh-components/{p-98c1b82e.entry.js → p-16e70122.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,f as i,a,g as o}from"./p-ef5985a3.js";import{t as e}from"./p-9ed1a9d3.js";import{h as c}from"./p-24caf6c1.js";import"./p-6997324b.js";import"./p-1ab64d01.js";import"./p-dae15605.js";const n=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],: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}:host{--gap:var(--stzh-space-small);--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--stuck-offset:calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  )}@media screen and (min-width: 900px){:host{--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@media print{:host{display:none}}.stzh-sticky-actions{}.stzh-sticky-actions__container{display:flex;justify-content:flex-end;transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky-actions__sticky{--padding-top:0px;--padding-bottom:var(--sticky-padding-bottom)}.stzh-sticky-actions__sticky[is-stuck-bottom] .stzh-sticky-actions__container{transform:translateY(calc(var(--stuck-offset) / -1))}.stzh-sticky-actions__scrollup-wrapper{transition-property:transform, opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed);opacity:0;visibility:hidden;transform:translateX(var(--stzh-sticky-actions-scrollup-width, 44px))}.stzh-sticky-actions.has-chat .stzh-sticky-actions__scrollup-wrapper{transform:translateX(calc(var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap)))}.stzh-sticky-actions.has-scrollup .stzh-sticky-actions__chat-wrapper{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))))}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__scrollup-wrapper{opacity:1;visibility:visible;transform:translateX(0px)}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper{transform:translateX(calc(var(--gap) / -1))}.stzh-sticky-actions.is-not-slotted{height:0}";const r=n;const h=class{constructor(s){t(this,s);this.observePagetitle=t=>{this.hasActiveScrollup=!t[0].isIntersecting};this.updateScrollupWidth=()=>{if(this.scrollupElement&&this.element.isConnected){const{width:t}=this.scrollupElement.getBoundingClientRect();document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width",`${t}px`)}};this.handleScrollupResize=e(this.updateScrollupWidth,100);this.pagetitleQuery="stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights";this.hasActiveScrollup=false;this.isSlotted=true}hasActiveScrollupWatcher(t){document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active",t?"1":"0");document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active",t?"0":"1")}componentDidLoad(){this.isSlotted=!!this.element.assignedSlot;const t=typeof this.pagetitleQuery==="string"?document.querySelector(this.pagetitleQuery):this.pagetitleQuery();if(t){this.observer=new IntersectionObserver(this.observePagetitle,{rootMargin:"0px"});this.observer.observe(t)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateScrollupWidth();this.resizeObserver=new ResizeObserver(this.handleScrollupResize);this.resizeObserver.observe(this.scrollupElement)}))}))}disconnectedCallback(){var t,s;(t=this.observer)===null||t===void 0?void 0:t.disconnect();(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}render(){const t=c(this.element,"chat");const o=c(this.element,"scrollup");const e={"stzh-sticky-actions":true,"has-chat":t,"has-scrollup":o,"has-active-scrollup":this.hasActiveScrollup,"is-not-slotted":!this.isSlotted};return s(a,{key:"d165f1d0eda3bd8feda3381396f1260f8daa1f5e"},s("div",{key:"f3767b73ef5abd83f587ef4d9eab62a18c270542",class:e,"data-stzh-sticky-width-container":true},s("stzh-sticky",{key:"f602b5ebe7ae611b5acf0ce7eb33c7804150facd",name:"actions",class:"stzh-sticky-actions__sticky",position:"fixed",variant:"transparent",disableStickyTop:true},s("div",{key:"145d168a3b70c6ef9745893a403d244491f755d6",class:"stzh-sticky-actions__container"},s("div",{key:"8aacfaa22da5d2185d69873380ca46ae2f285286",class:"stzh-sticky-actions__chat-wrapper"},s("slot",{key:"624b167c2fec2ea39289d0c4337ecdac297fa87e",name:"chat",onSlotchange:()=>i(this.element)})),s("div",{key:"31c2927b99b5cea49aaf80e7f8f43d0c138ff5d4",ref:t=>this.scrollupElement=t,class:"stzh-sticky-actions__scrollup-wrapper"},s("slot",{key:"b7dcd0534e3e1a8429759b40f281de0c322f72b0",name:"scrollup",onSlotchange:()=>i(this.element)}))))))}get element(){return o(this)}static get watchers(){return{hasActiveScrollup:["hasActiveScrollupWatcher"]}}};h.style=r;export{h as stzh_sticky_actions};
-//# sourceMappingURL=p-98c1b82e.entry.js.map
+import{r as t,h as s,f as i,a,g as o}from"./p-ef5985a3.js";import{t as e}from"./p-9ed1a9d3.js";import{h as c}from"./p-09b5eb01.js";import"./p-6997324b.js";import"./p-1ab64d01.js";import"./p-dae15605.js";const n=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],: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}:host{--gap:var(--stzh-space-small);--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-small));--stuck-offset:calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px)\n    + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  )}@media screen and (min-width: 900px){:host{--sticky-padding-bottom:var(--stzh-sticky-actions-sticky-padding-bottom, var(--stzh-space-medium))}}@media print{:host{display:none}}.stzh-sticky-actions{}.stzh-sticky-actions__container{display:flex;justify-content:flex-end;transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky-actions__sticky{--padding-top:0px;--padding-bottom:var(--sticky-padding-bottom)}.stzh-sticky-actions__sticky[is-stuck-bottom] .stzh-sticky-actions__container{transform:translateY(calc(var(--stuck-offset) / -1))}.stzh-sticky-actions__scrollup-wrapper{transition-property:transform, opacity, visibility;transition-duration:var(--stzh-base-transition-animation-speed);opacity:0;visibility:hidden;transform:translateX(var(--stzh-sticky-actions-scrollup-width, 44px))}.stzh-sticky-actions.has-chat .stzh-sticky-actions__scrollup-wrapper{transform:translateX(calc(var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap)))}.stzh-sticky-actions.has-scrollup .stzh-sticky-actions__chat-wrapper{transition-property:transform;transition-duration:var(--stzh-base-transition-animation-speed);transform:translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))))}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__scrollup-wrapper{opacity:1;visibility:visible;transform:translateX(0px)}.stzh-sticky-actions.has-active-scrollup .stzh-sticky-actions__chat-wrapper{transform:translateX(calc(var(--gap) / -1))}.stzh-sticky-actions.is-not-slotted{height:0}";const r=n;const h=class{constructor(s){t(this,s);this.observePagetitle=t=>{this.hasActiveScrollup=!t[0].isIntersecting};this.updateScrollupWidth=()=>{if(this.scrollupElement&&this.element.isConnected){const{width:t}=this.scrollupElement.getBoundingClientRect();document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width",`${t}px`)}};this.handleScrollupResize=e(this.updateScrollupWidth,100);this.pagetitleQuery="stzh-pagetitle, stzh-pagetitle-hero, stzh-pagetitle-home, stzh-pi-pagetitle, stzh-pi-pagetitle, stzh-homepage-service-highlights";this.hasActiveScrollup=false;this.isSlotted=true}hasActiveScrollupWatcher(t){document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active",t?"1":"0");document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active",t?"0":"1")}componentDidLoad(){this.isSlotted=!!this.element.assignedSlot;const t=typeof this.pagetitleQuery==="string"?document.querySelector(this.pagetitleQuery):this.pagetitleQuery();if(t){this.observer=new IntersectionObserver(this.observePagetitle,{rootMargin:"0px"});this.observer.observe(t)}requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updateScrollupWidth();this.resizeObserver=new ResizeObserver(this.handleScrollupResize);this.resizeObserver.observe(this.scrollupElement)}))}))}disconnectedCallback(){var t,s;(t=this.observer)===null||t===void 0?void 0:t.disconnect();(s=this.resizeObserver)===null||s===void 0?void 0:s.disconnect()}render(){const t=c(this.element,"chat");const o=c(this.element,"scrollup");const e={"stzh-sticky-actions":true,"has-chat":t,"has-scrollup":o,"has-active-scrollup":this.hasActiveScrollup,"is-not-slotted":!this.isSlotted};return s(a,{key:"d165f1d0eda3bd8feda3381396f1260f8daa1f5e"},s("div",{key:"f3767b73ef5abd83f587ef4d9eab62a18c270542",class:e,"data-stzh-sticky-width-container":true},s("stzh-sticky",{key:"f602b5ebe7ae611b5acf0ce7eb33c7804150facd",name:"actions",class:"stzh-sticky-actions__sticky",position:"fixed",variant:"transparent",disableStickyTop:true},s("div",{key:"145d168a3b70c6ef9745893a403d244491f755d6",class:"stzh-sticky-actions__container"},s("div",{key:"8aacfaa22da5d2185d69873380ca46ae2f285286",class:"stzh-sticky-actions__chat-wrapper"},s("slot",{key:"624b167c2fec2ea39289d0c4337ecdac297fa87e",name:"chat",onSlotchange:()=>i(this.element)})),s("div",{key:"31c2927b99b5cea49aaf80e7f8f43d0c138ff5d4",ref:t=>this.scrollupElement=t,class:"stzh-sticky-actions__scrollup-wrapper"},s("slot",{key:"b7dcd0534e3e1a8429759b40f281de0c322f72b0",name:"scrollup",onSlotchange:()=>i(this.element)}))))))}get element(){return o(this)}static get watchers(){return{hasActiveScrollup:["hasActiveScrollupWatcher"]}}};h.style=r;export{h as stzh_sticky_actions};
+//# sourceMappingURL=p-16e70122.entry.js.map