@oiz/stzh-components 2.7.0 → 2.8.0-alpha

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

@@ -1 +1 @@
-{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirken","prototype","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-truegreen);\n  --warning: var(--stzh-color-warning);\n  --alert: var(--stzh-color-error);\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: $colorGrey13;\n    border-color: $colorGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorGrey13;\n      border-color: $colorGrey13;\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: $colorError;\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    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\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('heavy');\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: $colorError;\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: $colorGrey5;\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    color: $baseColor;\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: $colorGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorGrey70;\n      background-color: $colorGrey5;\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: $colorError;\n    border-color: $colorError;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorTruegreen;\n    border-color: $colorTruegreen;\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: $colorPrimary8;\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('heavy');\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 $colorGrey13;\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('heavy');\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: $colorGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorGrey70;\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: $colorGrey70;\n  }\n\n  .definition-data {\n    color: $colorGrey55;\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: $colorGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,2BAA6B,+oyI,ICatBC,wBAAuB,W,uCAClCA,EAAAC,UAAAC,iBAAA,WAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,EAG3ER,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,K,WARyB,G"}
+{"version":3,"names":["stzhSkinPortalMitwirkenCss","StzhSkinPortalMitwirken","prototype","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.scss?tag=stzh-skin-portal-mitwirken","src/components/stzh-skin-portal-mitwirken/stzh-skin-portal-mitwirken.tsx"],"sourcesContent":["@import \"../../global/css/stzh-components.css\";\n\n:root {\n  --stzh-color-primary: var(--stzh-color-deepcerulean);\n  --stzh-color-primary-hover: var(--stzh-color-regalblue);\n\n  --stzh-color-primary48: rgba(5, 127, 172, 0.48);\n  --stzh-color-primary32: rgba(5, 127, 172, 0.32);\n  --stzh-color-primary16: rgba(5, 127, 172, 0.16);\n  --stzh-color-primary8: rgba(5, 127, 172, 0.08);\n\n  --stzh-font-family-heavy: var(--stzh-font-family-bold);\n  --stzh-font-family-title: var(--stzh-font-family-light);\n\n  --stzh-button-text-hover-background: rgba(5, 127, 172, 0.08);\n}\n\n$mobileBreakpoint: 40em;\n$processHeaderMaxMobileBreakpoint: 599px;\n$processHeaderMaxDesktopBreakpoint: 1023px;\n\nmain,\n.reveal-overlay,\n.mod_header {\n  --primary: var(--stzh-color-primary);\n  --secondary: var(--stzh-color-primary);\n  --success: var(--stzh-color-truegreen);\n  --warning: var(--stzh-color-warning);\n  --alert: var(--stzh-color-error);\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: $colorGrey13;\n    border-color: $colorGrey13;\n\n    &:hover,\n    &:focus {\n      color: $colorWhite;\n      background-color: $colorGrey13;\n      border-color: $colorGrey13;\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: $colorError;\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    // remove clear button for IE11\n    &::-ms-clear {\n      display: none;\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('heavy');\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: $colorError;\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: $colorGrey5;\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    color: $baseColor;\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: $colorGrey70;\n    background-color: transparent;\n    height: $menuItemHeight;\n    line-height: $menuItemHeight;\n    transition: all $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    &:hover {\n      color: $colorGrey70;\n      background-color: $colorGrey5;\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: $colorError;\n    border-color: $colorError;\n  }\n\n  .opinion-toggle--ok.is-active,\n  .opinion-toggle--ok:focus,\n  .opinion-toggle--ok:hover {\n    background-color: $colorTruegreen;\n    border-color: $colorTruegreen;\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: $colorPrimary8;\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('heavy');\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 $colorGrey13;\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('heavy');\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: $colorGrey5;\n  }\n\n  .card--list__data__number {\n    @include font('heavy');\n    @include fontCurve('h3');\n    color: $colorGrey70;\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: $colorGrey70;\n  }\n\n  .definition-data {\n    color: $colorGrey55;\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: $colorGrey5;\n  }\n\n\n  /* Blog */\n\n  .author__name {\n    @include font('regular');\n    @include fontCurve('caption');\n    color: $colorGrey55 !important;\n  }\n\n  .author-data {\n    @include fontCurve('caption');\n    color: $baseColor;\n  }\n\n  .author-data__extra {\n    @include font('regular');\n    @include fontCurve('caption');\n\n    &::before {\n      border-color: $baseBorderColor;\n    }\n  }\n\n  .author-data__extra a {\n    white-space: nowrap;\n    text-decoration-line: none;\n  }\n\n  .author-data__extra > a,\n  .author-data__extra > button\n  .author-data__extra > span {\n    margin-right: space('medium');\n  }\n\n\n  /* Budget */\n\n  .budget-summary {\n    .heading2,\n    .heading3 {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n\n  .budget-progress {\n    min-height: $formInputHeight;\n  }\n\n  .budget-list__title {\n    margin-top: space('xsmall');\n    margin-bottom: space('medium');\n  }\n\n  .budget-list__text:not(:last-child) {\n    margin-bottom: 0;\n  }\n\n  .budget-list__data__number {\n    @include font('heavy');\n    @include fontCurve('h4');\n  }\n\n  /* Survey */\n\n  .answer-questionnaire .questionnaire-question {\n    @include font('heavy');\n    @include fontCurve('p1');\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h\n} from \"@stencil/core\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-skin-portal-mitwirken\",\n  styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n  componentDidLoad() {\n    // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n    console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n  }\n\n  render() {\n    return (\n      <Host>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,2BAA6B,wo8J,ICatBC,wBAAuB,W,uCAClCA,EAAAC,UAAAC,iBAAA,WAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,EAG3ER,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,K,WARyB,G"}

package/dist/esm-es5/stzh-space.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host}from"./index-67fd55c9.js";var stzhSpaceCss=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{--space:var(--stzh-space-default);--around:0;display:-ms-flexbox;display:flex;clear:both}:host::after{content:"";display:table;clear:both}:host ::slotted(*){max-width:100%;padding:calc((var(--space) / 2) * var(--around));margin:calc((var(--space) / 2) * (1 - var(--around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty){--around:1;width:var(--space);height:var(--space)}:host([around]:not([around=false])){--around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host([curve=tiny]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--space:var(--stzh-space-medium)}}:host([curve=small]){--space:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host([curve=small]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--space:var(--stzh-space-large)}}:host([curve=regular]){--space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host([curve=regular]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--space:var(--stzh-space-xlarge)}}:host([curve=medium]){--space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host([curve=medium]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([curve=large]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=big]){--space:var(--stzh-space-xbig)}}:host([curve=huge]){--space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([curve=huge]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--space:var(--stzh-space-huge)}}:host([size=xxxsmall]){--space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--space:var(--stzh-space-xsmall)}:host([size=small]){--space:var(--stzh-space-small)}:host([size=medium]){--space:var(--stzh-space-medium)}:host([size=large]){--space:var(--stzh-space-large)}:host([size=xlarge]){--space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}:host([size=big]){--space:var(--stzh-space-big)}:host([size=xbig]){--space:var(--stzh-space-xbig)}:host([size=huge]){--space:var(--stzh-space-huge)}:host([size=xhuge]){--space:var(--stzh-space-xhuge)}:host([size=none]){--space:var(--stzh-space-none)}:host([size=default]){--space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){:host([size-medium=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--space:var(--stzh-space-default)}}.stzh-space{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:calc((var(--space) / -2) * var(--around));margin:calc((var(--space) / -2) * (1 - var(--around)));}.stzh-space--is-around{padding:calc((var(--space) / 2) * var(--around));margin:calc((var(--space) / 2) * (1 - var(--around)))}.stzh-space--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-space--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-space--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-space--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-space--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-space--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-space--items-center{-ms-flex-align:center;align-items:center}.stzh-space--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-space--items-stretch{-ms-flex-align:stretch;align-items:stretch}';var StzhSpace=function(){function e(e){registerInstance(this,e);this.curve="none";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit";this.justify="start";this.items="start";this.around=false;this.border="none"}e.prototype.render=function(){var e;return h(Host,null,h("div",{class:(e={"stzh-space":true,"stzh-space--is-around":this.around},e["stzh-space--justify-".concat(this.justify)]=!!this.justify,e["stzh-space--items-".concat(this.items)]=!!this.items,e)},h("slot",null)))};return e}();StzhSpace.style=stzhSpaceCss;export{StzhSpace as stzh_space};
+import{r as registerInstance,h,a as Host}from"./index-67fd55c9.js";var stzhSpaceCss=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}:host{--space:var(--stzh-space-default);--around:0;display:-ms-flexbox;display:flex}:host ::slotted(*){max-width:100%;padding:calc((var(--space) / 2) * var(--around));margin:calc((var(--space) / 2) * (1 - var(--around)))}:host ::slotted(stzh-vspace),:host ::slotted(stzh-hspace),:host ::slotted(stzh-row),:host ::slotted(stzh-container),:host ::slotted(stzh-section){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-positive:1;flex-grow:1}:host(:empty){--around:1;width:var(--space);height:var(--space)}:host([around]:not([around=false])){--around:1}:host([border=top]),:host([border=top-bottom]){border-top:0.0625rem solid var(--stzh-base-border-color)}:host([border=bottom]),:host([border=top-bottom]){border-bottom:0.0625rem solid var(--stzh-base-border-color)}:host([border=left]),:host([border=left-right]){border-left:0.0625rem solid var(--stzh-base-border-color)}:host([border=right]),:host([border=left-right]){border-right:0.0625rem solid var(--stzh-base-border-color)}:host([curve=tiny]){--space:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){:host([curve=tiny]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([curve=tiny]){--space:var(--stzh-space-medium)}}:host([curve=small]){--space:var(--stzh-space-small)}@media screen and (min-width: 1024px){:host([curve=small]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([curve=small]){--space:var(--stzh-space-large)}}:host([curve=regular]){--space:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host([curve=regular]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([curve=regular]){--space:var(--stzh-space-xlarge)}}:host([curve=medium]){--space:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){:host([curve=medium]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([curve=medium]){--space:var(--stzh-space-xxxlarge)}}:host([curve=large]){--space:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([curve=large]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([curve=large]){--space:var(--stzh-space-xxxxlarge)}}:host([curve=big]){--space:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host([curve=big]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([curve=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([curve=big]){--space:var(--stzh-space-xbig)}}:host([curve=huge]){--space:var(--stzh-space-xxxxlarge)}@media screen and (min-width: 600px){:host([curve=huge]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([curve=huge]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([curve=huge]){--space:var(--stzh-space-huge)}}:host([size=xxxsmall]){--space:var(--stzh-space-xxxsmall)}:host([size=xxsmall]){--space:var(--stzh-space-xxsmall)}:host([size=xsmall]){--space:var(--stzh-space-xsmall)}:host([size=small]){--space:var(--stzh-space-small)}:host([size=medium]){--space:var(--stzh-space-medium)}:host([size=large]){--space:var(--stzh-space-large)}:host([size=xlarge]){--space:var(--stzh-space-xlarge)}:host([size=xxlarge]){--space:var(--stzh-space-xxlarge)}:host([size=xxxlarge]){--space:var(--stzh-space-xxxlarge)}:host([size=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}:host([size=big]){--space:var(--stzh-space-big)}:host([size=xbig]){--space:var(--stzh-space-xbig)}:host([size=huge]){--space:var(--stzh-space-huge)}:host([size=xhuge]){--space:var(--stzh-space-xhuge)}:host([size=none]){--space:var(--stzh-space-none)}:host([size=default]){--space:var(--stzh-space-default)}@media screen and (min-width: 600px){:host([size-small=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 600px){:host([size-small=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 600px){:host([size-small=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){:host([size-small=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 600px){:host([size-small=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 600px){:host([size-small=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 600px){:host([size-small=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host([size-small=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){:host([size-small=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([size-small=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 600px){:host([size-small=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){:host([size-small=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 600px){:host([size-small=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 600px){:host([size-small=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 600px){:host([size-small=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 800px){:host([size-smallheader=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 800px){:host([size-smallheader=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 800px){:host([size-smallheader=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 800px){:host([size-smallheader=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 800px){:host([size-smallheader=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 800px){:host([size-smallheader=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 800px){:host([size-smallheader=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 800px){:host([size-smallheader=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 800px){:host([size-smallheader=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 800px){:host([size-smallheader=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1024px){:host([size-medium=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1024px){:host([size-medium=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1024px){:host([size-medium=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1024px){:host([size-medium=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1024px){:host([size-medium=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1024px){:host([size-medium=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){:host([size-medium=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1024px){:host([size-medium=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1024px){:host([size-medium=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1024px){:host([size-medium=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1024px){:host([size-medium=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1024px){:host([size-medium=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1260px){:host([size-large=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1260px){:host([size-large=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){:host([size-large=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host([size-large=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([size-large=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host([size-large=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){:host([size-large=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1260px){:host([size-large=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1260px){:host([size-large=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){:host([size-large=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1260px){:host([size-large=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1260px){:host([size-large=default]){--space:var(--stzh-space-default)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxsmall]){--space:var(--stzh-space-xxxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xxsmall]){--space:var(--stzh-space-xxsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=xsmall]){--space:var(--stzh-space-xsmall)}}@media screen and (min-width: 1440px){:host([size-ultra=small]){--space:var(--stzh-space-small)}}@media screen and (min-width: 1440px){:host([size-ultra=medium]){--space:var(--stzh-space-medium)}}@media screen and (min-width: 1440px){:host([size-ultra=large]){--space:var(--stzh-space-large)}}@media screen and (min-width: 1440px){:host([size-ultra=xlarge]){--space:var(--stzh-space-xlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxlarge]){--space:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxlarge]){--space:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=xxxxlarge]){--space:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1440px){:host([size-ultra=big]){--space:var(--stzh-space-big)}}@media screen and (min-width: 1440px){:host([size-ultra=xbig]){--space:var(--stzh-space-xbig)}}@media screen and (min-width: 1440px){:host([size-ultra=huge]){--space:var(--stzh-space-huge)}}@media screen and (min-width: 1440px){:host([size-ultra=xhuge]){--space:var(--stzh-space-xhuge)}}@media screen and (min-width: 1440px){:host([size-ultra=none]){--space:var(--stzh-space-none)}}@media screen and (min-width: 1440px){:host([size-ultra=default]){--space:var(--stzh-space-default)}}.stzh-space{-ms-flex-positive:1;flex-grow:1;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:calc((var(--space) / -2) * var(--around));margin:calc((var(--space) / -2) * (1 - var(--around)));}.stzh-space--is-around{padding:calc((var(--space) / 2) * var(--around));margin:calc((var(--space) / 2) * (1 - var(--around)))}.stzh-space--justify-center{-ms-flex-pack:center;justify-content:center}.stzh-space--justify-end{-ms-flex-pack:end;justify-content:flex-end}.stzh-space--justify-between{-ms-flex-pack:justify;justify-content:space-between}.stzh-space--justify-around{-ms-flex-pack:distribute;justify-content:space-around}.stzh-space--justify-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.stzh-space--items-end{-ms-flex-align:end;align-items:flex-end}.stzh-space--items-center{-ms-flex-align:center;align-items:center}.stzh-space--items-baseline{-ms-flex-align:baseline;align-items:baseline}.stzh-space--items-stretch{-ms-flex-align:stretch;align-items:stretch}";var StzhSpace=function(){function e(e){registerInstance(this,e);this.curve="none";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit";this.justify="start";this.items="start";this.around=false;this.border="none"}e.prototype.render=function(){var e;return h(Host,null,h("div",{class:(e={"stzh-space":true,"stzh-space--is-around":this.around},e["stzh-space--justify-".concat(this.justify)]=!!this.justify,e["stzh-space--items-".concat(this.items)]=!!this.items,e)},h("slot",null)))};return e}();StzhSpace.style=stzhSpaceCss;export{StzhSpace as stzh_space};
 //# sourceMappingURL=stzh-space.entry.js.map

package/dist/esm-es5/stzh-space.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhSpaceCss","StzhSpace","prototype","render","h","Host","class","_a","this","around","concat","justify","items"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  @include clearfix;\n  display: flex;\n  clear: both;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n  \n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint  */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint  */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint  */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint  */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n    /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,aAAe,uga,ICiBRC,UAAS,W,kDAEU,O,UAGF,U,eAEK,U,gBAEC,U,eAED,U,eAEA,U,aAGC,Q,WAGJ,Q,YAGa,M,YAGmE,M,CAE9GA,EAAAC,UAAAC,OAAA,W,MACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,OAAKC,EAAA,CACH,aAAc,KACd,wBAAyBC,KAAKC,QAC9BF,EAAC,uBAAAG,OAAuBF,KAAKG,YAAcH,KAAKG,QAChDJ,EAAC,qBAAAG,OAAqBF,KAAKI,UAAYJ,KAAKI,M,IAG9CR,EAAA,c,WAtCY,G"}
+{"version":3,"names":["stzhSpaceCss","StzhSpace","prototype","render","h","Host","class","_a","this","around","concat","justify","items"],"sources":["src/components/stzh-space/stzh-space.scss?tag=stzh-space&encapsulation=shadow","src/components/stzh-space/stzh-space.tsx"],"sourcesContent":[":host {\n  --space: #{space()};\n  --around: 0;\n\n  display: flex;\n\n  ::slotted(*) {\n    // fix IE11 not wrapping text\n    max-width: 100%;\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  ::slotted(stzh-vspace),\n  ::slotted(stzh-hspace),\n  ::slotted(stzh-row),\n  ::slotted(stzh-container),\n  ::slotted(stzh-section) {\n    align-self: stretch;\n    flex-grow: 1;\n  }\n}\n\n:host(:empty) {\n  --around: 1;\n\n  width: var(--space);\n  height: var(--space);\n}\n\n:host([around]:not([around=\"false\"])) {\n  --around: 1;\n}\n\n/* Border variants */\n\n:host([border=\"top\"]),\n:host([border=\"top-bottom\"]) {\n  border-top: 1px solid $baseBorderColor;\n}\n\n:host([border=\"bottom\"]),\n:host([border=\"top-bottom\"]) {\n  border-bottom: 1px solid $baseBorderColor;\n}\n\n:host([border=\"left\"]),\n:host([border=\"left-right\"]) {\n  border-left: 1px solid $baseBorderColor;\n}\n\n:host([border=\"right\"]),\n:host([border=\"left-right\"]) {\n  border-right: 1px solid $baseBorderColor;\n}\n\n/* Space curve variant */\n\n@each $spaceCurve, $value in $spaceCurves {\n  $defaultSize: map-get($value, 'size');\n  $breakpointSizes: map-get($value, 'sizes');\n\n  // :host([curve=\"#{$spaceCurve}\"]) > .stzh-vspace {\n  :host([curve=\"#{$spaceCurve}\"]) {\n    --space: #{space($defaultSize)};\n\n    @each $breakpoint, $size in $breakpointSizes {\n      @include mq($from: $breakpoint) {\n        --space: #{space($size)};\n      }\n    }\n  }\n}\n\n@mixin spaceProps($breakpoint: null) {\n  @each $space, $value in $spaceSizes {\n    @if $breakpoint {\n      // :host([size-#{$breakpoint}=\"#{$space}\"]) > .stzh-vspace {\n      :host([size-#{$breakpoint}=\"#{$space}\"]) {\n        @include mq($from: $breakpoint) {\n          --space: #{$value};\n        }\n      }\n    } @else {\n      // :host([size=\"#{$space}\"]) > .stzh-vspace {\n      :host([size=\"#{$space}\"]) {\n        --space: #{$value};\n      }\n    }\n  }\n}\n\n@include spaceProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include spaceProps($breakpoint);\n}\n\n.stzh-space {\n  flex-grow: 1;\n  width: 100%;\n  height: 100%;\n\n  display: flex;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  padding: calc((var(--space) / -2) * var(--around));\n  margin: calc((var(--space) / -2) * (1 - var(--around)));\n\n  &--is-around {\n    padding: calc((var(--space) / 2) * var(--around));\n    margin: calc((var(--space) / 2) * (1 - var(--around)));\n  }\n\n  /* Justify content variants */\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Space, Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-space\",\n  styleUrl: \"stzh-space.scss\",\n  shadow: true\n})\nexport class StzhSpace {\n  /** Type of curve */\n  @Prop() curve: Space.Curves = \"none\";\n\n  /** Type of size */\n  @Prop() size: Space.Sizes = \"inherit\";\n  /** Type of size above small breakpoint  */\n  @Prop() sizeSmall: Space.Sizes = \"inherit\";\n  /** Type of size above medium breakpoint  */\n  @Prop() sizeMedium: Space.Sizes = \"inherit\";\n  /** Type of size above large breakpoint  */\n  @Prop() sizeLarge: Space.Sizes = \"inherit\";\n  /** Type of size above ultra breakpoint  */\n  @Prop() sizeUltra: Space.Sizes = \"inherit\";\n\n    /** Alignment */\n  @Prop() justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop() items: Layout.Items = \"start\";\n\n  /** Apply spacing to slotted elements */\n  @Prop({ reflect: true }) around: boolean = false;\n\n  /** Add border */\n  @Prop({ reflect: true }) border: \"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | \"left-right\" | \"top-bottom\" = \"none\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-space\": true,\n            'stzh-space--is-around': this.around,\n            [`stzh-space--justify-${this.justify}`]: !!this.justify,\n            [`stzh-space--items-${this.items}`]: !!this.items\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,aAAe,28Z,ICiBRC,UAAS,W,kDAEU,O,UAGF,U,eAEK,U,gBAEC,U,eAED,U,eAEA,U,aAGC,Q,WAGJ,Q,YAGa,M,YAGmE,M,CAE9GA,EAAAC,UAAAC,OAAA,W,MACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,OAAKC,EAAA,CACH,aAAc,KACd,wBAAyBC,KAAKC,QAC9BF,EAAC,uBAAAG,OAAuBF,KAAKG,YAAcH,KAAKG,QAChDJ,EAAC,qBAAAG,OAAqBF,KAAKI,UAAYJ,KAAKI,M,IAG9CR,EAAA,c,WAtCY,G"}

package/dist/esm-es5/stzh-table.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull}from"./utils-51148d9a.js";var stzhTableCss=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-table{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-table[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-table{}.stzh-table__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-table__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}.stzh-table__header .stzh-table__search{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--stzh-table-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-table__action-button{-ms-flex-negative:0;flex-shrink:0}.stzh-table__action-button:not(:empty){margin-left:var(--stzh-space-medium)}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table stzh-icon.stzh-table__sort-icon{display:none}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{display:-ms-inline-flexbox;display:inline-flex}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}';var CLASS_HAS_STICKED="has-sticked";var CLASS_IS_STICKY_LEFT="is-sticky-left";var CLASS_IS_STICKY_RIGHT="is-sticky-right";var StzhTable=function(){function t(t){var e=this;registerInstance(this,t);this.updateCellClasses=function(){if(!e.tableWrapper){return}var t=Array.from(e.tableWrapper.querySelectorAll("tr"));t.forEach((function(t){var a=Array.from(t.children);a.forEach((function(t,a){t.classList.remove(CLASS_IS_STICKY_LEFT);t.classList.remove(CLASS_IS_STICKY_RIGHT);if(a===e.fixedLeft){t.classList.add(CLASS_IS_STICKY_LEFT)}if(a===e.fixedRight){t.classList.add(CLASS_IS_STICKY_RIGHT)}}))}))};this.updateScrollStates=function(){if(!e.tableWrapper){return}var t=e.tableWrapper.scrollLeft;var a=e.tableWrapper.scrollWidth;var s=e.tableWrapper.clientWidth;e.isScrollable=a>s;e.hasScrollLeft=t>0;e.hasScrollRight=t<a-s;var i=Array.from(e.tableWrapper.querySelectorAll("tr"));var r=i[0];if(!r){return}e.cellsStickyLeft=[];e.cellsStickyRight=[];var l=Array.from(r.children);l.forEach((function(a,i){var r=a.offsetLeft;var l=r+a.offsetWidth;if(e.hasScrollLeft&&i===e.fixedLeft&&Math.ceil(t)>=r){e.cellsStickyLeft.push(i)}if(e.hasScrollRight&&i===e.fixedRight&&Math.ceil(t)+s<=l){e.cellsStickyRight.push(i)}}));i.forEach((function(t){var a=Array.from(t.children);a.forEach((function(t,a){if(e.cellsStickyLeft.indexOf(a)>-1||e.cellsStickyRight.indexOf(a)>-1){t.classList.add(CLASS_HAS_STICKED)}else{t.classList.remove(CLASS_HAS_STICKED)}}))}))};this.init=function(){var t=e.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');if(t){setPropsIfNull(t,{size:"small"})}e.updateCellClasses();e.updateScrollStates()};this.handleResize=function(){if(e.debounceResize){window.cancelAnimationFrame(e.debounceResize)}e.debounceResize=requestAnimationFrame(e.updateScrollStates)};this.handleScroll=function(){if(e.debounceScroll){window.cancelAnimationFrame(e.debounceScroll)}e.debounceScroll=requestAnimationFrame(e.updateScrollStates)};this.fixedLeft=null;this.fixedRight=null;this.disableMinWidth=false;this.hasScrollLeft=false;this.hasScrollRight=false;this.isScrollable=false;this.cellsStickyLeft=[];this.cellsStickyRight=[]}t.prototype.fixedCellWatcher=function(){this.updateCellClasses();this.updateScrollStates()};t.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true});this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}if(this.resizeObserver){this.resizeObserver.disconnect()}};t.prototype.render=function(){var t=this;var e={"stzh-table":true,"is-scrollable":this.isScrollable,"has-scroll-left":this.hasScrollLeft,"has-scroll-right":this.hasScrollRight,"has-scroll-left-shadow":this.hasScrollLeft&&this.cellsStickyLeft.length===0,"has-scroll-right-shadow":this.hasScrollRight&&this.cellsStickyRight.length===0};return h(Host,null,h("div",{class:e},h("div",{class:"stzh-table__header"},h("div",{class:"stzh-table__heading"},h("slot",{name:"heading"})),h("div",{class:"stzh-table__sub-header"},h("div",{class:"stzh-table__search"},h("slot",{name:"search"})),h("div",{class:"stzh-table__action-button"},h("slot",{name:"action-button"})))),h("div",{class:"stzh-table__outer-wrapper"},h("div",{ref:function(e){return t.tableWrapper=e},class:"stzh-table__wrapper",onScroll:this.handleScroll},h("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{fixedLeft:["fixedCellWatcher"],fixedRight:["fixedCellWatcher"]}},enumerable:false,configurable:true});return t}();StzhTable.style=stzhTableCss;export{StzhTable as stzh_table};
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull,h as hasSlot}from"./utils-8f264f12.js";var stzhTableCss=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-table{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--max-height:var(--stzh-table-max-height);--min-width:var(--stzh-table-min-width);--cell-padding:var(--stzh-table-cell-padding);--input-width:var(--stzh-table-input-width)}stzh-table[hidden]{display:none}stzh-table *,stzh-table *::before,stzh-table *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}stzh-table[disable-min-width]:not([disable-min-width=false]){--min-width:none}.stzh-table{}.stzh-table__header{border-bottom:0.0625rem solid var(--stzh-base-border-color);padding-bottom:var(--stzh-space-small);margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-table__header{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-table__header{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.stzh-table__header{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-table__header{margin-bottom:var(--stzh-space-xlarge)}}.stzh-table__sub-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.stzh-table__heading{margin-bottom:var(--stzh-space-small)}.stzh-table__header .stzh-table__search{-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--stzh-table-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-table__action-button{-ms-flex-negative:0;flex-shrink:0}.stzh-table__action-button:not(:empty){margin-left:var(--stzh-space-medium)}.stzh-table__outer-wrapper{position:relative}.stzh-table__outer-wrapper::before,.stzh-table__outer-wrapper::after{z-index:4;background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed);opacity:0}.stzh-table__outer-wrapper::before{left:0}.stzh-table__outer-wrapper::after{right:0;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.stzh-table__wrapper{overflow-x:auto;max-height:var(--max-height)}.stzh-table__pagination-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-table__pagination-wrapper:not(:empty){margin-top:var(--stzh-space-medium)}.stzh-table__sort-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-size:inherit;line-height:inherit;color:inherit;padding:var(--cell-padding)}.stzh-table__sort-button:hover,.stzh-table__sort-button:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-table stzh-icon.stzh-table__sort-icon{display:none}.stzh-table table{width:100%;border-spacing:0;min-width:var(--min-width)}.stzh-table thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.stzh-table tr:hover td,.stzh-table tr:hover th{background-color:var(--stzh-color-grey5)}.stzh-table td,.stzh-table th{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);text-align:left;border:none;vertical-align:top;border:none;border-bottom:0.0625rem solid var(--stzh-base-border-color);background-color:var(--stzh-color-white);-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);padding:var(--cell-padding);}.stzh-table td a,.stzh-table th a{color:var(--stzh-link-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-table td a:hover,.stzh-table td a:focus,.stzh-table th a:hover,.stzh-table th a:focus{color:var(--stzh-link-hover-color)}.stzh-table td b,.stzh-table td strong,.stzh-table th b,.stzh-table th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.stzh-table td i,.stzh-table td em,.stzh-table th i,.stzh-table th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-table td.align-left,.stzh-table th.align-left{text-align:left}.stzh-table td.align-right,.stzh-table th.align-right{text-align:right}.stzh-table td.align-center,.stzh-table th.align-center{text-align:center}.stzh-table td.valign-auto,.stzh-table th.valign-auto{vertical-align:auto}.stzh-table td.valign-middle,.stzh-table th.valign-middle{vertical-align:middle}.stzh-table td.valign-bottom,.stzh-table th.valign-bottom{vertical-align:bottom}.stzh-table td.nowrap,.stzh-table th.nowrap{white-space:nowrap}.stzh-table td.is-sticky-left,.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-left,.stzh-table th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.stzh-table td.has-sticked,.stzh-table th.has-sticked{z-index:2}.stzh-table td.is-sticky-left,.stzh-table th.is-sticky-left{left:0}.stzh-table td.is-sticky-right,.stzh-table th.is-sticky-right{right:0}.stzh-table td.is-sticky-left::after,.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-left::after,.stzh-table th.is-sticky-right::after{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.16)), to(rgba(0, 0, 0, 0)));background:linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%);content:"";pointer-events:none;position:absolute;top:0;height:100%;width:0.375rem;-webkit-transform:translate(100%);transform:translate(100%);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-table td.is-sticky-left::after,.stzh-table th.is-sticky-left::after{right:0}.stzh-table td.is-sticky-right::after,.stzh-table th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.stzh-table td.has-sticked.is-sticky-left::after,.stzh-table td.has-sticked.is-sticky-right::after,.stzh-table th.has-sticked.is-sticky-left::after,.stzh-table th.has-sticked.is-sticky-right::after{opacity:1}.stzh-table th{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-table th.is-sortable{padding:0}td.has-sorted .stzh-table__sort-icon,th.has-sorted .stzh-table__sort-icon{display:-ms-inline-flexbox;display:inline-flex}td.has-sorted-desc .stzh-table__sort-icon,th.has-sorted-desc .stzh-table__sort-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.stzh-table.has-list .stzh-table__outer-wrapper{display:none}@media screen and (min-width: 600px){.stzh-table.has-list .stzh-table__outer-wrapper{display:block}}@media screen and (min-width: 600px){.stzh-table.has-list .stzh-table__list-wrapper{display:none}}.stzh-table.has-scroll-left-shadow .stzh-table__outer-wrapper::before,.stzh-table.has-scroll-right-shadow .stzh-table__outer-wrapper::after{opacity:1}';var CLASS_HAS_STICKED="has-sticked";var CLASS_IS_STICKY_LEFT="is-sticky-left";var CLASS_IS_STICKY_RIGHT="is-sticky-right";var StzhTable=function(){function t(t){var e=this;registerInstance(this,t);this.updateCellClasses=function(){if(!e.tableWrapper){return}var t=Array.from(e.tableWrapper.querySelectorAll("tr"));t.forEach((function(t){var a=Array.from(t.children);a.forEach((function(t,a){t.classList.remove(CLASS_IS_STICKY_LEFT);t.classList.remove(CLASS_IS_STICKY_RIGHT);if(a===e.fixedLeft){t.classList.add(CLASS_IS_STICKY_LEFT)}if(a===e.fixedRight){t.classList.add(CLASS_IS_STICKY_RIGHT)}}))}))};this.updateScrollStates=function(){if(!e.tableWrapper){return}var t=e.tableWrapper.scrollLeft;var a=e.tableWrapper.scrollWidth;var s=e.tableWrapper.clientWidth;e.isScrollable=a>s;e.hasScrollLeft=t>0;e.hasScrollRight=t<a-s;var i=Array.from(e.tableWrapper.querySelectorAll("tr"));var r=i[0];if(!r){return}e.cellsStickyLeft=[];e.cellsStickyRight=[];var l=Array.from(r.children);l.forEach((function(a,i){var r=a.offsetLeft;var l=r+a.offsetWidth;if(e.hasScrollLeft&&i===e.fixedLeft&&Math.ceil(t)>=r){e.cellsStickyLeft.push(i)}if(e.hasScrollRight&&i===e.fixedRight&&Math.ceil(t)+s<=l){e.cellsStickyRight.push(i)}}));i.forEach((function(t){var a=Array.from(t.children);a.forEach((function(t,a){if(e.cellsStickyLeft.indexOf(a)>-1||e.cellsStickyRight.indexOf(a)>-1){t.classList.add(CLASS_HAS_STICKED)}else{t.classList.remove(CLASS_HAS_STICKED)}}))}))};this.init=function(){var t=e.element.querySelector('stzh-input[slot="search"], [slot="search"] stzh-input');if(t){setPropsIfNull(t,{size:"small"})}e.updateCellClasses();e.updateScrollStates()};this.handleResize=function(){if(e.debounceResize){window.cancelAnimationFrame(e.debounceResize)}e.debounceResize=requestAnimationFrame(e.updateScrollStates)};this.handleScroll=function(){if(e.debounceScroll){window.cancelAnimationFrame(e.debounceScroll)}e.debounceScroll=requestAnimationFrame(e.updateScrollStates)};this.fixedLeft=null;this.fixedRight=null;this.disableMinWidth=false;this.hasScrollLeft=false;this.hasScrollRight=false;this.isScrollable=false;this.cellsStickyLeft=[];this.cellsStickyRight=[]}t.prototype.fixedCellWatcher=function(){this.updateCellClasses();this.updateScrollStates()};t.prototype.connectedCallback=function(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true});this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}if(this.resizeObserver){this.resizeObserver.disconnect()}};t.prototype.render=function(){var t=this;var e=hasSlot(this.element,"list");var a={"stzh-table":true,"is-scrollable":this.isScrollable,"has-scroll-left":this.hasScrollLeft,"has-scroll-right":this.hasScrollRight,"has-scroll-left-shadow":this.hasScrollLeft&&this.cellsStickyLeft.length===0,"has-scroll-right-shadow":this.hasScrollRight&&this.cellsStickyRight.length===0,"has-list":e};return h(Host,null,h("div",{class:a},h("div",{class:"stzh-table__header"},h("div",{class:"stzh-table__heading"},h("slot",{name:"heading"})),h("div",{class:"stzh-table__sub-header"},h("div",{class:"stzh-table__search"},h("slot",{name:"search"})),h("div",{class:"stzh-table__action-button"},h("slot",{name:"action-button"})))),h("div",{class:"stzh-table__outer-wrapper"},h("div",{ref:function(e){return t.tableWrapper=e},class:"stzh-table__wrapper",onScroll:this.handleScroll},h("slot",null))),h("div",{class:"stzh-table__list-wrapper"},h("slot",{name:"list"})),h("div",{class:"stzh-table__pagination-wrapper"},h("slot",{name:"pagination"}))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{fixedLeft:["fixedCellWatcher"],fixedRight:["fixedCellWatcher"]}},enumerable:false,configurable:true});return t}();StzhTable.style=stzhTableCss;export{StzhTable as stzh_table};
 //# sourceMappingURL=stzh-table.entry.js.map

package/dist/esm-es5/stzh-table.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","_this","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","setPropsIfNull","size","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","prototype","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["stzh-table {\n  @include host;\n  @include table-host();\n}\n\n.stzh-table {\n  @include table(\"table\");\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/**\n * @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n *\n * @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n */\n@Component({\n  tag: \"stzh-table\",\n  styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n  /** Columns that should be sticky on the left side (column indexes separated by comma) */\n  @Prop() fixedLeft: number = null;\n\n  /** Columns that should be sticky on the right side (column indexes separated by comma) */\n  @Prop() fixedRight: number = null;\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhTableElement;\n\n  @Watch(\"fixedLeft\")\n  @Watch(\"fixedRight\")\n  fixedCellWatcher() {\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  private tableWrapper: HTMLDivElement;\n  private observer: MutationObserver;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateCellClasses = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index) => {\n        cell.classList.remove(CLASS_IS_STICKY_LEFT);\n        cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n        if (index === this.fixedLeft) {\n          cell.classList.add(CLASS_IS_STICKY_LEFT);\n        }\n\n        if (index === this.fixedRight) {\n          cell.classList.add(CLASS_IS_STICKY_RIGHT);\n        }\n      });\n    });\n  }\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && index === this.fixedLeft\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && index === this.fixedRight\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index: number) => {\n        if (\n          this.cellsStickyLeft.indexOf(index) > -1\n          || this.cellsStickyRight.indexOf(index) > -1\n        ) {\n          cell.classList.add(CLASS_HAS_STICKED);\n        } else {\n          cell.classList.remove(CLASS_HAS_STICKED);\n        }\n      });\n    });\n  }\n\n  private init = () => {\n    const searchInput = this.element.querySelector(\n      'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n    );\n\n    if (searchInput) {\n      setPropsIfNull(searchInput, {\n        size: \"small\"\n      } as HTMLStzhInputElement)\n    }\n\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\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    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-table\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-table__header\">\n            <div class=\"stzh-table__heading\">\n              <slot name=\"heading\"></slot>\n            </div>            \n            <div class=\"stzh-table__sub-header\">\n              <div class=\"stzh-table__search\">\n                <slot name=\"search\"></slot>\n              </div>\n              <div class=\"stzh-table__action-button\">\n                <slot name=\"action-button\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-table__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-table__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,IAAMA,aAAe,ujPCYrB,IAAMC,kBAAoB,cAC1B,IAAMC,qBAAuB,iBAC7B,IAAMC,sBAAwB,kB,IAgBjBC,UAAS,W,kDAuCZC,KAAAC,kBAAoB,WAC1B,IAAKC,EAAKC,aAAc,CACtB,M,CAGF,IAAMC,EAA8BC,MAAMC,KAAKJ,EAAKC,aAAaI,iBAAiB,OAClFH,EAAKI,SAAQ,SAACC,GACZ,IAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,SAACI,EAA4BC,GACzCD,EAAKE,UAAUC,OAAOlB,sBACtBe,EAAKE,UAAUC,OAAOjB,uBAEtB,GAAIe,IAAUX,EAAKc,UAAW,CAC5BJ,EAAKE,UAAUG,IAAIpB,qB,CAGrB,GAAIgB,IAAUX,EAAKgB,WAAY,CAC7BN,EAAKE,UAAUG,IAAInB,sB,SAMnBE,KAAAmB,mBAAqB,WAC3B,IAAKjB,EAAKC,aAAc,CACtB,M,CAGF,IAAMiB,EAAoBlB,EAAKC,aAAakB,WAC5C,IAAMC,EAAqBpB,EAAKC,aAAaoB,YAC7C,IAAMC,EAAqBtB,EAAKC,aAAasB,YAE7CvB,EAAKwB,aAAeJ,EAAqBE,EACzCtB,EAAKyB,cAAgBP,EAAoB,EACzClB,EAAK0B,eAAiBR,EAAoBE,EAAqBE,EAE/D,IAAMpB,EAA8BC,MAAMC,KAAKJ,EAAKC,aAAaI,iBAAiB,OAClF,IAAMsB,EAAWzB,EAAK,GAEtB,IAAKyB,EAAU,CACb,M,CAGF3B,EAAK4B,gBAAkB,GACvB5B,EAAK6B,iBAAmB,GACxB,IAAMrB,EAAmBL,MAAMC,KAAKuB,EAASlB,UAE7CD,EAAMF,SAAQ,SAACI,EAA4BC,GACzC,IAAMmB,EAAapB,EAAKoB,WACxB,IAAMC,EAAcD,EAAapB,EAAKsB,YAEtC,GACEhC,EAAKyB,eACFd,IAAUX,EAAKc,WACfmB,KAAKC,KAAKhB,IAAsBY,EACnC,CACA9B,EAAK4B,gBAAgBO,KAAKxB,E,CAG5B,GACEX,EAAK0B,gBACFf,IAAUX,EAAKgB,YACfiB,KAAKC,KAAKhB,GAAqBI,GAAsBS,EACxD,CACA/B,EAAK6B,iBAAiBM,KAAKxB,E,KAI/BT,EAAKI,SAAQ,SAACC,GACZ,IAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,SAACI,EAA4BC,GACzC,GACEX,EAAK4B,gBAAgBQ,QAAQzB,IAAU,GACpCX,EAAK6B,iBAAiBO,QAAQzB,IAAU,EAC3C,CACAD,EAAKE,UAAUG,IAAIrB,kB,KACd,CACLgB,EAAKE,UAAUC,OAAOnB,kB,SAMtBI,KAAAuC,KAAO,WACb,IAAMC,EAActC,EAAKuC,QAAQC,cAC/B,yDAGF,GAAIF,EAAa,CACfG,eAAeH,EAAa,CAC1BI,KAAM,S,CAIV1C,EAAKD,oBACLC,EAAKiB,oB,EAGPnB,KAAA6C,aAAe,WACb,GAAI3C,EAAK4C,eAAgB,CACvBC,OAAOC,qBAAqB9C,EAAK4C,e,CAGnC5C,EAAK4C,eAAiBG,sBAAsB/C,EAAKiB,mB,EAG3CnB,KAAAkD,aAAe,WACrB,GAAIhD,EAAKiD,eAAgB,CACvBJ,OAAOC,qBAAqB9C,EAAKiD,e,CAGnCjD,EAAKiD,eAAiBF,sBAAsB/C,EAAKiB,mB,iBApJvB,K,gBAGC,K,qBAUuB,M,mBAElB,M,oBACC,M,kBACF,M,qBACI,G,sBACC,E,CAMtCpB,EAAAqD,UAAAC,iBAAA,WACErD,KAAKC,oBACLD,KAAKmB,oB,EA4HPpB,EAAAqD,UAAAE,kBAAA,WACEtD,KAAKuC,OAELvC,KAAKuD,SAAW,IAAIC,iBAAiBxD,KAAKuC,MAC1CvC,KAAKuD,SAASE,QAAQzD,KAAKyC,QAAS,CAClCiB,UAAW,KACXC,QAAS,OAGX3D,KAAK4D,eAAiB,IAAIC,eAAe7D,KAAK6C,cAC9C7C,KAAK4D,eAAeH,QAAQzD,KAAKyC,Q,EAGnC1C,EAAAqD,UAAAU,qBAAA,WACE,GAAI9D,KAAKuD,SAAU,CACjBvD,KAAKuD,SAASQ,Y,CAGhB,GAAI/D,KAAK4D,eAAgB,CACvB5D,KAAK4D,eAAeG,Y,GAIxBhE,EAAAqD,UAAAY,OAAA,eAAA9D,EAAAF,KACE,IAAMiE,EAAU,CACd,aAAc,KACd,gBAAiBjE,KAAK0B,aACtB,kBAAmB1B,KAAK2B,cACxB,mBAAoB3B,KAAK4B,eACzB,yBAA0B5B,KAAK2B,eAAiB3B,KAAK8B,gBAAgBoC,SAAW,EAChF,0BAA2BlE,KAAK4B,gBAAkB5B,KAAK+B,iBAAiBmC,SAAW,GAGrF,OACEC,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,sBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMG,KAAK,aAEbH,EAAA,OAAKE,MAAM,0BACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMG,KAAK,YAEbH,EAAA,OAAKE,MAAM,6BACTF,EAAA,QAAMG,KAAK,qBAIjBH,EAAA,OAAKE,MAAM,6BACTF,EAAA,OACEI,IAAK,SAACC,GAAE,OAAMtE,EAAKC,aAAeqE,CAA1B,EACRH,MAAM,sBACNI,SAAUzE,KAAKkD,cAEfiB,EAAA,gB,qSAhNQ,G"}
+{"version":3,"names":["stzhTableCss","CLASS_HAS_STICKED","CLASS_IS_STICKY_LEFT","CLASS_IS_STICKY_RIGHT","StzhTable","this","updateCellClasses","_this","tableWrapper","rows","Array","from","querySelectorAll","forEach","row","cells","children","cell","index","classList","remove","fixedLeft","add","fixedRight","updateScrollStates","wrapperScrollLeft","scrollLeft","wrapperScrollWidth","scrollWidth","wrapperClientWidth","clientWidth","isScrollable","hasScrollLeft","hasScrollRight","firstRow","cellsStickyLeft","cellsStickyRight","offsetLeft","offsetRight","offsetWidth","Math","ceil","push","indexOf","init","searchInput","element","querySelector","setPropsIfNull","size","handleResize","debounceResize","window","cancelAnimationFrame","requestAnimationFrame","handleScroll","debounceScroll","prototype","fixedCellWatcher","connectedCallback","observer","MutationObserver","observe","childList","subtree","resizeObserver","ResizeObserver","disconnectedCallback","disconnect","render","hasList","hasSlot","classes","length","h","Host","class","name","ref","el","onScroll"],"sources":["src/components/stzh-table/stzh-table.scss?tag=stzh-table","src/components/stzh-table/stzh-table.tsx"],"sourcesContent":["stzh-table {\n  @include host;\n  @include table-host();\n}\n\n.stzh-table {\n  @include table(\"table\");\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport { setPropsIfNull, hasSlot } from \"../../utils/utils\";\n\nconst CLASS_HAS_STICKED = \"has-sticked\";\nconst CLASS_IS_STICKY_LEFT = \"is-sticky-left\";\nconst CLASS_IS_STICKY_RIGHT = \"is-sticky-right\";\n\n/**\n * @slot - Slot for table element\n * @slot heading - Slot for `stzh-heading`\n * @slot search - Slot for search `stzh-input` element\n * @slot action-button - Slot for action `stzh-button` element\n * @slot list - Slot for list element showing on mobile\n * @slot pagination - Slot for action `stzh-pagination` element\n *\n * @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n */\n@Component({\n  tag: \"stzh-table\",\n  styleUrl: \"stzh-table.scss\"\n})\nexport class StzhTable {\n  /** Columns that should be sticky on the left side (column indexes separated by comma) */\n  @Prop() fixedLeft: number = null;\n\n  /** Columns that should be sticky on the right side (column indexes separated by comma) */\n  @Prop() fixedRight: number = null;\n\n  /**\n   * Whether to disable min-width of the table.\n   *\n   * If `false`, the default `min-width` is `700px`\n   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.\n   *\n   * You can also overwrite the min-width via CSS with the custom property `--min-width`.\n   */\n  @Prop({ reflect: true }) disableMinWidth: boolean = false;\n\n  @State() hasScrollLeft: boolean = false;\n  @State() hasScrollRight: boolean = false;\n  @State() isScrollable: boolean = false;\n  @State() cellsStickyLeft: number[] = [];\n  @State() cellsStickyRight: number[] = [];\n\n  @Element() element: HTMLStzhTableElement;\n\n  @Watch(\"fixedLeft\")\n  @Watch(\"fixedRight\")\n  fixedCellWatcher() {\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  private tableWrapper: HTMLDivElement;\n  private observer: MutationObserver;\n  private debounceScroll: number;\n\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private updateCellClasses = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index) => {\n        cell.classList.remove(CLASS_IS_STICKY_LEFT);\n        cell.classList.remove(CLASS_IS_STICKY_RIGHT);\n\n        if (index === this.fixedLeft) {\n          cell.classList.add(CLASS_IS_STICKY_LEFT);\n        }\n\n        if (index === this.fixedRight) {\n          cell.classList.add(CLASS_IS_STICKY_RIGHT);\n        }\n      });\n    });\n  }\n\n  private updateScrollStates = () => {\n    if (!this.tableWrapper) {\n      return;\n    }\n\n    const wrapperScrollLeft = this.tableWrapper.scrollLeft;\n    const wrapperScrollWidth = this.tableWrapper.scrollWidth;\n    const wrapperClientWidth = this.tableWrapper.clientWidth;\n\n    this.isScrollable = wrapperScrollWidth > wrapperClientWidth;\n    this.hasScrollLeft = wrapperScrollLeft > 0;\n    this.hasScrollRight = wrapperScrollLeft < wrapperScrollWidth - wrapperClientWidth;\n\n    const rows: HTMLTableRowElement[] = Array.from(this.tableWrapper.querySelectorAll(\"tr\"));\n    const firstRow = rows[0];\n\n    if (!firstRow) {\n      return;\n    }\n\n    this.cellsStickyLeft = [];\n    this.cellsStickyRight = [];\n    const cells: Element[] = Array.from(firstRow.children);\n\n    cells.forEach((cell: HTMLTableCellElement, index: number) => {\n      const offsetLeft = cell.offsetLeft;\n      const offsetRight = offsetLeft + cell.offsetWidth;\n\n      if (\n        this.hasScrollLeft\n        && index === this.fixedLeft\n        && Math.ceil(wrapperScrollLeft) >= offsetLeft\n      ) {\n        this.cellsStickyLeft.push(index);\n      }\n\n      if (\n        this.hasScrollRight\n        && index === this.fixedRight\n        && Math.ceil(wrapperScrollLeft) + wrapperClientWidth <= offsetRight\n      ) {\n        this.cellsStickyRight.push(index);\n      }\n    });\n\n    rows.forEach((row: HTMLTableRowElement) => {\n      const cells = Array.from(row.children);\n      cells.forEach((cell: HTMLTableCellElement, index: number) => {\n        if (\n          this.cellsStickyLeft.indexOf(index) > -1\n          || this.cellsStickyRight.indexOf(index) > -1\n        ) {\n          cell.classList.add(CLASS_HAS_STICKED);\n        } else {\n          cell.classList.remove(CLASS_HAS_STICKED);\n        }\n      });\n    });\n  }\n\n  private init = () => {\n    const searchInput = this.element.querySelector(\n      'stzh-input[slot=\"search\"], [slot=\"search\"] stzh-input'\n    );\n\n    if (searchInput) {\n      setPropsIfNull(searchInput, {\n        size: \"small\"\n      } as HTMLStzhInputElement)\n    }\n\n    this.updateCellClasses();\n    this.updateScrollStates();\n  }\n\n  handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateScrollStates);\n  }\n\n  private handleScroll = () => {\n    if (this.debounceScroll) {\n      window.cancelAnimationFrame(this.debounceScroll);\n    }\n\n    this.debounceScroll = requestAnimationFrame(this.updateScrollStates);\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    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const hasList = hasSlot(this.element, \"list\");\n\n    const classes = {\n      \"stzh-table\": true,\n      \"is-scrollable\": this.isScrollable,\n      \"has-scroll-left\": this.hasScrollLeft,\n      \"has-scroll-right\": this.hasScrollRight,\n      \"has-scroll-left-shadow\": this.hasScrollLeft && this.cellsStickyLeft.length === 0,\n      \"has-scroll-right-shadow\": this.hasScrollRight && this.cellsStickyRight.length === 0,\n      \"has-list\": hasList,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-table__header\">\n            <div class=\"stzh-table__heading\">\n              <slot name=\"heading\"></slot>\n            </div>\n            <div class=\"stzh-table__sub-header\">\n              <div class=\"stzh-table__search\">\n                <slot name=\"search\"></slot>\n              </div>\n              <div class=\"stzh-table__action-button\">\n                <slot name=\"action-button\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"stzh-table__outer-wrapper\">\n            <div\n              ref={(el) => (this.tableWrapper = el as HTMLDivElement)}\n              class=\"stzh-table__wrapper\"\n              onScroll={this.handleScroll}\n            >\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"stzh-table__list-wrapper\">\n            <slot name=\"list\"></slot>\n          </div>\n          <div class=\"stzh-table__pagination-wrapper\">\n            <slot name=\"pagination\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qJAAA,IAAMA,aAAe,s/PCYrB,IAAMC,kBAAoB,cAC1B,IAAMC,qBAAuB,iBAC7B,IAAMC,sBAAwB,kB,IAkBjBC,UAAS,W,kDAuCZC,KAAAC,kBAAoB,WAC1B,IAAKC,EAAKC,aAAc,CACtB,M,CAGF,IAAMC,EAA8BC,MAAMC,KAAKJ,EAAKC,aAAaI,iBAAiB,OAClFH,EAAKI,SAAQ,SAACC,GACZ,IAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,SAACI,EAA4BC,GACzCD,EAAKE,UAAUC,OAAOlB,sBACtBe,EAAKE,UAAUC,OAAOjB,uBAEtB,GAAIe,IAAUX,EAAKc,UAAW,CAC5BJ,EAAKE,UAAUG,IAAIpB,qB,CAGrB,GAAIgB,IAAUX,EAAKgB,WAAY,CAC7BN,EAAKE,UAAUG,IAAInB,sB,SAMnBE,KAAAmB,mBAAqB,WAC3B,IAAKjB,EAAKC,aAAc,CACtB,M,CAGF,IAAMiB,EAAoBlB,EAAKC,aAAakB,WAC5C,IAAMC,EAAqBpB,EAAKC,aAAaoB,YAC7C,IAAMC,EAAqBtB,EAAKC,aAAasB,YAE7CvB,EAAKwB,aAAeJ,EAAqBE,EACzCtB,EAAKyB,cAAgBP,EAAoB,EACzClB,EAAK0B,eAAiBR,EAAoBE,EAAqBE,EAE/D,IAAMpB,EAA8BC,MAAMC,KAAKJ,EAAKC,aAAaI,iBAAiB,OAClF,IAAMsB,EAAWzB,EAAK,GAEtB,IAAKyB,EAAU,CACb,M,CAGF3B,EAAK4B,gBAAkB,GACvB5B,EAAK6B,iBAAmB,GACxB,IAAMrB,EAAmBL,MAAMC,KAAKuB,EAASlB,UAE7CD,EAAMF,SAAQ,SAACI,EAA4BC,GACzC,IAAMmB,EAAapB,EAAKoB,WACxB,IAAMC,EAAcD,EAAapB,EAAKsB,YAEtC,GACEhC,EAAKyB,eACFd,IAAUX,EAAKc,WACfmB,KAAKC,KAAKhB,IAAsBY,EACnC,CACA9B,EAAK4B,gBAAgBO,KAAKxB,E,CAG5B,GACEX,EAAK0B,gBACFf,IAAUX,EAAKgB,YACfiB,KAAKC,KAAKhB,GAAqBI,GAAsBS,EACxD,CACA/B,EAAK6B,iBAAiBM,KAAKxB,E,KAI/BT,EAAKI,SAAQ,SAACC,GACZ,IAAMC,EAAQL,MAAMC,KAAKG,EAAIE,UAC7BD,EAAMF,SAAQ,SAACI,EAA4BC,GACzC,GACEX,EAAK4B,gBAAgBQ,QAAQzB,IAAU,GACpCX,EAAK6B,iBAAiBO,QAAQzB,IAAU,EAC3C,CACAD,EAAKE,UAAUG,IAAIrB,kB,KACd,CACLgB,EAAKE,UAAUC,OAAOnB,kB,SAMtBI,KAAAuC,KAAO,WACb,IAAMC,EAActC,EAAKuC,QAAQC,cAC/B,yDAGF,GAAIF,EAAa,CACfG,eAAeH,EAAa,CAC1BI,KAAM,S,CAIV1C,EAAKD,oBACLC,EAAKiB,oB,EAGPnB,KAAA6C,aAAe,WACb,GAAI3C,EAAK4C,eAAgB,CACvBC,OAAOC,qBAAqB9C,EAAK4C,e,CAGnC5C,EAAK4C,eAAiBG,sBAAsB/C,EAAKiB,mB,EAG3CnB,KAAAkD,aAAe,WACrB,GAAIhD,EAAKiD,eAAgB,CACvBJ,OAAOC,qBAAqB9C,EAAKiD,e,CAGnCjD,EAAKiD,eAAiBF,sBAAsB/C,EAAKiB,mB,iBApJvB,K,gBAGC,K,qBAUuB,M,mBAElB,M,oBACC,M,kBACF,M,qBACI,G,sBACC,E,CAMtCpB,EAAAqD,UAAAC,iBAAA,WACErD,KAAKC,oBACLD,KAAKmB,oB,EA4HPpB,EAAAqD,UAAAE,kBAAA,WACEtD,KAAKuC,OAELvC,KAAKuD,SAAW,IAAIC,iBAAiBxD,KAAKuC,MAC1CvC,KAAKuD,SAASE,QAAQzD,KAAKyC,QAAS,CAClCiB,UAAW,KACXC,QAAS,OAGX3D,KAAK4D,eAAiB,IAAIC,eAAe7D,KAAK6C,cAC9C7C,KAAK4D,eAAeH,QAAQzD,KAAKyC,Q,EAGnC1C,EAAAqD,UAAAU,qBAAA,WACE,GAAI9D,KAAKuD,SAAU,CACjBvD,KAAKuD,SAASQ,Y,CAGhB,GAAI/D,KAAK4D,eAAgB,CACvB5D,KAAK4D,eAAeG,Y,GAIxBhE,EAAAqD,UAAAY,OAAA,eAAA9D,EAAAF,KACE,IAAMiE,EAAUC,QAAQlE,KAAKyC,QAAS,QAEtC,IAAM0B,EAAU,CACd,aAAc,KACd,gBAAiBnE,KAAK0B,aACtB,kBAAmB1B,KAAK2B,cACxB,mBAAoB3B,KAAK4B,eACzB,yBAA0B5B,KAAK2B,eAAiB3B,KAAK8B,gBAAgBsC,SAAW,EAChF,0BAA2BpE,KAAK4B,gBAAkB5B,KAAK+B,iBAAiBqC,SAAW,EACnF,WAAYH,GAGd,OACEI,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,sBACTF,EAAA,OAAKE,MAAM,uBACTF,EAAA,QAAMG,KAAK,aAEbH,EAAA,OAAKE,MAAM,0BACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMG,KAAK,YAEbH,EAAA,OAAKE,MAAM,6BACTF,EAAA,QAAMG,KAAK,qBAIjBH,EAAA,OAAKE,MAAM,6BACTF,EAAA,OACEI,IAAK,SAACC,GAAE,OAAMxE,EAAKC,aAAeuE,CAA1B,EACRH,MAAM,sBACNI,SAAU3E,KAAKkD,cAEfmB,EAAA,eAGJA,EAAA,OAAKE,MAAM,4BACTF,EAAA,QAAMG,KAAK,UAEbH,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMG,KAAK,iB,qSA1ND,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-51148d9a.js";var stzhTextandimageCss='@charset "UTF-8";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){:host{--col-left-width:50%}}@media screen and (min-width: 1260px){:host{--col-left-width:45%}}@media screen and (min-width: 1260px){:host([size=small]){--col-left-width:33%}}@media screen and (min-width: 1260px){:host([size=large]){--col-left-width:55%}}@media screen and (min-width: 600px){:host([floating]:not([floating=false])){--col-left-width:45%}}@media screen and (min-width: 600px){:host([size=small][floating]:not([floating=false])){--col-left-width:33%}}@media screen and (min-width: 600px){:host([size=large][floating]:not([floating=false])){--col-left-width:55%}}:host ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted([slot=left]){margin-bottom:0}}:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxxlarge)}}:host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]){float:left;width:100%}@media screen and (min-width: 600px){:host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]){width:calc(var(--col-left-width) - var(--stzh-space-large) / 2);margin-right:var(--stzh-space-large)}}.stzh-textandimage{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin:0 calc(var(--stzh-space-large) / -2);}.stzh-textandimage__left,.stzh-textandimage__right{width:auto;padding:0 calc(var(--stzh-space-large) / 2)}@media screen and (min-width: 600px){.stzh-textandimage__left{width:var(--col-left-width)}}@media screen and (min-width: 600px){.stzh-textandimage__right{width:calc(100% - var(--col-left-width))}}.stzh-textandimage--is-fullwidth .stzh-textandimage__left,.stzh-textandimage--is-fullwidth .stzh-textandimage__right{width:100%}.stzh-textandimage--is-floating .stzh-textandimage__left{width:auto}';var StzhTextandimage=function(){function t(t){registerInstance(this,t);this.floating=false;this.fullwidth=false;this.size="default"}t.prototype.render=function(){var t;var e=hasSlot(this.element,"left");var a=hasSlot(this.element,"right");var i=(t={"stzh-textandimage":true,"stzh-textandimage--has-left":e,"stzh-textandimage--has-right":a,"stzh-textandimage--is-fullwidth":this.fullwidth,"stzh-textandimage--is-floating":this.floating},t["stzh-textandimage--size-".concat(this.size)]=!!this.size,t);return h(Host,null,h("div",{class:i},h("div",{class:"stzh-textandimage__left"},h("slot",{name:"left"}),this.floating&&h("slot",{name:"right"})),!this.floating&&h("div",{class:"stzh-textandimage__right"},h("slot",{name:"right"}))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhTextandimage.style=stzhTextandimageCss;export{StzhTextandimage as stzh_textandimage};
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-8f264f12.js";var stzhTextandimageCss='@charset "UTF-8";:host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}@media screen and (min-width: 600px){:host{--col-left-width:50%}}@media screen and (min-width: 1260px){:host{--col-left-width:45%}}@media screen and (min-width: 1260px){:host([size=small]){--col-left-width:33%}}@media screen and (min-width: 1260px){:host([size=large]){--col-left-width:55%}}@media screen and (min-width: 600px){:host([floating]:not([floating=false])){--col-left-width:45%}}@media screen and (min-width: 600px){:host([size=small][floating]:not([floating=false])){--col-left-width:33%}}@media screen and (min-width: 600px){:host([size=large][floating]:not([floating=false])){--col-left-width:55%}}:host ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){:host ::slotted([slot=left]){margin-bottom:0}}:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([fullwidth]:not([fullwidth=false])) ::slotted([slot=left]){margin-bottom:var(--stzh-space-xxxxlarge)}}:host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]){float:left;width:100%}@media screen and (min-width: 600px){:host([floating]:not([floating=false]):not([fullwidth]:not([fullwidth=false]))) ::slotted([slot=left]){width:calc(var(--col-left-width) - var(--stzh-space-large) / 2);margin-right:var(--stzh-space-large)}}.stzh-textandimage{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:start;justify-content:flex-start;margin:0 calc(var(--stzh-space-large) / -2);}.stzh-textandimage__left,.stzh-textandimage__right{width:auto;padding:0 calc(var(--stzh-space-large) / 2)}@media screen and (min-width: 600px){.stzh-textandimage__left{width:var(--col-left-width)}}@media screen and (min-width: 600px){.stzh-textandimage__right{width:calc(100% - var(--col-left-width))}}.stzh-textandimage--is-fullwidth .stzh-textandimage__left,.stzh-textandimage--is-fullwidth .stzh-textandimage__right{width:100%}.stzh-textandimage--is-floating .stzh-textandimage__left{width:auto}';var StzhTextandimage=function(){function t(t){registerInstance(this,t);this.floating=false;this.fullwidth=false;this.size="default"}t.prototype.render=function(){var t;var e=hasSlot(this.element,"left");var a=hasSlot(this.element,"right");var i=(t={"stzh-textandimage":true,"stzh-textandimage--has-left":e,"stzh-textandimage--has-right":a,"stzh-textandimage--is-fullwidth":this.fullwidth,"stzh-textandimage--is-floating":this.floating},t["stzh-textandimage--size-".concat(this.size)]=!!this.size,t);return h(Host,null,h("div",{class:i},h("div",{class:"stzh-textandimage__left"},h("slot",{name:"left"}),this.floating&&h("slot",{name:"right"})),!this.floating&&h("div",{class:"stzh-textandimage__right"},h("slot",{name:"right"}))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhTextandimage.style=stzhTextandimageCss;export{StzhTextandimage as stzh_textandimage};
 //# sourceMappingURL=stzh-textandimage.entry.js.map

package/dist/esm-es5/stzh-toggle.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,o,s){function r(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,l){function i(t){try{g(s.next(t))}catch(t){l(t)}}function n(t){try{g(s["throw"](t))}catch(t){l(t)}}function g(t){t.done?o(t.value):r(t.value).then(i,n)}g((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},s,r,l,i;return i={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function n(t){return function(e){return g([t,e])}}function g(n){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,n[0]&&(o=0)),o)try{if(s=1,r&&(l=n[0]&2?r["return"]:n[0]?r["throw"]||((l=r["return"])&&l.call(r),0):r.next)&&!(l=l.call(r,n[1])).done)return l;if(r=0,l)n=[n[0]&2,l.value];switch(n[0]){case 0:case 1:l=n;break;case 4:o.label++;return{value:n[1],done:false};case 5:o.label++;r=n[1];n=[0];continue;case 7:n=o.ops.pop();o.trys.pop();continue;default:if(!(l=o.trys,l=l.length>0&&l[l.length-1])&&(n[0]===6||n[0]===2)){o=0;continue}if(n[0]===3&&(!l||n[1]>l[0]&&n[1]<l[3])){o.label=n[1];break}if(n[0]===6&&o.label<l[1]){o.label=l[1];l=n;break}if(l&&o.label<l[2]){o.label=l[2];o.ops.push(n);break}if(l[2])o.ops.pop();o.trys.pop();continue}n=e.call(t,o)}catch(t){n=[6,t];r=0}finally{s=l=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-51148d9a.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{S as StzhInputDescription}from"./stzh-input-description-cceaa066.js";var stzhToggleCss=".sc-stzh-toggle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-toggle-h{display:none}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-toggle-h{display:inline-block}.sc-stzh-toggle-h .sc-stzh-toggle-s>stzh-text{--color:inherit}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-toggle__marker-text.sc-stzh-toggle{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-toggle__description-wrapper.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-toggle__description-long.sc-stzh-toggle{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-popover[open].sc-stzh-toggle:not([open=false]) .stzh-toggle__description-long-button.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle__description-long-button.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-toggle__description-long-button.sc-stzh-toggle:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-toggle__input.sc-stzh-toggle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black8);width:2.75rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;border-radius:0.75rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:1.5rem;height:1.5rem;border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, transform;transition-property:border-color, background-color, transform, -webkit-transform;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);line-height:1.5rem}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-primary48)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey61)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-grey13)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-grey25);border-color:var(--stzh-color-grey25)}";var toggleCounter=0;var StzhToggle=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-toggle",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-toggle",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-toggle",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.showMarker=false;this.checked=false;this.label="";this.labelPosition="right";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.inputId="stzh-toggle-".concat(toggleCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"toggle")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t;var e=this;var o=hasSlot(this.element,"description")||!!this.description;var s=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var l=(t={"stzh-toggle":true,"stzh-toggle--has-error":r,"stzh-toggle--is-required":this.required,"stzh-toggle--is-invalid":this.invalid,"stzh-toggle--is-disabled":this.disabled,"stzh-toggle--has-description":o,"stzh-toggle--has-description-long":s},t["stzh-toggle--has-label-".concat(this.labelPosition)]=!!this.labelPosition,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:l},h("label",{class:"stzh-toggle__field-wrapper"},h("input",{class:"stzh-toggle__input",ref:function(t){return e.input=t},type:"checkbox",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-toggle__mark"},h("div",{class:"stzh-toggle__check"})),h("div",{class:"stzh-toggle__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-toggle__marker"},h("span",{class:"stzh-toggle__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-toggle__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-toggle",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return t}();StzhToggle.style=stzhToggleCss;export{StzhToggle as stzh_toggle};
+var __awaiter=this&&this.__awaiter||function(t,e,o,s){function r(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,l){function i(t){try{g(s.next(t))}catch(t){l(t)}}function n(t){try{g(s["throw"](t))}catch(t){l(t)}}function g(t){t.done?o(t.value):r(t.value).then(i,n)}g((s=s.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(l[0]&1)throw l[1];return l[1]},trys:[],ops:[]},s,r,l,i;return i={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function n(t){return function(e){return g([t,e])}}function g(n){if(s)throw new TypeError("Generator is already executing.");while(i&&(i=0,n[0]&&(o=0)),o)try{if(s=1,r&&(l=n[0]&2?r["return"]:n[0]?r["throw"]||((l=r["return"])&&l.call(r),0):r.next)&&!(l=l.call(r,n[1])).done)return l;if(r=0,l)n=[n[0]&2,l.value];switch(n[0]){case 0:case 1:l=n;break;case 4:o.label++;return{value:n[1],done:false};case 5:o.label++;r=n[1];n=[0];continue;case 7:n=o.ops.pop();o.trys.pop();continue;default:if(!(l=o.trys,l=l.length>0&&l[l.length-1])&&(n[0]===6||n[0]===2)){o=0;continue}if(n[0]===3&&(!l||n[1]>l[0]&&n[1]<l[3])){o.label=n[1];break}if(n[0]===6&&o.label<l[1]){o.label=l[1];l=n;break}if(l&&o.label<l[2]){o.label=l[2];o.ops.push(n);break}if(l[2])o.ops.pop();o.trys.pop();continue}n=e.call(t,o)}catch(t){n=[6,t];r=0}finally{s=l=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{h as hasSlot}from"./utils-8f264f12.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{S as StzhInputDescription}from"./stzh-input-description-cceaa066.js";var stzhToggleCss=".sc-stzh-toggle-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-toggle-h{display:none}.sc-stzh-toggle-h *.sc-stzh-toggle,.sc-stzh-toggle-h *.sc-stzh-toggle::before,.sc-stzh-toggle-h *.sc-stzh-toggle::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-toggle-h{display:inline-block}.sc-stzh-toggle-h .sc-stzh-toggle-s>stzh-text{--color:inherit}.stzh-toggle__marker-symbol.sc-stzh-toggle{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-toggle__marker-text.sc-stzh-toggle{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-toggle__description-wrapper.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-toggle__error.sc-stzh-toggle,.stzh-toggle__description.sc-stzh-toggle{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-toggle__error.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle__error-list.sc-stzh-toggle{list-style:none;margin:0;padding:0}.stzh-toggle__description.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-toggle__description-long.sc-stzh-toggle{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-toggle__description-long-popover.sc-stzh-toggle{--width:auto;--max-width:27.3125rem}.stzh-toggle__description-long-popover[open].sc-stzh-toggle:not([open=false]) .stzh-toggle__description-long-button.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle__description-long-button.sc-stzh-toggle{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-toggle__description-long-button.sc-stzh-toggle:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle stzh-icon.stzh-toggle__description-long-icon.sc-stzh-toggle{--size:var(--stzh-icon-size-xsmall)}.stzh-toggle--has-error.sc-stzh-toggle .stzh-toggle__error.sc-stzh-toggle,.stzh-toggle--has-description.sc-stzh-toggle .stzh-toggle__description.sc-stzh-toggle{margin-top:var(--stzh-space-xxsmall)}.stzh-toggle__field-wrapper.sc-stzh-toggle{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-toggle__input.sc-stzh-toggle{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-toggle__mark.sc-stzh-toggle{position:relative;background-color:var(--stzh-color-black8);width:2.75rem;height:1rem;-ms-flex-negative:0;flex-shrink:0;border-radius:0.75rem;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);transition:background-color var(--stzh-base-transition-animation-speed);margin-top:0.25rem}.stzh-toggle__check.sc-stzh-toggle{position:absolute;border:0.125rem solid var(--stzh-base-color);width:1.5rem;height:1.5rem;border-radius:50%;background-color:var(--stzh-color-white);top:50%;left:0;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);-webkit-transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, -webkit-transform;transition-property:border-color, background-color, transform;transition-property:border-color, background-color, transform, -webkit-transform;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-toggle__label.sc-stzh-toggle{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);line-height:1.5rem}.stzh-toggle__label.sc-stzh-toggle:empty{display:none}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-primary48)}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transform:translate(100%, -50%);transform:translate(100%, -50%)}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__label.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-toggle.sc-stzh-toggle:hover .stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:focus:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle__input.sc-stzh-toggle:checked:hover~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle,.stzh-toggle__input.sc-stzh-toggle:checked:focus~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-toggle--has-label-right.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-left:var(--stzh-space-xsmall)}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.stzh-toggle--has-label-left.sc-stzh-toggle .stzh-toggle__label.sc-stzh-toggle{margin-right:var(--stzh-space-xsmall)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-error)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-invalid.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-error)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__field-wrapper.sc-stzh-toggle{cursor:not-allowed}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__label.sc-stzh-toggle{color:var(--stzh-color-grey61)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{border-color:var(--stzh-color-grey13)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle{background-color:var(--stzh-color-black8)}.stzh-toggle--is-disabled.sc-stzh-toggle .stzh-toggle__input.sc-stzh-toggle:checked~.stzh-toggle__mark.sc-stzh-toggle .stzh-toggle__check.sc-stzh-toggle{background-color:var(--stzh-color-grey25);border-color:var(--stzh-color-grey25)}";var toggleCounter=0;var StzhToggle=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-toggle",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-toggle",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-toggle",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.showMarker=false;this.checked=false;this.label="";this.labelPosition="right";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.inputId="stzh-toggle-".concat(toggleCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"toggle")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t;var e=this;var o=hasSlot(this.element,"description")||!!this.description;var s=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var l=(t={"stzh-toggle":true,"stzh-toggle--has-error":r,"stzh-toggle--is-required":this.required,"stzh-toggle--is-invalid":this.invalid,"stzh-toggle--is-disabled":this.disabled,"stzh-toggle--has-description":o,"stzh-toggle--has-description-long":s},t["stzh-toggle--has-label-".concat(this.labelPosition)]=!!this.labelPosition,t);return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:l},h("label",{class:"stzh-toggle__field-wrapper"},h("input",{class:"stzh-toggle__input",ref:function(t){return e.input=t},type:"checkbox",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-toggle__mark"},h("div",{class:"stzh-toggle__check"})),h("div",{class:"stzh-toggle__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-toggle__marker"},h("span",{class:"stzh-toggle__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-toggle__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-toggle",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return t}();StzhToggle.style=stzhToggleCss;export{StzhToggle as stzh_toggle};
 //# sourceMappingURL=stzh-toggle.entry.js.map

package/dist/esm-es5/stzh-tooltip.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,i,o){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,n){function s(t){try{l(o.next(t))}catch(t){n(t)}}function a(t){try{l(o["throw"](t))}catch(t){n(t)}}function l(t){t.done?i(t.value):r(t.value).then(s,a)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(o)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(i=0)),i)try{if(o=1,r&&(n=a[0]&2?r["return"]:a[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,a[1])).done)return n;if(r=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){i.label=a[1];break}if(a[0]===6&&i.label<n[1]){i.label=n[1];n=a;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(a);break}if(n[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];r=0}finally{o=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{c as computePosition,a as autoUpdate,A as Arrow,o as offset,f as flip,s as shift,b as arrow}from"./arrow-4fc34dbd.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";import{i as isStzhElement}from"./utils-51148d9a.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{w as waitForEvent}from"./event-utils-7a709e21.js";import{s as stopAnimations,a as animateTo}from"./animation-utils-e234a5f8.js";var stzhTooltipCss=".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-tooltip-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius)}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--border-radius);background-color:var(--stzh-color-white);width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-tooltip__content.sc-stzh-tooltip{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxxsmall);color:var(--stzh-base-lead-color);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-xxsmall)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";var ANIMATION_SHOW={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};var ANIMATION_HIDE={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};var keyCode={ESC:27};var tooltipCounter=0;var StzhTooltip=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhOpened=createEvent(this,"stzhOpened",7);this.stzhClose=createEvent(this,"stzhClose",7);this.stzhClosed=createEvent(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=function(t){if(t.keyCode===keyCode.ESC){e.hide()}};this.computePosition=function(){return __awaiter(e,void 0,void 0,(function(){var t,e,i,o,r,n,s,a,l;return __generator(this,(function(h){switch(h.label){case 0:if(!this.open){return[2]}return[4,computePosition(this.triggerElement.firstElementChild,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[offset({mainAxis:this.distance,crossAxis:this.skidding}),flip({padding:5}),shift({padding:5}),arrow({element:this.arrowElement,padding:5})]})];case 1:t=h.sent(),e=t.x,i=e===void 0?0:e,o=t.y,r=o===void 0?0:o,n=t.strategy,s=n===void 0?"absolute":n,a=t.placement,l=t.middlewareData;this.middlewareData=l;this.computedPlacement=a;Object.assign(this.contentElement.style,{position:s,left:"".concat(i,"px"),top:"".concat(r,"px")});Object.assign(this.arrowElement.style,{left:i!=null?"".concat(l.arrow.x,"px"):"",top:r!=null?"".concat(l.arrow.y,"px"):""});return[2]}}))}))};this.onClickTrigger=function(){if(e.hasTrigger("click")){e.toggle()}};this.onMouseEnterTrigger=function(){if(e.hasTrigger("hover")){e.isHovering=true;e.show()}};this.onMouseLeaveTrigger=function(){if(e.hasTrigger("hover")){e.isHovering=false;document.addEventListener("mousemove",e.onMouseMoveDocument)}};this.onFocusTrigger=function(){if(e.hasTrigger("focus")){e.show()}};this.onBlurTrigger=function(){if(e.hasTrigger("focus")){e.hide()}};this.onMouseMoveDocument=function(t){var i=t.clientX,o=t.clientY;if(!e.computedPlacement){return true}var r=e.computedPlacement.split("-")[0];var n=e.middlewareData.offset;var s=e.contentElement.getBoundingClientRect();if(!n){return true}var a=r==="bottom"?n.y:0;var l=r==="top"?n.y:0;var h=r==="right"?n.x:0;var c=r==="left"?n.x:0;var p=s.top-o>a;var d=o-s.bottom>l;var u=s.left-i>h;var f=i-s.right>c;if(p||d||u||f){document.removeEventListener("mousemove",e.onMouseMoveDocument);if(!e.isHovering){e.hide()}}};this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.skidding=0;this.distance=16;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.open){return[2]}this.toggledByMethod=true;this.open=true;return[2,waitForEvent(this.element,"stzhOpened")]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.open){return[2]}this.toggledByMethod=true;this.open=false;return[2,waitForEvent(this.element,"stzhClosed")]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.open)return[3,2];return[4,this.hide()];case 1:return[2,t.sent()];case 2:return[4,this.show()];case 3:return[2,t.sent()]}}))}))};t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.computePosition()];case 1:return[2,t.sent()]}}))}))};t.prototype.openWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!this.contentElement){return[2]}if(!t)return[3,3];if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}return[4,stopAnimations(this.contentElement)];case 1:e.sent();this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;return[4,animateTo(this.contentElement,ANIMATION_SHOW.keyframes,ANIMATION_SHOW.options)];case 2:e.sent();if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}return[3,6];case 3:if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}return[4,stopAnimations(this.contentElement)];case 4:e.sent();return[4,animateTo(this.contentElement,ANIMATION_HIDE.keyframes,ANIMATION_HIDE.options)];case 5:e.sent();this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}e.label=6;case 6:this.toggledByMethod=false;return[2]}}))}))};t.prototype.triggerWatcher=function(t){this._trigger=t.split(" ")};t.prototype.handleDocumentClick=function(t){if(!this.open){return}var e=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;var i=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(e&&!i&&this.hasTrigger("click")){this.hide()}};t.prototype.hasTrigger=function(t){return this._trigger.indexOf(t)>-1};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.id="stzh-tooltip-".concat(tooltipCounter++);this.triggerWatcher(this.trigger);if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"tooltip")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){this.computePosition();var t=isStzhElement(this.triggerElement.firstElementChild);if(this.hasTrigger("click")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-describedby")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-describedby")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-describedby":"aria-describedby","".concat(this.id,"-trigger-description"))}if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-label")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-label")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerElement.firstElementChild.getAttribute("analytics-id")||!t&&!this.triggerElement.firstElementChild.getAttribute("s-object-id")){this.triggerElement.firstElementChild.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-describedby")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-describedby")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-describedby":"aria-describedby","".concat(this.id,"-content"))}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}};t.prototype.componentDidUpdate=function(){if(this.trap){this.trap.updateContainerElements(this.contentElement)}};t.prototype.componentDidLoad=function(){this.autoUpdateCleanup=autoUpdate(this.element,this.contentElement,this.computePosition);if(this.interactive){this.trap=createFocusTrap(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.trap.activate()}}this.contentElement.hidden=!this.open};t.prototype.connectedCallback=function(){var t;var e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){var i=Array.from(this.element.children).find((function(t){return!t.hasAttribute("slot")}));e=i}if(e){e.addEventListener("click",this.onClickTrigger);e.addEventListener("mouseenter",this.onMouseEnterTrigger);e.addEventListener("mouseleave",this.onMouseLeaveTrigger);e.addEventListener("focusin",this.onFocusTrigger);e.addEventListener("focusout",this.onBlurTrigger)}};t.prototype.disconnectedCallback=function(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger);this.triggerElement.firstElementChild.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerElement.firstElementChild.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerElement.firstElementChild.removeEventListener("focusin",this.onFocusTrigger);this.triggerElement.firstElementChild.removeEventListener("focusout",this.onBlurTrigger)}};t.prototype.render=function(){var t;var e=this;var i=(t={"stzh-tooltip":true},t["stzh-tooltip--open"]=this.open,t["stzh-tooltip--placement-".concat(this.computedPlacement)]=!!this.computedPlacement,t);return h(Host,null,h("div",{class:i},h("div",{class:"stzh-tooltip__trigger",ref:function(t){return e.triggerElement=t}},h("slot",null)),this.hasTrigger("click")&&h("div",{class:"stzh-tooltip__vhidden",id:"".concat(this.id,"-trigger-description")},this.localization.open),h("div",{class:"stzh-tooltip__content",id:"".concat(this.id,"-content"),ref:function(t){return e.contentElement=t},tabindex:"-1","aria-labelledby":this.label?"".concat(this.id,"-label"):null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},h("div",{class:"stzh-tooltip__arrow",ref:function(t){return e.arrowElement=t},innerHTML:Arrow}),this.label&&h("h2",{id:"".concat(this.id,"-label"),class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&h("button",{class:"stzh-tooltip__close",onClick:function(){return e.hide()},type:"button"},h("stzh-icon",{name:"close",class:"stzh-tooltip__icon"}),h("span",{class:"stzh-tooltip__vhidden"},this.localization.close)),h("div",{class:"stzh-tooltip__content-slot"},this.content?this.content:h("slot",{name:"content"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],trigger:["triggerWatcher"]}},enumerable:false,configurable:true});return t}();StzhTooltip.style=stzhTooltipCss;export{StzhTooltip as stzh_tooltip};
+var __awaiter=this&&this.__awaiter||function(t,e,i,o){function r(t){return t instanceof i?t:new i((function(e){e(t)}))}return new(i||(i=Promise))((function(i,n){function s(t){try{l(o.next(t))}catch(t){n(t)}}function a(t){try{l(o["throw"](t))}catch(t){n(t)}}function l(t){t.done?i(t.value):r(t.value).then(s,a)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var i={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},o,r,n,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(o)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(i=0)),i)try{if(o=1,r&&(n=a[0]&2?r["return"]:a[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,a[1])).done)return n;if(r=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:i.label++;return{value:a[1],done:false};case 5:i.label++;r=a[1];a=[0];continue;case 7:a=i.ops.pop();i.trys.pop();continue;default:if(!(n=i.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){i=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){i.label=a[1];break}if(a[0]===6&&i.label<n[1]){i.label=n[1];n=a;break}if(n&&i.label<n[2]){i.label=n[2];i.ops.push(a);break}if(n[2])i.ops.pop();i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t];r=0}finally{o=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{c as computePosition,a as autoUpdate,A as Arrow,o as offset,f as flip,s as shift,b as arrow}from"./arrow-4fc34dbd.js";import{c as createFocusTrap}from"./focus-trap.esm-601d164c.js";import{i as isStzhElement}from"./utils-8f264f12.js";import{f as fetchTranslations}from"./translation-utils-2623783f.js";import{w as waitForEvent}from"./event-utils-7a709e21.js";import{s as stopAnimations,a as animateTo}from"./animation-utils-e234a5f8.js";var stzhTooltipCss=".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-tooltip-h{--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius)}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:-ms-flexbox;display:flex;color:var(--stzh-color-white)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;-webkit-transform:translateY(0.5rem) rotate(180deg);transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;-webkit-transform:translateX(0.75rem) rotate(90deg);transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;-webkit-transform:translateX(-0.75rem) rotate(-90deg);transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);-webkit-box-shadow:var(--stzh-box-shadow-popover);box-shadow:var(--stzh-box-shadow-popover);border-radius:var(--border-radius);background-color:var(--stzh-color-white);width:var(--width);min-width:var(--min-width);max-width:var(--max-width)}@supports ((-webkit-filter: var(--stzh-tooltip-drop-shadow)) or (filter: var(--stzh-tooltip-drop-shadow))){.stzh-tooltip__content.sc-stzh-tooltip{-webkit-box-shadow:none;box-shadow:none;-webkit-filter:var(--stzh-tooltip-drop-shadow);filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;padding:0;position:absolute;top:0;right:0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxxsmall);color:var(--stzh-base-lead-color);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-xxsmall)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";var ANIMATION_SHOW={keyframes:[{opacity:"0"},{opacity:"1"}],options:{duration:100,easing:"linear"}};var ANIMATION_HIDE={keyframes:[{opacity:"1"},{opacity:"0"}],options:{duration:200,easing:"linear"}};var keyCode={ESC:27};var tooltipCounter=0;var StzhTooltip=function(){function t(t){var e=this;registerInstance(this,t);this.stzhOpen=createEvent(this,"stzhOpen",7);this.stzhOpened=createEvent(this,"stzhOpened",7);this.stzhClose=createEvent(this,"stzhClose",7);this.stzhClosed=createEvent(this,"stzhClosed",7);this.toggledByMethod=false;this.isHovering=false;this.onEscKey=function(t){if(t.keyCode===keyCode.ESC){e.hide()}};this.computePosition=function(){return __awaiter(e,void 0,void 0,(function(){var t,e,i,o,r,n,s,a,l;return __generator(this,(function(h){switch(h.label){case 0:if(!this.open){return[2]}return[4,computePosition(this.triggerElement.firstElementChild,this.contentElement,{strategy:this.strategy,placement:this.placement,middleware:[offset({mainAxis:this.distance,crossAxis:this.skidding}),flip({padding:5}),shift({padding:5}),arrow({element:this.arrowElement,padding:5})]})];case 1:t=h.sent(),e=t.x,i=e===void 0?0:e,o=t.y,r=o===void 0?0:o,n=t.strategy,s=n===void 0?"absolute":n,a=t.placement,l=t.middlewareData;this.middlewareData=l;this.computedPlacement=a;Object.assign(this.contentElement.style,{position:s,left:"".concat(i,"px"),top:"".concat(r,"px")});Object.assign(this.arrowElement.style,{left:i!=null?"".concat(l.arrow.x,"px"):"",top:r!=null?"".concat(l.arrow.y,"px"):""});return[2]}}))}))};this.onClickTrigger=function(){if(e.hasTrigger("click")){e.toggle()}};this.onMouseEnterTrigger=function(){if(e.hasTrigger("hover")){e.isHovering=true;e.show()}};this.onMouseLeaveTrigger=function(){if(e.hasTrigger("hover")){e.isHovering=false;document.addEventListener("mousemove",e.onMouseMoveDocument)}};this.onFocusTrigger=function(){if(e.hasTrigger("focus")){e.show()}};this.onBlurTrigger=function(){if(e.hasTrigger("focus")){e.hide()}};this.onMouseMoveDocument=function(t){var i=t.clientX,o=t.clientY;if(!e.computedPlacement){return true}var r=e.computedPlacement.split("-")[0];var n=e.middlewareData.offset;var s=e.contentElement.getBoundingClientRect();if(!n){return true}var a=r==="bottom"?n.y:0;var l=r==="top"?n.y:0;var h=r==="right"?n.x:0;var c=r==="left"?n.x:0;var p=s.top-o>a;var d=o-s.bottom>l;var u=s.left-i>h;var f=i-s.right>c;if(p||d||u||f){document.removeEventListener("mousemove",e.onMouseMoveDocument);if(!e.isHovering){e.hide()}}};this.open=false;this.label="";this.content="";this.placement="bottom";this.strategy="absolute";this.skidding=0;this.distance=16;this.interactive=false;this.trigger="hover focus";this.localization=undefined;this.computedPlacement=undefined}t.prototype.show=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(this.open){return[2]}this.toggledByMethod=true;this.open=true;return[2,waitForEvent(this.element,"stzhOpened")]}))}))};t.prototype.hide=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){if(!this.open){return[2]}this.toggledByMethod=true;this.open=false;return[2,waitForEvent(this.element,"stzhClosed")]}))}))};t.prototype.toggle=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.open)return[3,2];return[4,this.hide()];case 1:return[2,t.sent()];case 2:return[4,this.show()];case 3:return[2,t.sent()]}}))}))};t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,this.computePosition()];case 1:return[2,t.sent()]}}))}))};t.prototype.openWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:if(!this.contentElement){return[2]}if(!t)return[3,3];if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-tooltip"})}return[4,stopAnimations(this.contentElement)];case 1:e.sent();this.contentElement.style.willChange="transform, opacity, position, top, left, bottom, right";this.contentElement.hidden=false;return[4,animateTo(this.contentElement,ANIMATION_SHOW.keyframes,ANIMATION_SHOW.options)];case 2:e.sent();if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-tooltip"})}return[3,6];case 3:if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-tooltip"})}return[4,stopAnimations(this.contentElement)];case 4:e.sent();return[4,animateTo(this.contentElement,ANIMATION_HIDE.keyframes,ANIMATION_HIDE.options)];case 5:e.sent();this.contentElement.hidden=true;this.contentElement.style.willChange="auto";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-tooltip"})}e.label=6;case 6:this.toggledByMethod=false;return[2]}}))}))};t.prototype.triggerWatcher=function(t){this._trigger=t.split(" ")};t.prototype.handleDocumentClick=function(t){if(!this.open){return}var e=t.target!==this.contentElement&&this.contentElement.contains(t.target)===false;var i=t.target===this.triggerElement||this.triggerElement.contains(t.target);if(e&&!i&&this.hasTrigger("click")){this.hide()}};t.prototype.hasTrigger=function(t){return this._trigger.indexOf(t)>-1};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.id="stzh-tooltip-".concat(tooltipCounter++);this.triggerWatcher(this.trigger);if(!!this.localization)return[3,2];t=this;return[4,fetchTranslations(this.element,"tooltip")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidRender=function(){this.computePosition();var t=isStzhElement(this.triggerElement.firstElementChild);if(this.hasTrigger("click")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-expanded":"aria-expanded",this.open?"true":"false");if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-describedby")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-describedby")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-describedby":"aria-describedby","".concat(this.id,"-trigger-description"))}if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-label")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-label")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-label":"aria-label",this.label)}if(t&&!this.triggerElement.firstElementChild.getAttribute("analytics-id")||!t&&!this.triggerElement.firstElementChild.getAttribute("s-object-id")){this.triggerElement.firstElementChild.setAttribute(t?"analytics-id":"s-object-id",this.label)}}else{if(t&&!this.triggerElement.firstElementChild.getAttribute("a11y-describedby")||!t&&!this.triggerElement.firstElementChild.getAttribute("aria-describedby")){this.triggerElement.firstElementChild.setAttribute(t?"a11y-describedby":"aria-describedby","".concat(this.id,"-content"))}}if(this.trap){this.open?this.trap.activate():this.trap.deactivate()}};t.prototype.componentDidUpdate=function(){if(this.trap){this.trap.updateContainerElements(this.contentElement)}};t.prototype.componentDidLoad=function(){this.autoUpdateCleanup=autoUpdate(this.element,this.contentElement,this.computePosition);if(this.interactive){this.trap=createFocusTrap(this.contentElement,{fallbackFocus:this.contentElement,clickOutsideDeactivates:true,returnFocusOnDeactivate:true});if(this.open){this.trap.activate()}}this.contentElement.hidden=!this.open};t.prototype.connectedCallback=function(){var t;var e=(t=this.triggerElement)===null||t===void 0?void 0:t.firstElementChild;if(!e){var i=Array.from(this.element.children).find((function(t){return!t.hasAttribute("slot")}));e=i}if(e){e.addEventListener("click",this.onClickTrigger);e.addEventListener("mouseenter",this.onMouseEnterTrigger);e.addEventListener("mouseleave",this.onMouseLeaveTrigger);e.addEventListener("focusin",this.onFocusTrigger);e.addEventListener("focusout",this.onBlurTrigger)}};t.prototype.disconnectedCallback=function(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(this.triggerElement&&this.triggerElement.firstElementChild){this.triggerElement.firstElementChild.removeEventListener("click",this.onClickTrigger);this.triggerElement.firstElementChild.removeEventListener("mouseenter",this.onMouseEnterTrigger);this.triggerElement.firstElementChild.removeEventListener("mouseleave",this.onMouseLeaveTrigger);this.triggerElement.firstElementChild.removeEventListener("focusin",this.onFocusTrigger);this.triggerElement.firstElementChild.removeEventListener("focusout",this.onBlurTrigger)}};t.prototype.render=function(){var t;var e=this;var i=(t={"stzh-tooltip":true},t["stzh-tooltip--open"]=this.open,t["stzh-tooltip--placement-".concat(this.computedPlacement)]=!!this.computedPlacement,t);return h(Host,null,h("div",{class:i},h("div",{class:"stzh-tooltip__trigger",ref:function(t){return e.triggerElement=t}},h("slot",null)),this.hasTrigger("click")&&h("div",{class:"stzh-tooltip__vhidden",id:"".concat(this.id,"-trigger-description")},this.localization.open),h("div",{class:"stzh-tooltip__content",id:"".concat(this.id,"-content"),ref:function(t){return e.contentElement=t},tabindex:"-1","aria-labelledby":this.label?"".concat(this.id,"-label"):null,"aria-hidden":this.open?"false":"true",onKeyDown:this.onEscKey,onMouseEnter:this.onMouseEnterTrigger,onMouseLeave:this.onMouseLeaveTrigger,onFocusin:this.onFocusTrigger,onFocusout:this.onBlurTrigger},h("div",{class:"stzh-tooltip__arrow",ref:function(t){return e.arrowElement=t},innerHTML:Arrow}),this.label&&h("h2",{id:"".concat(this.id,"-label"),class:"stzh-tooltip__vhidden"},this.label),this.hasTrigger("click")&&h("button",{class:"stzh-tooltip__close",onClick:function(){return e.hide()},type:"button"},h("stzh-icon",{name:"close",class:"stzh-tooltip__icon"}),h("span",{class:"stzh-tooltip__vhidden"},this.localization.close)),h("div",{class:"stzh-tooltip__content-slot"},this.content?this.content:h("slot",{name:"content"})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["openWatcher"],trigger:["triggerWatcher"]}},enumerable:false,configurable:true});return t}();StzhTooltip.style=stzhTooltipCss;export{StzhTooltip as stzh_tooltip};
 //# sourceMappingURL=stzh-tooltip.entry.js.map