npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta1 → 3.0.0-beta2 - Mend

@oiz/stzh-components 3.0.0-beta1 → 3.0.0-beta2

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 (187) hide show

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

	@@ -1 +1 @@
1	- {"file":"stzh-skin-portal-mitwirken.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,ypgLAAypgL;;MCa/qgL,uBAAuB;;;;EAClC,gBAAgB;;IAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;GAC/E;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,OACE,EACP;GACH;;;;;;","names":["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-old-truegreen);\n --warning: var(--stzh-color-old-warning);\n --alert: var(--stzh-color-error60);\n --highlight: var(--stzh-color-coral);\n --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n a.muted,\n .inline-filters button.muted[data-toggle] {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n\n &:hover,\n &:focus {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n }\n }\n}\n\n// Only modals\n.reveal-overlay {\n background-color: rgba(5, 127, 172, 0.8);\n\n /* Dialog /\n\n .reveal__title {\n margin-top: 0;\n }\n\n .reveal {\n box-shadow: $boxShadowOverlay;\n }\n\n .close-button {\n color: $baseLeadColor;\n }\n}\n\n// Only header\n.mod_header {\n .mod_header__logobar-logo img {\n background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n width: 0;\n padding-left: 208px;\n }\n}\n\n// Main Content Modules\nmain {\n accent-color: $colorPrimary;\n\n / Resets /\n @include richtext-host;\n @include richtext-slotted($withLists: false);\n\n &, label, tfoot, thead {\n color: $baseColor;\n }\n\n svg {\n overflow: visible;\n }\n\n label {\n display: flex;\n align-items: center;\n }\n\n .field label {\n @include font('heavy');\n display: block;\n }\n\n input[type=checkbox],\n input[type=radio] {\n width: 24px;\n height: 24px;\n }\n\n label > [type=checkbox],\n label > [type=radio] {\n margin-right: space('small');\n }\n\n .filters__section--general label,\n .filters__section label {\n @include fontSize('milli');\n display: flex;\n line-height: 24px;\n transition: color $baseTransitionAnimationSpeed;\n color: $baseColor;\n margin-bottom: space('small');\n }\n\n .filters__has-subfilters {\n align-items: center;\n\n [data-toggle] {\n margin-bottom: space('small');\n }\n }\n\n .form-input-extra-before,\n .form-error {\n @include font;\n @include fontCurve('caption');\n }\n\n .form-error,\n .is-invalid-label {\n color: $colorError60;\n }\n\n [type=color],\n [type=date],\n [type=datetime-local],\n [type=datetime],\n [type=email],\n [type=month],\n [type=number],\n [type=password],\n [type=search],\n [type=tel],\n [type=text],\n [type=time],\n [type=url],\n [type=week],\n textarea,\n .inline-filters button[data-toggle],\n select,\n .data-picker .picker-prompt a,\n .data-picker.picker-single .picker-values div a {\n @include font;\n\t @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: space('xsmall') space('medium');\n width: 100%;\n height: $formInputHeight;\n color: $colorPrimary;\n appearance: none;\n margin-bottom: space('medium');\n text-decoration-line: none;\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n }\n\n .data-picker .picker-prompt a,\n .data-picker.picker-single .picker-values div a {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &::after {\n float: none;\n margin-top: 0;\n }\n }\n\n .inline-filters button[data-toggle],\n select {\n padding-right: space('xxlarge');\n }\n\n textarea {\n min-height: $formInputHeight;\n resize: vertical;\n\n &[rows] {\n height: auto;\n }\n }\n\n .input-group .input-group-field {\n margin-bottom: 0;\n }\n\n .section > p,\n .floating-helper__content p {\n margin-top: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .add-message,\n .card,\n .chart-tooltip,\n .comment-thread,\n .conference-registration,\n .conference-speaker .speaker-bio {\n margin-bottom: space('xxlarge');\n border-color: $baseBorderColor;\n background-color: $colorWhite;\n }\n\n .ql-editor ol,\n .ql-editor ul {\n padding-left: 0;\n }\n\n .badge-card__content,\n .card__content,\n .card__text--paragraph,\n .floating-helper__content-inner,\n .lead,\n .process-header + .wrapper .section,\n .timeline__content {\n ul li:not(.card-data__item) {\n padding-left: space('large');\n\n &::before {\n content: \"–\";\n margin-left: 0;\n margin-right: 0;\n text-align: left;\n width: auto;\n }\n }\n }\n\n .badge-card__content,\n .card__content,\n .card__text--paragraph,\n .floating-helper__content-inner,\n .lead,\n .process-header + .wrapper .section,\n .timeline__content {\n ul.tags li:not(.card-data__item) {\n padding-left: 0;\n\n &::before {\n content: none;\n }\n }\n }\n\n .m-bottom {\n margin-bottom: space('medium');\n }\n\n .mb-sm {\n margin-bottom: space('xxlarge');\n }\n\n p {\n color: $baseColor;\n }\n\n tfoot td,\n tfoot th,\n thead td,\n thead th {\n @include font('heavy');\n }\n\n tfoot td,\n tfoot th,\n thead td,\n thead th,\n tbody td,\n tbody th {\n padding: space('xmall');\n }\n\n table,\n td,\n tr,\n .questionnaire-question-matrix table,\n .questionnaire-question-matrix td,\n .questionnaire-question-matrix tr,\n .questionnaire-question-matrix tr:nth-child(2n) {\n border-color: $baseBorderColor;\n }\n\n\n / Process Header /\n\n .process-header .process-header__inner {\n background-color: $colorPrimary;\n }\n\n .card--full .process-header .process-header__container .process-header__info .card__title,\n .process-header .process-header__container .process-header__info .card--full .card__title,\n .process-header .process-header__container .process-header__info .heading2 {\n @include font('title');\n @include fontCurve('hero', 'heading');\n @include spaceCurve('margin-bottom', 'medium');\n margin-top: 0;\n border-bottom: none;\n padding-bottom: 0;\n }\n\n .process-header .process-header__container {\n padding: 0 space('xxxxlarge');\n\n @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n padding: space('xxxxlarge');\n padding-bottom: space('big');\n }\n\n @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n padding: space('xxlarge') $containerMargin space('xxxlarge');\n }\n }\n\n .process-header__info {\n padding: 0;\n }\n\n .process-header .process-header__container .process-header__info .heading-small {\n @include fontCurve('h3', 'heading');\n color: $baseInvertColor;\n margin-top: 0;\n }\n\n .process-header__hashtag a {\n color: $baseInvertColor;\n text-decoration-line: none;\n\n &:hover {\n color: $baseInvertColor;\n }\n\n .external-link-indicator {\n background: $baseInvertColor;\n padding: space('xxsmall');\n box-sizing: content-box;\n border-radius: $buttonBorderRadius;\n margin: 0;\n margin-bottom: -4px;\n margin-left: 4px;\n }\n }\n\n .phase-subtitle--initiatives,\n .phase-title,\n .phase-title--initiatives {\n @include font('title');\n @include fontCurve('h4');\n color: $baseLeadColor;\n }\n\n .process-header__progress {\n display: flex;\n align-items: center;\n }\n\n .process-header__phase {\n padding: space('medium');\n margin-top: space('medium');\n margin-bottom: 0;\n }\n\n .phase-date {\n @include font('regular');\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n .phase-current {\n @include fontCurve('caption');\n margin-left: space('xxsmall');\n color: $baseColor;\n }\n\n .process-header__progress {\n margin-bottom: space('xsmall');\n }\n\n .process-header__phase .button,\n .process-header__phase .meeting-polls__button,\n .process-phase .button,\n .process-phase .meeting-polls__button {\n margin-top: space('xsmall');\n }\n\n / Links /\n\n a,\n .link {\n text-decoration-line: underline;\n transition: $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $linkHoverColor;\n }\n }\n\n / Buttons /\n\n .button {\n @include fontSize('milli');\n display: inline-flex;\n align-items: center;\n height: auto;\n min-height: $formInputHeight;\n line-height: $formInputHeight - 2px;\n line-height: inherit;\n margin: 0;\n text-decoration-line: none;\n appearance: none;\n border: 1px solid $colorPrimary;\n padding: space('xsmall') space('xlarge');\n transition: all $baseTransitionAnimationSpeed;\n\n &.small {\n @include fontSize('micro');\n min-height: $formInputHeightSmall;\n line-height: $formInputHeightSmall - 2px;\n }\n\n &.tiny {\n @include fontSize('micro');\n min-height: 32px;\n }\n\n &.process-nav__more i {\n background-color: currentColor;\n margin-bottom: 0;\n }\n\n &.process-nav__more i:first-child {\n margin-left: space('xsmall');\n }\n }\n\n .button--icon {\n .icon-wrap {\n display: flex;\n align-items: center;\n }\n\n .icon-wrap .icon {\n margin-right: space('xxsmall');\n }\n }\n\n .button--icon.meeting-polls__button .icon,\n .button--icon.small .icon {\n width: iconSize('xxsmall');\n height: iconSize('xxsmall');\n }\n\n .extra .button.follow-button {\n margin-top: 0;\n }\n\n .button-group.meeting-polls__button .button,\n .button-group.meeting-polls__button .meeting-polls__button,\n .button-group.small .button,\n .button-group.small .meeting-polls__button,\n .button-group.tiny .button,\n .button-group.tiny .meeting-polls__button {\n @include fontSize('micro');\n }\n\n .button.primary,\n .button.primary.disabled,\n .button.primary.disabled:focus,\n .button.primary.disabled:hover,\n .button.primary[disabled],\n .button.primary[disabled]:focus,\n .button.primary[disabled]:hover,\n .primary.meeting-polls__button {\n background-color: $colorPrimary;\n\n &:hover,\n &:focus {\n background-color: $colorPrimaryHover;\n }\n }\n\n .button.budget-vote-button {\n @include font;\n color: $colorPrimary;\n background-color: $colorWhite;\n margin-bottom: space('medium');\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n background-color: $colorWhite;\n }\n }\n\n .button--vote-button {\n margin-bottom: space('large');\n }\n\n .view-side > .button {\n margin-bottom: space('medium');\n }\n\n .button.clear,\n .button.clear.disabled,\n .button.clear.disabled:focus,\n .button.clear.disabled:hover,\n .button.clear[disabled],\n .button.clear[disabled]:focus,\n .button.clear[disabled]:hover,\n .clear.meeting-polls__button {\n color: $colorError60;\n }\n\n\n / Wrapper / Layout /\n\n .wrapper {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: $containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n .wrapper--inner {\n background-color: $colorOldGrey5;\n }\n\n // .row.column {\n // padding-left: 0;\n // padding-right: 0;\n // }\n\n .row:not(.column) .floating-helper-container {\n padding-right: 0.625rem;\n padding-left: 0.625rem;\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .row:not(.column) .floating-helper-container {\n padding-right: 0.9375rem;\n padding-left: 0.9375rem;\n }\n }\n }\n\n\n / Headings /\n\n .heading1, h1,\n .heading2, h2,\n .heading3, h3,\n .heading4, h4 {\n color: $colorPrimary;\n }\n\n .heading1, h1 {\n @include font('title');\n @include fontCurve('h1', 'heading');\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n @include spaceCurve('padding-bottom', 'tiny');\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .section-heading,\n .heading2, h2 {\n @include font('title');\n @include fontCurve('h2', 'heading');\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n @include spaceCurve('padding-bottom', 'tiny');\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .heading3, h3 {\n @include font('title');\n @include fontCurve('h3', 'heading');\n @include spaceCurve('margin-top', 'medium');\n }\n\n .heading4, h4 {\n @include font('title');\n @include fontCurve('h4', 'heading');\n @include spaceCurve('margin-top', 'medium');\n }\n\n .heading4, h4,\n .timeline__item--current .timeline__date {\n color: $colorPrimary;\n }\n\n #most-commented .section-heading {\n margin-top: 0;\n }\n\n #most-commented a {\n text-decoration-line: none;\n }\n\n\n / Section /\n\n .section {\n @include spaceCurve('margin-bottom', 'large');\n }\n\n .section-heading {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .section-heading .text-sm,\n .section-heading .text-small {\n @include fontCurve('h3', 'heading');\n }\n\n\n / Dropdown /\n\n .order-by__dropdown,\n .results-per-page__dropdown {\n display: flex;\n align-items: center;\n }\n\n .order-by__text,\n .results-per-page__text {\n margin-right: space('xsmall');\n }\n\n .is-dropdown-submenu {\n box-shadow: $boxShadowPopover;\n border: none;\n border-radius: var(--stzh-popover-border-radius);\n margin-top: var(--stzh-space-xsmall);\n }\n\n .dropdown.menu > li.is-dropdown-submenu-parent > a {\n @include font;\n @include fontSize('milli');\n display: flex;\n align-items: center;\n background: $colorWhite;\n padding: space('xsmall') space('medium');\n padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n min-height: $formInputHeight;\n border: 1px solid $formBorderColor;\n margin: 0;\n }\n\n .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n border-color: $colorPrimary transparent transparent;\n right: space('medium');\n }\n\n .dropdown .is-dropdown-submenu a,\n .comment__header__context-menu__content-item {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding: space('xsmall') space('medium');\n padding-left: space('large');\n color: $colorOldGrey70;\n background-color: transparent;\n height: $menuItemHeight;\n line-height: $menuItemHeight;\n transition: all $baseTransitionAnimationSpeed;\n cursor: pointer;\n\n &:hover {\n color: $colorOldGrey70;\n background-color: $colorOldGrey5;\n text-decoration-line: none;\n }\n }\n\n .comment__header__context-menu__content-item {\n grid-gap: space('small');\n gap: space('small');\n }\n\n\n / Comments /\n\n .comments {\n padding-top: 0;\n margin-top: space('medium');\n margin-bottom: space('medium');\n }\n\n .comments .section-heading {\n margin-top: 0;\n }\n\n .comment__header,\n .comment__footer,\n .add-comment {\n @include spaceCurve('padding', 'regular');\n }\n\n .add-comment {\n background-color: transparent;\n padding: 0;\n }\n\n .add-comment .remaining-character-count {\n color: $baseColor;\n padding: space('xsmall') space('small');\n }\n\n .comment-threads {\n margin-bottom: space('xxxlarge');\n }\n\n .comment__content {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n\n p {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n .comment__footer {\n @include fontCurve('p2');\n }\n\n .comment__votes {\n margin-top: 0;\n }\n\n .comment__header__context-menu__content {\n box-shadow: $boxShadowPopover;\n }\n\n .opinion-toggle {\n margin: space('xlarge') 0;\n }\n\n .button:hover,\n .meeting-polls__button:hover,\n .opinion-toggle--meh.is-active,\n .opinion-toggle--meh:focus,\n .opinion-toggle--meh:hover {\n background-color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n .opinion-toggle--ko.is-active,\n .opinion-toggle--ko:focus,\n .opinion-toggle--ko:hover {\n background-color: $colorError60;\n border-color: $colorError60;\n }\n\n .opinion-toggle--ok.is-active,\n .opinion-toggle--ok:focus,\n .opinion-toggle--ok:hover {\n background-color: $colorFirgreen50;\n border-color: $colorFirgreen50;\n }\n\n\n / Process Nav /\n\n .process-nav__content {\n border-bottom: none;\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .process-nav__content {\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .process-nav li {\n padding: space('xsmall') space('small');\n }\n }\n\n\n / Statistics /\n\n .statistics-cell {\n margin: space('xxlarge') 0;\n }\n\n .statistics-cell .statistic__number {\n @include font('regular');\n color: $colorPrimary;\n }\n\n .statistics-cell .statistic__title {\n @include font('heavy');\n @include fontCurve('p2');\n color: $baseLeadColor;\n margin-top: 0;\n text-transform: none;\n }\n\n .statistics-cell .statistic__data:after {\n border-left: 2px solid $baseBorderColor;\n }\n\n\n / Richtext /\n\n .ql-editor {\n @include richtext-host;\n @include richtext-slotted($withLists: false);\n\n :first-child {\n margin-top: 0;\n }\n }\n\n .help-text {\n color: $baseColor;\n }\n\n .help-text .ql-editor p {\n @include fontCurve('caption');\n }\n\n\n /* Accountability /\n\n .accountability .categories .categories--header span,\n .accountability .categories .progress-figure,\n .accountability .categories .categories--group .category--title .progress-info .category--count {\n color: $baseColor;\n }\n\n .accountability .categories .categories--header .icon--arrow-bottom {\n fill: $baseColor;\n }\n\n .accountability .categories .categories--header {\n border-color: $baseBorderColor;\n margin-bottom: space('medium');\n padding-bottom: space('medium');\n }\n\n .accountability .intro .progress-level p {\n @include font('heavy');\n @include spaceCurve('margin-bottom', 'small');\n margin-top: 0;\n }\n\n .accountability .categories .progress-figure {\n margin-top: 0;\n }\n\n .accountability .categories .categories--group .category--title .progress-info .category--count {\n margin-top: space('xxxsmall');\n }\n\n .accountability .title-action {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n\n / Breadrumb /\n\n .lines-breadcrumb a,\n .muted-link {\n @include font;\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n\n &:hover,\n &:focus {\n color: $linkHoverColor;\n }\n }\n\n\n / Lead /\n\n .lead .ql-editor p {\n @include font('light');\n @include fontCurve('h3');\n @include spaceCurve('margin-bottom', 'big');\n margin-top: space('xxlarge');\n }\n\n\n / Message / Callout / Floating Helper /\n\n .callout.secondary,\n .callout.warning,\n .callout.success,\n .floating-helper__content {\n @include spaceCurve('padding', 'regular');\n padding: space('medium');\n display: block;\n box-shadow: $boxShadowMessage;\n background-color: $colorWhite;\n margin-bottom: space('xxxxlarge') !important;\n }\n\n .callout {\n @include font('heavy');\n border-left-width: 5px;\n\n .heading2,\n .heading3 {\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n .floating-helper__content {\n border-top: none;\n padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n }\n\n .floating-helper__wrapper {\n position: relative;\n }\n\n .floating-helper__content-close {\n @include spaceCurve('top', 'regular');\n @include spaceCurve('right', 'regular');\n box-sizing: content-box;\n position: absolute;\n width: iconSize('medium');\n height: iconSize('medium');\n padding: var(--stzh-space-xsmall);\n margin: calc(var(--stzh-space-xsmall) -1);\n background-color: transparent;\n color: var(--stzh-base-lead-color);\n\n .icon {\n width: iconSize('xxsmall');\n height: iconSize('xxsmall');\n }\n }\n\n .floating-helper__icon-big {\n width: iconSize('large');\n height: iconSize('large');\n background-color: $colorOldPrimary8;\n\n .icon {\n width: iconSize('xsmall');\n height: iconSize('xsmall');\n }\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .floating-helper__content-inner > * {\n margin: 0;\n }\n\n .floating-helper__icon-big {\n margin-right: space('small');\n }\n }\n\n .floating-helper-block .mb-s {\n margin: 0 !important;\n }\n\n\n /* Sidebar /\n\n .extra,\n .tech-info {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n .extra__date,\n .extra__suport-number {\n @include font('heavy');\n @include fontCurve('h2');\n }\n\n .extra__month {\n @include fontCurve('caption');\n }\n\n .extra__time,\n .extra__suport-text {\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n\n / Filters /\n\n .filters__help p:first-of-type {\n @include fontCurve('p2');\n margin-top: 0;\n }\n\n #participatory-space-filters legend {\n margin-right: space('xsmall');\n }\n\n\n / Mini Title /\n\n .mini-title {\n @include font('heavy');\n @include fontCurve('p2');\n color: $baseColor;\n margin-bottom: space('small');\n }\n\n .mini-title__strong--highlight {\n @include font('title');\n @include fontCurve('h4');\n }\n\n\n / Tags /\n\n .tags {\n display: flex;\n flex-wrap: wrap;\n\n &:last-child {\n margin-bottom: calc(#{space('xsmall')} -1);\n }\n }\n\n .tags li {\n margin-right: space('xsmall');\n margin-bottom: space('xsmall');\n }\n\n .tags li a {\n @include fontSize('micro');\n height: 32px;\n line-height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: 16px;\n padding: 0 space('medium');\n color: $colorPrimary;\n appearance: none;\n border: 1px solid $colorOldGrey13;\n background-color: $colorWhite;\n transition: all $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n }\n\n /* Card /\n\n .card {\n color: $baseColor;\n }\n\n .card__top .badge-card__content,\n .card__top .card__content {\n @include fontCurve('caption');\n padding: space('xsmall') space('large');\n align-items: center;\n\n span.muted {\n font-size: inherit;\n }\n }\n\n .card__top .card__content {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .card__top .card__content .card__link {\n display: block;\n }\n\n .card > .card__content,\n .card.definition-data,\n .card .definition-data,\n .badge-card__content,\n .card__support,\n .filters__section,\n .filters__section--general,\n .filters__section--general:first-of-type,\n .filters__section:first-of-type {\n @include spaceCurve('padding', 'regular');\n }\n\n .card-data__item,\n .filters__section,\n .filters__section--general,\n .card__block ul,\n .card__icondata ul,\n .card__footer,\n .card__top {\n border-color: $baseBorderColor;\n }\n\n .card__link {\n display: flex;\n flex-direction: column;\n text-decoration-line: none;\n color: $baseColor;\n\n &:hover {\n text-decoration-line: none;\n }\n\n .text-small {\n @include fontCurve('p2');\n }\n }\n\n .card__header {\n margin-bottom: space('small');\n }\n\n .card__text {\n @include fontCurve('p1');\n\n &:not(:last-child) {\n margin-bottom: space('small');\n }\n }\n\n .card .card__title,\n .card--list__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $colorPrimary;\n margin-top: 0;\n transition: color $baseTransitionAnimationSpeed;\n }\n\n .card:not(.card--secondary):hover .card__title {\n color: $colorPrimaryHover;\n }\n\n .collapsible-list .card__text--paragraph {\n color: $baseColor !important;\n }\n\n .card__block ul li:not(:first-child),\n .card__icondata ul li:not(:first-child) {\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .card-data__item {\n @include fontCurve('caption');\n color: $baseColor;\n\n .heading1,\n .heading2,\n .heading3,\n .heading4 {\n margin-top: 0;\n }\n\n strong {\n display: block;\n }\n\n br {\n display: none;\n }\n }\n\n .card-data__item.creation_date_status strong {\n color: $baseColor;\n color: inherit;\n }\n\n .card__status .card-data__item {\n padding: space('xsmall');\n }\n\n .card--meta {\n color: $baseColor;\n }\n\n .card__block ul li:not(:first-child) strong,\n .card__icondata ul li:not(:first-child) strong {\n font-size: inherit;\n letter-spacing: inherit;\n }\n\n .add-message:not(.card--secondary),\n .card:not(.card--secondary),\n .chart-tooltip:not(.card--secondary),\n .conference-registration:not(.card--secondary),\n .conference-speaker .speaker-bio:not(.card--secondary) {\n &:hover {\n box-shadow: $boxShadowPopover;\n }\n }\n\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n @include font;\n @include fontCurve('p1');\n color: $baseColor;\n }\n\n // Progress bar\n\n .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n .progress__bar .progress__bar__title {\n @include font;\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .card__support__number,\n .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n .progress__bar .progress__bar__title .progress__bar__number,\n .extra__suport-text,\n .progress__bar.progress__bar--vertical .progress__bar__text {\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n .progress__bar.progress__bar--vertical .progress__bar__number {\n @include font('heavy');\n @include fontCurve('h2');\n }\n\n // Card list\n\n .card--list__item {\n padding: 0;\n }\n\n .card--list__text {\n padding: 0;\n display: block;\n }\n\n .card--list__icon {\n fill: $colorPrimary;\n }\n\n .card--list__item .card__link {\n @include spaceCurve('padding', 'regular');\n }\n\n .card--list__text .card__link:hover .card--list__heading {\n color: $colorPrimaryHover;\n }\n\n .card--list__text .card__link .text-small {\n color: $baseColor;\n }\n\n .card--list__data {\n background-color: $colorOldGrey5;\n }\n\n .card--list__data__number {\n @include font('heavy');\n @include fontCurve('h3');\n color: $colorOldGrey70;\n }\n\n // Side cards\n\n .card.extra,\n .view-side .card:not(.card--secondary),\n .comment-thread:not(.card--secondary) {\n &:hover {\n box-shadow: none;\n }\n }\n\n // Definition Card\n\n .definition__title {\n color: $colorOldGrey70;\n }\n\n .definition-data {\n color: $colorOldGrey55;\n }\n\n .definition-data__item {\n @include fontCurve('p2');\n padding: 0;\n padding-bottom: space('small');\n margin-bottom: space('small');\n border-bottom: 1px solid $baseBorderColor;\n\n &:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .definition-data__title {\n @include font('heavy');\n @include fontCurve('p2');\n margin-bottom: 0;\n }\n\n .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n background-color: $colorOldGrey5;\n }\n\n\n / Blog /\n\n .author__name {\n @include font('regular');\n @include fontCurve('caption');\n color: $colorOldGrey55 !important;\n }\n\n .author-data {\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .author-data__extra {\n @include font('regular');\n @include fontCurve('caption');\n\n &::before {\n border-color: $baseBorderColor;\n }\n }\n\n .author-data__extra a {\n white-space: nowrap;\n text-decoration-line: none;\n }\n\n .author-data__extra > a,\n .author-data__extra > button\n .author-data__extra > span {\n margin-right: space('medium');\n }\n\n\n / Budget /\n\n .budget-summary {\n .heading2,\n .heading3 {\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n .budget-progress {\n min-height: $formInputHeight;\n }\n\n .budget-list__title {\n margin-top: space('xsmall');\n margin-bottom: space('medium');\n }\n\n .budget-list__text:not(:last-child) {\n margin-bottom: 0;\n }\n\n .budget-list__data__number {\n @include font('heavy');\n @include fontCurve('h4');\n }\n\n / Survey /\n\n .answer-questionnaire .questionnaire-question {\n @include font('heavy');\n @include fontCurve('p1');\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/\n \n */\n@Component({\n tag: \"stzh-skin-portal-mitwirken\",\n styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n componentDidLoad() {\n // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n }\n\n render() {\n return (\n <Host>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-skin-portal-mitwirken.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,0BAA0B,GAAG,0xgLAA0xgL;;MCahzgL,uBAAuB;;;;EAClC,gBAAgB;;IAEd,OAAO,CAAC,GAAG,CAAE,IAAI,CAAC,WAAmB,CAAC,KAAK,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC,CAAC;GAC/E;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,OACE,EACP;GACH;;;;;;","names":["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-old-truegreen);\n --warning: var(--stzh-color-old-warning);\n --alert: var(--stzh-color-error60);\n --highlight: var(--stzh-color-coral);\n --highlight_alternative: var(--stzh-color-coral);\n}\n\n// For main and modals\nmain,\n.reveal-overlay {\n a.muted,\n .inline-filters button.muted[data-toggle] {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n\n &:hover,\n &:focus {\n color: $colorWhite;\n background-color: $colorOldGrey13;\n border-color: $colorOldGrey13;\n }\n }\n}\n\n// Only modals\n.reveal-overlay {\n background-color: rgba(5, 127, 172, 0.8);\n\n /* Dialog /\n\n .reveal__title {\n margin-top: 0;\n }\n\n .reveal {\n box-shadow: $boxShadowOverlay;\n }\n\n .close-button {\n color: $baseLeadColor;\n }\n}\n\n// Only header\n.mod_header {\n .mod_header__logobar-logo img {\n background: url(https://www.stadt-zuerich.ch/content/dam/stzh/corpdesign/wortbildmarken/logo_stzh_vbz_pos_2-1.svg) no-repeat;\n width: 0;\n padding-left: 208px;\n }\n}\n\n// Main Content Modules\nmain {\n accent-color: $colorPrimary;\n\n / Resets /\n @include richtext-host;\n @include richtext-slotted($withLists: false);\n\n &, label, tfoot, thead {\n color: $baseColor;\n }\n\n svg {\n overflow: visible;\n }\n\n label {\n display: flex;\n align-items: center;\n }\n\n .field label {\n @include font('heavy');\n display: block;\n }\n\n input[type=checkbox],\n input[type=radio] {\n width: 24px;\n height: 24px;\n }\n\n label > [type=checkbox],\n label > [type=radio] {\n margin-right: space('small');\n }\n\n .filters__section--general label,\n .filters__section label {\n @include fontSize('milli');\n display: flex;\n line-height: 24px;\n transition: color $baseTransitionAnimationSpeed;\n color: $baseColor;\n margin-bottom: space('small');\n }\n\n .filters__has-subfilters {\n align-items: center;\n\n [data-toggle] {\n margin-bottom: space('small');\n }\n }\n\n .form-input-extra-before,\n .form-error {\n @include font;\n @include fontCurve('caption');\n }\n\n .form-error,\n .is-invalid-label {\n color: $colorError60;\n }\n\n [type=color],\n [type=date],\n [type=datetime-local],\n [type=datetime],\n [type=email],\n [type=month],\n [type=number],\n [type=password],\n [type=search],\n [type=tel],\n [type=text],\n [type=time],\n [type=url],\n [type=week],\n textarea,\n .inline-filters button[data-toggle],\n select,\n .data-picker .picker-prompt a,\n .data-picker.picker-single .picker-values div a {\n @include font;\n\t @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: space('xsmall') space('medium');\n width: 100%;\n height: $formInputHeight;\n color: $colorPrimary;\n appearance: none;\n margin-bottom: space('medium');\n text-decoration-line: none;\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n }\n\n .data-picker .picker-prompt a,\n .data-picker.picker-single .picker-values div a {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n &::after {\n float: none;\n margin-top: 0;\n }\n }\n\n .inline-filters button[data-toggle],\n select {\n padding-right: space('xxlarge');\n }\n\n textarea {\n min-height: $formInputHeight;\n resize: vertical;\n\n &[rows] {\n height: auto;\n }\n }\n\n .input-group .input-group-field {\n margin-bottom: 0;\n }\n\n .section > p,\n .floating-helper__content p {\n margin-top: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n .add-message,\n .card,\n .chart-tooltip,\n .comment-thread,\n .conference-registration,\n .conference-speaker .speaker-bio {\n margin-bottom: space('xxlarge');\n border-color: $baseBorderColor;\n background-color: $colorWhite;\n }\n\n .ql-editor ol,\n .ql-editor ul {\n padding-left: 0;\n }\n\n .badge-card__content,\n .card__content,\n .card__text--paragraph,\n .floating-helper__content-inner,\n .lead,\n .process-header + .wrapper .section,\n .timeline__content {\n ul li:not(.card-data__item) {\n padding-left: space('large');\n\n &::before {\n content: \"–\";\n margin-left: 0;\n margin-right: 0;\n text-align: left;\n width: auto;\n }\n }\n }\n\n .badge-card__content,\n .card__content,\n .card__text--paragraph,\n .floating-helper__content-inner,\n .lead,\n .process-header + .wrapper .section,\n .timeline__content {\n ul.tags li:not(.card-data__item) {\n padding-left: 0;\n\n &::before {\n content: none;\n }\n }\n }\n\n .m-bottom {\n margin-bottom: space('medium');\n }\n\n .mb-sm {\n margin-bottom: space('xxlarge');\n }\n\n p {\n color: $baseColor;\n }\n\n tfoot td,\n tfoot th,\n thead td,\n thead th {\n @include font('heavy');\n }\n\n tfoot td,\n tfoot th,\n thead td,\n thead th,\n tbody td,\n tbody th {\n padding: space('xmall');\n }\n\n table,\n td,\n tr,\n .questionnaire-question-matrix table,\n .questionnaire-question-matrix td,\n .questionnaire-question-matrix tr,\n .questionnaire-question-matrix tr:nth-child(2n) {\n border-color: $baseBorderColor;\n }\n\n\n / Process Header /\n\n .process-header .process-header__inner {\n background-color: $colorPrimary;\n }\n\n .card--full .process-header .process-header__container .process-header__info .card__title,\n .process-header .process-header__container .process-header__info .card--full .card__title,\n .process-header .process-header__container .process-header__info .heading2 {\n @include font('title');\n @include fontCurve('hero', 'heading');\n @include spaceCurve('margin-bottom', 'medium');\n margin-top: 0;\n border-bottom: none;\n padding-bottom: 0;\n }\n\n .process-header .process-header__container {\n padding: 0 space('xxxxlarge');\n\n @media screen and (max-width: #{$processHeaderMaxDesktopBreakpoint}) {\n padding: space('xxxxlarge');\n padding-bottom: space('big');\n }\n\n @media screen and (max-width: #{$processHeaderMaxMobileBreakpoint}) {\n padding: space('xxlarge') $containerMargin space('xxxlarge');\n }\n }\n\n .process-header__info {\n padding: 0;\n }\n\n .process-header .process-header__container .process-header__info .heading-small {\n @include fontCurve('h3', 'heading');\n color: $baseInvertColor;\n margin-top: 0;\n }\n\n .process-header__hashtag a {\n color: $baseInvertColor;\n text-decoration-line: none;\n\n &:hover {\n color: $baseInvertColor;\n }\n\n .external-link-indicator {\n background: $baseInvertColor;\n padding: space('xxsmall');\n box-sizing: content-box;\n border-radius: $buttonBorderRadius;\n margin: 0;\n margin-bottom: -4px;\n margin-left: 4px;\n }\n }\n\n .phase-subtitle--initiatives,\n .phase-title,\n .phase-title--initiatives {\n @include font('title');\n @include fontCurve('h4');\n color: $baseLeadColor;\n }\n\n .process-header__progress {\n display: flex;\n align-items: center;\n }\n\n .process-header__phase {\n padding: space('medium');\n margin-top: space('medium');\n margin-bottom: 0;\n }\n\n .phase-date {\n @include font('regular');\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n .phase-current {\n @include fontCurve('caption');\n margin-left: space('xxsmall');\n color: $baseColor;\n }\n\n .process-header__progress {\n margin-bottom: space('xsmall');\n }\n\n .process-header__phase .button,\n .process-header__phase .meeting-polls__button,\n .process-phase .button,\n .process-phase .meeting-polls__button {\n margin-top: space('xsmall');\n }\n\n / Links /\n\n a,\n .link {\n text-decoration-line: underline;\n transition: $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $linkHoverColor;\n }\n }\n\n / Buttons /\n\n .button {\n @include fontSize('milli');\n display: inline-flex;\n align-items: center;\n height: auto;\n min-height: $formInputHeight;\n line-height: $formInputHeight - 2px;\n line-height: inherit;\n margin: 0;\n text-decoration-line: none;\n appearance: none;\n border: 1px solid $colorPrimary;\n padding: space('xsmall') space('xlarge');\n transition: all $baseTransitionAnimationSpeed;\n\n &.small {\n @include fontSize('micro');\n min-height: $formInputHeightSmall;\n line-height: $formInputHeightSmall - 2px;\n }\n\n &.tiny {\n @include fontSize('micro');\n min-height: 32px;\n }\n\n &.process-nav__more i {\n background-color: currentColor;\n margin-bottom: 0;\n }\n\n &.process-nav__more i:first-child {\n margin-left: space('xsmall');\n }\n }\n\n .button--icon {\n .icon-wrap {\n display: flex;\n align-items: center;\n }\n\n .icon-wrap .icon {\n margin-right: space('xxsmall');\n }\n }\n\n .button--icon.meeting-polls__button .icon,\n .button--icon.small .icon {\n width: iconSize('xxsmall');\n height: iconSize('xxsmall');\n }\n\n .extra .button.follow-button {\n margin-top: 0;\n }\n\n .button-group.meeting-polls__button .button,\n .button-group.meeting-polls__button .meeting-polls__button,\n .button-group.small .button,\n .button-group.small .meeting-polls__button,\n .button-group.tiny .button,\n .button-group.tiny .meeting-polls__button {\n @include fontSize('micro');\n }\n\n .button.primary,\n .button.primary.disabled,\n .button.primary.disabled:focus,\n .button.primary.disabled:hover,\n .button.primary[disabled],\n .button.primary[disabled]:focus,\n .button.primary[disabled]:hover,\n .primary.meeting-polls__button {\n background-color: $colorPrimary;\n\n &:hover,\n &:focus {\n background-color: $colorPrimaryHover;\n }\n }\n\n .button.budget-vote-button {\n @include font;\n color: $colorPrimary;\n background-color: $colorWhite;\n margin-bottom: space('medium');\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n background-color: $colorWhite;\n }\n }\n\n .button--vote-button {\n margin-bottom: space('large');\n }\n\n .view-side > .button {\n margin-bottom: space('medium');\n }\n\n .button.clear,\n .button.clear.disabled,\n .button.clear.disabled:focus,\n .button.clear.disabled:hover,\n .button.clear[disabled],\n .button.clear[disabled]:focus,\n .button.clear[disabled]:hover,\n .clear.meeting-polls__button {\n color: $colorError60;\n }\n\n\n / Wrapper / Layout /\n\n .wrapper {\n @include spaceCurve('padding-top', 'big');\n @include spaceCurve('padding-bottom', 'big');\n\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: $containerMarginLarge;\n padding-right: $containerMarginLarge;\n }\n\n .wrapper--inner {\n background-color: $colorOldGrey5;\n }\n\n // .row.column {\n // padding-left: 0;\n // padding-right: 0;\n // }\n\n .row:not(.column) .floating-helper-container {\n padding-right: 0.625rem;\n padding-left: 0.625rem;\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .row:not(.column) .floating-helper-container {\n padding-right: 0.9375rem;\n padding-left: 0.9375rem;\n }\n }\n }\n\n\n / Headings /\n\n .heading1, h1,\n .heading2, h2,\n .heading3, h3,\n .heading4, h4 {\n color: $colorPrimary;\n }\n\n .heading1, h1 {\n @include font('title');\n @include fontCurve('h1', 'heading');\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n @include spaceCurve('padding-bottom', 'tiny');\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .section-heading,\n .heading2, h2 {\n @include font('title');\n @include fontCurve('h2', 'heading');\n @include spaceCurve('margin-top', 'large');\n @include spaceCurve('margin-bottom', 'medium');\n @include spaceCurve('padding-bottom', 'tiny');\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .heading3, h3 {\n @include font('title');\n @include fontCurve('h3', 'heading');\n @include spaceCurve('margin-top', 'medium');\n }\n\n .heading4, h4 {\n @include font('title');\n @include fontCurve('h4', 'heading');\n @include spaceCurve('margin-top', 'medium');\n }\n\n .heading4, h4,\n .timeline__item--current .timeline__date {\n color: $colorPrimary;\n }\n\n #most-commented .section-heading {\n margin-top: 0;\n }\n\n #most-commented a {\n text-decoration-line: none;\n }\n\n\n / Section /\n\n .section {\n @include spaceCurve('margin-bottom', 'large');\n }\n\n .section-heading {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .section-heading .text-sm,\n .section-heading .text-small {\n @include fontCurve('h3', 'heading');\n }\n\n\n / Dropdown /\n\n .order-by__dropdown,\n .results-per-page__dropdown {\n display: flex;\n align-items: center;\n }\n\n .order-by__text,\n .results-per-page__text {\n margin-right: space('xsmall');\n }\n\n .is-dropdown-submenu {\n box-shadow: $boxShadowPopover;\n border: none;\n border-radius: var(--stzh-popover-border-radius);\n margin-top: var(--stzh-space-xsmall);\n }\n\n .dropdown.menu > li.is-dropdown-submenu-parent > a {\n @include font;\n @include fontSize('milli');\n display: flex;\n align-items: center;\n background: $colorWhite;\n padding: space('xsmall') space('medium');\n padding-right: calc(#{space('xlarge')} + #{space('medium')} + #{space('xsmall')});\n min-height: $formInputHeight;\n border: 1px solid $formBorderColor;\n margin: 0;\n }\n\n .dropdown.menu > li.is-dropdown-submenu-parent > a:after {\n border-color: $colorPrimary transparent transparent;\n right: space('medium');\n }\n\n .dropdown .is-dropdown-submenu a,\n .comment__header__context-menu__content-item {\n @include fontSize('micro');\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding: space('xsmall') space('medium');\n padding-left: space('large');\n color: $colorOldGrey70;\n background-color: transparent;\n height: $menuItemHeight;\n line-height: $menuItemHeight;\n transition: all $baseTransitionAnimationSpeed;\n cursor: pointer;\n\n &:hover {\n color: $colorOldGrey70;\n background-color: $colorOldGrey5;\n text-decoration-line: none;\n }\n }\n\n .comment__header__context-menu__content-item {\n grid-gap: space('small');\n gap: space('small');\n }\n\n\n / Comments /\n\n .comments {\n padding-top: 0;\n margin-top: space('medium');\n margin-bottom: space('medium');\n }\n\n .comments .section-heading {\n margin-top: 0;\n }\n\n .comment__header,\n .comment__footer,\n .add-comment {\n @include spaceCurve('padding', 'regular');\n }\n\n .add-comment {\n background-color: transparent;\n padding: 0;\n }\n\n .add-comment .remaining-character-count {\n color: $baseColor;\n padding: space('xsmall') space('small');\n }\n\n .comment-threads {\n margin-bottom: space('xxxlarge');\n }\n\n .comment__content {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n\n p {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n .comment__footer {\n @include fontCurve('p2');\n }\n\n .comment__votes {\n margin-top: 0;\n }\n\n .comment__header__context-menu__content {\n box-shadow: $boxShadowPopover;\n }\n\n .opinion-toggle {\n margin: space('xlarge') 0;\n }\n\n .button:hover,\n .meeting-polls__button:hover,\n .opinion-toggle--meh.is-active,\n .opinion-toggle--meh:focus,\n .opinion-toggle--meh:hover {\n background-color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n .opinion-toggle--ko.is-active,\n .opinion-toggle--ko:focus,\n .opinion-toggle--ko:hover {\n background-color: $colorError60;\n border-color: $colorError60;\n }\n\n .opinion-toggle--ok.is-active,\n .opinion-toggle--ok:focus,\n .opinion-toggle--ok:hover {\n background-color: $colorFirgreen50;\n border-color: $colorFirgreen50;\n }\n\n\n / Process Nav /\n\n .process-nav__content {\n border-bottom: none;\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .process-nav__content {\n border-bottom: 1px solid $baseBorderColor;\n }\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .process-nav li {\n padding: space('xsmall') space('small');\n }\n }\n\n\n / Statistics /\n\n .statistics-cell {\n margin: space('xxlarge') 0;\n }\n\n .statistics-cell .statistic__number {\n @include font('regular');\n color: $colorPrimary;\n }\n\n .statistics-cell .statistic__title {\n @include font('heavy');\n @include fontCurve('p2');\n color: $baseLeadColor;\n margin-top: 0;\n text-transform: none;\n }\n\n .statistics-cell .statistic__data:after {\n border-left: 2px solid $baseBorderColor;\n }\n\n\n / Richtext /\n\n .ql-editor {\n @include richtext-host;\n @include richtext-slotted($withLists: false);\n\n :first-child {\n margin-top: 0;\n }\n }\n\n .help-text {\n color: $baseColor;\n }\n\n .help-text .ql-editor p {\n @include fontCurve('caption');\n }\n\n\n /* Accountability /\n\n .accountability .categories .categories--header span,\n .accountability .categories .progress-figure,\n .accountability .categories .categories--group .category--title .progress-info .category--count {\n color: $baseColor;\n }\n\n .accountability .categories .categories--header .icon--arrow-bottom {\n fill: $baseColor;\n }\n\n .accountability .categories .categories--header {\n border-color: $baseBorderColor;\n margin-bottom: space('medium');\n padding-bottom: space('medium');\n }\n\n .accountability .intro .progress-level p {\n @include font('heavy');\n @include spaceCurve('margin-bottom', 'small');\n margin-top: 0;\n }\n\n .accountability .categories .progress-figure {\n margin-top: 0;\n }\n\n .accountability .categories .categories--group .category--title .progress-info .category--count {\n margin-top: space('xxxsmall');\n }\n\n .accountability .title-action {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n\n / Breadrumb /\n\n .lines-breadcrumb a,\n .muted-link {\n @include font;\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n\n &:hover,\n &:focus {\n color: $linkHoverColor;\n }\n }\n\n\n / Lead /\n\n .lead .ql-editor p {\n @include font('light');\n @include fontCurve('h3');\n @include spaceCurve('margin-bottom', 'big');\n margin-top: space('xxlarge');\n }\n\n\n / Message / Callout / Floating Helper /\n\n .callout.secondary,\n .callout.warning,\n .callout.success,\n .floating-helper__content {\n @include spaceCurve('padding', 'regular');\n padding: space('medium');\n display: block;\n box-shadow: $boxShadowMessage;\n background-color: $colorWhite;\n margin-bottom: space('xxxxlarge') !important;\n }\n\n .callout {\n @include font('heavy');\n border-left-width: 5px;\n\n .heading2,\n .heading3 {\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n .floating-helper__content {\n border-top: none;\n padding-right: calc(#{iconSize('medium')} + #{space('small')} + #{space('medium')});\n }\n\n .floating-helper__wrapper {\n position: relative;\n }\n\n .floating-helper__content-close {\n @include spaceCurve('top', 'regular');\n @include spaceCurve('right', 'regular');\n box-sizing: content-box;\n position: absolute;\n width: iconSize('medium');\n height: iconSize('medium');\n padding: var(--stzh-space-xsmall);\n margin: calc(var(--stzh-space-xsmall) -1);\n background-color: transparent;\n color: var(--stzh-base-lead-color);\n\n .icon {\n width: iconSize('xxsmall');\n height: iconSize('xxsmall');\n }\n }\n\n .floating-helper__icon-big {\n width: iconSize('large');\n height: iconSize('large');\n background-color: $colorOldPrimary8;\n\n .icon {\n width: iconSize('xsmall');\n height: iconSize('xsmall');\n }\n }\n\n @media screen and (min-width: #{$mobileBreakpoint}) {\n .floating-helper__content-inner > * {\n margin: 0;\n }\n\n .floating-helper__icon-big {\n margin-right: space('small');\n }\n }\n\n .floating-helper-block .mb-s {\n margin: 0 !important;\n }\n\n\n /* Sidebar /\n\n .extra,\n .tech-info {\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n .extra__date,\n .extra__suport-number {\n @include font('heavy');\n @include fontCurve('h2');\n }\n\n .extra__month {\n @include fontCurve('caption');\n }\n\n .extra__time,\n .extra__suport-text {\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n\n / Filters /\n\n .filters__help p:first-of-type {\n @include fontCurve('p2');\n margin-top: 0;\n }\n\n #participatory-space-filters legend {\n margin-right: space('xsmall');\n }\n\n\n / Mini Title /\n\n .mini-title {\n @include font('heavy');\n @include fontCurve('p2');\n color: $baseColor;\n margin-bottom: space('small');\n }\n\n .mini-title__strong--highlight {\n @include font('title');\n @include fontCurve('h4');\n }\n\n\n / Tags /\n\n .tags {\n display: flex;\n flex-wrap: wrap;\n\n &:last-child {\n margin-bottom: calc(#{space('xsmall')} -1);\n }\n }\n\n .tags li {\n margin-right: space('xsmall');\n margin-bottom: space('xsmall');\n }\n\n .tags li a {\n @include fontSize('micro');\n height: 32px;\n line-height: 32px;\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: 16px;\n padding: 0 space('medium');\n color: $colorPrimary;\n appearance: none;\n border: 1px solid $colorOldGrey13;\n background-color: $colorWhite;\n transition: all $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n }\n\n /* Card /\n\n .card {\n color: $baseColor;\n }\n\n .card__top .badge-card__content,\n .card__top .card__content {\n @include fontCurve('caption');\n padding: space('xsmall') space('large');\n align-items: center;\n\n span.muted {\n font-size: inherit;\n }\n }\n\n .card__top .card__content {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n .card__top .card__content .card__link {\n display: block;\n }\n\n .card > .card__content,\n .card.definition-data,\n .card .definition-data,\n .badge-card__content,\n .card__support,\n .filters__section,\n .filters__section--general,\n .filters__section--general:first-of-type,\n .filters__section:first-of-type {\n @include spaceCurve('padding', 'regular');\n }\n\n .card-data__item,\n .filters__section,\n .filters__section--general,\n .card__block ul,\n .card__icondata ul,\n .card__footer,\n .card__top {\n border-color: $baseBorderColor;\n }\n\n .card__link {\n display: flex;\n flex-direction: column;\n text-decoration-line: none;\n color: $baseColor;\n\n &:hover {\n text-decoration-line: none;\n }\n\n .text-small {\n @include fontCurve('p2');\n }\n }\n\n .card__header {\n margin-bottom: space('small');\n }\n\n .card__text {\n @include fontCurve('p1');\n\n &:not(:last-child) {\n margin-bottom: space('small');\n }\n }\n\n .card .card__title,\n .card--list__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $colorPrimary;\n margin-top: 0;\n transition: color $baseTransitionAnimationSpeed;\n }\n\n .card:not(.card--secondary):hover .card__title {\n color: $colorPrimaryHover;\n }\n\n .collapsible-list .card__text--paragraph {\n color: $baseColor !important;\n }\n\n .card__block ul li:not(:first-child),\n .card__icondata ul li:not(:first-child) {\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .card-data__item {\n @include fontCurve('caption');\n color: $baseColor;\n\n .heading1,\n .heading2,\n .heading3,\n .heading4 {\n margin-top: 0;\n }\n\n strong {\n display: block;\n }\n\n br {\n display: none;\n }\n }\n\n .card-data__item.creation_date_status strong {\n color: $baseColor;\n color: inherit;\n }\n\n .card__status .card-data__item {\n padding: space('xsmall');\n }\n\n .card--meta {\n color: $baseColor;\n }\n\n .card__block ul li:not(:first-child) strong,\n .card__icondata ul li:not(:first-child) strong {\n font-size: inherit;\n letter-spacing: inherit;\n }\n\n .add-message:not(.card--secondary),\n .card:not(.card--secondary),\n .chart-tooltip:not(.card--secondary),\n .conference-registration:not(.card--secondary),\n .conference-speaker .speaker-bio:not(.card--secondary) {\n &:hover {\n box-shadow: $boxShadowPopover;\n }\n }\n\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > p,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h1,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h2,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h3,\n div.card__text--paragraph > .ql-editor.ql-reset-decidim > h4 {\n @include font;\n @include fontCurve('p1');\n color: $baseColor;\n }\n\n // Progress bar\n\n .progress__bar.progress__bar--vertical .progress__bar__subtitle,\n .progress__bar .progress__bar__title {\n @include font;\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .card__support__number,\n .progress__bar.progress__bar--vertical .progress__bar__subtitle .progress__bar__number,\n .progress__bar .progress__bar__title .progress__bar__number,\n .extra__suport-text,\n .progress__bar.progress__bar--vertical .progress__bar__text {\n @include fontCurve('p2');\n color: $baseColor;\n }\n\n .progress__bar.progress__bar--vertical .progress__bar__number {\n @include font('heavy');\n @include fontCurve('h2');\n }\n\n // Card list\n\n .card--list__item {\n padding: 0;\n }\n\n .card--list__text {\n padding: 0;\n display: block;\n }\n\n .card--list__icon {\n fill: $colorPrimary;\n }\n\n .card--list__item .card__link {\n @include spaceCurve('padding', 'regular');\n }\n\n .card--list__text .card__link:hover .card--list__heading {\n color: $colorPrimaryHover;\n }\n\n .card--list__text .card__link .text-small {\n color: $baseColor;\n }\n\n .card--list__data {\n background-color: $colorOldGrey5;\n }\n\n .card--list__data__number {\n @include font('heavy');\n @include fontCurve('h3');\n color: $colorOldGrey70;\n }\n\n // Side cards\n\n .card.extra,\n .view-side .card:not(.card--secondary),\n .comment-thread:not(.card--secondary) {\n &:hover {\n box-shadow: none;\n }\n }\n\n // Definition Card\n\n .definition__title {\n color: $colorOldGrey70;\n }\n\n .definition-data {\n color: $colorOldGrey55;\n }\n\n .definition-data__item {\n @include fontCurve('p2');\n padding: 0;\n padding-bottom: space('small');\n margin-bottom: space('small');\n border-bottom: 1px solid $baseBorderColor;\n\n &:last-child {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .definition-data__title {\n @include font('heavy');\n @include fontCurve('p2');\n margin-bottom: 0;\n }\n\n .section.columns.medium-5.mediumlarge-4.large-3 > .card.extra.definition-data {\n background-color: $colorOldGrey5;\n }\n\n\n / Blog /\n\n .author__name {\n @include font('regular');\n @include fontCurve('caption');\n color: $colorOldGrey55 !important;\n }\n\n .author-data {\n @include fontCurve('caption');\n color: $baseColor;\n }\n\n .author-data__extra {\n @include font('regular');\n @include fontCurve('caption');\n\n &::before {\n border-color: $baseBorderColor;\n }\n }\n\n .author-data__extra a {\n white-space: nowrap;\n text-decoration-line: none;\n }\n\n .author-data__extra > a,\n .author-data__extra > button\n .author-data__extra > span {\n margin-right: space('medium');\n }\n\n\n / Budget /\n\n .budget-summary {\n .heading2,\n .heading3 {\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n .budget-progress {\n min-height: $formInputHeight;\n }\n\n .budget-list__title {\n margin-top: space('xsmall');\n margin-bottom: space('medium');\n }\n\n .budget-list__text:not(:last-child) {\n margin-bottom: 0;\n }\n\n .budget-list__data__number {\n @include font('heavy');\n @include fontCurve('h4');\n }\n\n / Survey /\n\n .answer-questionnaire .questionnaire-question {\n @include font('heavy');\n @include fontCurve('p1');\n margin-bottom: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h\n} from \"@stencil/core\";\n\n/\n \n */\n@Component({\n tag: \"stzh-skin-portal-mitwirken\",\n styleUrl: \"stzh-skin-portal-mitwirken.scss\"\n})\nexport class StzhSkinPortalMitwirken {\n componentDidLoad() {\n // copy this string from console and put it in the Decidim CSS textbox to adjust theme\n console.log((this.constructor as any).style.replace('@charset \"UTF-8\";', ''));\n }\n\n render() {\n return (\n <Host>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-sticky-actions.cjs.entry.js CHANGED Viewed

@@ -18,33 +18,39 @@ const StzhStickyActions = class {
       this.hasActiveScrollup = !entries[0].isIntersecting;
     };
     this.updateScrollupWidth = () => {
-      document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width", `${this.scrollupElement.offsetWidth}px`);
+      if (this.scrollupElement && this.element.isConnected) {
+        const { width } = this.scrollupElement.getBoundingClientRect();
+        document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-width", `${width}px`);
+      }
     };
     this.handleScrollupResize = throttle.throttle_1(this.updateScrollupWidth, 100);
     this.pagetitleQuery = 'stzh-pagetitle, stzh-pagetitle-hero';
-    this.hasActiveScrollup = undefined;
+    this.hasActiveScrollup = false;
   }
   hasActiveScrollupWatcher(newValue) {
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-active", newValue ? "1" : "0");
     document.documentElement.style.setProperty("--stzh-sticky-actions-scrollup-is-not-active", newValue ? "0" : "1");
   }
   componentDidLoad() {
-    this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px", });
-    const pagetitle = typeof this.pagetitleQuery === "string" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();
+    const pagetitle = typeof this.pagetitleQuery === "string"
+      ? document.querySelector(this.pagetitleQuery)
+      : this.pagetitleQuery();
     if (pagetitle) {
+      this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: "0px", });
       this.observer.observe(pagetitle);
     }
-    this.resizeObserver = new ResizeObserver(this.handleScrollupResize);
-    this.resizeObserver.observe(this.scrollupElement);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         this.updateScrollupWidth();
+        this.resizeObserver = new ResizeObserver(this.handleScrollupResize);
+        this.resizeObserver.observe(this.scrollupElement);
       });
     });
   }
-  disconn() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  disconnectedCallback() {
+    var _a, _b;
+    (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
   }
   render() {
     const chatSlotUsed = utils.hasSlot(this.element, "chat");

package/dist/cjs/stzh-sticky-actions.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-sticky-actions.entry.cjs.js","mappings":";;;;;;;;;;;AAAA,MAAM,oBAAoB,GAAG,u/EAAu/E;;MCsBvgF,iBAAiB;;;IAkBpB,qBAAgB,GAAG,CAAC,OAAoC;MAC9D,IAAI,CAAC,iBAAiB,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;KACrD,CAAA;IAEO,wBAAmB,GAAG;MAC5B,~~QAAQ~~,CAAC,eAAe,CAAC,~~KAAK~~,CAAC,WAAW,~~CAAC~~,~~sCAAsC~~,EAAE,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,IAAI,CAAC,CAAC;~~KAC7H~~,CAAA;IAEO,yBAAoB,GAAGA,mBAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,GAAG,CAAC,CAAC;~~0BAxBhB~~,qCAAqC~~;;;EAO5F~~,wBAAwB,CAAC,QAAiB;IACxC,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,0CAA0C,EAAE,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;IAC7G,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,8CAA8C,EAAE,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC;GAClH;~~EAgBD~~,gBAAgB;IACd,IAAI,CAAC,QAAQ,~~GAAG~~,~~IAAI~~,~~oBAAoB~~,CAAC,IAAI,CAAC,~~gBAAgB~~,~~EAAE~~,~~EAAE~~,~~UAAU~~,EAAE,~~KAAK,GAAG,~~CAAC~~,CAAC~~;~~IACxF~~,~~MAAM~~,SAAS,~~GAAG~~,~~OAAO,~~IAAI,CAAC,~~cAAc,KAAK,~~QAAQ,GAAG,~~QAAQ~~,~~CAAC~~,~~aAAa,~~CAAC,IAAI,CAAC,~~cAAc~~,~~CAAC~~,~~GAAG~~,~~IAAI~~,~~CAAC~~,~~cAAc~~,~~EAAE~~,CAAC~~;IAChI~~,~~IAAI,SAAS,EAAE~~;~~MACb~~,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;KAClC;IAED,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;~~IACpE~~,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;~~IAElD~~,~~qBAAqB~~,CAAC;~~MACpB~~,~~qBAAqB~~,CAAC;~~QACpB~~,IAAI,CAAC,~~mBAAmB~~,~~EAAE~~,~~CAAC;OAC5B~~,~~CAAC~~,CAAC;~~KACJ~~,~~CAAC,CAAC;GACJ;EAED,OAAO;;IACL,~~MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;GACnC;EAED,MAAM;IACJ,MAAM,YAAY,GAAGC,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IACnD,MAAM,gBAAgB,GAAGA,aAAO,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAE3D,MAAM,OAAO,GAAG;MACd,qBAAqB,EAAE,IAAI;MAC3B,UAAU,EAAE,YAAY;MACxB,cAAc,EAAE,gBAAgB;MAChC,qBAAqB,EAAE,IAAI,CAAC,iBAAiB;KAC9C,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,OAAO,8CACjBA,yBACE,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,6BAA6B,EACnC,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAC,aAAa,EACrB,gBAAgB,EAAE,IAAI,IAEtBA,iBAAK,KAAK,EAAC,gCAAgC,IACzCA,iBAAK,KAAK,EAAC,mCAAmC,IAC5CA,kBAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,MAAME,iBAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACpE,EACNF,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,eAAe,GAAG,EAAiB,CAAC,EACvD,KAAK,EAAC,uCAAuC,IAE7CA,kBAAM,IAAI,EAAC,UAAU,EAAC,YAAY,EAAE,MAAME,iBAAW,CAAC,IAAI,CAAC,OAAO,CAAC,GAAS,CACxE,CACF,CACM,CACV,CACD,EACP;GACH;;;;;;;;;;","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n --gap: #{space('small')};\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n --stuck-offset: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: medium) {\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n }\n\n // z-index: $zIndexSticky;\n // position: fixed;\n // right: $containerMargin;\n // bottom: space('small');\n // transition: transform $baseTransitionAnimationSpeed;\n // transform:\n // translateY(calc((\n // var(--stzh-pagetitle-disturber-stuck-height, 0px)\n // + var(--stzh-cta-stuck-bottom-height, 0px)\n // ) / -1))\n // translateX(0);\n\n // @include mq($from: small) {\n // right: $containerMarginSmall;\n // }\n\n // @include mq($from: medium) {\n // right: $containerMarginMedium;\n // }\n\n // @include mq($from: large) {\n // right: $containerMarginLarge;\n // }\n\n // @include mq($from: ultra) {\n // right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n // }\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky-actions {\n &__container {\n display: flex;\n justify-content: flex-end;\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__sticky {\n --padding-top: 0px;\n --padding-bottom: var(--sticky-padding-bottom);\n }\n\n &__sticky[is-stuck-bottom] &__container {\n transform: translateY(calc(var(--stuck-offset) / -1))\n }\n\n &__scrollup-wrapper {\n transition-property: transform, opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n opacity: 0;\n visibility: hidden;\n transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n }\n\n &.has-chat &__scrollup-wrapper {\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n }\n\n &.has-scrollup &__chat-wrapper {\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n }\n\n /* Active scrollup variant /\n\n &.has-active-scrollup &__scrollup-wrapper {\n opacity: 1;\n visibility: visible;\n transform: translateX(0px);\n }\n\n &.has-active-scrollup &__chat-wrapper {\n transform: translateX(calc(var(--gap) / -1));\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n forceUpdate,\n State,\n Prop,\n Watch,\n} from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for content that should stick to chat place\n /\n@Component({\n tag: \"stzh-sticky-actions\",\n styleUrl: \"stzh-sticky-actions.scss\",\n shadow: true\n})\nexport class StzhStickyActions {\n /* Query used to get pagetitle element (will show scrollup when passed). */\n @Prop() pagetitleQuery: string \| (() => HTMLElement) = 'stzh-pagetitle, stzh-pagetitle-hero';\n\n @State() hasActiveScrollup;\n\n @Element() element: HTMLStzhStickyActionsElement;\n\n @Watch(\"hasActiveScrollup\")\n hasActiveScrollupWatcher(newValue: boolean) {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n }\n\n private observer: IntersectionObserver;\n private resizeObserver: ResizeObserver;\n private scrollupElement: HTMLElement;\n\n private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n this.hasActiveScrollup = !entries[0].isIntersecting;\n }\n\n private updateScrollupWidth = () => {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${~~this.scrollupElement.offsetWidth~~}px`);\n }\n\n private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n componentDidLoad() {\n ~~this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\", });\n~~ const pagetitle = typeof this.pagetitleQuery === \"string\" ? document.querySelector(this.pagetitleQuery) : this.pagetitleQuery();\n if (pagetitle) {\n this.observer~~.observe(pagetitle);\n }\n\n this.resizeObserver~~ = new ~~ResizeObserver~~(this.~~handleScrollupResize~~);\n this.~~resizeObserver~~.observe(~~this.scrollupElement~~);\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateScrollupWidth();\n });\n });\n }\n\n ~~disconn~~() {\n this.resizeObserver?.disconnect();\n }\n\n render() {\n const chatSlotUsed = hasSlot(this.element, \"chat\");\n const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n const classes = {\n \"stzh-sticky-actions\": true,\n \"has-chat\": chatSlotUsed,\n \"has-scrollup\": scrollupSlotUsed,\n \"has-active-scrollup\": this.hasActiveScrollup,\n };\n\n return (\n <Host>\n <div class={classes} data-stzh-sticky-width-container>\n <stzh-sticky\n name=\"actions\"\n class=\"stzh-sticky-actions__sticky\"\n position=\"fixed\"\n variant=\"transparent\"\n disableStickyTop={true}\n >\n <div class=\"stzh-sticky-actions__container\">\n <div class=\"stzh-sticky-actions__chat-wrapper\">\n <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n <div\n ref={(el) => (this.scrollupElement = el as HTMLElement)}\n class=\"stzh-sticky-actions__scrollup-wrapper\"\n >\n <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n </div>\n </stzh-sticky>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-sticky-actions.entry.cjs.js","mappings":"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","names":["throttle","hasSlot","h","Host","forceUpdate"],"sources":["src/components/stzh-sticky-actions/stzh-sticky-actions.scss?tag=stzh-sticky-actions&encapsulation=shadow","src/components/stzh-sticky-actions/stzh-sticky-actions.tsx"],"sourcesContent":[":host {\n --gap: #{space('small')};\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('small')});\n\n --stuck-offset: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: medium) {\n --sticky-padding-bottom: var(--stzh-sticky-actions-sticky-padding-bottom, #{space('medium')});\n }\n\n // z-index: $zIndexSticky;\n // position: fixed;\n // right: $containerMargin;\n // bottom: space('small');\n // transition: transform $baseTransitionAnimationSpeed;\n // transform:\n // translateY(calc((\n // var(--stzh-pagetitle-disturber-stuck-height, 0px)\n // + var(--stzh-cta-stuck-bottom-height, 0px)\n // ) / -1))\n // translateX(0);\n\n // @include mq($from: small) {\n // right: $containerMarginSmall;\n // }\n\n // @include mq($from: medium) {\n // right: $containerMarginMedium;\n // }\n\n // @include mq($from: large) {\n // right: $containerMarginLarge;\n // }\n\n // @include mq($from: ultra) {\n // right: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n // }\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky-actions {\n &__container {\n display: flex;\n justify-content: flex-end;\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__sticky {\n --padding-top: 0px;\n --padding-bottom: var(--sticky-padding-bottom);\n }\n\n &__sticky[is-stuck-bottom] &__container {\n transform: translateY(calc(var(--stuck-offset) / -1))\n }\n\n &__scrollup-wrapper {\n transition-property: transform, opacity, visibility;\n transition-duration: $baseTransitionAnimationSpeed;\n opacity: 0;\n visibility: hidden;\n transform: translateX(var(--stzh-sticky-actions-scrollup-width, 44px));\n }\n\n &.has-chat &__scrollup-wrapper {\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px) + var(--gap))));\n }\n\n &.has-scrollup &__chat-wrapper {\n transition-property: transform;\n transition-duration: $baseTransitionAnimationSpeed;\n transform: translateX(calc((var(--stzh-sticky-actions-scrollup-width, 44px))));\n }\n\n /* Active scrollup variant /\n\n &.has-active-scrollup &__scrollup-wrapper {\n opacity: 1;\n visibility: visible;\n transform: translateX(0px);\n }\n\n &.has-active-scrollup &__chat-wrapper {\n transform: translateX(calc(var(--gap) / -1));\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n forceUpdate,\n State,\n Prop,\n Watch,\n} from \"@stencil/core\";\n\nimport throttle from \"lodash/throttle\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for content that should stick to chat place\n /\n@Component({\n tag: \"stzh-sticky-actions\",\n styleUrl: \"stzh-sticky-actions.scss\",\n shadow: true\n})\nexport class StzhStickyActions {\n /* Query used to get pagetitle element (will show scrollup when passed). */\n @Prop() pagetitleQuery: string \| (() => HTMLElement) = 'stzh-pagetitle, stzh-pagetitle-hero';\n\n @State() hasActiveScrollup = false;\n\n @Element() element: HTMLStzhStickyActionsElement;\n\n @Watch(\"hasActiveScrollup\")\n hasActiveScrollupWatcher(newValue: boolean) {\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-active\", newValue ? \"1\" : \"0\");\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-is-not-active\", newValue ? \"0\" : \"1\");\n }\n\n private observer: IntersectionObserver;\n private resizeObserver: ResizeObserver;\n private scrollupElement: HTMLElement;\n\n private observePagetitle = (entries: IntersectionObserverEntry[]) => {\n this.hasActiveScrollup = !entries[0].isIntersecting;\n }\n\n private updateScrollupWidth = () => {\n if (this.scrollupElement && this.element.isConnected) {\n const { width } = this.scrollupElement.getBoundingClientRect();\n document.documentElement.style.setProperty(\"--stzh-sticky-actions-scrollup-width\", `${width}px`);\n }\n }\n\n private handleScrollupResize = throttle(this.updateScrollupWidth, 100);\n\n componentDidLoad() {\n const pagetitle = typeof this.pagetitleQuery === \"string\"\n ? document.querySelector(this.pagetitleQuery)\n : this.pagetitleQuery();\n\n if (pagetitle) {\n this.observer = new IntersectionObserver(this.observePagetitle, { rootMargin: \"0px\", });\n this.observer.observe(pagetitle);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateScrollupWidth();\n\n this.resizeObserver = new ResizeObserver(this.handleScrollupResize);\n this.resizeObserver.observe(this.scrollupElement);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n render() {\n const chatSlotUsed = hasSlot(this.element, \"chat\");\n const scrollupSlotUsed = hasSlot(this.element, \"scrollup\");\n\n const classes = {\n \"stzh-sticky-actions\": true,\n \"has-chat\": chatSlotUsed,\n \"has-scrollup\": scrollupSlotUsed,\n \"has-active-scrollup\": this.hasActiveScrollup,\n };\n\n return (\n <Host>\n <div class={classes} data-stzh-sticky-width-container>\n <stzh-sticky\n name=\"actions\"\n class=\"stzh-sticky-actions__sticky\"\n position=\"fixed\"\n variant=\"transparent\"\n disableStickyTop={true}\n >\n <div class=\"stzh-sticky-actions__container\">\n <div class=\"stzh-sticky-actions__chat-wrapper\">\n <slot name=\"chat\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n <div\n ref={(el) => (this.scrollupElement = el as HTMLElement)}\n class=\"stzh-sticky-actions__scrollup-wrapper\"\n >\n <slot name=\"scrollup\" onSlotchange={() => forceUpdate(this.element)}></slot>\n </div>\n </div>\n </stzh-sticky>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-sticky.cjs.entry.js CHANGED Viewed

@@ -9,7 +9,7 @@ require('./string-utils-5dd70320.js');
 require('./debounce-c8f1f58a.js');
 require('./_commonjsHelpers-dcc4cf71.js');
-const stzhStickyCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--padding-left:0;--padding-right:0;--background-color:transparent;--stuck-padding-top:var(--padding-top);--stuck-padding-bottom:var(--padding-bottom);--stuck-padding-left:var(--padding-left);--stuck-padding-right:var(--padding-right);--stuck-background-color:var(--stzh-color-grey10);display:contents}@media print{:host{display:none}}:host([variant=transparent]){--background-color:transparent;--stuck-background-color:transparent;pointer-events:none}:host([position=fixed]){display:block}.stzh-sticky{display:contents;}.stzh-sticky__sticky{position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem;z-index:var(--stzh-z-index-sticky);width:var(--stzh-sticky-unstuck-width, auto);transition-property:width, transform, opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__content,.stzh-sticky__content::before{background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__content{--stzh-button-pointer-events:all;--stzh-link-pointer-events:all;position:relative;transition-property:background-color, transform}.stzh-sticky__content-inner{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-property:padding;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__spacer{display:none}.stzh-sticky--is-disabled-sticky-top .stzh-sticky__sticky{top:auto}.stzh-sticky--is-disabled-sticky-bottom .stzh-sticky__sticky{bottom:auto}.stzh-sticky--is-bleeding .stzh-sticky__content::before{z-index:-1;content:\"\";position:absolute;display:block;width:100%;height:100%;transform:translateY(0);transition-property:width, background-color, transform}.stzh-sticky--is-stuck .stzh-sticky__content,.stzh-sticky--is-stuck .stzh-sticky__content::before{background-color:var(--stuck-background-color)}.stzh-sticky--is-stuck .stzh-sticky__content::before{width:calc(100vw - var(--stzh-scrollbar-width));transform:translateX(calc(var(--stzh-sticky-offset-left) / -1))}.stzh-sticky--is-stuck .stzh-sticky__content-inner{padding-top:var(--stuck-padding-top);padding-bottom:var(--stuck-padding-bottom);padding-left:var(--stuck-padding-left);padding-right:var(--stuck-padding-right)}.stzh-sticky--is-not-loaded{visibility:hidden}.stzh-sticky--is-not-loaded.stzh-sticky--is-stuck .stzh-sticky__sticky{transform:translateY(100%);opacity:0}.stzh-sticky--is-not-loaded .stzh-sticky__content,.stzh-sticky--is-not-loaded .stzh-sticky__content::before,.stzh-sticky--is-not-loaded .stzh-sticky__content-inner{transition-duration:0ms}";
+const stzhStickyCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--padding-left:0;--padding-right:0;--background-color:transparent;--stuck-padding-top:var(--padding-top);--stuck-padding-bottom:var(--padding-bottom);--stuck-padding-left:var(--padding-left);--stuck-padding-right:var(--padding-right);--stuck-background-color:var(--stzh-color-grey10);display:contents}@media print{:host{display:none}}:host([variant=transparent]){--background-color:transparent;--stuck-background-color:transparent;pointer-events:none}:host([position=fixed]){display:block}.stzh-sticky{display:contents;}.stzh-sticky__sticky{position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem;z-index:var(--stzh-z-index-sticky);width:var(--stzh-sticky-unstuck-width, auto);transition-property:width, transform, opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__content,.stzh-sticky__content::before{background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__content{--stzh-button-pointer-events:all;--stzh-link-pointer-events:all;position:relative;transition-property:background-color, transform}.stzh-sticky__content-inner{padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);transition-property:padding;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-sticky__spacer{display:none}.stzh-sticky--is-disabled-sticky-top .stzh-sticky__sticky{top:auto}.stzh-sticky--is-disabled-sticky-bottom .stzh-sticky__sticky{bottom:auto}.stzh-sticky--is-bleeding .stzh-sticky__content::before{z-index:-1;content:\"\";position:absolute;display:block;width:100%;height:100%;transform:translateY(0);transition-property:width, background-color, transform}.stzh-sticky--is-stuck .stzh-sticky__content,.stzh-sticky--is-stuck .stzh-sticky__content::before{background-color:var(--stuck-background-color)}.stzh-sticky--is-stuck .stzh-sticky__content::before{width:calc(100vw - var(--stzh-scrollbar-width));transform:translateX(calc(var(--stzh-sticky-offset-left) / -1))}.stzh-sticky--is-stuck .stzh-sticky__content-inner{padding-top:var(--stuck-padding-top);padding-bottom:var(--stuck-padding-bottom);padding-left:var(--stuck-padding-left);padding-right:var(--stuck-padding-right)}.stzh-sticky--is-not-loaded{visibility:hidden}.stzh-sticky--is-not-loaded.stzh-sticky--is-stuck .stzh-sticky__sticky{transform:translateY(100%);opacity:0}.stzh-sticky--is-not-loaded .stzh-sticky__sticky,.stzh-sticky--is-not-loaded .stzh-sticky__content,.stzh-sticky--is-not-loaded .stzh-sticky__content::before,.stzh-sticky--is-not-loaded .stzh-sticky__content-inner{transition-duration:0ms}";
 const ATTR_STICKY_CONTAINER = "data-stzh-sticky-container";
 const ATTR_STICKY_WIDTH_CONTAINER = "data-stzh-sticky-width-container";
@@ -35,9 +35,10 @@ const StzhSticky = class {
     };
     this.handleStickyResize = throttle.throttle_1(() => {
       this.stuckHeightWatcher();
+      this.updateByScroll();
     }, 100);
     this.updateByScroll = () => {
-      if (!utils.isVisible(this.stickyElement)) {
+      if (!utils.isVisible(this.stickyElement) || !this.element.isConnected) {
         return;
       }
       const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`)
@@ -61,10 +62,11 @@ const StzhSticky = class {
       const unstuckWidth = this.element.getBoundingClientRect().width;
       // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);
       stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);
+      // console.log(unstuckWidth);
       // console.log(
       //   this.scrollX,
       //   this.scrollY,
-      //   this.windowHeight,
+      //   this.windowHeight,
       //   this.fixedTop,
       //   this.fixedLeft,
       //   this.fixedHeight,
@@ -86,7 +88,7 @@ const StzhSticky = class {
       // );
       if (this.isStuckTop || this.isStuckBottom) {
         this.setFixed();
-        // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);
+        // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);
       }
       else {
         this.setUnfixed();
@@ -94,9 +96,13 @@ const StzhSticky = class {
       }
     };
     this.updateFixedByResize = () => {
+      if (!this.stickyElement || !this.element.isConnected) {
+        return;
+      }
       // reset sticky so we can read current offsets
       this.setUnfixed();
       this.stickyElement.style.position = "static";
+      this.stickyElement.style.width = "auto";
       this.isStuckTop = false;
       this.isStuckBottom = false;
       if (utils.isVisible(this.stickyElement)) {
@@ -265,6 +271,9 @@ const StzhSticky = class {
       requestAnimationFrame(() => {
         window.setTimeout(() => {
           this.loaded = true;
+          if (this.position === "fixed") {
+            this.updateFixedByResize();
+          }
         }, 250);
       });
     });

package/dist/cjs/stzh-sticky.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-sticky.entry.cjs.js","mappings":"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","names":["throttle","isVisible","offset","h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n \n @prop --stzh-sticky-{NAME}-is-stuck: Global: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: Global: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: Global: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: Global: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: Global: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: Global: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: Global: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: Global: Stuck bottom sticky element height (readonly variable on `<html>`)\n /\n\n:host {\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --padding-left: 0;\n --padding-right: 0;\n --background-color: transparent;\n\n --stuck-padding-top: var(--padding-top);\n --stuck-padding-bottom: var(--padding-bottom);\n --stuck-padding-left: var(--padding-left);\n --stuck-padding-right: var(--padding-right);\n --stuck-background-color: #{$colorGrey10};\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n:host([variant=\"transparent\"]) {\n --background-color: transparent;\n --stuck-background-color: transparent;\n\n pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n display: block;\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n width: var(--stzh-sticky-unstuck-width, auto);\n transition-property: width, transform, opacity;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content,\n &__content::before {\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content {\n --stzh-button-pointer-events: all;\n --stzh-link-pointer-events: all;\n\n position: relative;\n transition-property: background-color, transform;\n\n // &::before,\n // &::after {\n // content: '';\n // pointer-events: none;\n // display: block;\n // position: absolute;\n // left: 0;\n // width: 100%;\n // height: space('xxlarge');\n // opacity: 0;\n // transition: opacity $baseTransitionAnimationSpeed;\n // }\n\n // &::before {\n // background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n // top: 0;\n // transform: translateY(-100%);\n // }\n\n // &::after {\n // background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n // bottom: 0;\n // transform: translateY(100%);\n // }\n }\n\n &__content-inner {\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n transition-property: padding;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__spacer {\n display: none;\n }\n\n / Disabled variants /\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n / Bleeding variant /\n\n &--is-bleeding &__content {\n &::before {\n z-index: -1;\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n transform: translateY(0);\n transition-property: width, background-color, transform;\n }\n }\n\n / Is stuck variant /\n\n &--is-stuck &__content,\n &--is-stuck &__content::before {\n background-color: var(--stuck-background-color);\n }\n\n &--is-stuck &__content::before {\n width: calc(100vw - var(--stzh-scrollbar-width));\n transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n }\n\n &--is-stuck &__content-inner {\n padding-top: var(--stuck-padding-top);\n padding-bottom: var(--stuck-padding-bottom);\n padding-left: var(--stuck-padding-left);\n padding-right: var(--stuck-padding-right);\n }\n\n // &--is-stuck-bottom &__content {\n // &::before {\n // opacity: 1;\n // }\n // }\n\n // &--is-stuck-top &__content {\n // &::after {\n // opacity: 1;\n // }\n // }\n\n / Transparent variant /\n\n // &--transparent &__content {\n // &::after,\n // &::before {\n // display: none;\n // }\n // }\n\n // / Position sticky variant /\n\n // &--is-breakout &__content {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n\n &--is-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded#{&}--is-stuck &__sticky {\n transform: translateY(100%);\n opacity: 0;\n }\n\n &--is-not-loaded &__content,\n &--is-not-loaded &__content::before,\n &--is-not-loaded &__content-inner {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/\n \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"transparent\" = \"default\";\n\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether background breaks out container to full viewport width /\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /* Name of sticky element (used for setting css properties) /\n @Prop() name: string;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n }, 100)\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement)) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n \|\| this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop \|\| this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n \n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight, \n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit \n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit \n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`); \n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-sticky.entry.cjs.js","mappings":"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","names":["throttle","isVisible","offset","h","Host"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=shadow","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding-top: Padding top of sticky element\n * @prop --padding-bottom: Padding bottom of sticky element\n * @prop --padding-left: Padding left of sticky element\n * @prop --padding-right: Padding right of sticky element\n * @prop --background-color: Background color of sticky element\n * @prop --stuck-padding-top: Padding top of stuck sticky element\n * @prop --stuck-padding-bottom: Padding bottom of stuck sticky element\n * @prop --stuck-padding-left: Padding left of stuck sticky element\n * @prop --stuck-padding-right: Padding right of stuck sticky element\n * @prop --stuck-background-color: Background color of stuck sticky element\n \n @prop --stzh-sticky-{NAME}-is-stuck: Global: Whether sticky is currently stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck: Global: Whether sticky is currently not stuck (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-top: Global: Whether sticky is currently stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-top: Global: Whether sticky is currently not stuck on top (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-stuck-bottom: Global: Whether sticky is currently stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-is-not-stuck-bottom: Global: Whether sticky is currently not stuck on bottom (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-top-height: Global: Stuck top sticky element height (readonly variable on `<html>`)\n * @prop --stzh-sticky-{NAME}-stuck-bottom-height: Global: Stuck bottom sticky element height (readonly variable on `<html>`)\n /\n\n:host {\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --padding-left: 0;\n --padding-right: 0;\n --background-color: transparent;\n\n --stuck-padding-top: var(--padding-top);\n --stuck-padding-bottom: var(--padding-bottom);\n --stuck-padding-left: var(--padding-left);\n --stuck-padding-right: var(--padding-right);\n --stuck-background-color: #{$colorGrey10};\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n:host([variant=\"transparent\"]) {\n --background-color: transparent;\n --stuck-background-color: transparent;\n\n pointer-events: none;\n}\n\n:host([position=\"fixed\"]) {\n display: block;\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n width: var(--stzh-sticky-unstuck-width, auto);\n transition-property: width, transform, opacity;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content,\n &__content::before {\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__content {\n --stzh-button-pointer-events: all;\n --stzh-link-pointer-events: all;\n\n position: relative;\n transition-property: background-color, transform;\n\n // &::before,\n // &::after {\n // content: '';\n // pointer-events: none;\n // display: block;\n // position: absolute;\n // left: 0;\n // width: 100%;\n // height: space('xxlarge');\n // opacity: 0;\n // transition: opacity $baseTransitionAnimationSpeed;\n // }\n\n // &::before {\n // background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n // top: 0;\n // transform: translateY(-100%);\n // }\n\n // &::after {\n // background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n // bottom: 0;\n // transform: translateY(100%);\n // }\n }\n\n &__content-inner {\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n transition-property: padding;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__spacer {\n display: none;\n }\n\n / Disabled variants /\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n / Bleeding variant /\n\n &--is-bleeding &__content {\n &::before {\n z-index: -1;\n content: '';\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n transform: translateY(0);\n transition-property: width, background-color, transform;\n }\n }\n\n / Is stuck variant /\n\n &--is-stuck &__content,\n &--is-stuck &__content::before {\n background-color: var(--stuck-background-color);\n }\n\n &--is-stuck &__content::before {\n width: calc(100vw - var(--stzh-scrollbar-width));\n transform: translateX(calc(var(--stzh-sticky-offset-left) / -1));\n }\n\n &--is-stuck &__content-inner {\n padding-top: var(--stuck-padding-top);\n padding-bottom: var(--stuck-padding-bottom);\n padding-left: var(--stuck-padding-left);\n padding-right: var(--stuck-padding-right);\n }\n\n // &--is-stuck-bottom &__content {\n // &::before {\n // opacity: 1;\n // }\n // }\n\n // &--is-stuck-top &__content {\n // &::after {\n // opacity: 1;\n // }\n // }\n\n / Transparent variant /\n\n // &--transparent &__content {\n // &::after,\n // &::before {\n // display: none;\n // }\n // }\n\n // / Position sticky variant /\n\n // &--is-breakout &__content {\n // position: relative;\n // left: 50%;\n // right: 50%;\n // margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n // width: calc(100vw - var(--stzh-scrollbar-width));\n // max-width: calc(100vw - var(--stzh-scrollbar-width));\n // }\n\n &--is-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded#{&}--is-stuck &__sticky {\n transform: translateY(100%);\n opacity: 0;\n }\n\n &--is-not-loaded &__sticky,\n &--is-not-loaded &__content,\n &--is-not-loaded &__content::before,\n &--is-not-loaded &__content-inner {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\nimport throttle from \"lodash/throttle\";\n\nconst ATTR_STICKY_CONTAINER = \"data-stzh-sticky-container\";\nconst ATTR_STICKY_WIDTH_CONTAINER = \"data-stzh-sticky-width-container\";\n\n/\n \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n shadow: true\n})\nexport class StzhSticky {\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"transparent\" = \"default\";\n\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = true;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether background breaks out container to full viewport width /\n @Prop({ reflect: true }) bleeding: boolean = false;\n\n /* Name of sticky element (used for setting css properties) /\n @Prop() name: string;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Watch(\"isStuckTop\")\n @Watch(\"isStuckBottom\")\n @Watch(\"hasReachedTopLimit\")\n @Watch(\"hasReachedBottomLimit\")\n stuckHeightWatcher() {\n let isStuck = false;\n\n if (this.isStuckTop && !this.hasReachedBottomLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-top`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-top`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-top-height`, \"0px\");\n }\n\n if (this.isStuckBottom && !this.hasReachedTopLimit) {\n isStuck = true;\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, `${this.stickyElement.offsetHeight}px`);\n } else {\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck-bottom`, \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck-bottom`, \"1\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}stuck-bottom-height`, \"0px\");\n }\n\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-stuck`, isStuck ? \"1\" : \"0\");\n document.documentElement.style.setProperty(`--stzh-sticky-${this.name && this.name + '-'}is-not-stuck`, isStuck ? \"0\" : \"1\");\n\n if (isStuck) {\n this.stickyResizeObserver.observe(this.stickyElement);\n } else {\n this.stickyResizeObserver.unobserve(this.stickyElement);\n }\n }\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n @Watch(\"bleeding\")\n positionWatcher() {\n if (this.position === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n if (this.bleeding) {\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n this.updateByScroll();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean;\n @State() isStuckBottom: boolean;\n\n @State() hasReachedTopLimit: boolean;\n @State() hasReachedBottomLimit: boolean;\n\n @State() loaded: boolean = false;\n\n private observer: IntersectionObserver;\n private stickyResizeObserver: ResizeObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(`[${ATTR_STICKY_CONTAINER}]`);\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private handleStickyResize = throttle(() => {\n this.stuckHeightWatcher();\n this.updateByScroll();\n }, 100);\n\n private updateByScroll = () => {\n if (!isVisible(this.stickyElement) \|\| !this.element.isConnected) {\n return;\n }\n\n const stickyFixedWidthContainer = this.element.closest(`[${ATTR_STICKY_WIDTH_CONTAINER}]`) as HTMLElement\n \|\| this.element.parentElement;\n\n const off = offset(\n (this.isStuckTop \|\| this.isStuckBottom) && this.position === \"fixed\"\n ? this.spacerElement : this.stickyElement\n );\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-top', `${this.fixedTop}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-offset-left', `${this.fixedLeft}px`);\n\n if (this.position === \"sticky\") {\n // for position sticky we only need the offsets variables to be updated in bleeding variant\n return;\n }\n\n this.fixedHeight = this.stickyElement.offsetHeight;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n this.fixedWidth = stickyFixedWidthContainer.getBoundingClientRect().width;\n\n const unstuckWidth = this.element.getBoundingClientRect().width;\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-stuck-width', `${this.fixedWidth}px`);\n stickyFixedWidthContainer.style.setProperty('--stzh-sticky-unstuck-width', `${unstuckWidth}px`);\n\n // console.log(unstuckWidth);\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight,\n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit\n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit\n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${this.fixedWidth}px`);\n } else {\n this.setUnfixed();\n // stickyFixedWidthContainer.style.setProperty('--stzh-sticky-width', `${unstuckWidth}px`);\n }\n }\n\n private updateFixedByResize = () => {\n if (!this.stickyElement \|\| !this.element.isConnected) {\n return;\n }\n\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.stickyElement.style.width = \"auto\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.updateByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.stickyResizeObserver = new ResizeObserver(this.handleStickyResize);\n this.positionWatcher();\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n window.setTimeout(() => {\n this.loaded = true;\n\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n }\n }, 250);\n });\n });\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.stickyResizeObserver?.disconnect();\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-not-loaded\": !this.loaded,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n \"stzh-sticky--is-bleeding\": this.bleeding,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n [`stzh-sticky--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <div class=\"stzh-sticky__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/stzh-tooltip.cjs.entry.js CHANGED Viewed

@@ -10,7 +10,7 @@ const eventUtils = require('./event-utils-20e7b8b1.js');
 const animationUtils = require('./animation-utils-925ee0e0.js');
 require('./string-utils-5dd70320.js');
-const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
+const stzhTooltipCss = ".sc-stzh-tooltip-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-tooltip-h{display:none}.sc-stzh-tooltip-h *.sc-stzh-tooltip,.sc-stzh-tooltip-h *.sc-stzh-tooltip::before,.sc-stzh-tooltip-h *.sc-stzh-tooltip::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-tooltip-h .has-focus.sc-stzh-tooltip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip{outline-style:none !important}.sc-stzh-tooltip-h .stzh-fylingfocus-focused.sc-stzh-tooltip::-moz-focus-inner{border:0 !important}.sc-stzh-tooltip-h{display:contents;--color:var(--stzh-color-white);--background-color:var(--stzh-color-coolgrey60);--width:var(--stzh-tooltip-width);--min-width:var(--stzh-tooltip-min-width);--max-width:var(--stzh-tooltip-max-width);--padding:var(--stzh-tooltip-padding);--border-radius:var(--stzh-tooltip-border-radius);--link-color:var(--stzh-color-white);--hover-link-color:var(--stzh-color-white70op)}[size=small].sc-stzh-tooltip-h{--padding:var(--stzh-tooltip-small-padding)}.stzh-tooltip.sc-stzh-tooltip{display:contents}.stzh-tooltip__arrow.sc-stzh-tooltip{position:absolute;display:flex;color:var(--background-color)}.stzh-tooltip--placement-bottom.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-bottom-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{top:0;transform:translateY(-0.5rem)}.stzh-tooltip--placement-top.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-top-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{bottom:0;transform:translateY(0.5rem) rotate(180deg)}.stzh-tooltip--placement-left.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-left-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{right:0;transform:translateX(0.75rem) rotate(90deg)}.stzh-tooltip--placement-right.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-start.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip,.stzh-tooltip--placement-right-end.sc-stzh-tooltip .stzh-tooltip__arrow.sc-stzh-tooltip{left:0;transform:translateX(-0.75rem) rotate(-90deg)}.stzh-tooltip__trigger.sc-stzh-tooltip{display:contents}.stzh-tooltip__content.sc-stzh-tooltip{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);position:absolute;z-index:var(--stzh-z-index-popover);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--color);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);display:flex;flex-direction:row-reverse;--stzh-base-color:var(--color);--stzh-link-color:var(--link-color);--stzh-link-hover-color:var(--hover-link-color)}@supports (filter: var(--stzh-tooltip-drop-shadow)){.stzh-tooltip__content.sc-stzh-tooltip{box-shadow:none;filter:var(--stzh-tooltip-drop-shadow)}}.stzh-tooltip__content-slot.sc-stzh-tooltip{padding:var(--padding)}.stzh-tooltip__close.sc-stzh-tooltip{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background-color:transparent;display:flex;width:2.75rem;height:2.75rem;flex-shrink:0;justify-content:center;align-items:center;color:var(--stzh-color-white);border-radius:var(--stzh-button-border-radius)}.stzh-tooltip__icon.sc-stzh-tooltip{--size:var(--stzh-icon-size-small)}.stzh-tooltip__vhidden.sc-stzh-tooltip{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";
 const ANIMATION_SHOW = {
   keyframes: [
@@ -138,6 +138,7 @@ const StzhTooltip = class {
     this.content = "";
     this.placement = "bottom";
     this.strategy = "absolute";
+    this.size = "default";
     this.skidding = 0;
     this.distance = 12;
     this.interactive = false;