npm - @oiz/stzh-components - Versions diffs - 2.9.0-alpha → 2.9.0-beta - Mend

@oiz/stzh-components 2.9.0-alpha → 2.9.0-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

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

	@@ -1 +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,my9J,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"}
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,889J,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-skin-storybook-preview.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host}from"./index-67fd55c9.js";var stzhSkinStorybookPreviewCss='@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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.sbdocs-content>,.sbdocs-content>div>{}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>h4,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3,.sbdocs-content>div>h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);margin:0}.sbdocs-content>b,.sbdocs-content>strong,.sbdocs-content>div>b,.sbdocs-content>div>strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>i,.sbdocs-content>em,.sbdocs-content>div>i,.sbdocs-content>div>em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3{color:var(--stzh-heading-color)}.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-xsmall);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-medium)}}.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul ul,.sbdocs-content>ul ol,.sbdocs-content>ul dl,.sbdocs-content>ul stzh-list,.sbdocs-content>ol ul,.sbdocs-content>ol ol,.sbdocs-content>ol dl,.sbdocs-content>ol stzh-list,.sbdocs-content>dl ul,.sbdocs-content>dl ol,.sbdocs-content>dl dl,.sbdocs-content>dl stzh-list,.sbdocs-content>stzh-list ul,.sbdocs-content>stzh-list ol,.sbdocs-content>stzh-list dl,.sbdocs-content>stzh-list stzh-list,.sbdocs-content>div>ul ul,.sbdocs-content>div>ul ol,.sbdocs-content>div>ul dl,.sbdocs-content>div>ul stzh-list,.sbdocs-content>div>ol ul,.sbdocs-content>div>ol ol,.sbdocs-content>div>ol dl,.sbdocs-content>div>ol stzh-list,.sbdocs-content>div>dl ul,.sbdocs-content>div>dl ol,.sbdocs-content>div>dl dl,.sbdocs-content>div>dl stzh-list,.sbdocs-content>div>stzh-list ul,.sbdocs-content>div>stzh-list ol,.sbdocs-content>div>stzh-list dl,.sbdocs-content>div>stzh-list stzh-list{margin-top:0;margin-bottom:0}.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xbig)}}.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>ol,.sbdocs-content>div>ol{counter-reset:li-counter}.sbdocs-content>ul li,.sbdocs-content>ol li,.sbdocs-content>div>ul li,.sbdocs-content>div>ol li{position:relative}.sbdocs-content>ul li::before,.sbdocs-content>ol li::before,.sbdocs-content>div>ul li::before,.sbdocs-content>div>ol li::before{display:inline-block;position:absolute;left:0;top:0}.sbdocs-content>ul li,.sbdocs-content>div>ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sbdocs-content>ul li::before,.sbdocs-content>div>ul li::before{content:"–"}.sbdocs-content>ol li,.sbdocs-content>div>ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sbdocs-content>ol li::before,.sbdocs-content>div>ol li::before{content:counter(li-counter) ". "}.sbdocs-content>stzh-figure,.sbdocs-content>div>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxxlarge)}}.sbdocs-content>blockquote:before,.sbdocs-content>div>blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) * 2);width:0.1875rem;content:" ";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>blockquote p::before,.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::before,.sbdocs-content>div>blockquote p::after{display:inline-block}.sbdocs-content>blockquote p::before,.sbdocs-content>div>blockquote p::before{content:"«"}.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::after{content:"»"}.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 1024px){.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sbdocs-content>blockquote footer::before,.sbdocs-content>div>blockquote footer::before{content:"–";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sbdocs-content>table,.sbdocs-content>div>table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width)}.sbdocs-content>thead,.sbdocs-content>div>thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sbdocs-content>tr:hover td,.sbdocs-content>tr:hover th,.sbdocs-content>div>tr:hover td,.sbdocs-content>div>tr:hover th{background-color:var(--stzh-color-grey5)}.sbdocs-content>td,.sbdocs-content>th,.sbdocs-content>div>td,.sbdocs-content>div>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);}.sbdocs-content>td a,.sbdocs-content>th a,.sbdocs-content>div>td a,.sbdocs-content>div>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)}.sbdocs-content>td a:hover,.sbdocs-content>td a:focus,.sbdocs-content>th a:hover,.sbdocs-content>th a:focus,.sbdocs-content>div>td a:hover,.sbdocs-content>div>td a:focus,.sbdocs-content>div>th a:hover,.sbdocs-content>div>th a:focus{color:var(--stzh-link-hover-color)}.sbdocs-content>td b,.sbdocs-content>td strong,.sbdocs-content>th b,.sbdocs-content>th strong,.sbdocs-content>div>td b,.sbdocs-content>div>td strong,.sbdocs-content>div>th b,.sbdocs-content>div>th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>td i,.sbdocs-content>td em,.sbdocs-content>th i,.sbdocs-content>th em,.sbdocs-content>div>td i,.sbdocs-content>div>td em,.sbdocs-content>div>th i,.sbdocs-content>div>th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sbdocs-content>td.align-left,.sbdocs-content>th.align-left,.sbdocs-content>div>td.align-left,.sbdocs-content>div>th.align-left{text-align:left}.sbdocs-content>td.align-right,.sbdocs-content>th.align-right,.sbdocs-content>div>td.align-right,.sbdocs-content>div>th.align-right{text-align:right}.sbdocs-content>td.align-center,.sbdocs-content>th.align-center,.sbdocs-content>div>td.align-center,.sbdocs-content>div>th.align-center{text-align:center}.sbdocs-content>td.valign-auto,.sbdocs-content>th.valign-auto,.sbdocs-content>div>td.valign-auto,.sbdocs-content>div>th.valign-auto{vertical-align:auto}.sbdocs-content>td.valign-middle,.sbdocs-content>th.valign-middle,.sbdocs-content>div>td.valign-middle,.sbdocs-content>div>th.valign-middle{vertical-align:middle}.sbdocs-content>td.valign-bottom,.sbdocs-content>th.valign-bottom,.sbdocs-content>div>td.valign-bottom,.sbdocs-content>div>th.valign-bottom{vertical-align:bottom}.sbdocs-content>td.nowrap,.sbdocs-content>th.nowrap,.sbdocs-content>div>td.nowrap,.sbdocs-content>div>th.nowrap{white-space:nowrap}.sbdocs-content>td.is-sticky-left,.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-left,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-left,.sbdocs-content>div>th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sbdocs-content>td.has-sticked,.sbdocs-content>th.has-sticked,.sbdocs-content>div>td.has-sticked,.sbdocs-content>div>th.has-sticked{z-index:2}.sbdocs-content>td.is-sticky-left,.sbdocs-content>th.is-sticky-left,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>th.is-sticky-left{left:0}.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-right{right:0}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-left::after,.sbdocs-content>div>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)}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-left::after{right:0}.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.sbdocs-content>td.has-sticked.is-sticky-left::after,.sbdocs-content>td.has-sticked.is-sticky-right::after,.sbdocs-content>th.has-sticked.is-sticky-left::after,.sbdocs-content>th.has-sticked.is-sticky-right::after,.sbdocs-content>div>td.has-sticked.is-sticky-left::after,.sbdocs-content>div>td.has-sticked.is-sticky-right::after,.sbdocs-content>div>th.has-sticked.is-sticky-left::after,.sbdocs-content>div>th.has-sticked.is-sticky-right::after{opacity:1}.sbdocs-content>th,.sbdocs-content>div>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))}.sbdocs-content>th.is-sortable,.sbdocs-content>div>th.is-sortable{padding:0}.sbdocs-content>a,.sbdocs-content>div>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);text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sbdocs-content>a:hover,.sbdocs-content>div>a:hover{color:var(--stzh-link-hover-color)}.sbdocs-content>.stzh-richtext__external-link,.sbdocs-content>div>.stzh-richtext__external-link{position:relative}.sbdocs-content>.stzh-richtext__external-vhidden,.sbdocs-content>div>.stzh-richtext__external-vhidden{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}.sbdocs-content>.stzh-richtext__external-icon-wrapper,.sbdocs-content>div>.stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size-default);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sbdocs-content>.stzh-richtext__external-icon,.sbdocs-content>div>.stzh-richtext__external-icon{--icon:var(--stzh-icon-size-default);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size-default);height:var(--stzh-icon-size-default)}.sbdocs-content>.sbdocs-title,.sbdocs-content>.sbdocs-h2,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>.sbdocs-h2{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);color:var(--stzh-heading-color)}.sbdocs-content>.sbdocs-title,.sbdocs-content>h1:first-of-type,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>h1:first-of-type{margin-top:0}.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>table,.sbdocs-content>div>table{width:auto;min-width:auto}.sbdocs-content>ul li ul,.sbdocs-content>ul li ol,.sbdocs-content>ul li dl,.sbdocs-content>div>ul li ul,.sbdocs-content>div>ul li ol,.sbdocs-content>div>ul li dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>p b,.sbdocs-content>p strong,.sbdocs-content>ul li b,.sbdocs-content>ul li strong,.sbdocs-content>stzh-text b,.sbdocs-content>stzh-text strong,.sbdocs-content>div>p b,.sbdocs-content>div>p strong,.sbdocs-content>div>ul li b,.sbdocs-content>div>ul li strong,.sbdocs-content>div>stzh-text b,.sbdocs-content>div>stzh-text strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>p i,.sbdocs-content>p em,.sbdocs-content>ul li i,.sbdocs-content>ul li em,.sbdocs-content>stzh-text i,.sbdocs-content>stzh-text em,.sbdocs-content>div>p i,.sbdocs-content>div>p em,.sbdocs-content>div>ul li i,.sbdocs-content>div>ul li em,.sbdocs-content>div>stzh-text i,.sbdocs-content>div>stzh-text em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}';var StzhSkinStorybookPreview=function(){function t(t){registerInstance(this,t)}t.prototype.componentDidLoad=function(){console.log(this.constructor.style.replace('@charset "UTF-8";',""))};t.prototype.render=function(){return h(Host,null)};return t}();StzhSkinStorybookPreview.style=stzhSkinStorybookPreviewCss;export{StzhSkinStorybookPreview as stzh_skin_storybook_preview};
+import{r as registerInstance,h,a as Host}from"./index-67fd55c9.js";var stzhSkinStorybookPreviewCss='@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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.sbdocs-content>,.sbdocs-content>div>{}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>h4,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3,.sbdocs-content>div>h4{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);margin:0}.sbdocs-content>b,.sbdocs-content>strong,.sbdocs-content>div>b,.sbdocs-content>div>strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>i,.sbdocs-content>em,.sbdocs-content>div>i,.sbdocs-content>div>em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>h3,.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>h3{color:var(--stzh-heading-color)}.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>,.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>div>,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1440px){.sbdocs-content>h1,.sbdocs-content>div>h1{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1024px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1440px){.sbdocs-content>h2,.sbdocs-content>div>h2{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>h3,.sbdocs-content>div>h3{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>h4,.sbdocs-content>div>h4{font-size:var(--stzh-font-curve-h4-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-medium-heading-letter-spacing)}}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>stzh-heading[level="2"]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-xsmall);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>h2,.sbdocs-content>div>h1,.sbdocs-content>div>h2{padding-bottom:var(--stzh-space-medium)}}.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h1,.sbdocs-content>stzh-heading[level="1"],.sbdocs-content>h2,.sbdocs-content>stzh-heading[level="2"],.sbdocs-content>div>h1,.sbdocs-content>div>stzh-heading[level="1"],.sbdocs-content>div>h2,.sbdocs-content>div>stzh-heading[level="2"]{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h3,.sbdocs-content>stzh-heading[level="3"],.sbdocs-content>h4,.sbdocs-content>stzh-heading[level="4"],.sbdocs-content>div>h3,.sbdocs-content>div>stzh-heading[level="3"],.sbdocs-content>div>h4,.sbdocs-content>div>stzh-heading[level="4"]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>p,.sbdocs-content>stzh-text,.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>stzh-list,.sbdocs-content>div>p,.sbdocs-content>div>stzh-text,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl,.sbdocs-content>div>stzh-list{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul ul,.sbdocs-content>ul ol,.sbdocs-content>ul dl,.sbdocs-content>ul stzh-list,.sbdocs-content>ol ul,.sbdocs-content>ol ol,.sbdocs-content>ol dl,.sbdocs-content>ol stzh-list,.sbdocs-content>dl ul,.sbdocs-content>dl ol,.sbdocs-content>dl dl,.sbdocs-content>dl stzh-list,.sbdocs-content>stzh-list ul,.sbdocs-content>stzh-list ol,.sbdocs-content>stzh-list dl,.sbdocs-content>stzh-list stzh-list,.sbdocs-content>div>ul ul,.sbdocs-content>div>ul ol,.sbdocs-content>div>ul dl,.sbdocs-content>div>ul stzh-list,.sbdocs-content>div>ol ul,.sbdocs-content>div>ol ol,.sbdocs-content>div>ol dl,.sbdocs-content>div>ol stzh-list,.sbdocs-content>div>dl ul,.sbdocs-content>div>dl ol,.sbdocs-content>div>dl dl,.sbdocs-content>div>dl stzh-list,.sbdocs-content>div>stzh-list ul,.sbdocs-content>div>stzh-list ol,.sbdocs-content>div>stzh-list dl,.sbdocs-content>div>stzh-list stzh-list{margin-top:0;margin-bottom:0}.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=hero],.sbdocs-content>stzh-heading[curve=hero],.sbdocs-content>div>stzh-text[curve=hero],.sbdocs-content>div>stzh-heading[curve=hero]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-bottom:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h1],.sbdocs-content>stzh-heading[curve=h1],.sbdocs-content>div>stzh-text[curve=h1],.sbdocs-content>div>stzh-heading[curve=h1]{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxlarge)}@media screen and (min-width: 600px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-big)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h2],.sbdocs-content>stzh-heading[curve=h2],.sbdocs-content>div>stzh-text[curve=h2],.sbdocs-content>div>stzh-heading[curve=h2]{margin-top:var(--stzh-space-xbig)}}.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h3],.sbdocs-content>stzh-heading[curve=h3],.sbdocs-content>div>stzh-text[curve=h3],.sbdocs-content>div>stzh-heading[curve=h3]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=h4],.sbdocs-content>stzh-heading[curve=h4],.sbdocs-content>div>stzh-text[curve=h4],.sbdocs-content>div>stzh-heading[curve=h4]{margin-top:var(--stzh-space-xxxlarge)}}.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>stzh-text[curve=p1],.sbdocs-content>stzh-text[curve=p2],.sbdocs-content>stzh-heading[curve=p1],.sbdocs-content>stzh-heading[curve=p2],.sbdocs-content>div>stzh-text[curve=p1],.sbdocs-content>div>stzh-text[curve=p2],.sbdocs-content>div>stzh-heading[curve=p1],.sbdocs-content>div>stzh-heading[curve=p2]{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>ul,.sbdocs-content>ol,.sbdocs-content>dl,.sbdocs-content>div>ul,.sbdocs-content>div>ol,.sbdocs-content>div>dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>ol,.sbdocs-content>div>ol{counter-reset:li-counter}.sbdocs-content>ul li,.sbdocs-content>ol li,.sbdocs-content>div>ul li,.sbdocs-content>div>ol li{position:relative}.sbdocs-content>ul li::before,.sbdocs-content>ol li::before,.sbdocs-content>div>ul li::before,.sbdocs-content>div>ol li::before{display:inline-block;position:absolute;left:0;top:0}.sbdocs-content>ul li,.sbdocs-content>div>ul li{padding-left:calc(var(--stzh-space-xsmall) + var(--stzh-space-small))}.sbdocs-content>ul li::before,.sbdocs-content>div>ul li::before{content:"–"}.sbdocs-content>ol li,.sbdocs-content>div>ol li{counter-increment:li-counter;padding-left:calc(var(--stzh-space-large) + var(--stzh-space-small))}.sbdocs-content>ol li::before,.sbdocs-content>div>ol li::before{content:counter(li-counter) ". "}.sbdocs-content>stzh-figure,.sbdocs-content>div>stzh-figure{margin-top:var(--stzh-space-xxlarge);margin-bottom:var(--stzh-space-xxlarge)}.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal;font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);margin:var(--stzh-space-xxlarge);color:var(--richtext-blockquote-color);position:relative;overflow:hidden}@media screen and (min-width: 600px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-regular-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1024px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote,.sbdocs-content>div>blockquote{margin:var(--stzh-space-xxxxlarge)}}.sbdocs-content>blockquote:before,.sbdocs-content>div>blockquote:before{background:var(--richtext-blockquote-line-color);height:calc(100% - var(--stzh-space-xsmall) * 2);width:0.1875rem;content:" ";display:block;position:absolute;left:0;top:var(--stzh-space-xsmall)}.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-top:0;margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>blockquote p,.sbdocs-content>div>blockquote p{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>blockquote p::before,.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::before,.sbdocs-content>div>blockquote p::after{display:inline-block}.sbdocs-content>blockquote p::before,.sbdocs-content>div>blockquote p::before{content:"«"}.sbdocs-content>blockquote p::after,.sbdocs-content>div>blockquote p::after{content:"»"}.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--richtext-blockquote-footer-color)}@media screen and (min-width: 1024px){.sbdocs-content>blockquote footer,.sbdocs-content>div>blockquote footer{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.sbdocs-content>blockquote footer::before,.sbdocs-content>div>blockquote footer::before{content:"–";display:inline-block;margin-right:var(--stzh-space-xxxsmall)}.sbdocs-content>table,.sbdocs-content>div>table{--min-width:none;--cell-padding:var(--stzh-table-cell-padding);width:100%;border-spacing:0;min-width:var(--min-width);}.sbdocs-content>table.has-layout-fixed,.sbdocs-content>div>table.has-layout-fixed{table-layout:fixed}.sbdocs-content>thead,.sbdocs-content>div>thead{position:-webkit-sticky;position:sticky;top:0;z-index:3}.sbdocs-content>tr:hover td,.sbdocs-content>tr:hover th,.sbdocs-content>div>tr:hover td,.sbdocs-content>div>tr:hover th{background-color:var(--stzh-color-grey5)}.sbdocs-content>td,.sbdocs-content>th,.sbdocs-content>div>td,.sbdocs-content>div>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);}.sbdocs-content>td a,.sbdocs-content>th a,.sbdocs-content>div>td a,.sbdocs-content>div>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)}.sbdocs-content>td a:hover,.sbdocs-content>td a:focus,.sbdocs-content>th a:hover,.sbdocs-content>th a:focus,.sbdocs-content>div>td a:hover,.sbdocs-content>div>td a:focus,.sbdocs-content>div>th a:hover,.sbdocs-content>div>th a:focus{color:var(--stzh-link-hover-color)}.sbdocs-content>td b,.sbdocs-content>td strong,.sbdocs-content>th b,.sbdocs-content>th strong,.sbdocs-content>div>td b,.sbdocs-content>div>td strong,.sbdocs-content>div>th b,.sbdocs-content>div>th strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>td i,.sbdocs-content>td em,.sbdocs-content>th i,.sbdocs-content>th em,.sbdocs-content>div>td i,.sbdocs-content>div>td em,.sbdocs-content>div>th i,.sbdocs-content>div>th em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.sbdocs-content>td.align-left,.sbdocs-content>th.align-left,.sbdocs-content>div>td.align-left,.sbdocs-content>div>th.align-left{text-align:left}.sbdocs-content>td.align-right,.sbdocs-content>th.align-right,.sbdocs-content>div>td.align-right,.sbdocs-content>div>th.align-right{text-align:right}.sbdocs-content>td.align-center,.sbdocs-content>th.align-center,.sbdocs-content>div>td.align-center,.sbdocs-content>div>th.align-center{text-align:center}.sbdocs-content>td.valign-auto,.sbdocs-content>th.valign-auto,.sbdocs-content>div>td.valign-auto,.sbdocs-content>div>th.valign-auto{vertical-align:auto}.sbdocs-content>td.valign-middle,.sbdocs-content>th.valign-middle,.sbdocs-content>div>td.valign-middle,.sbdocs-content>div>th.valign-middle{vertical-align:middle}.sbdocs-content>td.valign-bottom,.sbdocs-content>th.valign-bottom,.sbdocs-content>div>td.valign-bottom,.sbdocs-content>div>th.valign-bottom{vertical-align:bottom}.sbdocs-content>td.nowrap,.sbdocs-content>th.nowrap,.sbdocs-content>div>td.nowrap,.sbdocs-content>div>th.nowrap{white-space:nowrap}.sbdocs-content>td.is-sticky-left,.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-left,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-left,.sbdocs-content>div>th.is-sticky-right{position:-webkit-sticky;position:sticky;z-index:1}.sbdocs-content>td.has-sticked,.sbdocs-content>th.has-sticked,.sbdocs-content>div>td.has-sticked,.sbdocs-content>div>th.has-sticked{z-index:2}.sbdocs-content>td.is-sticky-left,.sbdocs-content>th.is-sticky-left,.sbdocs-content>div>td.is-sticky-left,.sbdocs-content>div>th.is-sticky-left{left:0}.sbdocs-content>td.is-sticky-right,.sbdocs-content>th.is-sticky-right,.sbdocs-content>div>td.is-sticky-right,.sbdocs-content>div>th.is-sticky-right{right:0}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-left::after,.sbdocs-content>div>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)}.sbdocs-content>td.is-sticky-left::after,.sbdocs-content>th.is-sticky-left::after,.sbdocs-content>div>td.is-sticky-left::after,.sbdocs-content>div>th.is-sticky-left::after{right:0}.sbdocs-content>td.is-sticky-right::after,.sbdocs-content>th.is-sticky-right::after,.sbdocs-content>div>td.is-sticky-right::after,.sbdocs-content>div>th.is-sticky-right::after{left:0;-webkit-transform:rotate(-180deg) translate(100%);transform:rotate(-180deg) translate(100%)}.sbdocs-content>td.has-sticked.is-sticky-left::after,.sbdocs-content>td.has-sticked.is-sticky-right::after,.sbdocs-content>th.has-sticked.is-sticky-left::after,.sbdocs-content>th.has-sticked.is-sticky-right::after,.sbdocs-content>div>td.has-sticked.is-sticky-left::after,.sbdocs-content>div>td.has-sticked.is-sticky-right::after,.sbdocs-content>div>th.has-sticked.is-sticky-left::after,.sbdocs-content>div>th.has-sticked.is-sticky-right::after{opacity:1}.sbdocs-content>th,.sbdocs-content>div>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))}.sbdocs-content>th.is-sortable,.sbdocs-content>div>th.is-sortable{padding:0}.sbdocs-content>a,.sbdocs-content>div>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);text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sbdocs-content>a:hover,.sbdocs-content>div>a:hover{color:var(--stzh-link-hover-color)}.sbdocs-content>.stzh-richtext__external-link,.sbdocs-content>div>.stzh-richtext__external-link{position:relative}.sbdocs-content>.stzh-richtext__external-vhidden,.sbdocs-content>div>.stzh-richtext__external-vhidden{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}.sbdocs-content>.stzh-richtext__external-icon-wrapper,.sbdocs-content>div>.stzh-richtext__external-icon-wrapper{position:relative;display:inline-block;width:var(--stzh-icon-size-default);height:var(--stzh-link-icon-wrapper-height);margin-left:var(--stzh-space-xxsmall)}.sbdocs-content>.stzh-richtext__external-icon,.sbdocs-content>div>.stzh-richtext__external-icon{--icon:var(--stzh-icon-size-default);position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);margin-top:0.0625rem;width:var(--stzh-icon-size-default);height:var(--stzh-icon-size-default)}.sbdocs-content>.sbdocs-title,.sbdocs-content>.sbdocs-h2,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>.sbdocs-h2{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);color:var(--stzh-heading-color)}.sbdocs-content>.sbdocs-title,.sbdocs-content>h1:first-of-type,.sbdocs-content>div>.sbdocs-title,.sbdocs-content>div>h1:first-of-type{margin-top:0}.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 1024px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sbdocs-content>h2:first-of-type,.sbdocs-content>div>h2:first-of-type{margin-top:var(--stzh-space-xxxxlarge)}}.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-small);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 1024px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 1024px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sbdocs-content>pre>.docblock-source,.sbdocs-content>div>pre>.docblock-source{margin-bottom:var(--stzh-space-large)}}.sbdocs-content>table,.sbdocs-content>div>table{width:auto;min-width:auto}.sbdocs-content>ul li ul,.sbdocs-content>ul li ol,.sbdocs-content>ul li dl,.sbdocs-content>div>ul li ul,.sbdocs-content>div>ul li ol,.sbdocs-content>div>ul li dl{list-style:none;padding-left:0;overflow:hidden}.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 1024px){.sbdocs-content>p,.sbdocs-content>ul li,.sbdocs-content>stzh-text,.sbdocs-content>div>p,.sbdocs-content>div>ul li,.sbdocs-content>div>stzh-text{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.sbdocs-content>p b,.sbdocs-content>p strong,.sbdocs-content>ul li b,.sbdocs-content>ul li strong,.sbdocs-content>stzh-text b,.sbdocs-content>stzh-text strong,.sbdocs-content>div>p b,.sbdocs-content>div>p strong,.sbdocs-content>div>ul li b,.sbdocs-content>div>ul li strong,.sbdocs-content>div>stzh-text b,.sbdocs-content>div>stzh-text strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:normal}.sbdocs-content>p i,.sbdocs-content>p em,.sbdocs-content>ul li i,.sbdocs-content>ul li em,.sbdocs-content>stzh-text i,.sbdocs-content>stzh-text em,.sbdocs-content>div>p i,.sbdocs-content>div>p em,.sbdocs-content>div>ul li i,.sbdocs-content>div>ul li em,.sbdocs-content>div>stzh-text i,.sbdocs-content>div>stzh-text em{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}';var StzhSkinStorybookPreview=function(){function t(t){registerInstance(this,t)}t.prototype.componentDidLoad=function(){console.log(this.constructor.style.replace('@charset "UTF-8";',""))};t.prototype.render=function(){return h(Host,null)};return t}();StzhSkinStorybookPreview.style=stzhSkinStorybookPreviewCss;export{StzhSkinStorybookPreview as stzh_skin_storybook_preview};
 //# sourceMappingURL=stzh-skin-storybook-preview.entry.js.map

package/dist/esm-es5/stzh-skin-storybook-preview.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhSkinStorybookPreviewCss","StzhSkinStorybookPreview","prototype","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font('regular');\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\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,4BAA8B,~~i+lC~~,ICavBC,yBAAwB,W,uCACnCA,EAAAC,UAAAC,iBAAA,WAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,EAG3ER,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,K,WAR0B,G"}
1	+ {"version":3,"names":["stzhSkinStorybookPreviewCss","StzhSkinStorybookPreview","prototype","componentDidLoad","console","log","this","constructor","style","replace","render","h","Host"],"sources":["src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.scss?tag=stzh-skin-storybook-preview","src/components/stzh-skin-storybook-preview/stzh-skin-storybook-preview.tsx"],"sourcesContent":["\n.sbdocs-content >,\n.sbdocs-content > div > {\n @include richtext-slotted;\n\n .sbdocs-title, .sbdocs-h2 {\n @include font('title');\n color: $headingColor;\n }\n\n .sbdocs-title,\n h1:first-of-type {\n margin-top: 0;\n }\n\n h2:first-of-type {\n @include spaceCurve('margin-top', 'large');\n }\n\n pre > .docblock-source {\n @include spaceCurve('margin-top', 'small');\n @include spaceCurve('margin-bottom', 'small');\n }\n\n table {\n width: auto;\n min-width: auto;\n }\n\n ul li {\n ul, ol, dl {\n list-style: none;\n padding-left: 0;\n overflow: hidden;\n }\n }\n\n p,\n ul li,\n stzh-text {\n @include fontCurve($textFontCurveDefault);\n\n b, strong {\n @include font('heavy');\n }\n\n i, em {\n @include font('regular');\n }\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/*\n \n */\n@Component({\n tag: \"stzh-skin-storybook-preview\",\n styleUrl: \"stzh-skin-storybook-preview.scss\"\n})\nexport class StzhSkinStorybookPreview {\n componentDidLoad() {\n // copy this string from console and put it in preview.css\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,4BAA8B,ukmC,ICavBC,yBAAwB,W,uCACnCA,EAAAC,UAAAC,iBAAA,WAEEC,QAAQC,IAAKC,KAAKC,YAAoBC,MAAMC,QAAQ,oBAAqB,I,EAG3ER,EAAAC,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,K,WAR0B,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull,h as hasSlot}from"./utils-f44ab76d.js";import"./string-utils-c702adea.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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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);--search-input-width:var(--stzh-table-search-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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-table .stzh-fylingfocus-focused{outline-style:none !important}stzh-table .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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(--search-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};
+import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";import{s as setPropsIfNull,h as hasSlot}from"./utils-f44ab76d.js";import"./string-utils-c702adea.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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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);--search-input-width:var(--stzh-table-search-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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-table .stzh-fylingfocus-focused{outline-style:none !important}stzh-table .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}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;margin-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-table__header .stzh-table__search{width:var(--search-input-width);-ms-flex-positive:0;flex-grow:0}}.stzh-table__action-button{-ms-flex-negative:0;flex-shrink:0;margin-left:auto}.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 table.has-layout-fixed{table-layout:fixed}.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 CHANGED Viewed

	@@ -1 +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","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":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-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@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":"wLAAA,IAAMA,aAAe,s9QCYrB,IAAMC,kBAAoB,cAC1B,IAAMC,qBAAuB,iBAC7B,IAAMC,sBAAwB,kB,IAcjBC,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"}
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","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":["/*\n @prop --max-height: Maximum height of table\n * @prop --min-width: Minium width of table\n * @prop --cell-padding: Cells padding\n * @prop --search-input-width: Search input width from small breakpoint\n\n * @prop --stzh-table-max-width: Global: Maximum height of table\n * @prop --stzh-table-min-width: Global: Minium width of table\n * @prop --stzh-table-cell-padding: Global: Cells padding\n * @prop --stzh-table-search-input-width: Global: Search input width from small breakpoint\n /\n\nstzh-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@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":"wLAAA,IAAMA,aAAe,w/QCYrB,IAAMC,kBAAoB,cAC1B,IAAMC,qBAAuB,iBAC7B,IAAMC,sBAAwB,kB,IAcjBC,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-toastbar.entry.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,o){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function a(t){try{l(o.next(t))}catch(t){i(t)}}function s(t){try{l(o["throw"](t))}catch(t){i(t)}}function l(t){t.done?n(t.value):r(t.value).then(a,s)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(o=1,r&&(i=s[0]&2?r["return"]:s[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,s[1])).done)return i;if(r=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){n.label=s[1];break}if(s[0]===6&&n.label<i[1]){n.label=i[1];i=s;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(s);break}if(i[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];r=0}finally{o=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";var stzhToastbarCss=":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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;bottom:var(--stzh-header-sticky-appnav-height, 0);left:1.25rem;right:1.25rem}@media screen and (min-width: 1024px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:calc(100% - (2rem * 2))}}@media screen and (min-width: 1024px){:host{left:2.5rem;max-width:calc(100% - (2.5rem * 2))}}@media screen and (min-width: 1260px){:host{left:5.5rem;max-width:calc(100% - (5.5rem * 2))}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-xlarge)}}.stzh-toastbar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{-ms-flex-align:start;align-items:flex-start}}";var StzhToastbar=function(){function t(t){var e=this;registerInstance(this,t);this.handleSlotchange=function(){e.toastsAppended();e.hideOverflowingItems()};this.hideAfter=30;this.max=5}t.prototype.toast=function(t,e){var n=e===void 0?{type:"info"}:e,o=n.type,r=n.link;return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=document.createElement("stzh-toast");e.hidden=true;e.label=t;e.role="alert";e.type=o||"info";e.initialOpenAnimation=true;if(r){r.slot="link";e.appendChild(r)}this.element.appendChild(e);return[2,e]}))}))};t.prototype.toastAppended=function(t){if(t.getAttribute("data-stzh-toastbar-managed")){return}t.setAttribute("data-stzh-toastbar-managed","");t.addEventListener("stzhClosed",(function(){t.remove()}));if(t.type!=="error"){var e=(new Date).getTime();var n=this.hideAfter*1e3;var o=window.setTimeout((function(){t.hide()}),n);t.addEventListener("pointerenter",(function(){if(o){window.clearTimeout(o);var t=(new Date).getTime()-e;n=n-t}}));t.addEventListener("pointerleave",(function(){e=(new Date).getTime();o=window.setTimeout((function(){t.hide()}),n)}))}};t.prototype.toastsAppended=function(){var t=this;Array.from(this.element.children).forEach((function(e){t.toastAppended(e)}))};t.prototype.hideOverflowingItems=function(){var t=this.element.children.length;Array.from(this.element.children).splice(0,t-this.max).forEach((function(t){t.hide()}))};t.prototype.render=function(){var t={"stzh-toastbar":true};return h(Host,null,h("div",{class:t},h("slot",{onSlotchange:this.handleSlotchange})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhToastbar.style=stzhToastbarCss;export{StzhToastbar as stzh_toastbar};
+var __awaiter=this&&this.__awaiter||function(t,e,n,o){function r(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,i){function a(t){try{l(o.next(t))}catch(t){i(t)}}function s(t){try{l(o["throw"](t))}catch(t){i(t)}}function l(t){t.done?n(t.value):r(t.value).then(a,s)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,r,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(o=1,r&&(i=s[0]&2?r["return"]:s[0]?r["throw"]||((i=r["return"])&&i.call(r),0):r.next)&&!(i=i.call(r,s[1])).done)return i;if(r=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;r=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(i=n.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){n.label=s[1];break}if(s[0]===6&&n.label<i[1]){n.label=i[1];i=s;break}if(i&&n.label<i[2]){n.label=i[2];n.ops.push(s);break}if(i[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];r=0}finally{o=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-67fd55c9.js";var stzhToastbarCss=":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 .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;bottom:var(--stzh-header-sticky-appnav-height, 0);left:1.25rem;right:1.25rem}@media screen and (min-width: 1024px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:35rem;max-width:min(35rem, calc(100% - (2rem * 2)))}}@media screen and (min-width: 1024px){:host{left:2.5rem}}@media screen and (min-width: 1260px){:host{left:5.5rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-xlarge)}}.stzh-toastbar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{-ms-flex-align:start;align-items:flex-start}}";var StzhToastbar=function(){function t(t){var e=this;registerInstance(this,t);this.handleSlotchange=function(){e.toastsAppended();e.hideOverflowingItems()};this.hideAfter=30;this.max=5}t.prototype.toast=function(t,e){var n=e===void 0?{type:"info"}:e,o=n.type,r=n.link;return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=document.createElement("stzh-toast");e.hidden=true;e.label=t;e.role="alert";e.type=o||"info";e.initialOpenAnimation=true;if(r){r.slot="link";e.appendChild(r)}this.element.appendChild(e);return[2,e]}))}))};t.prototype.toastAppended=function(t){if(t.getAttribute("data-stzh-toastbar-managed")){return}t.setAttribute("data-stzh-toastbar-managed","");t.addEventListener("stzhClosed",(function(){t.remove()}));if(t.type!=="error"){var e=(new Date).getTime();var n=this.hideAfter*1e3;var o=window.setTimeout((function(){t.hide()}),n);t.addEventListener("pointerenter",(function(){if(o){window.clearTimeout(o);var t=(new Date).getTime()-e;n=n-t}}));t.addEventListener("pointerleave",(function(){e=(new Date).getTime();o=window.setTimeout((function(){t.hide()}),n)}))}};t.prototype.toastsAppended=function(){var t=this;Array.from(this.element.children).forEach((function(e){t.toastAppended(e)}))};t.prototype.hideOverflowingItems=function(){var t=this.element.children.length;Array.from(this.element.children).splice(0,t-this.max).forEach((function(t){t.hide()}))};t.prototype.render=function(){var t={"stzh-toastbar":true};return h(Host,null,h("div",{class:t},h("slot",{onSlotchange:this.handleSlotchange})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhToastbar.style=stzhToastbarCss;export{StzhToastbar as stzh_toastbar};
 //# sourceMappingURL=stzh-toastbar.entry.js.map

package/dist/esm-es5/stzh-toastbar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhToastbarCss","StzhToastbar","this","handleSlotchange","_this","toastsAppended","hideOverflowingItems","class_1","prototype","toast","label","_a","_b","type","link","document","createElement","hidden","role","initialOpenAnimation","slot","appendChild","element","toastAppended","getAttribute","setAttribute","addEventListener","remove","timeoutStarted_1","Date","getTime","restTime_1","hideAfter","currentTimeout_1","window","setTimeout","hide","clearTimeout","timePassed","Array","from","children","forEach","childCount","length","splice","max","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n bottom: var(--stzh-header-sticky-appnav-height, 0);\n left: $containerMargin;\n right: $containerMargin;\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: calc(100% - (#{$containerMarginSmall} * 2));\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n max-width: calc(100% - (#{$containerMarginMedium} * 2));\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n max-width: calc(100% - (#{$containerMarginLarge} * 2));\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n @include spaceCurve('margin-bottom', 'regular');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(label: string, { type, link }: { type?: \"info\" \| \"success\" \| \"error\" \| \"warning\", link?: HTMLStzhLinkElement } = { type: \"info\" }): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const childCount = this.element.children.length;\n\n Array.from(this.element.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iiDAAA,IAAMA,gBAAkB,~~m1D~~,ICiBXC,aAAY,W,kDAsFfC,KAAAC,iBAAmB,WACzBC,EAAKC,iBACLD,EAAKE,sB,iBAnFqB,G,SAMN,C,CAMhBC,EAAAC,UAAAC,MAAN,SAAYC,EAAeC,G,IAAAC,EAAAD,SAAA,EAAkG,CAAEE,KAAM,QAAQF,EAAhHE,EAAID,EAAAC,KAAEC,EAAIF,EAAAE,K,2FAC/BL,EAAQM,SAASC,cAAc,cACrCP,EAAMQ,OAAS,KACfR,EAAMC,MAAQA,EACdD,EAAMS,KAAO,QACbT,EAAMI,KAAOA,GAAQ,OACrBJ,EAAMU,qBAAuB,KAE7B,GAAIL,EAAM,CACRA,EAAKM,KAAO,OACZX,EAAMY,YAAYP,E,CAGpBZ,KAAKoB,QAAQD,YAAYZ,GAEzB,SAAOA,E,QAGDF,EAAAC,UAAAe,cAAA,SAAcd,GACpB,GAAIA,EAAMe,aAAa,8BAA+B,CACpD,M,CAGFf,EAAMgB,aAAa,6BAA8B,IAEjDhB,EAAMiB,iBAAiB,cAAc,WACnCjB,EAAMkB,Q,IAGR,GAAIlB,EAAMI,OAAS,QAAS,CAC1B,IAAIe,GAAiB,IAAIC,MAAOC,UAChC,IAAIC,EAAW7B,KAAK8B,UAAY,IAChC,IAAIC,EAAiBC,OAAOC,YAAW,WACrC1B,EAAM2B,M,GACLL,GAEHtB,EAAMiB,iBAAiB,gBAAgB,WACrC,GAAIO,EAAgB,CAClBC,OAAOG,aAAaJ,GACpB,IAAMK,GAAa,IAAIT,MAAOC,UAAYF,EAC1CG,EAAWA,EAAWO,C,KAI1B7B,EAAMiB,iBAAiB,gBAAgB,WACrCE,GAAiB,IAAIC,MAAOC,UAC5BG,EAAiBC,OAAOC,YAAW,WACjC1B,EAAM2B,M,GACLL,E,MAKDxB,EAAAC,UAAAH,eAAA,eAAAD,EAAAF,KACNqC,MAAMC,KAAKtC,KAAKoB,QAAQmB,UAAUC,SAAQ,SAACjC,GACzCL,EAAKmB,cAAcd,E,KAIfF,EAAAC,UAAAF,qBAAA,WACN,IAAMqC,EAAazC,KAAKoB,QAAQmB,SAASG,OAEzCL,MAAMC,KAAKtC,KAAKoB,QAAQmB,UACrBI,OAAO,EAAGF,EAAazC,KAAK4C,KAC5BJ,SAAQ,SAACjC,GACRA,EAAM2B,M,KASZ7B,EAAAC,UAAAuC,OAAA,WACE,IAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,QAAMG,aAAclD,KAAKC,oB,qIAnGV,G"}
1	+ {"version":3,"names":["stzhToastbarCss","StzhToastbar","this","handleSlotchange","_this","toastsAppended","hideOverflowingItems","class_1","prototype","toast","label","_a","_b","type","link","document","createElement","hidden","role","initialOpenAnimation","slot","appendChild","element","toastAppended","getAttribute","setAttribute","addEventListener","remove","timeoutStarted_1","Date","getTime","restTime_1","hideAfter","currentTimeout_1","window","setTimeout","hide","clearTimeout","timePassed","Array","from","children","forEach","childCount","length","splice","max","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n bottom: var(--stzh-header-sticky-appnav-height, 0);\n left: $containerMargin;\n right: $containerMargin;\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 560px;\n max-width: min(560px, calc(100% - (#{$containerMarginSmall} * 2)));\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n // max-width: calc(100% - (#{$containerMarginMedium} * 2));\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n // max-width: calc(100% - (#{$containerMarginLarge} * 2));\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n @include spaceCurve('margin-bottom', 'regular');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n} from \"@stencil/core\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(label: string, { type, link }: { type?: \"info\" \| \"success\" \| \"error\" \| \"warning\", link?: HTMLStzhLinkElement } = { type: \"info\" }): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const childCount = this.element.children.length;\n\n Array.from(this.element.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iiDAAA,IAAMA,gBAAkB,uyD,ICiBXC,aAAY,W,kDAsFfC,KAAAC,iBAAmB,WACzBC,EAAKC,iBACLD,EAAKE,sB,iBAnFqB,G,SAMN,C,CAMhBC,EAAAC,UAAAC,MAAN,SAAYC,EAAeC,G,IAAAC,EAAAD,SAAA,EAAkG,CAAEE,KAAM,QAAQF,EAAhHE,EAAID,EAAAC,KAAEC,EAAIF,EAAAE,K,2FAC/BL,EAAQM,SAASC,cAAc,cACrCP,EAAMQ,OAAS,KACfR,EAAMC,MAAQA,EACdD,EAAMS,KAAO,QACbT,EAAMI,KAAOA,GAAQ,OACrBJ,EAAMU,qBAAuB,KAE7B,GAAIL,EAAM,CACRA,EAAKM,KAAO,OACZX,EAAMY,YAAYP,E,CAGpBZ,KAAKoB,QAAQD,YAAYZ,GAEzB,SAAOA,E,QAGDF,EAAAC,UAAAe,cAAA,SAAcd,GACpB,GAAIA,EAAMe,aAAa,8BAA+B,CACpD,M,CAGFf,EAAMgB,aAAa,6BAA8B,IAEjDhB,EAAMiB,iBAAiB,cAAc,WACnCjB,EAAMkB,Q,IAGR,GAAIlB,EAAMI,OAAS,QAAS,CAC1B,IAAIe,GAAiB,IAAIC,MAAOC,UAChC,IAAIC,EAAW7B,KAAK8B,UAAY,IAChC,IAAIC,EAAiBC,OAAOC,YAAW,WACrC1B,EAAM2B,M,GACLL,GAEHtB,EAAMiB,iBAAiB,gBAAgB,WACrC,GAAIO,EAAgB,CAClBC,OAAOG,aAAaJ,GACpB,IAAMK,GAAa,IAAIT,MAAOC,UAAYF,EAC1CG,EAAWA,EAAWO,C,KAI1B7B,EAAMiB,iBAAiB,gBAAgB,WACrCE,GAAiB,IAAIC,MAAOC,UAC5BG,EAAiBC,OAAOC,YAAW,WACjC1B,EAAM2B,M,GACLL,E,MAKDxB,EAAAC,UAAAH,eAAA,eAAAD,EAAAF,KACNqC,MAAMC,KAAKtC,KAAKoB,QAAQmB,UAAUC,SAAQ,SAACjC,GACzCL,EAAKmB,cAAcd,E,KAIfF,EAAAC,UAAAF,qBAAA,WACN,IAAMqC,EAAazC,KAAKoB,QAAQmB,SAASG,OAEzCL,MAAMC,KAAKtC,KAAKoB,QAAQmB,UACrBI,OAAO,EAAGF,EAAazC,KAAK4C,KAC5BJ,SAAQ,SAACjC,GACRA,EAAM2B,M,KASZ7B,EAAAC,UAAAuC,OAAA,WACE,IAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,QAAMG,aAAclD,KAAKC,oB,qIAnGV,G"}