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

@oiz/stzh-components 2.10.0-beta → 2.10.0

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

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

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

package/dist/esm/stzh-skiplink.entry.js CHANGED Viewed

@@ -1,10 +1,46 @@
-import { r as registerInstance, h, a as Host } from './index-bfb5b569.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-bfb5b569.js';
 const stzhSkiplinkCss = ".sc-stzh-skiplink-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-skiplink-h .has-focus.sc-stzh-skiplink{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink{outline-style:none !important}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink::-moz-focus-inner{border:0 !important}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";
 const StzhSkiplink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.stzhFocus = createEvent(this, "stzhFocus", 7);
+    this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.focusedByInput = false;
+    this.onRootFocus = () => {
+      if (!this.focusedByInput) {
+        this.link.focus();
+      }
+      this.focusedByInput = false;
+    };
+    this.onFocus = (event) => {
+      this.focusedByInput = true;
+      // dispatch native focus event
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      // dispatch own focus event for updating flyingfocus position correctly
+      this.stzhFocus.emit({
+        component: "stzh-skiplink",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent("blur", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-skiplink",
+        originalEvent: event
+      });
+    };
     this.label = "";
     this.href = undefined;
     this.linkAccesskey = undefined;
@@ -24,8 +60,9 @@ const StzhSkiplink = class {
     });
   }
   render() {
-    return (h(Host, { focused: this.focused }, h("a", { ref: (el) => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle }, h("div", { ref: (el) => (this.text = el) }, this.label ? this.label : h("slot", null)))));
+    return (h(Host, { focused: this.focused, tabindex: "-1", onFocus: this.onRootFocus }, h("a", { ref: (el) => (this.link = el), class: "stzh-skiplink", href: this.href, accessKey: this.linkAccesskey, title: this.linkTitle, onFocus: this.onFocus, onBlur: this.onBlur }, h("div", { ref: (el) => (this.text = el) }, this.label ? this.label : h("slot", null)))));
   }
+  get element() { return getElement(this); }
 };
 StzhSkiplink.style = stzhSkiplinkCss;

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

	@@ -1 +1 @@
1	- {"file":"stzh-skiplink.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,swDAAswD;;~~MCiBjxD~~,YAAY~~;;;iBAEC~~,EAAE;;;;;mBAmBE,KAAK;;~~EAGjC~~,cAAc;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,eAAe;IACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;~~EAKD~~,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC9F,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,~~IACzB~~,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAClD,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,~~IAErB~~,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACJ,CACC,EACP;GACH~~;;;;;;~~","names":[],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /* Label /\n @Prop() label: string = \"\";\n\n /* href for linking to e.g. id of an element to skip to /\n @Prop() href: string;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Link title for description e.g. how to use skiplink with access key ([ALT + 1]) /\n @Prop() linkTitle: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Whether the skiplink is currently focused */\n @State() focused: boolean = false;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link.setAttribute(\"s-object-id\", this.analyticsId \|\| this.label \|\| this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-skiplink.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,swDAAswD;;MCyBjxD,YAAY;;;;;IA2Cf,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACnB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;MAG3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;;MAGvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MAEtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;iBAnFuB,EAAE;;;;;mBAmBE,KAAK;;EAWjC,cAAc;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,eAAe;IACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAgDD,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC9F,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAClE,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAClD,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACJ,CACC,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n} from \"@stencil/core\";\n\nimport {\n StzhSkiplinkFocusEvent,\n StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /* Label /\n @Prop() label: string = \"\";\n\n /* href for linking to e.g. id of an element to skip to /\n @Prop() href: string;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Link title for description e.g. how to use skiplink with access key ([ALT + 1]) /\n @Prop() linkTitle: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Whether the skiplink is currently focused /\n @State() focused: boolean = false;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n /* Blur event */\n @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n @Element() element: HTMLStzhSkiplinkElement;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n // dispatch native focus event\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n\n // dispatch own focus event for updating flyingfocus position correctly\n this.stzhFocus.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n\n this.stzhBlur.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link.setAttribute(\"s-object-id\", this.analyticsId \|\| this.label \|\| this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-vbz-carousel.entry.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-bfb5b569.js';
+const stzhVbzCarouselCss = ".sc-stzh-vbz-carousel-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-vbz-carousel-h{display:none}.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::before,.sc-stzh-vbz-carousel-h *.sc-stzh-vbz-carousel::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-vbz-carousel-h .has-focus.sc-stzh-vbz-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel{outline-style:none !important}.sc-stzh-vbz-carousel-h .stzh-fylingfocus-focused.sc-stzh-vbz-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:(328 / 585)}@media screen and (min-width: 600px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:(330 / 1025)}}@media screen and (min-width: 1024px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:(555 / 1440)}}@media screen and (min-width: 1260px){.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s>stzh-ratio,.sc-stzh-vbz-carousel-h .sc-stzh-vbz-carousel-s stzh-ratio{--ratio:(1120 / 2880)}}";
+const StzhVbzCarousel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.onDisturbanceFetched = (event) => {
+      if (event.detail.disturbance) {
+        this.hideElement();
+      }
+    };
+    this.autoplayTimeout = 9000;
+  }
+  hideElement() {
+    this.element.hidden = true;
+  }
+  async connectedCallback() {
+    this.majorTicker = document.querySelector("stzh-vbz-majorticker");
+    if (this.majorTicker) {
+      const disturbance = await this.majorTicker.getDisturbance();
+      if (disturbance) {
+        this.hideElement();
+      }
+      else {
+        this.majorTicker.addEventListener("stzhDisturbanceFetched", this.onDisturbanceFetched);
+      }
+    }
+  }
+  disconnectedCallback() {
+    if (this.majorTicker) {
+      this.majorTicker.removeEventListener("stzhDisturbanceFetched", this.onDisturbanceFetched);
+    }
+  }
+  render() {
+    const classes = {
+      "stzh-vbz-carousel": true,
+    };
+    return (h(Host, null, h("div", { class: classes }, h("stzh-carousel", { noPeek: true, nonInteractive: true, preventMouseDrag: true, preventAutoplayPause: true, preventAutoplayStop: true, autoplay: true, autoplayTimeout: this.autoplayTimeout }, h("slot", null)))));
+  }
+  get element() { return getElement(this); }
+};
+StzhVbzCarousel.style = stzhVbzCarouselCss;
+export { StzhVbzCarousel as stzh_vbz_carousel };
+//# sourceMappingURL=stzh-vbz-carousel.entry.js.map

package/dist/esm/stzh-vbz-carousel.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"stzh-vbz-carousel.entry.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,0lDAA0lD;;MCoBxmD,eAAe;;;IAYlB,yBAAoB,GAAG,CAAC,KAA6D;MAC3F,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;KACF,CAAA;2BAdiC,IAAI;;EAM9B,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;GAC5B;EAQD,MAAM,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,WAAW,EAAE;MACvB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;MAEzD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;WAAM;QACL,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;OACxF;KACF;GACF;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC3F;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;KAC1B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,qBACE,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,EAC1B,mBAAmB,EAAE,IAAI,EACzB,QAAQ,QACR,eAAe,EAAE,IAAI,CAAC,eAAe,IACrC,eAAa,CACC,CACZ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-vbz-carousel/stzh-vbz-carousel.scss?tag=stzh-vbz-carousel&encapsulation=scoped","src/components/stzh-vbz-carousel/stzh-vbz-carousel.tsx"],"sourcesContent":[":host {\n ::slotted(stzh-ratio),\n ::slotted(*) stzh-ratio {\n --ratio: (328 / 585);\n\n @include mq($from: small) {\n --ratio: (330 / 1025);\n }\n\n @include mq($from: medium) {\n --ratio: (555 / 1440);\n }\n\n @include mq($from: large) {\n --ratio: (1120 / 2880);\n }\n }\n}\n\n.stzh-vbz-carousel {\n\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n} from \"@stencil/core\";\n\nimport {\n StzhVbzMajortickerDisturbanceFetchedEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot any element\n */\n@Component({\n tag: \"stzh-vbz-carousel\",\n styleUrl: \"stzh-vbz-carousel.scss\",\n scoped: true\n})\nexport class StzhVbzCarousel {\n /** Timeout delay in milliseconds used for autoplay */\n @Prop() autoplayTimeout: number = 9000;\n\n @Element() element: HTMLStzhFigureElement;\n\n private majorTicker: HTMLStzhVbzMajortickerElement;\n\n private hideElement() {\n this.element.hidden = true;\n }\n\n private onDisturbanceFetched = (event: CustomEvent<StzhVbzMajortickerDisturbanceFetchedEvent>) => {\n if (event.detail.disturbance) {\n this.hideElement();\n }\n }\n\n async connectedCallback() {\n\t\tthis.majorTicker = document.querySelector(\"stzh-vbz-majorticker\");\n\n if (this.majorTicker) {\n\t\t\tconst disturbance = await this.majorTicker.getDisturbance();\n\n if (disturbance) {\n this.hideElement();\n } else {\n this.majorTicker.addEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n }\n }\n }\n\n disconnectedCallback() {\n if (this.majorTicker) {\n this.majorTicker.removeEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n }\n }\n\n render() {\n const classes = {\n \"stzh-vbz-carousel\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <stzh-carousel\n noPeek={true}\n nonInteractive={true}\n preventMouseDrag={true}\n preventAutoplayPause={true}\n preventAutoplayStop={true}\n autoplay\n autoplayTimeout={this.autoplayTimeout}>\n <slot></slot>\n </stzh-carousel>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm-es5/{app-globals-503e5649.js → app-globals-fecef0e2.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a))e[a]=t[a]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,n,r){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function i(e){try{d(r.next(e))}catch(e){o(e)}}function s(e){try{d(r["throw"](e))}catch(e){o(e)}}function d(e){e.done?n(e.value):a(e.value).then(i,s)}d((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(e){return function(t){return d([e,t])}}function d(s){if(r)throw new TypeError("Generator is already executing.");while(i&&(i=0,s[0]&&(n=0)),n)try{if(r=1,a&&(o=s[0]&2?a["return"]:s[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,s[1])).done)return o;if(a=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;a=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];a=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function _classCallCheck(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}(function(){if(typeof window==="undefined"){return}var e=Array.prototype.slice;var t=Element.prototype.matches||Element.prototype.msMatchesSelector;var n=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","details","summary","iframe","object","embed","[contenteditable]"].join(",");var r=function(){function r(e,t){_classCallCheck(this,r);this._inertManager=t;this._rootElement=e;this._managedNodes=new Set;if(this._rootElement.hasAttribute("aria-hidden")){this._savedAriaHidden=this._rootElement.getAttribute("aria-hidden")}else{this._savedAriaHidden=null}this._rootElement.setAttribute("aria-hidden","true");this._makeSubtreeUnfocusable(this._rootElement);this._observer=new MutationObserver(this._onMutation.bind(this));this._observer.observe(this._rootElement,{attributes:true,childList:true,subtree:true})}_createClass(r,[{key:"destructor",value:function e(){this._observer.disconnect();if(this._rootElement){if(this._savedAriaHidden!==null){this._rootElement.setAttribute("aria-hidden",this._savedAriaHidden)}else{this._rootElement.removeAttribute("aria-hidden")}}this._managedNodes.forEach((function(e){this._unmanageNode(e.node)}),this);this._observer=null;this._rootElement=null;this._managedNodes=null;this._inertManager=null}},{key:"_makeSubtreeUnfocusable",value:function e(t){var n=this;i(t,(function(e){return n._visitNode(e)}));var r=document.activeElement;if(!document.body.contains(t)){var a=t;var o=undefined;while(a){if(a.nodeType===Node.DOCUMENT_FRAGMENT_NODE){o=a;break}a=a.parentNode}if(o){r=o.activeElement}}if(t.contains(r)){r.blur();if(r===document.activeElement){document.body.focus()}}}},{key:"_visitNode",value:function e(r){if(r.nodeType!==Node.ELEMENT_NODE){return}var a=r;if(a!==this._rootElement&&a.hasAttribute("inert")){this._adoptInertRoot(a)}if(t.call(a,n)||a.hasAttribute("tabindex")){this._manageNode(a)}}},{key:"_manageNode",value:function e(t){var n=this._inertManager.register(t,this);this._managedNodes.add(n)}},{key:"_unmanageNode",value:function e(t){var n=this._inertManager.deregister(t,this);if(n){this._managedNodes["delete"](n)}}},{key:"_unmanageSubtree",value:function e(t){var n=this;i(t,(function(e){return n._unmanageNode(e)}))}},{key:"_adoptInertRoot",value:function e(t){var n=this._inertManager.getInertRoot(t);if(!n){this._inertManager.setInert(t,true);n=this._inertManager.getInertRoot(t)}n.managedNodes.forEach((function(e){this._manageNode(e.node)}),this)}},{key:"_onMutation",value:function t(n,r){n.forEach((function(t){var n=t.target;if(t.type==="childList"){e.call(t.addedNodes).forEach((function(e){this._makeSubtreeUnfocusable(e)}),this);e.call(t.removedNodes).forEach((function(e){this._unmanageSubtree(e)}),this)}else if(t.type==="attributes"){if(t.attributeName==="tabindex"){this._manageNode(n)}else if(n!==this._rootElement&&t.attributeName==="inert"&&n.hasAttribute("inert")){this._adoptInertRoot(n);var r=this._inertManager.getInertRoot(n);this._managedNodes.forEach((function(e){if(n.contains(e.node)){r._manageNode(e.node)}}))}}}),this)}},{key:"managedNodes",get:function e(){return new Set(this._managedNodes)}},{key:"hasSavedAriaHidden",get:function e(){return this._savedAriaHidden!==null}},{key:"savedAriaHidden",set:function e(t){this._savedAriaHidden=t},get:function e(){return this._savedAriaHidden}}]);return r}();var a=function(){function e(t,n){_classCallCheck(this,e);this._node=t;this._overrodeFocusMethod=false;this._inertRoots=new Set([n]);this._savedTabIndex=null;this._destroyed=false;this.ensureUntabbable()}_createClass(e,[{key:"destructor",value:function e(){this._throwIfDestroyed();if(this._node&&this._node.nodeType===Node.ELEMENT_NODE){var t=this._node;if(this._savedTabIndex!==null){t.setAttribute("tabindex",this._savedTabIndex)}else{t.removeAttribute("tabindex")}if(this._overrodeFocusMethod){delete t.focus}}this._node=null;this._inertRoots=null;this._destroyed=true}},{key:"_throwIfDestroyed",value:function e(){if(this.destroyed){throw new Error("Trying to access destroyed InertNode")}}},{key:"ensureUntabbable",value:function e(){if(this.node.nodeType!==Node.ELEMENT_NODE){return}var r=this.node;if(t.call(r,n)){if(r.tabIndex===-1&&this.hasSavedTabIndex){return}if(r.hasAttribute("tabindex")){this._savedTabIndex=r.tabIndex}r.setAttribute("tabindex","-1");if(r.nodeType===Node.ELEMENT_NODE){r.focus=function(){};this._overrodeFocusMethod=true}}else if(r.hasAttribute("tabindex")){this._savedTabIndex=r.tabIndex;r.removeAttribute("tabindex")}}},{key:"addInertRoot",value:function e(t){this._throwIfDestroyed();this._inertRoots.add(t)}},{key:"removeInertRoot",value:function e(t){this._throwIfDestroyed();this._inertRoots["delete"](t);if(this._inertRoots.size===0){this.destructor()}}},{key:"destroyed",get:function e(){return this._destroyed}},{key:"hasSavedTabIndex",get:function e(){return this._savedTabIndex!==null}},{key:"node",get:function e(){this._throwIfDestroyed();return this._node}},{key:"savedTabIndex",set:function e(t){this._throwIfDestroyed();this._savedTabIndex=t},get:function e(){this._throwIfDestroyed();return this._savedTabIndex}}]);return e}();var o=function(){function n(e){_classCallCheck(this,n);if(!e){throw new Error("Missing required argument; InertManager needs to wrap a document.")}this._document=e;this._managedNodes=new Map;this._inertRoots=new Map;this._observer=new MutationObserver(this._watchForInert.bind(this));s(e.head||e.body||e.documentElement);if(e.readyState==="loading"){e.addEventListener("DOMContentLoaded",this._onDocumentLoaded.bind(this))}else{this._onDocumentLoaded()}}_createClass(n,[{key:"setInert",value:function e(t,n){if(n){if(this._inertRoots.has(t)){return}var a=new r(t,this);t.setAttribute("inert","");this._inertRoots.set(t,a);if(!this._document.body.contains(t)){var o=t.parentNode;while(o){if(o.nodeType===11){s(o)}o=o.parentNode}}}else{if(!this._inertRoots.has(t)){return}var i=this._inertRoots.get(t);i.destructor();this._inertRoots["delete"](t);t.removeAttribute("inert")}}},{key:"getInertRoot",value:function e(t){return this._inertRoots.get(t)}},{key:"register",value:function e(t,n){var r=this._managedNodes.get(t);if(r!==undefined){r.addInertRoot(n)}else{r=new a(t,n)}this._managedNodes.set(t,r);return r}},{key:"deregister",value:function e(t,n){var r=this._managedNodes.get(t);if(!r){return null}r.removeInertRoot(n);if(r.destroyed){this._managedNodes["delete"](t)}return r}},{key:"_onDocumentLoaded",value:function t(){var n=e.call(this._document.querySelectorAll("[inert]"));n.forEach((function(e){this.setInert(e,true)}),this);this._observer.observe(this._document.body||this._document.documentElement,{attributes:true,subtree:true,childList:true})}},{key:"_watchForInert",value:function n(r,a){var o=this;r.forEach((function(n){switch(n.type){case"childList":e.call(n.addedNodes).forEach((function(n){if(n.nodeType!==Node.ELEMENT_NODE){return}var r=e.call(n.querySelectorAll("[inert]"));if(t.call(n,"[inert]")){r.unshift(n)}r.forEach((function(e){this.setInert(e,true)}),o)}),o);break;case"attributes":if(n.attributeName!=="inert"){return}var r=n.target;var a=r.hasAttribute("inert");o.setInert(r,a);break}}),this)}}]);return n}();function i(e,t,n){if(e.nodeType==Node.ELEMENT_NODE){var r=e;if(t){t(r)}var a=r.shadowRoot;if(a){i(a,t);return}if(r.localName=="content"){var o=r;var s=o.getDistributedNodes?o.getDistributedNodes():[];for(var d=0;d<s.length;d++){i(s[d],t)}return}if(r.localName=="slot"){var u=r;var l=u.assignedNodes?u.assignedNodes({flatten:true}):[];for(var c=0;c<l.length;c++){i(l[c],t)}return}}var f=e.firstChild;while(f!=null){i(f,t);f=f.nextSibling}}function s(e){if(e.querySelector("style#inert-style, link#inert-style")){return}var t=document.createElement("style");t.setAttribute("id","inert-style");t.textContent="\n"+"[inert] {\n"+"  pointer-events: none;\n"+"  cursor: default;\n"+"}\n"+"\n"+"[inert], [inert] * {\n"+"  -webkit-user-select: none;\n"+"  -moz-user-select: none;\n"+"  -ms-user-select: none;\n"+"  user-select: none;\n"+"}\n";e.appendChild(t)}if(!HTMLElement.prototype.hasOwnProperty("inert")){var d=new o(document);Object.defineProperty(HTMLElement.prototype,"inert",{enumerable:true,get:function e(){return this.hasAttribute("inert")},set:function e(t){d.setInert(this,t)}})}})();var name="@oiz/stzh-components";var version="2.10.0-beta";var packageName=name.substring(name.indexOf("/")+1);function applyAutofocus(){window.addEventListener("appload",(function(e){var t=document.querySelector("[autofocus]");if(t&&e.detail.namespace===packageName&&t.tagName.toLowerCase().indexOf("stzh-")===0&&"setFocus"in t){t.setFocus()}}))}function observeScrollbarWidth(){var e={threshold:1};var t=function(e){e.forEach((function(e){var t=0;if(e.intersectionRatio<1){t=window.innerWidth-document.body.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",t+"px")}))};var n=new IntersectionObserver(t,e);n.observe(document.body)}function format(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.format(e,t)}function parse(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.parse(e,t)}function formatSpan(e,t,n){if(n===void 0){n="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var r=window.stzhComponents.translations,a=r.$formats,o=r.$globals;var i=createFormatParseAdapter(a,o);return i.formatSpan(e,t,n)}function parseSpan(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.parseSpan(e,t)}function createFormatParseAdapter(e,t){var n=function(e,n){if(!n||!(n instanceof Date)||isNaN(n.getTime())){return""}var r=n.getDate().toString(10);var a=r;var o=(n.getMonth()+1).toString(10);var i=o;var s=n.getFullYear().toString(10);var d=n.getHours().toString(10);var u=d;var l=n.getMinutes().toString(10);var c=t.monthNames[n.getMonth()];var f=t.monthNamesShort[n.getMonth()];var h=t.dayNames[n.getDay()];if(n.getMonth()<9){i="0".concat(i)}if(n.getDate()<10){a="0".concat(a)}if(n.getHours()<10){u="0".concat(u)}if(n.getMinutes()<10){l="0".concat(l)}return e.replace(/\{j\}/g,r).replace(/\{d\}/g,a).replace(/\{l\}/g,h).replace(/\{n\}/g,o).replace(/\{m\}/g,i).replace(/\{F\}/g,c).replace(/\{M\}/g,f).replace(/\{Y\}/g,s).replace(/\{H\}/g,u).replace(/\{G\}/g,d).replace(/\{i\}/g,l)};var r=function(e,t){if(!t){return}var n=new RegExp(e);var r=t.match(n);if(r){var a=r.groups;var o=parseInt(a.Y||"",10);var i=parseInt(a.n||a.m||"",10);var s=parseInt(a.j||a.d||"",10);var d=parseInt(a.G||a.H||"",10);var u=parseInt(a.i||"",10);if(!isNaN(o)&&(o<1e3||o>9999)){return}if(!isNaN(i)&&(i<1||i>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(d)&&(d<0||d>23)){return}if(!isNaN(u)&&(u<0||u>59)){return}var l=new Date(!isNaN(o)?o:null,!isNaN(i)?i-1:null,!isNaN(s)?s:null,!isNaN(d)?d:null,!isNaN(u)?u:null);if(l.getMonth()+1!==i){return}return l}};var a={format:function(t,r){var a;if(r===void 0){r="datetime"}var o=__assign(__assign({},e[r]),((a=window.stzhComponents)===null||a===void 0?void 0:a.formats[r])||{});if(typeof o.format==="string"){return n(o.format,t)}else{return o.format(t)}},parse:function(t,n){var a;if(n===void 0){n="datetime"}var o=__assign(__assign({},e[n]),((a=window.stzhComponents)===null||a===void 0?void 0:a.formats[n])||{});if(typeof o.parse==="string"){return r(o.parse,t)}else{return o.parse(t)}},formatSpan:function(e,n,r){if(r===void 0){r="datetime"}var a=e;var o=n;if(e instanceof Date){a=this.format(e,r)}if(n instanceof Date){o=this.format(n,r)}var i=t.dateRange;if(r.startsWith("time")){i=t.timeRange}return"".concat(a).concat(i).concat(o)},parseSpan:function(e,n){var r=t.dateRange;if(n.startsWith("time")){r=t.timeRange}var a=e.split(r);var o=this.parse(a[0],n);var i=this.parse(a[1],n);return[o,i,r]}};return a}function getLocale(e){var t=e.closest("[lang]");var n=t&&t.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(n)===-1||!n){return window.stzhComponents.defaultLocale}else{return n}}function fetchTranslations(e,t){return __awaiter(this,void 0,void 0,(function(){var n,r,a,o,i;return __generator(this,(function(s){switch(s.label){case 0:n=getLocale(e);r=JSON.parse(sessionStorage.getItem("stzhComponents.v".concat(window.stzhComponents.version,".i18n.").concat(n)));if(window.stzhComponents.cacheTranslations&&window.stzhComponents.version.match(/-dev-snapshot/i)===null&&r&&Object.keys(r).length>0){return[2,__assign(__assign({},r[t]||{}),{$globals:r.$globals,$locale:r.$code,$formats:r.$formats})]}s.label=1;case 1:s.trys.push([1,5,,6]);return[4,fetch("".concat(window.stzhComponents.pathTranslations,"/").concat(n,".json"))];case 2:a=s.sent();if(!a.ok)return[3,4];return[4,a.json()];case 3:o=s.sent();sessionStorage.setItem("stzhComponents.v".concat(window.stzhComponents.version,".i18n.").concat(n),JSON.stringify(o));return[2,__assign(__assign({},o[t]||{}),{$globals:o.$globals,$locale:o.$code,$formats:o.$formats})];case 4:return[3,6];case 5:i=s.sent();console.error("Error loading locale: ".concat(n),i);return[3,6];case 6:return[2]}}))}))}var utils=Object.freeze({__proto__:null,format:format,parse:parse,formatSpan:formatSpan,parseSpan:parseSpan,createFormatParseAdapter:createFormatParseAdapter,fetchTranslations:fetchTranslations});function appGlobalScript(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",labels:"fixed",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null},window.stzhComponents||{}),{version:version,supportedLocales:["de","en"],utils:utils});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=fetchTranslations(document.documentElement).then((function(e){window.stzhComponents.translations=e})).catch((function(e){console.error("Translations couldn't load:",e)}))}applyAutofocus();observeScrollbarWidth()}var globalScripts=appGlobalScript;export{globalScripts as g};
-//# sourceMappingURL=app-globals-503e5649.js.map
+var __assign=this&&this.__assign||function(){__assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++){t=arguments[n];for(var a in t)if(Object.prototype.hasOwnProperty.call(t,a))e[a]=t[a]}return e};return __assign.apply(this,arguments)};var __awaiter=this&&this.__awaiter||function(e,t,n,r){function a(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,o){function i(e){try{d(r.next(e))}catch(e){o(e)}}function s(e){try{d(r["throw"](e))}catch(e){o(e)}}function d(e){e.done?n(e.value):a(e.value).then(i,s)}d((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},r,a,o,i;return i={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function s(e){return function(t){return d([e,t])}}function d(s){if(r)throw new TypeError("Generator is already executing.");while(i&&(i=0,s[0]&&(n=0)),n)try{if(r=1,a&&(o=s[0]&2?a["return"]:s[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,s[1])).done)return o;if(a=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;a=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(o=n.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){n.label=s[1];break}if(s[0]===6&&n.label<o[1]){n.label=o[1];o=s;break}if(o&&n.label<o[2]){n.label=o[2];n.ops.push(s);break}if(o[2])n.ops.pop();n.trys.pop();continue}s=t.call(e,n)}catch(e){s=[6,e];a=0}finally{r=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};var _createClass=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(e,r.key,r)}}return function(t,n,r){if(n)e(t.prototype,n);if(r)e(t,r);return t}}();function _classCallCheck(e,t){if(!(e instanceof t)){throw new TypeError("Cannot call a class as a function")}}(function(){if(typeof window==="undefined"){return}var e=Array.prototype.slice;var t=Element.prototype.matches||Element.prototype.msMatchesSelector;var n=["a[href]","area[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","details","summary","iframe","object","embed","[contenteditable]"].join(",");var r=function(){function r(e,t){_classCallCheck(this,r);this._inertManager=t;this._rootElement=e;this._managedNodes=new Set;if(this._rootElement.hasAttribute("aria-hidden")){this._savedAriaHidden=this._rootElement.getAttribute("aria-hidden")}else{this._savedAriaHidden=null}this._rootElement.setAttribute("aria-hidden","true");this._makeSubtreeUnfocusable(this._rootElement);this._observer=new MutationObserver(this._onMutation.bind(this));this._observer.observe(this._rootElement,{attributes:true,childList:true,subtree:true})}_createClass(r,[{key:"destructor",value:function e(){this._observer.disconnect();if(this._rootElement){if(this._savedAriaHidden!==null){this._rootElement.setAttribute("aria-hidden",this._savedAriaHidden)}else{this._rootElement.removeAttribute("aria-hidden")}}this._managedNodes.forEach((function(e){this._unmanageNode(e.node)}),this);this._observer=null;this._rootElement=null;this._managedNodes=null;this._inertManager=null}},{key:"_makeSubtreeUnfocusable",value:function e(t){var n=this;i(t,(function(e){return n._visitNode(e)}));var r=document.activeElement;if(!document.body.contains(t)){var a=t;var o=undefined;while(a){if(a.nodeType===Node.DOCUMENT_FRAGMENT_NODE){o=a;break}a=a.parentNode}if(o){r=o.activeElement}}if(t.contains(r)){r.blur();if(r===document.activeElement){document.body.focus()}}}},{key:"_visitNode",value:function e(r){if(r.nodeType!==Node.ELEMENT_NODE){return}var a=r;if(a!==this._rootElement&&a.hasAttribute("inert")){this._adoptInertRoot(a)}if(t.call(a,n)||a.hasAttribute("tabindex")){this._manageNode(a)}}},{key:"_manageNode",value:function e(t){var n=this._inertManager.register(t,this);this._managedNodes.add(n)}},{key:"_unmanageNode",value:function e(t){var n=this._inertManager.deregister(t,this);if(n){this._managedNodes["delete"](n)}}},{key:"_unmanageSubtree",value:function e(t){var n=this;i(t,(function(e){return n._unmanageNode(e)}))}},{key:"_adoptInertRoot",value:function e(t){var n=this._inertManager.getInertRoot(t);if(!n){this._inertManager.setInert(t,true);n=this._inertManager.getInertRoot(t)}n.managedNodes.forEach((function(e){this._manageNode(e.node)}),this)}},{key:"_onMutation",value:function t(n,r){n.forEach((function(t){var n=t.target;if(t.type==="childList"){e.call(t.addedNodes).forEach((function(e){this._makeSubtreeUnfocusable(e)}),this);e.call(t.removedNodes).forEach((function(e){this._unmanageSubtree(e)}),this)}else if(t.type==="attributes"){if(t.attributeName==="tabindex"){this._manageNode(n)}else if(n!==this._rootElement&&t.attributeName==="inert"&&n.hasAttribute("inert")){this._adoptInertRoot(n);var r=this._inertManager.getInertRoot(n);this._managedNodes.forEach((function(e){if(n.contains(e.node)){r._manageNode(e.node)}}))}}}),this)}},{key:"managedNodes",get:function e(){return new Set(this._managedNodes)}},{key:"hasSavedAriaHidden",get:function e(){return this._savedAriaHidden!==null}},{key:"savedAriaHidden",set:function e(t){this._savedAriaHidden=t},get:function e(){return this._savedAriaHidden}}]);return r}();var a=function(){function e(t,n){_classCallCheck(this,e);this._node=t;this._overrodeFocusMethod=false;this._inertRoots=new Set([n]);this._savedTabIndex=null;this._destroyed=false;this.ensureUntabbable()}_createClass(e,[{key:"destructor",value:function e(){this._throwIfDestroyed();if(this._node&&this._node.nodeType===Node.ELEMENT_NODE){var t=this._node;if(this._savedTabIndex!==null){t.setAttribute("tabindex",this._savedTabIndex)}else{t.removeAttribute("tabindex")}if(this._overrodeFocusMethod){delete t.focus}}this._node=null;this._inertRoots=null;this._destroyed=true}},{key:"_throwIfDestroyed",value:function e(){if(this.destroyed){throw new Error("Trying to access destroyed InertNode")}}},{key:"ensureUntabbable",value:function e(){if(this.node.nodeType!==Node.ELEMENT_NODE){return}var r=this.node;if(t.call(r,n)){if(r.tabIndex===-1&&this.hasSavedTabIndex){return}if(r.hasAttribute("tabindex")){this._savedTabIndex=r.tabIndex}r.setAttribute("tabindex","-1");if(r.nodeType===Node.ELEMENT_NODE){r.focus=function(){};this._overrodeFocusMethod=true}}else if(r.hasAttribute("tabindex")){this._savedTabIndex=r.tabIndex;r.removeAttribute("tabindex")}}},{key:"addInertRoot",value:function e(t){this._throwIfDestroyed();this._inertRoots.add(t)}},{key:"removeInertRoot",value:function e(t){this._throwIfDestroyed();this._inertRoots["delete"](t);if(this._inertRoots.size===0){this.destructor()}}},{key:"destroyed",get:function e(){return this._destroyed}},{key:"hasSavedTabIndex",get:function e(){return this._savedTabIndex!==null}},{key:"node",get:function e(){this._throwIfDestroyed();return this._node}},{key:"savedTabIndex",set:function e(t){this._throwIfDestroyed();this._savedTabIndex=t},get:function e(){this._throwIfDestroyed();return this._savedTabIndex}}]);return e}();var o=function(){function n(e){_classCallCheck(this,n);if(!e){throw new Error("Missing required argument; InertManager needs to wrap a document.")}this._document=e;this._managedNodes=new Map;this._inertRoots=new Map;this._observer=new MutationObserver(this._watchForInert.bind(this));s(e.head||e.body||e.documentElement);if(e.readyState==="loading"){e.addEventListener("DOMContentLoaded",this._onDocumentLoaded.bind(this))}else{this._onDocumentLoaded()}}_createClass(n,[{key:"setInert",value:function e(t,n){if(n){if(this._inertRoots.has(t)){return}var a=new r(t,this);t.setAttribute("inert","");this._inertRoots.set(t,a);if(!this._document.body.contains(t)){var o=t.parentNode;while(o){if(o.nodeType===11){s(o)}o=o.parentNode}}}else{if(!this._inertRoots.has(t)){return}var i=this._inertRoots.get(t);i.destructor();this._inertRoots["delete"](t);t.removeAttribute("inert")}}},{key:"getInertRoot",value:function e(t){return this._inertRoots.get(t)}},{key:"register",value:function e(t,n){var r=this._managedNodes.get(t);if(r!==undefined){r.addInertRoot(n)}else{r=new a(t,n)}this._managedNodes.set(t,r);return r}},{key:"deregister",value:function e(t,n){var r=this._managedNodes.get(t);if(!r){return null}r.removeInertRoot(n);if(r.destroyed){this._managedNodes["delete"](t)}return r}},{key:"_onDocumentLoaded",value:function t(){var n=e.call(this._document.querySelectorAll("[inert]"));n.forEach((function(e){this.setInert(e,true)}),this);this._observer.observe(this._document.body||this._document.documentElement,{attributes:true,subtree:true,childList:true})}},{key:"_watchForInert",value:function n(r,a){var o=this;r.forEach((function(n){switch(n.type){case"childList":e.call(n.addedNodes).forEach((function(n){if(n.nodeType!==Node.ELEMENT_NODE){return}var r=e.call(n.querySelectorAll("[inert]"));if(t.call(n,"[inert]")){r.unshift(n)}r.forEach((function(e){this.setInert(e,true)}),o)}),o);break;case"attributes":if(n.attributeName!=="inert"){return}var r=n.target;var a=r.hasAttribute("inert");o.setInert(r,a);break}}),this)}}]);return n}();function i(e,t,n){if(e.nodeType==Node.ELEMENT_NODE){var r=e;if(t){t(r)}var a=r.shadowRoot;if(a){i(a,t);return}if(r.localName=="content"){var o=r;var s=o.getDistributedNodes?o.getDistributedNodes():[];for(var d=0;d<s.length;d++){i(s[d],t)}return}if(r.localName=="slot"){var u=r;var l=u.assignedNodes?u.assignedNodes({flatten:true}):[];for(var c=0;c<l.length;c++){i(l[c],t)}return}}var f=e.firstChild;while(f!=null){i(f,t);f=f.nextSibling}}function s(e){if(e.querySelector("style#inert-style, link#inert-style")){return}var t=document.createElement("style");t.setAttribute("id","inert-style");t.textContent="\n"+"[inert] {\n"+"  pointer-events: none;\n"+"  cursor: default;\n"+"}\n"+"\n"+"[inert], [inert] * {\n"+"  -webkit-user-select: none;\n"+"  -moz-user-select: none;\n"+"  -ms-user-select: none;\n"+"  user-select: none;\n"+"}\n";e.appendChild(t)}if(!HTMLElement.prototype.hasOwnProperty("inert")){var d=new o(document);Object.defineProperty(HTMLElement.prototype,"inert",{enumerable:true,get:function e(){return this.hasAttribute("inert")},set:function e(t){d.setInert(this,t)}})}})();var name="@oiz/stzh-components";var version="2.10.0";var packageName=name.substring(name.indexOf("/")+1);function applyAutofocus(){window.addEventListener("appload",(function(e){var t=document.querySelector("[autofocus]");if(t&&e.detail.namespace===packageName&&t.tagName.toLowerCase().indexOf("stzh-")===0&&"setFocus"in t){t.setFocus()}}))}function observeScrollbarWidth(){var e={threshold:1};var t=function(e){e.forEach((function(e){var t=0;if(e.intersectionRatio<1){t=window.innerWidth-document.body.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",t+"px")}))};var n=new IntersectionObserver(t,e);n.observe(document.body)}function format(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.format(e,t)}function parse(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.parse(e,t)}function formatSpan(e,t,n){if(n===void 0){n="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var r=window.stzhComponents.translations,a=r.$formats,o=r.$globals;var i=createFormatParseAdapter(a,o);return i.formatSpan(e,t,n)}function parseSpan(e,t){if(t===void 0){t="datetime"}if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}var n=window.stzhComponents.translations,r=n.$formats,a=n.$globals;var o=createFormatParseAdapter(r,a);return o.parseSpan(e,t)}function createFormatParseAdapter(e,t){var n=function(e,n){if(!n||!(n instanceof Date)||isNaN(n.getTime())){return""}var r=n.getDate().toString(10);var a=r;var o=(n.getMonth()+1).toString(10);var i=o;var s=n.getFullYear().toString(10);var d=n.getHours().toString(10);var u=d;var l=n.getMinutes().toString(10);var c=t.monthNames[n.getMonth()];var f=t.monthNamesShort[n.getMonth()];var h=t.dayNames[n.getDay()];if(n.getMonth()<9){i="0".concat(i)}if(n.getDate()<10){a="0".concat(a)}if(n.getHours()<10){u="0".concat(u)}if(n.getMinutes()<10){l="0".concat(l)}return e.replace(/\{j\}/g,r).replace(/\{d\}/g,a).replace(/\{l\}/g,h).replace(/\{n\}/g,o).replace(/\{m\}/g,i).replace(/\{F\}/g,c).replace(/\{M\}/g,f).replace(/\{Y\}/g,s).replace(/\{H\}/g,u).replace(/\{G\}/g,d).replace(/\{i\}/g,l)};var r=function(e,t){if(!t){return}var n=new RegExp(e);var r=t.match(n);if(r){var a=r.groups;var o=parseInt(a.Y||"",10);var i=parseInt(a.n||a.m||"",10);var s=parseInt(a.j||a.d||"",10);var d=parseInt(a.G||a.H||"",10);var u=parseInt(a.i||"",10);if(!isNaN(o)&&(o<1e3||o>9999)){return}if(!isNaN(i)&&(i<1||i>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(d)&&(d<0||d>23)){return}if(!isNaN(u)&&(u<0||u>59)){return}var l=new Date(!isNaN(o)?o:null,!isNaN(i)?i-1:null,!isNaN(s)?s:null,!isNaN(d)?d:null,!isNaN(u)?u:null);if(l.getMonth()+1!==i){return}return l}};var a={format:function(t,r){var a;if(r===void 0){r="datetime"}var o=__assign(__assign({},e[r]),((a=window.stzhComponents)===null||a===void 0?void 0:a.formats[r])||{});if(typeof o.format==="string"){return n(o.format,t)}else{return o.format(t)}},parse:function(t,n){var a;if(n===void 0){n="datetime"}var o=__assign(__assign({},e[n]),((a=window.stzhComponents)===null||a===void 0?void 0:a.formats[n])||{});if(typeof o.parse==="string"){return r(o.parse,t)}else{return o.parse(t)}},formatSpan:function(e,n,r){if(r===void 0){r="datetime"}var a=e;var o=n;if(e instanceof Date){a=this.format(e,r)}if(n instanceof Date){o=this.format(n,r)}var i=t.dateRange;if(r.startsWith("time")){i=t.timeRange}return"".concat(a).concat(i).concat(o)},parseSpan:function(e,n){var r=t.dateRange;if(n.startsWith("time")){r=t.timeRange}var a=e.split(r);var o=this.parse(a[0],n);var i=this.parse(a[1],n);return[o,i,r]}};return a}function getLocale(e){var t=e.closest("[lang]");var n=t&&t.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(n)===-1||!n){return window.stzhComponents.defaultLocale}else{return n}}function fetchTranslations(e,t){return __awaiter(this,void 0,void 0,(function(){var n,r,a,o,i;return __generator(this,(function(s){switch(s.label){case 0:n=getLocale(e);r=JSON.parse(sessionStorage.getItem("stzhComponents.v".concat(window.stzhComponents.version,".i18n.").concat(n)));if(window.stzhComponents.cacheTranslations&&window.stzhComponents.version.match(/-dev-snapshot/i)===null&&r&&Object.keys(r).length>0){return[2,__assign(__assign({},r[t]||{}),{$globals:r.$globals,$locale:r.$code,$formats:r.$formats})]}s.label=1;case 1:s.trys.push([1,5,,6]);return[4,fetch("".concat(window.stzhComponents.pathTranslations,"/").concat(n,".json"))];case 2:a=s.sent();if(!a.ok)return[3,4];return[4,a.json()];case 3:o=s.sent();sessionStorage.setItem("stzhComponents.v".concat(window.stzhComponents.version,".i18n.").concat(n),JSON.stringify(o));return[2,__assign(__assign({},o[t]||{}),{$globals:o.$globals,$locale:o.$code,$formats:o.$formats})];case 4:return[3,6];case 5:i=s.sent();console.error("Error loading locale: ".concat(n),i);return[3,6];case 6:return[2]}}))}))}var utils=Object.freeze({__proto__:null,format:format,parse:parse,formatSpan:formatSpan,parseSpan:parseSpan,createFormatParseAdapter:createFormatParseAdapter,fetchTranslations:fetchTranslations});function appGlobalScript(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",labels:"fixed",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null},window.stzhComponents||{}),{version:version,supportedLocales:["de","en"],utils:utils});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=fetchTranslations(document.documentElement).then((function(e){window.stzhComponents.translations=e})).catch((function(e){console.error("Translations couldn't load:",e)}))}applyAutofocus();observeScrollbarWidth()}var globalScripts=appGlobalScript;export{globalScripts as g};
+//# sourceMappingURL=app-globals-fecef0e2.js.map