@oiz/stzh-components 3.0.0-beta5 → 3.0.0

package/dist/esm/stzh-skin-portal-mitwirken.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-skin-portal-mitwirken.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,ysiLAAysiL;;MCa/tiL,uBAAuB;;;;EAClC,gBAAgB;;IAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;GAC/E;EAED,MAAM;IACJ,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;","names":[],"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"],"version":3}
+{"file":"stzh-skin-portal-mitwirken.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,yhjLAAyhjL;;MCa/ijL,uBAAuB;;;;EAClC,gBAAgB;;IAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;GAC/E;EAED,MAAM;IACJ,QACE,EAAC,IAAI,OACE,EACP;GACH;;;;;;","names":[],"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"],"version":3}

package/dist/esm/stzh-textandimage.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, h, f as forceUpdate, a as Host, g as getElement
 import { h as hasSlot, s as setPropsIfNull } from './utils-54aead01.js';
 import './string-utils-e252977e.js';
 
-const stzhTextandimageCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium);--grid-template-areas:var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );--grid-template-columns:var(\n    --stzh-textandimage-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    )}}@media screen and (min-width: 900px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );--grid-template-columns:var(\n      --stzh-textandimage-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    )}}@media screen and (min-width: 900px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    )}}@media screen and (min-width: 900px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    )}}:host([single]:not([single=false])){--grid-template-areas:var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  )}@media screen and (min-width: 600px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    )}}@media screen and (min-width: 900px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    )}}.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--row-gap);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);}@media screen and (min-width: 600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-textandimage__left{grid-area:text}.stzh-textandimage__right{grid-area:image}.stzh-textandimage--is-single .stzh-textandimage__right{grid-area:text}";
+const stzhTextandimageCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium);--grid-template-areas:var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );--grid-template-columns:var(\n    --stzh-textandimage-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    )}}@media screen and (min-width: 900px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );--grid-template-columns:var(\n      --stzh-textandimage-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    )}}@media screen and (min-width: 900px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    )}}@media screen and (min-width: 600px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    )}}@media screen and (min-width: 900px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    )}}@media screen and (min-width: 1260px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    )}}:host([single]:not([single=false])){--grid-template-areas:var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  )}@media screen and (min-width: 600px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    )}}@media screen and (min-width: 900px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    )}}.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--row-gap);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);}@media screen and (min-width: 600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-textandimage__left{grid-area:text}.stzh-textandimage__right{grid-area:image}.stzh-textandimage--is-single .stzh-textandimage__right{grid-area:text}.stzh-textandimage--is-single-left .stzh-textandimage__right{display:none}.stzh-textandimage--is-single-right .stzh-textandimage__left{display:none}";
 
 const StzhTextandimage = class {
   constructor(hostRef) {
@@ -47,7 +47,8 @@ const StzhTextandimage = class {
     const isSingle = !(leftSlotUsed && rightSlotUsed);
     const classes = {
       "stzh-textandimage": true,
-      "stzh-textandimage--is-single": isSingle,
+      "stzh-textandimage--is-single-left": isSingle && leftSlotUsed,
+      "stzh-textandimage--is-single-right": isSingle && rightSlotUsed,
       "stzh-textandimage--has-left": leftSlotUsed,
       "stzh-textandimage--has-right": rightSlotUsed,
       [`stzh-textandimage--size-${this.size}`]: !!this.size

package/dist/esm/stzh-textandimage.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-textandimage.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,g5JAAg5J;;MCoB/5J,gBAAgB;;;IAQnB,SAAI,GAAG;MACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC7C,yDAAyD,CAC1D,CAAC;MAEF,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,EAAE,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM;UACpB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAA;SAC3B,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM;QACvB,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;OAC7B,CAAC,CAAC;KACJ,CAAA;gBAhC8D,SAAS;;EAkCxE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,8BAA8B,EAAE,QAAQ;MACxC,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACtD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,IACpB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE,EAEN,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-textandimage-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single\": isSingle,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-textandimage.entry.js","mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,oiKAAoiK;;MCoBnjK,gBAAgB;;;IAQnB,SAAI,GAAG;MACb,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC1C,8GAA8G,CAC/G,CAAC;MAEF,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC7C,yDAAyD,CAC1D,CAAC;MAEF,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;MACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;MAErD,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,EAAE,YAAY,IAAI,aAAa,CAAC,EAAE;QAC7D,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM;UACpB,cAAc,CAAC,MAAM,EAAE;YACrB,KAAK,EAAE,KAAK;YACZ,UAAU,EAAE,MAAM;WACK,CAAC,CAAA;SAC3B,CAAC,CAAC;OACJ;MAED,SAAS,CAAC,OAAO,CAAC,CAAC,MAAM;QACvB,cAAc,CAAC,MAAM,EAAE;UACrB,OAAO,EAAE,QAAQ;SACQ,CAAC,CAAA;OAC7B,CAAC,CAAC;KACJ,CAAA;gBAhC8D,SAAS;;EAkCxE,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErD,MAAM,QAAQ,GAAG,EAAE,YAAY,IAAI,aAAa,CAAC,CAAC;IAElD,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;MACzB,mCAAmC,EAAE,QAAQ,IAAI,YAAY;MAC7D,oCAAoC,EAAE,QAAQ,IAAI,aAAa;MAC/D,6BAA6B,EAAE,YAAY;MAC3C,8BAA8B,EAAE,aAAa;MAC7C,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACtD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,QAAQ,IACpB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,yBAAyB,IAClC,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE,EAEN,WAAK,KAAK,EAAC,0BAA0B,IACnC,YAAM,IAAI,EAAC,OAAO,EAAC,YAAY,EAAE,MAAM,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACrE,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-textandimage-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n\n  &--is-single-left &__right {\n    display: none;\n  }\n\n  &--is-single-right &__left {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/stzh-components/assets/i18n/de.json

@@ -234,7 +234,9 @@
     "unread": "Ungelesen"
   },
   "eventinfo": {
-    "addToCalendar": "In Kalender eingetragen"
+    "addToCalendar": "In Kalender eingetragen",
+    "expandMoreDates": "Mehr Daten anzeigen",
+    "collapseMoreDates": "Weniger Daten anzeigen"
   },
   "actionset": {
     "actions": "Aktionen",

package/dist/stzh-components/assets/i18n/en.json

@@ -234,7 +234,9 @@
     "unread": "Unread"
   },
   "eventinfo": {
-    "addToCalendar": "Add to calendar"
+    "addToCalendar": "Add to calendar",
+    "expandMoreDates": "Show more dates",
+    "collapseMoreDates": "Hide more dates"
   },
   "actionset": {
     "actions": "Actions",

package/dist/stzh-components/p-14177ccb.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as s,g as a}from"./p-c7bfac7a.js";const n=".sc-stzh-eventdata-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-eventdata-h{display:none}.sc-stzh-eventdata-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-eventdata-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-eventdata-h *.sc-stzh-eventdata,.sc-stzh-eventdata-h *.sc-stzh-eventdata::before,.sc-stzh-eventdata-h *.sc-stzh-eventdata::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-eventdata-h .has-focus.sc-stzh-eventdata{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-eventdata-h .stzh-fylingfocus-focused.sc-stzh-eventdata{outline-style:none !important}.sc-stzh-eventdata-h .stzh-fylingfocus-focused.sc-stzh-eventdata::-moz-focus-inner{border:0 !important}.stzh-eventdata.sc-stzh-eventdata{display:flex;flex-direction:column;row-gap:var(--stzh-space-xsmall);-moz-column-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-eventdata.sc-stzh-eventdata{flex-direction:row}}.stzh-eventdata__label.sc-stzh-eventdata{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);flex-shrink:0}@media screen and (min-width: 900px){.stzh-eventdata__label.sc-stzh-eventdata{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:10rem}}@media screen and (min-width: 900px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:10.875rem}}@media screen and (min-width: 1260px){.stzh-eventdata__label.sc-stzh-eventdata{min-width:11.375rem}}.stzh-eventdata__content.sc-stzh-eventdata{flex-grow:1;display:flex;flex-direction:column;row-gap:var(--stzh-space-xsmall)}";const i=class{constructor(e){t(this,e);this.label=""}render(){const t={"stzh-eventdata":true};return e(s,null,e("div",{class:t},e("div",{class:"stzh-eventdata__label"},this.label?this.label:e("slot",{name:"label"})),e("div",{class:"stzh-eventdata__content"},e("slot",null))))}get element(){return a(this)}};i.style=n;export{i as stzh_eventdata};
+//# sourceMappingURL=p-14177ccb.entry.js.map

package/dist/stzh-components/p-14177ccb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhEventdataCss","StzhEventdata","render","classes","h","Host","class","this","label","name"],"sources":["src/components/stzh-eventdata/stzh-eventdata.scss?tag=stzh-eventdata&encapsulation=scoped","src/components/stzh-eventdata/stzh-eventdata.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-eventdata {\n  display: flex;\n  flex-direction: column;\n  row-gap: space('xsmall');\n  column-gap: space('medium');\n\n  @include mq($from: small) {\n    flex-direction: row;\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p1');\n    flex-shrink: 0;\n\n    @include mq($from: small) {\n      min-width: 160px;\n    }\n\n    @include mq($from: medium) {\n      min-width: 174px;\n    }\n\n    @include mq($from: large) {\n      min-width: 182px;\n    }\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    row-gap: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for multiple elements\n * @slot label - Slot for label (alternative for label property)\n */\n@Component({\n  tag: \"stzh-eventdata\",\n  styleUrl: \"stzh-eventdata.scss\",\n  scoped: true\n})\nexport class StzhEventdata {\n  /** Label (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  @Element() element: HTMLStzhEventdataElement;\n\n  render() {\n    const classes = {\n      \"stzh-eventdata\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-eventdata__label\">\n            {this.label ? this.label : <slot name=\"label\"></slot>}\n          </div>\n          <div class=\"stzh-eventdata__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,wqF,MCiBZC,EAAa,M,oCAEA,E,CAIxB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,yBACRC,KAAKC,MAAQD,KAAKC,MAAQJ,EAAA,QAAMK,KAAK,WAExCL,EAAA,OAAKE,MAAM,2BACTF,EAAA,e"}

package/dist/stzh-components/p-161ae3d1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,a as e,g as o}from"./p-c7bfac7a.js";import{i as n}from"./p-7e304ea3.js";import{w as a}from"./p-54bd842e.js";import{s as h,a as r,b as c}from"./p-7e2354d0.js";import"./p-9b063923.js";const d=".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{display:none}.sc-stzh-details-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.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={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 f=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=n(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 r(this.bodyElement,c(l.keyframes,{height:this.bodyElement.scrollHeight}),l.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 r(this.bodyElement,c(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 a(this.element,"stzhOpened")}async hide(){if(!this.open){return}this.toggledByMethod=true;this.open=false;return a(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=n(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,null,i("div",{class:t},i("div",{ref:t=>this.triggerElement=t,class:"stzh-details__trigger"},i("slot",null)),i("div",{id:`${this.detailsId}-content`,ref:t=>this.bodyElement=t,class:"stzh-details__content","aria-labelledby":`${this.detailsId}-header`},i("div",{class:"stzh-details__content-inner"},i("slot",{name:"content"})))))}get element(){return o(this)}static get watchers(){return{open:["openWatcher"]}}};f.style=d;export{f as stzh_details};
+//# sourceMappingURL=p-161ae3d1.entry.js.map

package/dist/stzh-components/p-161ae3d1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhDetailsCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","detailsCounter","StzhDetails","this","toggledByMethod","onClickTrigger","toggle","openWatcher","newValue","triggerElement","firstElementChild","isStzh","isStzhElement","setAttribute","stzhOpen","emit","component","stopAnimations","bodyElement","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","show","open","waitForEvent","element","hide","componentWillLoad","detailsId","componentDidLoad","connectedCallback","trigger","_a","defaultSlot","Array","from","children","find","child","hasAttribute","addEventListener","disconnectedCallback","removeEventListener","render","classes","h","Host","class","ref","el","id","name"],"sources":["src/components/stzh-details/stzh-details.scss?tag=stzh-details&encapsulation=scoped","src/components/stzh-details/stzh-details.tsx"],"sourcesContent":[":host {\n  display: contents;\n\n  --content-width: var(--stzh-details-content-width, 100%);\n  --content-padding-left: 0px;\n  --content-padding-right: var(--stzh-details-content-padding-right, 0px);\n  --content-background: transparent;\n  --content-grid-column: var(--stzh-details-content-grid-column, inherit);\n  --content-border-bottom: none;\n  --content-padding-top: var(--stzh-details-content-padding-top, #{space('medium')});\n  --content-padding-bottom: 0;\n\n  // @include mq($from: medium) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'medium')});\n  // }\n\n  // @include mq($from: large) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, #{spaceCurveValue('medium', 'large')});\n  // }\n\n  // &[no-padding-top]:not([no-padding-top=\"false\"]) {\n  //   --content-padding-top: var(--stzh-details-content-padding-top, 0px);\n  // }\n\n  // &[no-padding-bottom]:not([no-padding-bottom=\"false\"]) {\n  //   --content-padding-bottom: var(--stzh-details-content-padding-bottom, 0px);\n  // }\n}\n\n.stzh-details {\n  &,\n  &__trigger {\n    display: contents;\n  }\n\n  &__content {\n    width: var(--content-width);\n    overflow: hidden;\n    background-color: var(--content-background);\n    grid-column: var(--content-grid-column);\n    border-bottom: var(--content-border-bottom);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    padding-top: var(--content-padding-top);\n    padding-bottom: var(--content-padding-bottom);\n    padding-left: var(--content-padding-left);\n    padding-right: var(--content-padding-right);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Watch,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet detailsCounter = 0;\n\n/**\n * @slot - Slot for trigger\n * @slot content - Slot for any content\n */\n@Component({\n  tag: \"stzh-details\",\n  styleUrl: \"stzh-details.scss\",\n  scoped: true\n})\nexport class StzhDetails {\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingTop: boolean = false;\n\n  // /** Whether to remove top padding */\n  // @Prop({ reflect: true }) noPaddingBottom: boolean = false;\n\n  @Element() element: HTMLStzhDetailsElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.triggerElement) {\n      return;\n    }\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n\n      this.triggerElement.firstElementChild\n        .setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", newValue ? \"true\" : \"false\");\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private detailsId: string;\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  private triggerElement: HTMLElement;\n\n  private onClickTrigger = () => {\n    this.toggle();\n  }\n\n  componentWillLoad() {\n    this.detailsId = `stzh-details-${detailsCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n\n    if (this.triggerElement.firstElementChild) {\n      const isStzh = isStzhElement(this.triggerElement.firstElementChild);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.detailsId}-content`);\n      this.triggerElement.firstElementChild.setAttribute(isStzh ? \"a11y-expanded\" : \"aria-expanded\", this.open ? \"true\" : \"false\");\n    }\n  }\n\n  connectedCallback() {\n    let trigger = this.triggerElement?.firstElementChild;\n\n    if (!trigger) {\n      const defaultSlot = Array.from(this.element.children)\n        .find(child => !(child as HTMLElement).hasAttribute(\"slot\")) as HTMLElement\n\n      trigger = defaultSlot;\n    }\n\n    if (trigger) {\n      trigger.addEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.triggerElement && this.triggerElement.firstElementChild) {\n      this.triggerElement.firstElementChild.removeEventListener(\"click\", this.onClickTrigger);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-details\": true,\n      \"stzh-details--is-open\": this.open\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div\n            ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n            class=\"stzh-details__trigger\"\n          >\n            <slot></slot>\n          </div>\n          <div\n            id={`${this.detailsId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-details__content\"\n            aria-labelledby={`${this.detailsId}-header`}\n          >\n            <div class=\"stzh-details__content-inner\">\n              <slot name=\"content\"></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kNAAA,MAAMA,EAAiB,iwECuBvB,MAAMC,EAAiB,CACrBC,UAAW,CACT,CAAEC,OAAQ,IAAKC,QAAS,KACxB,CAAED,OAAQ,OAAQC,QAAS,MAE7BC,QAAS,CAAEC,SAAU,IAAKC,OAAQ,WAGpC,MAAMC,EAAiB,CACrBN,UAAW,CACT,CAAEC,OAAQ,OAAQC,QAAS,KAC3B,CAAED,OAAQ,IAAKC,QAAS,MAE1BC,QAAS,CAAEC,SAAU,IAAKC,OAAQ,WAGpC,IAAIE,EAAiB,E,MAWRC,EAAW,M,+KA8FdC,KAAAC,gBAA2B,MAuC3BD,KAAAE,eAAiB,KACvBF,KAAKG,QAAQ,E,UApIyC,K,CAuBxD,iBAAMC,CAAYC,GAChB,IAAKL,KAAKM,eAAgB,CACxB,M,CAGF,GAAIN,KAAKM,eAAeC,kBAAmB,CACzC,MAAMC,EAASC,EAAcT,KAAKM,eAAeC,mBAEjDP,KAAKM,eAAeC,kBACjBG,aAAaF,EAAS,gBAAkB,gBAAiBH,EAAW,OAAS,Q,CAGlF,GAAIA,EAAU,CACZ,GAAIL,KAAKC,gBAAiB,CACxBD,KAAKW,SAASC,KAAK,CACjBC,UAAW,uB,OAITC,EAAed,KAAKe,aAC1Bf,KAAKe,YAAYC,OAAS,YAEpBC,EACJjB,KAAKe,YACLG,EAAwB5B,EAAeC,UAAW,CAChDC,OAAQQ,KAAKe,YAAYI,eAE3B7B,EAAeI,SAGjBM,KAAKe,YAAYK,MAAM5B,OAAS,OAChCQ,KAAKe,YAAYK,MAAMC,SAAW,UAElC,GAAIrB,KAAKC,gBAAiB,CACxBD,KAAKsB,WAAWV,KAAK,CACnBC,UAAW,uB,MAGV,CACL,GAAIb,KAAKC,gBAAiB,CACxBD,KAAKuB,UAAUX,KAAK,CAClBC,UAAW,uB,OAITC,EAAed,KAAKe,aAC1Bf,KAAKe,YAAYK,MAAMC,SAAW,eAE5BJ,EACJjB,KAAKe,YACLG,EAAwBrB,EAAeN,UAAW,CAChDC,OAAQQ,KAAKe,YAAYI,eAE3BtB,EAAeH,SAGjBM,KAAKe,YAAYC,OAAS,KAC1BhB,KAAKe,YAAYK,MAAM5B,OAAS,MAEhC,GAAIQ,KAAKC,gBAAiB,CACxBD,KAAKwB,WAAWZ,KAAK,CACnBC,UAAW,uB,EAKjBb,KAAKC,gBAAkB,K,CASzB,UAAMwB,GACJ,GAAIzB,KAAK0B,KAAM,CACb,M,CAGF1B,KAAKC,gBAAkB,KACvBD,KAAK0B,KAAO,KACZ,OAAOC,EAAa3B,KAAK4B,QAAS,a,CAKpC,UAAMC,GACJ,IAAK7B,KAAK0B,KAAM,CACd,M,CAGF1B,KAAKC,gBAAkB,KACvBD,KAAK0B,KAAO,MACZ,OAAOC,EAAa3B,KAAK4B,QAAS,a,CAIpC,YAAMzB,GACJ,GAAIH,KAAK0B,KAAM,CACb,aAAa1B,KAAK6B,M,KACb,CACL,aAAa7B,KAAKyB,M,EAUtB,iBAAAK,GACE9B,KAAK+B,UAAY,gBAAgBjC,K,CAGnC,gBAAAkC,GACEhC,KAAKe,YAAYC,QAAUhB,KAAK0B,KAChC1B,KAAKe,YAAYK,MAAM5B,OAASQ,KAAK0B,KAAO,OAAS,MACrD1B,KAAKe,YAAYK,MAAMC,SAAWrB,KAAK0B,KAAO,UAAY,SAE1D,GAAI1B,KAAKM,eAAeC,kBAAmB,CACzC,MAAMC,EAASC,EAAcT,KAAKM,eAAeC,mBACjDP,KAAKM,eAAeC,kBAAkBG,aAAaF,EAAS,gBAAkB,gBAAiB,GAAGR,KAAK+B,qBACvG/B,KAAKM,eAAeC,kBAAkBG,aAAaF,EAAS,gBAAkB,gBAAiBR,KAAK0B,KAAO,OAAS,Q,EAIxH,iBAAAO,G,MACE,IAAIC,GAAUC,EAAAnC,KAAKM,kBAAc,MAAA6B,SAAA,SAAAA,EAAE5B,kBAEnC,IAAK2B,EAAS,CACZ,MAAME,EAAcC,MAAMC,KAAKtC,KAAK4B,QAAQW,UACzCC,MAAKC,IAAWA,EAAsBC,aAAa,UAEtDR,EAAUE,C,CAGZ,GAAIF,EAAS,CACXA,EAAQS,iBAAiB,QAAS3C,KAAKE,e,EAI3C,oBAAA0C,GACE,GAAI5C,KAAKM,gBAAkBN,KAAKM,eAAeC,kBAAmB,CAChEP,KAAKM,eAAeC,kBAAkBsC,oBAAoB,QAAS7C,KAAKE,e,EAI5E,MAAA4C,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,wBAAyB/C,KAAK0B,MAGhC,OACEsB,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OACEG,IAAMC,GAAQpD,KAAKM,eAAiB8C,EACpCF,MAAM,yBAENF,EAAA,cAEFA,EAAA,OACEK,GAAI,GAAGrD,KAAK+B,oBACZoB,IAAMC,GAAQpD,KAAKe,YAAcqC,EACjCF,MAAM,wBAAuB,kBACZ,GAAGlD,KAAK+B,oBAEzBiB,EAAA,OAAKE,MAAM,+BACTF,EAAA,QAAMM,KAAK,e"}

package/dist/stzh-components/{p-93721591.entry.js → p-1a19bc6e.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,f as a,a as i,g as s}from"./p-c7bfac7a.js";import{h as r,s as n}from"./p-7e304ea3.js";import"./p-9b063923.js";const m=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium);--grid-template-areas:var(\n    --stzh-textandimage-grid-template-areas,\n    "text text text text"\n    "image image image image"\n  );--grid-template-columns:var(\n    --stzh-textandimage-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text text"\n      "image image image ."\n    )}}@media screen and (min-width: 900px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text image image image image image"\n    );--grid-template-columns:var(\n      --stzh-textandimage-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text text image image image image"\n    )}}@media screen and (min-width: 600px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text image image"\n    )}}@media screen and (min-width: 900px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text text text image image image image"\n    )}}@media screen and (min-width: 1260px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text text text text image image image"\n    )}}@media screen and (min-width: 600px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text ."\n      "image image image image"\n    )}}@media screen and (min-width: 900px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text text text . . ."\n      "image image image image image image image image"\n    )}}@media screen and (min-width: 1260px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text text text text . ."\n      "image image image image image image image image"\n    )}}:host([single]:not([single=false])){--grid-template-areas:var(\n    --stzh-textandimage-single-grid-template-areas,\n    "text text text text"\n  )}@media screen and (min-width: 600px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      "text text text ."\n    )}}@media screen and (min-width: 900px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      "text text text text text text . ."\n    )}}.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--row-gap);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);}@media screen and (min-width: 600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-textandimage__left{grid-area:text}.stzh-textandimage__right{grid-area:image}.stzh-textandimage--is-single .stzh-textandimage__right{grid-area:text}';const g=class{constructor(e){t(this,e);this.init=()=>{const t=this.element.querySelectorAll('stzh-ratio[slot="right"], [slot="right"] stzh-ratio, stzh-gallery[slot="right"], [slot="right"] stzh-gallery');const e=this.element.querySelectorAll('stzh-gallery[slot="right"], [slot="right"] stzh-gallery');const a=r(this.element,"left");const i=r(this.element,"right");if(this.size==="large"||!(a&&i)){t.forEach((t=>{n(t,{ratio:"3:2",ratioSmall:"16:9"})}))}e.forEach((t=>{n(t,{variant:"single"})}))};this.size="default"}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=r(this.element,"left");const s=r(this.element,"right");const n=!(t&&s);const m={"stzh-textandimage":true,"stzh-textandimage--is-single":n,"stzh-textandimage--has-left":t,"stzh-textandimage--has-right":s,[`stzh-textandimage--size-${this.size}`]:!!this.size};return e(i,{single:n},e("div",{class:m},e("div",{class:"stzh-textandimage__left"},e("slot",{name:"left",onSlotchange:()=>a(this.element)})),e("div",{class:"stzh-textandimage__right"},e("slot",{name:"right",onSlotchange:()=>a(this.element)}))))}get element(){return s(this)}};g.style=m;export{g as stzh_textandimage};
-//# sourceMappingURL=p-93721591.entry.js.map
+import{r as t,h as e,f as a,a as i,g as s}from"./p-c7bfac7a.js";import{h as n,s as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const g=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium);--grid-template-areas:var(\n    --stzh-textandimage-grid-template-areas,\n    "text text text text"\n    "image image image image"\n  );--grid-template-columns:var(\n    --stzh-textandimage-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text text"\n      "image image image ."\n    )}}@media screen and (min-width: 900px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text image image image image image"\n    );--grid-template-columns:var(\n      --stzh-textandimage-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){:host{--grid-template-areas:var(\n      --stzh-textandimage-grid-template-areas,\n      "text text text text image image image image"\n    )}}@media screen and (min-width: 600px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text image image"\n    )}}@media screen and (min-width: 900px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text text text image image image image"\n    )}}@media screen and (min-width: 1260px){:host([size=small]){--grid-template-areas:var(\n      --stzh-textandimage-small-grid-template-areas,\n      "text text text text text image image image"\n    )}}@media screen and (min-width: 600px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text ."\n      "image image image image"\n    )}}@media screen and (min-width: 900px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text text text . . ."\n      "image image image image image image image image"\n    )}}@media screen and (min-width: 1260px){:host([size=large]){--grid-template-areas:var(\n      --stzh-textandimage-large-grid-template-areas,\n      "text text text text text text . ."\n      "image image image image image image image image"\n    )}}:host([single]:not([single=false])){--grid-template-areas:var(\n    --stzh-textandimage-single-grid-template-areas,\n    "text text text text"\n  )}@media screen and (min-width: 600px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      "text text text ."\n    )}}@media screen and (min-width: 900px){:host([single]:not([single=false])){--grid-template-areas:var(\n      --stzh-textandimage-single-grid-template-areas,\n      "text text text text text text . ."\n    )}}.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;row-gap:var(--row-gap);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);}@media screen and (min-width: 600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-textandimage{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-textandimage__left{grid-area:text}.stzh-textandimage__right{grid-area:image}.stzh-textandimage--is-single .stzh-textandimage__right{grid-area:text}.stzh-textandimage--is-single-left .stzh-textandimage__right{display:none}.stzh-textandimage--is-single-right .stzh-textandimage__left{display:none}';const m=class{constructor(e){t(this,e);this.init=()=>{const t=this.element.querySelectorAll('stzh-ratio[slot="right"], [slot="right"] stzh-ratio, stzh-gallery[slot="right"], [slot="right"] stzh-gallery');const e=this.element.querySelectorAll('stzh-gallery[slot="right"], [slot="right"] stzh-gallery');const a=n(this.element,"left");const i=n(this.element,"right");if(this.size==="large"||!(a&&i)){t.forEach((t=>{r(t,{ratio:"3:2",ratioSmall:"16:9"})}))}e.forEach((t=>{r(t,{variant:"single"})}))};this.size="default"}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=n(this.element,"left");const s=n(this.element,"right");const r=!(t&&s);const g={"stzh-textandimage":true,"stzh-textandimage--is-single-left":r&&t,"stzh-textandimage--is-single-right":r&&s,"stzh-textandimage--has-left":t,"stzh-textandimage--has-right":s,[`stzh-textandimage--size-${this.size}`]:!!this.size};return e(i,{single:r},e("div",{class:g},e("div",{class:"stzh-textandimage__left"},e("slot",{name:"left",onSlotchange:()=>a(this.element)})),e("div",{class:"stzh-textandimage__right"},e("slot",{name:"right",onSlotchange:()=>a(this.element)}))))}get element(){return s(this)}};m.style=g;export{m as stzh_textandimage};
+//# sourceMappingURL=p-1a19bc6e.entry.js.map

package/dist/stzh-components/p-1a19bc6e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhTextandimageCss","StzhTextandimage","this","init","ratios","element","querySelectorAll","galleries","leftSlotUsed","hasSlot","rightSlotUsed","size","forEach","button","setPropsIfNull","ratio","ratioSmall","variant","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","isSingle","classes","h","Host","single","class","name","onSlotchange","forceUpdate"],"sources":["src/components/stzh-textandimage/stzh-textandimage.scss?tag=stzh-textandimage&encapsulation=shadow","src/components/stzh-textandimage/stzh-textandimage.tsx"],"sourcesContent":[":host {\n  @include spaceCurve('--row-gap', 'regular');\n\n  --grid-template-areas: var(\n    --stzh-textandimage-grid-template-areas,\n    \"text text text text\"\n    \"image image image image\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-textandimage-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text\"\n      \"image image image .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text image image image image image\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-textandimage-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n}\n\n:host([size=\"small\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-small-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n\n:host([size=\"large\"]) {\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text .\"\n      \"image image image image\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text . . .\"\n      \"image image image image image image image image\"\n    );\n  }\n\n  @include mq($from: large) {\n    // \"text text text text text text . . .\"\n    // \"image image image image image image image image image\"\n    --grid-template-areas: var(\n      --stzh-textandimage-large-grid-template-areas,\n      \"text text text text text text . .\"\n      \"image image image image image image image image\"\n    );\n  }\n}\n\n:host([single]:not([single=\"false\"])) {\n  --grid-template-areas: var(\n    --stzh-textandimage-single-grid-template-areas,\n    \"text text text text\"\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text .\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-textandimage-single-grid-template-areas,\n      \"text text text text text text . .\"\n    );\n  }\n}\n\n.stzh-textandimage {\n  @include gridGutter;\n  display: grid;\n  row-gap: var(--row-gap);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__left {\n    grid-area: text;\n  }\n\n  &__right {\n    grid-area: image;\n  }\n\n  /* Single variant */\n\n  &--is-single &__right {\n    grid-area: text;\n  }\n\n  &--is-single-left &__right {\n    display: none;\n  }\n\n  &--is-single-right &__left {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot left - Slot for left column content\n * @slot right - Slot for right column content\n */\n@Component({\n  tag: \"stzh-textandimage\",\n  styleUrl: \"stzh-textandimage.scss\",\n  shadow: true\n})\nexport class StzhTextandimage {\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"large\" = \"default\";\n\n  @Element() element: HTMLStzhTextandimageElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const ratios = this.element.querySelectorAll(\n      'stzh-ratio[slot=\"right\"], [slot=\"right\"] stzh-ratio, stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const galleries = this.element.querySelectorAll(\n      'stzh-gallery[slot=\"right\"], [slot=\"right\"] stzh-gallery'\n    );\n\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    if (this.size === \"large\" || !(leftSlotUsed && rightSlotUsed)) {\n      ratios.forEach((button) => {\n        setPropsIfNull(button, {\n          ratio: \"3:2\",\n          ratioSmall: \"16:9\"\n        } as HTMLStzhRatioElement)\n      });\n    }\n\n    galleries.forEach((button) => {\n      setPropsIfNull(button, {\n        variant: \"single\"\n      } as HTMLStzhGalleryElement)\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const leftSlotUsed = hasSlot(this.element, \"left\");\n    const rightSlotUsed = hasSlot(this.element, \"right\");\n\n    const isSingle = !(leftSlotUsed && rightSlotUsed);\n\n    const classes = {\n      \"stzh-textandimage\": true,\n      \"stzh-textandimage--is-single-left\": isSingle && leftSlotUsed,\n      \"stzh-textandimage--is-single-right\": isSingle && rightSlotUsed,\n      \"stzh-textandimage--has-left\": leftSlotUsed,\n      \"stzh-textandimage--has-right\": rightSlotUsed,\n      [`stzh-textandimage--size-${this.size}`]: !!this.size\n    };\n\n    return (\n      <Host single={isSingle}>\n        <div class={classes}>\n          <div class=\"stzh-textandimage__left\">\n            <slot name=\"left\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n\n          <div class=\"stzh-textandimage__right\">\n            <slot name=\"right\" onSlotchange={() => forceUpdate(this.element)}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAsB,igK,MCoBfC,EAAgB,M,yBAQnBC,KAAAC,KAAO,KACb,MAAMC,EAASF,KAAKG,QAAQC,iBAC1B,gHAGF,MAAMC,EAAYL,KAAKG,QAAQC,iBAC7B,2DAGF,MAAME,EAAeC,EAAQP,KAAKG,QAAS,QAC3C,MAAMK,EAAgBD,EAAQP,KAAKG,QAAS,SAE5C,GAAIH,KAAKS,OAAS,WAAaH,GAAgBE,GAAgB,CAC7DN,EAAOQ,SAASC,IACdC,EAAeD,EAAQ,CACrBE,MAAO,MACPC,WAAY,QACY,G,CAI9BT,EAAUK,SAASC,IACjBC,EAAeD,EAAQ,CACrBI,QAAS,UACiB,GAC5B,E,UA/B2D,S,CAkC/D,iBAAAC,GACEhB,KAAKC,OAELD,KAAKiB,SAAW,IAAIC,iBAAiBlB,KAAKC,MAC1CD,KAAKiB,SAASE,QAAQnB,KAAKG,QAAS,CAClCiB,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAItB,KAAKiB,SAAU,CACjBjB,KAAKiB,SAASM,Y,EAIlB,MAAAC,GACE,MAAMlB,EAAeC,EAAQP,KAAKG,QAAS,QAC3C,MAAMK,EAAgBD,EAAQP,KAAKG,QAAS,SAE5C,MAAMsB,IAAanB,GAAgBE,GAEnC,MAAMkB,EAAU,CACd,oBAAqB,KACrB,oCAAqCD,GAAYnB,EACjD,qCAAsCmB,GAAYjB,EAClD,8BAA+BF,EAC/B,+BAAgCE,EAChC,CAAC,2BAA2BR,KAAKS,UAAWT,KAAKS,MAGnD,OACEkB,EAACC,EAAI,CAACC,OAAQJ,GACZE,EAAA,OAAKG,MAAOJ,GACVC,EAAA,OAAKG,MAAM,2BACTH,EAAA,QAAMI,KAAK,OAAOC,aAAc,IAAMC,EAAYjC,KAAKG,YAGzDwB,EAAA,OAAKG,MAAM,4BACTH,EAAA,QAAMI,KAAK,QAAQC,aAAc,IAAMC,EAAYjC,KAAKG,a"}