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

@oiz/stzh-components 3.0.0-beta5 → 3.0.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 (450) hide show

package/dist/stzh-components/p-af7562ba.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as e,a as t,g as s}from"./p-c7bfac7a.js";import{s as a}from"./p-7e304ea3.js";import"./p-9b063923.js";const o=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host ,:host ::before,:host ::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-readspeaker{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--background-color:var(--stzh-readspeaker-background-color, var(--stzh-color-white));--justify-content:var(--stzh-readspeaker-justify-content, space-between);--column-gap:var(--stzh-readspeaker-column-gap, auto);--audio-track-height:0.1875rem;--audio-track-background-color:var(--stzh-readspeaker-audio-track-background-color, var(--stzh-color-black20op));--audio-track-progress-background-color:var(--stzh-readspeaker-audio-track-progress-background-color, var(--stzh-color-secondary40));--dropdown-position:var(--stzh-readspeaker-dropdown-position, absolute);--dropdown-top:var(--stzh-readspeaker-dropdown-top, var(--stzh-form-input-small-height));--dropdown-bottom:var(--stzh-readspeaker-dropdown-bottom, auto);--dropdown-left:var(--stzh-readspeaker-dropdown-left, 0px);--dropdown-right:var(--stzh-readspeaker-dropdown-right, auto);--dropdown-settings-top:var(--stzh-readspeaker-dropdown-settings-top, var(--stzh-form-input-small-height));--dropdown-settings-bottom:var(--stzh-readspeaker-dropdown-settings-bottom, auto);--dropdown-settings-left:var(--stzh-readspeaker-dropdown-settings-left, 0px);--dropdown-settings-right:var(--stzh-readspeaker-dropdown-settings-right, auto)}stzh-readspeaker[hidden]{display:none}stzh-readspeaker::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-readspeaker::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-readspeaker ,stzh-readspeaker ::before,stzh-readspeaker ::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-readspeaker .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-readspeaker .stzh-fylingfocus-focused{outline-style:none !important}stzh-readspeaker .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-readspeaker{--column-gap:var(--stzh-readspeaker-column-gap, var(--stzh-space-medium));--dropdown-top:var(--stzh-readspeaker-dropdown-top, var(--stzh-form-input-tiny-height));--dropdown-settings-top:var(--stzh-readspeaker-dropdown-settings-top, var(--stzh-form-input-tiny-height))}}@media print{stzh-readspeaker{display:none}}.stzh-readspeaker{position:relative;display:flex;align-items:center;-moz-column-gap:var(--column-gap);column-gap:var(--column-gap);justify-content:var(--justify-content)}.stzh-readspeaker__actions{flex-grow:1;display:flex;align-items:center;justify-content:space-between}.stzh-readspeaker stzh-button.stzh-readspeaker__close{display:none}.stzh-readspeaker:has(.rsbtn.rsexpanded) .stzh-readspeaker__close{display:inline-grid}@media screen and (min-width: 600px){.stzh-readspeaker:has(.rsbtn.rsexpanded) .stzh-readspeaker__close{display:none}}.stzh-readspeaker .rsbtn{z-index:var(--stzh-z-index-popover) !important;background:var(--background-color);position:var(--dropdown-position);top:var(--dropdown-top);bottom:var(--dropdown-bottom);left:var(--dropdown-left);right:var(--dropdown-right)}.stzh-readspeaker .rs_splitbutton.rs_splitbutton-exp{display:inline-flex}.stzh-readspeaker .rs_addtools,.stzh-readspeaker .rsbtn{margin-top:var(--audio-track-height);margin-bottom:0px}.stzh-readspeaker [class=\" rsicn-\"],.stzh-readspeaker [class=\" rsicn-\"]:before,.stzh-readspeaker [class^=rsicn-],.stzh-readspeaker [class^=rsicn-]:before{content:\"\";display:block;width:var(--stzh-icon-size);height:var(--stzh-icon-size);background-size:contain;background-position:center center}.stzh-readspeaker .rsicn-pause::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h2v14H6zm10 0h2v14h-2z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_pause:hover .rsicn-pause::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M6 5h2v14H6zm10 0h2v14h-2z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,.stzh-readspeaker .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,.stzh-readspeaker .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M16.394 12 10 7.737v8.526zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,.stzh-readspeaker .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,.stzh-readspeaker .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before{content:\"\";background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M16.394 12 10 7.737v8.526zm2.982.416L8.777 19.482A.5.5 0 0 1 8 19.066V4.934a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-stop::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M7 7v10h10V7zM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_stop:hover .rsicn-stop::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M7 7v10h10V7zM6 5h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-backwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.667 9.223-6.149a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L12 13.333v5.733a.5.5 0 0 1-.777.416L.624 12.416a.5.5 0 0 1 0-.832l10.599-7.066a.5.5 0 0 1 .777.416zm-2 5.596V7.737L3.606 12zm10 0V7.737L13.606 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_rewind:hover .rsicn-backwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.667 9.223-6.149a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L12 13.333v5.733a.5.5 0 0 1-.777.416L.624 12.416a.5.5 0 0 1 0-.832l10.599-7.066a.5.5 0 0 1 .777.416zm-2 5.596V7.737L3.606 12zm10 0V7.737L13.606 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-forwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 13.333-9.223 6.15A.5.5 0 0 1 2 19.065V4.934a.5.5 0 0 1 .777-.416L12 10.668V4.933a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832l-10.599 7.066a.5.5 0 0 1-.777-.416zM10.394 12 4 7.737v8.526zM14 7.737v8.526L20.394 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_forward:hover .rsicn-forwards::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 13.333-9.223 6.15A.5.5 0 0 1 2 19.065V4.934a.5.5 0 0 1 .777-.416L12 10.668V4.933a.5.5 0 0 1 .777-.416l10.599 7.066a.5.5 0 0 1 0 .832l-10.599 7.066a.5.5 0 0 1-.777-.416zM10.394 12 4 7.737v8.526zM14 7.737v8.526L20.394 12z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-volume::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_volume:hover .rsicn-volume::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-speed::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.833 3.337a.595.595 0 0 1 .763.067.59.59 0 0 1 .063.76q-3.27 4.569-3.598 4.897a1.5 1.5 0 0 1-2.122 0 1.5 1.5 0 0 1 0-2.122q.56-.56 4.894-3.602M17.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-11 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m2.318-3.596a1 1 0 1 1-1.416 1.414 1 1 0 0 1 1.416-1.414M12 5.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_speed:hover .rsicn-speed::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16m3.833 3.337a.595.595 0 0 1 .763.067.59.59 0 0 1 .063.76q-3.27 4.569-3.598 4.897a1.5 1.5 0 0 1-2.122 0 1.5 1.5 0 0 1 0-2.122q.56-.56 4.894-3.602M17.5 11a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-11 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2m2.318-3.596a1 1 0 1 1-1.416 1.414 1 1 0 0 1 1.416-1.414M12 5.5a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:focus span.rsicn::before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn::before{content:\"\"}.stzh-readspeaker .rsicn-cross::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.586 7.778-7.778 1.414 1.414L13.414 12l7.778 7.778-1.414 1.414L12 13.414l-7.778 7.778-1.414-1.414L10.586 12 2.808 4.222l1.414-1.414z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_closer:hover .rsicn-cross::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='m12 10.586 7.778-7.778 1.414 1.414L13.414 12l7.778 7.778-1.414 1.414L12 13.414l-7.778 7.778-1.414-1.414L10.586 12 2.808 4.222l1.414-1.414z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rs_addtools .rsbtn_tooltoggle .rsicn::before,.stzh-readspeaker .rsbtn .rsbtn_tooltoggle .rsicn::before{content:\"\"}.stzh-readspeaker .rsicn-arrow-down::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3m0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18m0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tooltoggle:hover .rsicn-arrow-down::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M12 3c-.825 0-1.5.675-1.5 1.5S11.175 6 12 6s1.5-.675 1.5-1.5S12.825 3 12 3m0 15c-.825 0-1.5.675-1.5 1.5S11.175 21 12 21s1.5-.675 1.5-1.5S12.825 18 12 18m0-7.5c-.825 0-1.5.675-1.5 1.5s.675 1.5 1.5 1.5 1.5-.675 1.5-1.5-.675-1.5-1.5-1.5'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker #rsmpl_container .rs-player-loadindicator,.stzh-readspeaker .rsbtn .rs-player-loadindicator{background-color:var(--audio-track-background-color);height:var(--audio-track-height);top:calc(var(--audio-track-height) / -1);left:0;right:0px}.stzh-readspeaker #rsmpl_container .rs-player-loadindicator .rsbtn-loading,.stzh-readspeaker .rsbtn .rs-player-loadindicator .rsbtn-loading,.stzh-readspeaker #rsmpl_container .rs-player-loadindicator .rsbtn-progress,.stzh-readspeaker .rsbtn .rs-player-loadindicator .rsbtn-progress{background-color:var(--audio-track-progress-background-color)}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{display:flex;justify-content:center;align-items:center;border-left:none;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);background-color:transparent;outline:none;float:none}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-]:before{width:var(--stzh-icon-size);height:var(--stzh-icon-size)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item [class^=rsicn-]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class=\" rsicn-\"],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class=\" rsicn-\"]:before,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-],.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle [class^=rsicn-]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class=\" rsicn-\"],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class=\" rsicn-\"]:before,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-],.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle [class^=rsicn-]:before{width:var(--stzh-icon-size-small);height:var(--stzh-icon-size-small)}}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:focus,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:focus,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle:focus,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle:focus{background-color:transparent;outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:hover,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active:hover,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle:hover,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle:hover{background-color:var(--stzh-color-secondary20)}@media screen and (max-width: 599px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item.rsbtn_closer,.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active.rsbtn_closer,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle.rsbtn_closer,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle.rsbtn_closer{display:none}}.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{margin-right:var(--stzh-space-xxxsmall)}.stzh-readspeaker .rs_splitbutton .rsbtn_exp .rsbtn_exp_inner button.rsbtn_pause.rsbtn_player_item{padding-left:0px;padding-right:0px}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop:active span.rsicn{background:transparent}.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{display:flex !important;position:relative;top:0;border-left:none;border-right:none}.stzh-readspeaker .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,.stzh-readspeaker .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle{left:0}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner{position:static;background:transparent;display:inline-flex;border:none;border-radius:0px;gap:var(--stzh-space-xxxsmall)}.stzh-readspeaker .rsbtn .rsbtn_exp,.stzh-readspeaker .rsbtn.rsexpanded .rsbtn_exp .rsbtn_exp_inner{height:auto}.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown{box-sizing:border-box;border:none;width:var(--stzh-form-input-small-height);height:7.25rem;top:var(--stzh-form-input-small-height);margin-top:var(--stzh-space-xxsmall);background-color:var(--stzh-color-grey10);padding:0;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown{width:var(--stzh-form-input-tiny-height);top:var(--stzh-form-input-tiny-height)}}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]{overflow:hidden;-webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;background:transparent;margin:0px;--thumb-height:1.25rem;--thumb-border-width:0.125rem;--thumb-border-color:var(--stzh-color-primary70);--thumb-background-color:var(--stzh-color-white);--track-height:0.5rem;--track-color:var(--stzh-color-black40op);--track-progress-color:var(--stzh-color-secondary60);--clip-edges:0.0625rem}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-thumb{position:relative;-webkit-appearance:none;-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);height:var(--thumb-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range],.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range],.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range],.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-thumb{position:relative;margin:0px;-moz-appearance:none;appearance:none;-moz-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);height:var(--thumb-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-runnable-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-runnable-track{background:linear-gradient(var(--track-color) 0 0) scroll no-repeat center/100% calc(var(--track-height) + 0.0625rem)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track{width:100%;background:var(--track-color)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-progress{-moz-appearance:none;appearance:none;background:var(--track-progress-color);transition-delay:30ms}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-progress,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-track,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-progress{height:calc(var(--track-height) + 0.0625rem);border-radius:var(--track-height)}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-webkit-slider-thumb{--thumb-radius:calc((var(--thumb-height) * 0.5) - 0.0625rem);--clip-top:calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);--clip-bottom:calc(var(--thumb-height) - var(--clip-top));--clip-further:calc(100% + 0.0625rem);--box-fill:calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax var(--track-progress-color);width:var(--thumb-width, var(--thumb-height));background-color:var(--thumb-background-color);border-style:solid;border-width:var(--thumb-border-width);border-color:var(--thumb-border-color);box-shadow:var(--box-fill);border-radius:var(--thumb-width, var(--thumb-height));filter:brightness(100%);-webkit-clip-path:polygon(100% -0.0625rem, var(--clip-edges) -0.0625rem, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further));clip-path:polygon(100% -0.0625rem, var(--clip-edges) -0.0625rem, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further))}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]::-moz-range-thumb{background-color:var(--thumb-background-color);border-style:solid;border-width:var(--thumb-border-width);border-color:var(--thumb-border-color);border:0;width:var(--thumb-width, var(--thumb-height));border-radius:var(--thumb-width, var(--thumb-height));cursor:grab}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active{cursor:-webkit-grabbing;cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active::-webkit-slider-thumb{cursor:-webkit-grabbing;cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:active::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:active::-moz-range-thumb{cursor:grabbing}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled{cursor:not-allowed}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled::-webkit-slider-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled::-webkit-slider-thumb{cursor:not-allowed}.stzh-readspeaker #rs-textsettings input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rs-dialog-esque input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rs-dialog-slider-dropdown input.rs-slider[type=range]:disabled::-moz-range-thumb,.stzh-readspeaker .rsbtn input.rs-slider[type=range]:disabled::-moz-range-thumb{cursor:not-allowed}.stzh-readspeaker .rsbtn .rs-slider.vertical,.stzh-readspeaker .rsbtn .rs-slider.vertical.has-datalist{transform:rotate(270deg) translateX(-0.375rem) translateY(-0.375rem);transform-origin:bottom center;width:6.25rem;height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-readspeaker .rsbtn .rs-slider.vertical,.stzh-readspeaker .rsbtn .rs-slider.vertical.has-datalist{height:var(--stzh-form-input-tiny-height);transform:rotate(270deg) translateX(-1.125rem) translateY(-1.125rem)}}.stzh-readspeaker #rs-textsettings .rs-slider-label,.stzh-readspeaker .rs-dialog-esque .rs-slider-label,.stzh-readspeaker .rs-dialog-slider-dropdown .rs-slider-label,.stzh-readspeaker .rsbtn .rs-slider-label{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);border-radius:0px;border:none;box-shadow:none;color:var(--stzh-color-white);background-color:var(--stzh-color-coolgrey60);height:1.25rem;line-height:1.25rem;padding:0;padding-left:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-xxsmall)}.stzh-readspeaker .rsbtn_powered{display:none}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical{position:absolute;top:var(--dropdown-settings-top);bottom:var(--dropdown-settings-bottom);left:var(--dropdown-settings-left);right:var(--dropdown-settings-right);min-width:initial !important}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools{position:static;border-radius:0px;border:none;margin-top:var(--stzh-space-xxsmall);background-color:var(--stzh-color-grey10);padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li{all:unset}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-large);white-space:nowrap;color:var(--stzh-color-primary70);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool:hover,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool:hover{color:var(--stzh-color-primary80);background-color:var(--stzh-color-secondary20)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-left:var(--stzh-space-xsmall);margin-right:auto;color:inherit}.stzh-readspeaker .rsicn-settings::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.75.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.5 4.337 3 3 0 0 0-4.632 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.5.001a5 5 0 0 1 2.25-2.77 5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334q-.315-.684-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499 0a5 5 0 0 1-2.25 2.77 5 5 0 0 1-3.526.564 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334q.315.684.75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-settings::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M3.34 17a10 10 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A10 10 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 10 10 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A10 10 0 0 1 20.66 7c.433.75.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 10 10 0 0 1-2.5 4.337 3 3 0 0 0-4.632 2.674 10 10 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10 10 0 0 1 3.34 17m5.66.196a5 5 0 0 1 2.25 2.77q.75.071 1.5.001a5 5 0 0 1 2.25-2.77 5 5 0 0 1 3.525-.565q.435-.614.748-1.298A5 5 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334q-.315-.684-.75-1.298A5 5 0 0 1 15 6.804a5 5 0 0 1-2.25-2.77q-.75-.071-1.499 0a5 5 0 0 1-2.25 2.77 5 5 0 0 1-3.526.564 8 8 0 0 0-.748 1.298A5 5 0 0 1 6 12a5 5 0 0 1-1.273 3.334q.315.684.75 1.298A5 5 0 0 1 9 17.196M12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-click-listen::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M13.91 12.36 17 20.854l-2.818 1.026-3.092-8.494-4.172 3.156 1.49-14.909 10.726 10.463z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-click-listen::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M13.91 12.36 17 20.854l-2.818 1.026-3.092-8.494-4.172 3.156 1.49-14.909 10.726 10.463z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-enlarged-text::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154zm-.8-2L8 6.885 5.554 13zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93M19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-enlarged-text::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M11.246 15H4.754l-2 5H.6L7 4h2l6.4 16h-2.154zm-.8-2L8 6.885 5.554 13zM21 12.535V12h2v8h-2v-.535a4 4 0 1 1 0-6.93M19 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='currentColor' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-textmode::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1m-1-2V4H5v16zM8 7h8v2H8zm0 4h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-textmode::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M20 22H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1m-1-2V4H5v16zM8 7h8v2H8zm0 4h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsicn-pagemask::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v5H3v-5h2v3h14v-3zM3 11h18v2H3zm18-3h-2V5H5v3H3V3h18z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rsbtn_tool:hover .rsicn-pagemask::before{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cpath d='M21 16v5H3v-5h2v3h14v-3zM3 11h18v2H3zm18-3h-2V5H5v3H3V3h18z'/%3E%3C/svg%3E\")}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler{margin:0;margin-left:var(--stzh-space-large);background-color:var(--stzh-color-grey70);border-radius:0.75rem;box-sizing:border-box;width:3rem;height:1.5rem;border:none;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .on-icon,.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .off-icon,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .on-icon,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler .off-icon{display:none}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler::after,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler::after{width:1.25rem;height:1.25rem;top:0.125rem;left:0.125rem;transition:all var(--stzh-base-transition-animation-speed);background-color:var(--stzh-color-white)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler{background-color:var(--stzh-color-secondary50)}.stzh-readspeaker .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler::after,.stzh-readspeaker .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler::after{left:calc(50% + 0.125rem);background-color:var(--stzh-color-white)}#readspeaker_tooltip.rs_tooltip{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);z-index:var(--stzh-z-index-popup);border:none;border-radius:0px;box-shadow:none;color:var(--stzh-color-white);background-color:var(--stzh-color-coolgrey60);height:1.25rem;line-height:1.25rem;padding:0;padding-left:var(--stzh-space-xxsmall);padding-right:var(--stzh-space-xxsmall)}.rspopup.rspopup{z-index:var(--stzh-z-index-popup);background:var(--stzh-color-grey10);border:none;border-radius:0px;box-shadow:none}.rspopup.rspopup .rspopup_btn{height:var(--stzh-form-input-small-height);box-sizing:border-box;display:flex;padding:var(--stzh-space-xsmall) var(--stzh-space-large);justify-content:center;align-items:center;gap:var(--stzh-space-xsmall);border-top:none;color:var(--stzh-color-primary70);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.rspopup.rspopup .rspopup_btn:hover{color:var(--stzh-color-primary80);background-color:var(--stzh-color-secondary20)}.rspopup.rspopup .rspopup_btn.rspopup_play::before{content:\"\";margin-right:0;left:0;position:relative;width:var(--stzh-icon-size);height:var(--stzh-icon-size);background-size:contain;background-position:center center;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230F05A0' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.rspopup.rspopup .rspopup_btn.rspopup_play:hover::before{background:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23070066' viewBox='0 0 24 24'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M10 7.22 6.603 10H3v4h3.603L10 16.78zM5.889 16H2a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h3.889l5.294-4.332a.5.5 0 0 1 .817.387v15.89a.5.5 0 0 1-.817.387zm13.517 4.134-1.416-1.416A8.98 8.98 0 0 0 21 12a8.98 8.98 0 0 0-3.304-6.968l1.42-1.42A10.98 10.98 0 0 1 23 12c0 3.223-1.386 6.122-3.594 8.134m-3.543-3.543-1.422-1.422A4 4 0 0 0 16 12c0-1.43-.75-2.685-1.88-3.392l1.439-1.439A5.99 5.99 0 0 1 18 12c0 1.842-.83 3.49-2.137 4.591'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E\")}.rspopup.rspopup .rspopup_btn.rspopup_play::after{content:none}.rspopup.rspopup .rspopup_btn span.rspopup_label{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);top:0}";function n(){return new Promise(((r,e)=>{if(window.ReadSpeaker){r(window.ReadSpeaker);return}const t=document.getElementsByTagName("HEAD").item(0);const s=document.createElement("script");s.type="text/javascript";s.src=`${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;s.id="rs_req_Init";t.appendChild(s);s.onload=function(){window.ReadSpeaker.mobile=window.ReadSpeaker.mobile;r(window.ReadSpeaker)};s.onerror=e}))}window.rsConf={settings:{},general:{enableSkipAlways:true,shadowDomSelector:"stzh-accordion-item,stzh-timeline-item,stzh-disturber"},ui:{tools:{voicesettings:false,controlpanel:false,translation:false,dictionary:false,download:false,help:false,formreading:false}}};let i=0;const l=class{constructor(e){r(this,e);this.onLinkClick=async r=>{r.preventDefault();this.openPlayer()};this.init=()=>{var r;let e=(r=this.triggerElement)===null\|\|r===void 0?void 0:r.firstElementChild;if(!e){const r=Array.from(this.element.children).find((r=>!r.hasAttribute("slot")));e=r}if(e){e.addEventListener("click",this.onLinkClick);a(e,{icon:"volume-medium",href:this.href})}};this.href=undefined}async openPlayer(){var r,e;const t=(e=(r=window.rspkr)===null\|\|r===void 0?void 0:r.ui)===null\|\|e===void 0?void 0:e.getActivePlayer();if(t&&!this.element.contains(t.getContainer())){t.stop()}window.readpage(this.href,this.readspeakerId)}async closePlayer(){var r,e;const t=(e=(r=window.rspkr)===null\|\|r===void 0?void 0:r.ui)===null\|\|e===void 0?void 0:e.getActivePlayer();if(t&&this.element.contains(t.getContainer())){t.close()}}async componentWillLoad(){this.readspeakerId=`stzh-readspeaker-${i++}`}async componentDidLoad(){await n()}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){var r,e;if(this.observer){this.observer.disconnect()}(e=(r=window.rspkr)===null\|\|r===void 0?void 0:r.ui)===null\|\|e===void 0?void 0:e.destroyActivePlayer()}render(){const r={"stzh-readspeaker":true,rs_skip:true};return e(t,null,e("div",{class:r},e("div",{class:"stzh-readspeaker__actions"},e("div",{ref:r=>this.triggerElement=r,class:"stzh-readspeaker__trigger"},e("slot",null)),e("stzh-button",{class:"stzh-readspeaker__close",variant:"tertiary",size:"small",icon:"close-big",iconOnly:true,onClick:()=>{this.closePlayer()}})),e("div",{id:this.readspeakerId,class:"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp"})))}get element(){return s(this)}};l.style=o;export{l as stzh_readspeaker};
2	+ //# sourceMappingURL=p-af7562ba.entry.js.map

package/dist/stzh-components/p-af7562ba.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhReadspeakerCss","loadLibrary","Promise","resolve","reject","window","ReadSpeaker","oHead","document","getElementsByTagName","item","oScript","createElement","type","src","stzhComponents","pathVendors","id","appendChild","onload","mobile","onerror","rsConf","settings","general","enableSkipAlways","shadowDomSelector","ui","tools","voicesettings","controlpanel","translation","dictionary","download","help","formreading","readspeakerCounter","StzhReadspeaker","this","onLinkClick","async","event","preventDefault","openPlayer","init","trigger","_a","triggerElement","firstElementChild","defaultSlot","Array","from","element","children","find","child","hasAttribute","addEventListener","setPropsIfNull","icon","href","activePlayer","_b","rspkr","getActivePlayer","contains","getContainer","stop","readpage","readspeakerId","closePlayer","close","componentWillLoad","componentDidLoad","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","destroyActivePlayer","render","classes","rs_skip","h","Host","class","ref","el","variant","size","iconOnly","onClick"],"sources":["src/components/stzh-readspeaker/stzh-readspeaker.scss?tag=stzh-readspeaker","src/components/stzh-readspeaker/stzh-readspeaker.tsx"],"sourcesContent":["// Note: These styles are all global and note scoped because\n// some elements are created dynamically by the ReadSpeaker library\n\nstzh-readspeaker {\n @include host;\n\n --background-color: var(--stzh-readspeaker-background-color, #{$colorWhite});\n --justify-content: var(--stzh-readspeaker-justify-content, space-between);\n --column-gap: var(--stzh-readspeaker-column-gap, auto);\n\n --audio-track-height: 3px;\n --audio-track-background-color: var(--stzh-readspeaker-audio-track-background-color, #{$colorBlack20op});\n --audio-track-progress-background-color: var(--stzh-readspeaker-audio-track-progress-background-color, #{$colorSecondary40});\n\n --dropdown-position: var(--stzh-readspeaker-dropdown-position, absolute);\n --dropdown-top: var(--stzh-readspeaker-dropdown-top, #{$formInputHeightSmall});\n --dropdown-bottom: var(--stzh-readspeaker-dropdown-bottom, auto);\n --dropdown-left: var(--stzh-readspeaker-dropdown-left, 0px);\n --dropdown-right: var(--stzh-readspeaker-dropdown-right, auto);\n\n --dropdown-settings-top: var(--stzh-readspeaker-dropdown-settings-top, #{$formInputHeightSmall});\n --dropdown-settings-bottom: var(--stzh-readspeaker-dropdown-settings-bottom, auto);\n --dropdown-settings-left: var(--stzh-readspeaker-dropdown-settings-left, 0px);\n --dropdown-settings-right: var(--stzh-readspeaker-dropdown-settings-right, auto);\n\n @include mq($from: medium) {\n --column-gap: var(--stzh-readspeaker-column-gap, #{space('medium')});\n --dropdown-top: var(--stzh-readspeaker-dropdown-top, #{$formInputHeightTiny});\n --dropdown-settings-top: var(--stzh-readspeaker-dropdown-settings-top, #{$formInputHeightTiny});\n }\n\n @media print {\n display: none;\n }\n}\n\n.stzh-readspeaker {\n position: relative;\n display: flex;\n align-items: center;\n column-gap: var(--column-gap);\n justify-content: var(--justify-content);\n\n &__actions {\n flex-grow: 1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n stzh-button#{&}__close {\n display: none;\n }\n\n &:has(.rsbtn.rsexpanded) &__close {\n display: inline-grid;\n\n @include mq($from: small) {\n display: none;\n }\n }\n\n .rsbtn {\n z-index: $zIndexPopover !important;\n background: var(--background-color);\n position: var(--dropdown-position);\n top: var(--dropdown-top);\n bottom: var(--dropdown-bottom);\n left: var(--dropdown-left);\n right: var(--dropdown-right);\n }\n\n .rs_splitbutton.rs_splitbutton-exp {\n display: inline-flex;\n }\n\n .rs_addtools,\n .rsbtn {\n margin-top: var(--audio-track-height);\n margin-bottom: 0px;\n }\n\n [class*=\" rsicn-\"],\n [class*=\" rsicn-\"]:before,\n [class^=rsicn-], [class^=rsicn-]:before {\n content: '';\n display: block;\n width: iconSize();\n height: iconSize();\n background-size: contain;\n background-position: center center;\n }\n\n // pause / play\n .rsicn-pause::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/pause.svg', fill=#0F05A0);\n }\n\n .rsbtn_pause:hover .rsicn-pause::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/pause.svg', fill=#070066);\n }\n\n .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,\n .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before,\n .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause .rsicn::before {\n content: '';\n background-image: svg-load('../src/components/stzh-readspeaker/assets/play.svg', fill=#0F05A0);\n }\n\n .rsbtn.rsstopped .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,\n .rsbtn.rsidle .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before,\n .rsbtn.rspaused .rsbtn_exp .rsbtn_exp_inner .rsbtn_pause:hover .rsicn::before {\n content: '';\n background-image: svg-load('../src/components/stzh-readspeaker/assets/play.svg', fill=#070066);\n }\n\n // stop\n .rsicn-stop::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/stop.svg', fill=#0F05A0);\n }\n\n .rsbtn_stop:hover .rsicn-stop::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/stop.svg', fill=#070066);\n }\n\n // rewind\n .rsicn-backwards::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/rewind.svg', fill=#0F05A0);\n }\n\n .rsbtn_rewind:hover .rsicn-backwards::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/rewind.svg', fill=#070066);\n }\n\n // forwards\n .rsicn-forwards::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/forward.svg', fill=#0F05A0);\n }\n\n .rsbtn_forward:hover .rsicn-forwards::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/forward.svg', fill=#070066);\n }\n\n // volume\n .rsicn-volume::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#0F05A0);\n }\n\n .rsbtn_volume:hover .rsicn-volume::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#070066);\n }\n\n // speed\n .rsicn-speed::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/dashboard.svg', fill=#0F05A0);\n }\n\n .rsbtn_speed:hover .rsicn-speed::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/dashboard.svg', fill=#070066);\n }\n\n // close\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:focus span.rsicn::before,\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_closer:hover span.rsicn::before {\n content: '';\n }\n\n .rsicn-cross::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/close-big.svg', fill=#0F05A0);\n }\n\n .rsbtn_closer:hover .rsicn-cross::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/close-big.svg', fill=#070066);\n }\n\n // tooltoggle\n .rs_addtools .rsbtn_tooltoggle .rsicn::before,\n .rsbtn .rsbtn_tooltoggle .rsicn::before {\n content: '';\n }\n\n .rsicn-arrow-down::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/more-vertical.svg', fill=#0F05A0);\n }\n\n .rsbtn_tooltoggle:hover .rsicn-arrow-down::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/more-vertical.svg', fill=#070066);\n }\n\n // loading indicator/track\n #rsmpl_container .rs-player-loadindicator,\n .rsbtn .rs-player-loadindicator {\n background-color: var(--audio-track-background-color);\n height: var(--audio-track-height);\n top: calc(var(--audio-track-height) / -1);\n left: 0;\n right: 0px;\n }\n\n #rsmpl_container .rs-player-loadindicator .rsbtn-loading,\n .rsbtn .rs-player-loadindicator .rsbtn-loading,\n #rsmpl_container .rs-player-loadindicator .rsbtn-progress,\n .rsbtn .rs-player-loadindicator .rsbtn-progress {\n background-color: var(--audio-track-progress-background-color);\n }\n\n // player buttons / toggle button\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item,\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_player_item:active,\n .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n display: flex;\n justify-content: center;\n align-items: center;\n border-left: none;\n width: $formInputHeightSmall;\n height: $formInputHeightSmall;\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n background-color: transparent;\n outline: none;\n float: none;\n\n [class*=\" rsicn-\"],\n [class*=\" rsicn-\"]:before,\n [class^=rsicn-], [class^=rsicn-]:before {\n width: iconSize();\n height: iconSize();\n\n @include mq($from: medium) {\n width: iconSize('small');\n height: iconSize('small');\n }\n }\n\n @include mq($from: medium) {\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &:focus {\n background-color: transparent;\n outline: var(--stzh-flyingfocus-color) solid 2px;\n outline-offset: 2px;\n }\n\n &:hover {\n background-color: $colorSecondary20;\n }\n\n &.rsbtn_closer {\n // position: absolute;\n // right: 0;\n // top: calc(#{$formInputHeightSmall} / -1 + -3px);\n\n // we show own &__close button on mobile that is placed next to trigger\n @include mq($to: small) {\n display: none;\n }\n }\n }\n\n .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n margin-right: space('xxxsmall');\n }\n\n .rs_splitbutton .rsbtn_exp .rsbtn_exp_inner button.rsbtn_pause.rsbtn_player_item {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_stop:active span.rsicn {\n background: transparent;\n }\n\n // toggle button\n .rs_splitbutton.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n .rs_splitbutton.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n display: flex !important;\n position: relative;\n top: 0;\n border-left: none;\n border-right: none;\n }\n\n // toggle button when zoom-tooltoggler class is added to wrapper (js hover)\n .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rs_addtools .rsbtn_tooltoggle,\n .rs_splitbutton.zoom-tooltoggler.rsexpanded:not(.rsdetached).rsbtn .rsbtn_tooltoggle {\n left: 0;\n }\n\n .rsbtn .rsbtn_exp .rsbtn_exp_inner {\n position: static;\n background: transparent;\n display: inline-flex;\n border: none;\n border-radius: 0px;\n gap: space('xxxsmall');\n }\n\n .rsbtn .rsbtn_exp,\n .rsbtn.rsexpanded .rsbtn_exp .rsbtn_exp_inner {\n height: auto;\n }\n\n // slider\n .rsbtn .rsbtn_exp .rsbtn_exp_inner .rsbtn_dropdown {\n box-sizing: border-box;\n border: none;\n width: $formInputHeightSmall;\n height: 116px;\n top: $formInputHeightSmall;\n margin-top: space('xxsmall');\n background-color: $colorGrey10;\n padding: 0;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n\n @include mq($from: medium) {\n width: $formInputHeightTiny;\n top: $formInputHeightTiny;\n }\n }\n\n #rs-textsettings input.rs-slider[type=range],\n .rs-dialog-esque input.rs-slider[type=range],\n .rs-dialog-slider-dropdown input.rs-slider[type=range],\n .rsbtn input.rs-slider[type=range] {\n overflow: hidden;\n -webkit-appearance: none !important;\n appearance: none !important;\n background: transparent;\n margin: 0px;\n\n --thumb-height: 20px;\n --thumb-border-width: 2px;\n --thumb-border-color: #{$colorPrimary70};\n --thumb-background-color: #{$colorWhite};\n --track-height: 8px;\n --track-color: #{$colorBlack40op};\n --track-progress-color: #{$colorSecondary60};\n --clip-edges: 1px;\n\n // &,\n // &::-moz-range-track,\n // &::-moz-range-thumb,\n // &::-moz-range-progress {\n // background: #fff0;\n // }\n\n &,\n &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n position: relative;\n -webkit-appearance: none;\n transition: all $baseTransitionAnimationSpeed;\n height: var(--thumb-height);\n }\n\n &,\n &::-moz-range-track,\n &::-moz-range-thumb {\n position: relative;\n margin: 0px;\n appearance: none;\n transition: all $baseTransitionAnimationSpeed;\n height: var(--thumb-height);\n }\n\n &::-webkit-slider-runnable-track {\n \t background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);\n }\n\n &::-moz-range-track {\n width: 100%;\n background: var(--track-color);\n }\n\n &::-moz-range-progress {\n appearance: none;\n background: var(--track-progress-color);\n transition-delay: 30ms;\n }\n\n &::-moz-range-track,\n &::-moz-range-progress {\n height: calc(var(--track-height) + 1px);\n border-radius: var(--track-height);\n }\n\n &::-webkit-slider-thumb {\n --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);\n --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);\n --clip-bottom: calc(var(--thumb-height) - var(--clip-top));\n --clip-further: calc(100% + 1px);\n --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax var(--track-progress-color);\n\n width: var(--thumb-width, var(--thumb-height));\n // background: linear-gradient(currentColor 0 0) scroll no-repeat left center / 50% calc(var(--track-height) + 1px);\n background-color: var(--thumb-background-color);\n border-style: solid;\n border-width: var(--thumb-border-width);\n border-color: var(--thumb-border-color);\n box-shadow: var(--box-fill);\n border-radius: var(--thumb-width, var(--thumb-height));\n\n filter: brightness(100%);\n clip-path: polygon(\n 100% -1px,\n var(--clip-edges) -1px,\n 0 var(--clip-top),\n -100vmax var(--clip-top),\n -100vmax var(--clip-bottom),\n 0 var(--clip-bottom),\n var(--clip-edges) 100%,\n var(--clip-further) var(--clip-further)\n );\n }\n\n &::-moz-range-thumb {\n background-color: var(--thumb-background-color);\n border-style: solid;\n border-width: var(--thumb-border-width);\n border-color: var(--thumb-border-color);\n border: 0;\n width: var(--thumb-width, var(--thumb-height));\n border-radius: var(--thumb-width, var(--thumb-height));\n cursor: grab;\n }\n\n &:active {\n cursor: grabbing;\n }\n\n &:active::-webkit-slider-thumb {\n cursor: grabbing;\n }\n\n &:active::-moz-range-thumb {\n cursor: grabbing;\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:disabled::-webkit-slider-thumb {\n cursor: not-allowed;\n }\n\n &:disabled::-moz-range-thumb {\n cursor: not-allowed;\n }\n }\n\n .rsbtn .rs-slider.vertical,\n .rsbtn .rs-slider.vertical.has-datalist {\n // transform: rotate(270deg) translateX(-4.75em) translateY(.75em);\n transform: rotate(270deg) translateX(-6px) translateY(-6px);\n transform-origin: bottom center;\n width: 100px;\n height: $formInputHeightSmall;\n\n @include mq($from: medium) {\n height: $formInputHeightTiny;\n transform: rotate(270deg) translateX(-18px) translateY(-18px);\n }\n }\n\n // slider tooltip\n #rs-textsettings .rs-slider-label,\n .rs-dialog-esque .rs-slider-label,\n .rs-dialog-slider-dropdown .rs-slider-label,\n .rsbtn .rs-slider-label {\n @include font;\n @include tooltip-fontsize;\n border-radius: 0px;\n border: none;\n box-shadow: none;\n color: $colorWhite;\n background-color: $colorCoolgrey60;\n height: 20px;\n line-height: 20px;\n padding: 0;\n padding-left: space('xxsmall');\n padding-right: space('xxsmall');\n }\n\n // copyright\n .rsbtn_powered {\n display: none;\n }\n\n // menu container\n .rs_addtools .rsbtn_toolpanel.vertical,\n .rsbtn .rsbtn_toolpanel.vertical {\n position: absolute;\n top: var(--dropdown-settings-top);\n bottom: var(--dropdown-settings-bottom);\n left: var(--dropdown-settings-left);\n right: var(--dropdown-settings-right);\n min-width: initial !important;\n }\n\n .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools {\n position: static;\n border-radius: 0px;\n border: none;\n margin-top: space('xxsmall');\n background-color: $colorGrey10;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n .rs_addtools .rsbtn_toolpanel.vertical\n .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li {\n all: unset;\n }\n\n // menu button\n .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool {\n display: flex;\n align-items: center;\n padding: space('xsmall') space('large');\n white-space: nowrap;\n color: $colorPrimary70;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary80;\n background-color: $colorSecondary20;\n }\n }\n\n .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool span.rsbtn_btnlabel {\n @include font('heavy');\n @include fontSize('milli');\n margin-left: space('xsmall');\n margin-right: auto;\n color: inherit;\n }\n\n .rsicn-settings::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/gear.svg', fill=#0F05A0);\n }\n\n .rsbtn_tool:hover .rsicn-settings::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/gear.svg', fill=#070066);\n }\n\n .rsicn-click-listen::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/click.svg', fill=#0F05A0);\n }\n\n .rsbtn_tool:hover .rsicn-click-listen::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/click.svg', fill=#070066);\n }\n\n .rsicn-enlarged-text::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/enlarge-text.svg', fill=#0F05A0);\n }\n\n .rsbtn_tool:hover .rsicn-enlarged-text::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/enlarge-text.svg', fill=#070066);\n }\n\n .rsicn-textmode::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/text-mode.svg', fill=#0F05A0);\n }\n\n .rsbtn_tool:hover .rsicn-textmode::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/text-mode.svg', fill=#070066);\n }\n\n .rsicn-pagemask::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/scan.svg', fill=#0F05A0);\n }\n\n .rsbtn_tool:hover .rsicn-pagemask::before {\n background-image: svg-load('../src/components/stzh-readspeaker/assets/scan.svg', fill=#070066);\n }\n\n // switch\n .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool .rs_minitoggler {\n margin: 0;\n margin-left: space('large');\n background-color: $colorGrey70;\n border-radius: 12px;\n box-sizing: border-box;\n width: 48px;\n height: 24px;\n border: none;\n transition: background-color $baseTransitionAnimationSpeed;\n\n .on-icon,\n .off-icon {\n display: none;\n }\n\n &::after {\n width: 20px;\n height: 20px;\n top: 2px;\n left: 2px;\n transition: all $baseTransitionAnimationSpeed;\n background-color: $colorWhite;\n }\n }\n\n .rs_addtools .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler,\n .rsbtn .rsbtn_toolpanel.vertical .rsbtn_tools .rsbtn_tools_inner .rsbtn_toolcontainer ul.rsbtn_toollist li button.rsbtn_tool.active .rs_minitoggler {\n background-color: $colorSecondary50;\n\n &::after {\n left: calc(50% + 2px);\n background-color: $colorWhite;\n }\n }\n}\n\n/* Button tooltips */\n\n#readspeaker_tooltip.rs_tooltip {\n @include font;\n @include tooltip-fontsize;\n z-index: $zIndexPopup;\n border: none;\n border-radius: 0px;\n box-shadow: none;\n color: $colorWhite;\n background-color: $colorCoolgrey60;\n height: 20px;\n line-height: 20px;\n padding: 0;\n padding-left: space('xxsmall');\n padding-right: space('xxsmall');\n}\n\n/* Popup on text selection */\n\n.rspopup.rspopup {\n z-index: $zIndexPopup;\n background: $colorGrey10;\n border: none;\n border-radius: 0px;\n box-shadow: none;\n\n .rspopup_btn {\n height: $formInputHeightSmall;\n box-sizing: border-box;\n display: flex;\n padding: space('xsmall') space('large');\n justify-content: center;\n align-items: center;\n gap: space('xsmall');\n border-top: none;\n color: $colorPrimary70;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover {\n color: $colorPrimary80;\n background-color: $colorSecondary20;\n }\n\n &.rspopup_play::before {\n content: '';\n margin-right: 0;\n left: 0;\n position: relative;\n width: iconSize();\n height: iconSize();\n background-size: contain;\n background-position: center center;\n background-image: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#0F05A0);\n }\n\n &.rspopup_play:hover::before {\n background: svg-load('../src/components/stzh-readspeaker/assets/volume-medium.svg', fill=#070066);\n }\n\n &.rspopup_play::after {\n content: none;\n }\n }\n\n .rspopup_btn span.rspopup_label {\n @include font('heavy');\n @include fontSize('milli');\n top: 0;\n }\n}\n\n/* Sticky controls (currently disabled) */\n\n// .rsbtn_scrollcontrols {}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n// we use split button implmentation (calling readpage manually):\n// https://wrdev.readspeaker.com/get-started/implementation/split-button-implementation\n\n// we load the library dynamically:\n// https://wrdev.readspeaker.com/get-started/implementation/dynamic-loading\nfunction loadLibrary() {\n return new Promise((resolve, reject) => {\n if (window.ReadSpeaker) {\n resolve(window.ReadSpeaker);\n return;\n }\n\n const oHead = document.getElementsByTagName('HEAD').item(0);\n const oScript = document.createElement(\"script\");\n\n oScript.type = \"text/javascript\";\n // oScript.src = \"//cdn-eu.readspeaker.com/script/4490/webReader/webReader.js?pids=wr&mobile=0\";\n // we disable predefined mobile UI player bar with mobile=0 parameter\n oScript.src = `${window.stzhComponents.pathVendors}/readspeaker/webReader.js?pids=wr&mobile=0`;\n oScript.id = \"rs_req_Init\";\n oHead.appendChild(oScript);\n\n oScript.onload = function () {\n window.ReadSpeaker.mobile = window.ReadSpeaker.mobile;\n resolve(window.ReadSpeaker);\n // window.ReadSpeaker.init();\n }\n\n oScript.onerror = reject;\n });\n}\n\nwindow.rsConf = {\n\t// cb: {\n\t// \tui: {\n\t// \t\topen: function() {\n\t// \t\t\tconsole.log('open')\n\t// \t\t},\n // close: function() {\n\t// \t\t\tconsole.log('close')\n // },\n // stop: function() {\n // console.log('stop')\n // },\n // play: function() {\n // console.log('play')\n // },\n // pause: function() {\n // console.log('pause')\n // }\n\t// \t}\n\t// },\n settings: {\n // // The color that will be used for highlighting sentences, expressed as a valid CSS color value.\n\t\t// hlsent: '#beffd6',\n // // The color that will be used for the text in the highlighted elements, expressed as a valid CSS color value.\n // hltext: '#000000',\n // // The color that will be used for highlighting words, expressed as a valid CSS color value\n // hlword: '#a4cbff'\n\t},\n general: {\n enableSkipAlways: true,\n shadowDomSelector: \"stzh-accordion-item,stzh-timeline-item,stzh-disturber\"\n },\n ui: {\n tools: {\n voicesettings: false,\n controlpanel: false,\n translation: false,\n dictionary: false,\n download: false,\n help: false,\n formreading: false\n }\n }\n};\n\n// window.rspkr.ui.getActivePlayer().getContainer()\n// window.rspkr.ui.addClickEvents()\n// window.rspkr.tools.toggler.add()\n\nlet readspeakerCounter = 0;\n\n/**\n * @slot - Slot for trigger\n */\n@Component({\n tag: \"stzh-readspeaker\",\n styleUrl: \"stzh-readspeaker.scss\"\n})\nexport class StzhReadspeaker {\n /** RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html) */\n @Prop() href!: string;\n\n @Element() element: HTMLStzhReadspeakerElement;\n\n /** Open player and start reading page */\n @Method()\n async openPlayer() {\n const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n if (activePlayer && !this.element.contains(activePlayer.getContainer())) {\n activePlayer.stop();\n }\n\n window.readpage(this.href, this.readspeakerId);\n }\n\n /** Close player and finish reading page */\n @Method()\n async closePlayer() {\n const activePlayer = window.rspkr?.ui?.getActivePlayer();\n\n if (activePlayer && this.element.contains(activePlayer.getContainer())) {\n activePlayer.close();\n }\n }\n\n private observer: MutationObserver;\n private triggerElement: HTMLElement;\n\n private onLinkClick = async (event: MouseEvent) => {\n event.preventDefault();\n // library could also be loaded only after first click, but then text selection wouldn't work\n // await loadLibrary();\n this.openPlayer();\n }\n\n private init = () => {\n let trigger = this.triggerElement?.firstElementChild as HTMLElement;\n\n if (!trigger) {\n const defaultSlot = Array.from(this.element.children)\n .find(child => !child.hasAttribute('slot')) as HTMLElement;\n\n trigger = defaultSlot;\n }\n\n if (trigger) {\n trigger.addEventListener('click', this.onLinkClick);\n\n setPropsIfNull(trigger, {\n icon: \"volume-medium\",\n href: this.href\n } as HTMLStzhLinkElement | HTMLStzhButtonElement)\n }\n }\n\n private readspeakerId: string;\n\n async componentWillLoad() {\n this.readspeakerId = `stzh-readspeaker-${readspeakerCounter++}`;\n }\n\n async componentDidLoad() {\n await loadLibrary();\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.rspkr?.ui?.destroyActivePlayer();\n }\n\n render() {\n const classes = {\n \"stzh-readspeaker\": true,\n \"rs_skip\": true // will prevent component being read by readspeaker\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-readspeaker__actions\">\n <div\n ref={(el) => (this.triggerElement = el as HTMLDivElement)}\n class=\"stzh-readspeaker__trigger\"\n >\n <slot></slot>\n </div>\n <stzh-button\n class=\"stzh-readspeaker__close\"\n variant=\"tertiary\"\n size=\"small\"\n icon=\"close-big\"\n iconOnly={true}\n onClick={() => { this.closePlayer() }}\n ></stzh-button>\n </div>\n\n {/*\n <stzh-popover placement=\"bottom-end\">\n <div slot=\"content\">...</div>\n </stzh-popover>\n */}\n\n <div\n id={this.readspeakerId}\n class=\"rs_addtools rs_splitbutton rs_preserve rs_skip rs_exp\"\n ></div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-0bf70420.entry.js → p-af87b81a.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,F as r,a as o,g as e}from"./p-c7bfac7a.js";import{a}from"./p-23d404e1.js";import{h}from"./p-7e304ea3.js";import{S as n}from"./p-fc692303.js";import{c as d}from"./p-9b063923.js";const c=".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";const l=class{constructor(s){t(this,s);this.stzhChange=i(this,"stzhChange",7);this.handleReset=async()=>{this.value=this.defaultValue};this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onInputChanged=()=>{const t=this.dateAdapter.parse(this.input.value,"dateInput");if(this.input.value===""||t){const i=this._internalDateAdapter.format(t,"dateInput");if(this.value!==i){this.value=i}else{this.valueWatcher(i)}this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t})}};this.onCalendarChange=t=>{if(t.detail.component!=="stzh-calendar"){return}this.value=t.detail.valueAsDate&&this._internalDateAdapter.format(t.detail.valueAsDate,"dateInput");this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t.detail.valueAsDate});if(this.popover){this.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=()=>false;this.name="";this.value="";this.calendarValue="";this.inputValue="";this.defaultValue="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.hideOptional=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.internalDateAdapter="iso";this.localization=undefined;this.buttonLabel=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}createDateFormatters(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}}valueWatcher(t){if(!this._internalDateAdapter){return}const i=this._internalDateAdapter.parse(t,"dateInput");this.calendarValue=a(i);this.inputValue=this.dateAdapter.format(i,"dateInput");this.updateButtonAccessibleLabel()}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}internalDateAdapterWatcher(t){if(t==="iso"||!t){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsIso,this.localization.$globals)}else if(t==="legacy"){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsLegacy,this.localization.$globals)}else{this._internalDateAdapter=t}}async setDate(t){this.value=this._internalDateAdapter.format(t,"dateInput")}async getPopover(){return this.popover}updateButtonAccessibleLabel(){if(!this.localization){return}try{const t=this._internalDateAdapter.parse(this.value,"dateInput");this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(t)}`}catch(t){this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}`}}connectedCallback(){this.createDateFormatters()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")}this.dateAdapterWatcher(this.dateAdapter);this.internalDateAdapterWatcher(this.internalDateAdapter);this.valueWatcher(this.value);this.defaultValue=this.defaultValue||this.value}render(){const t=h(this.element,"action");const i={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline,"stzh-datepicker--has-action":t};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},s("div",{class:i},s("input",{type:"hidden",name:this.name,value:this.value,defaultValue:this.defaultValue}),this.inline&&s(r,null,s("stzh-calendar",{value:this.calendarValue,class:"stzh-datepicker__calendar is-inline",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),s("div",{class:"stzh-datepicker__actions"},s("slot",{name:"action"}))),!this.inline&&s("stzh-input",{value:this.inputValue,label:this.label,labelHidden:this.labelHidden,ref:t=>this.input=t,noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,hideOptional:this.hideOptional,size:this.size},s("stzh-popover",{ref:t=>this.popover=t,class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",label:this.label},s("stzh-button",{"icon-only":true,icon:"calendar",size:this.size,disabled:this.disabled,a11yLabel:this.buttonLabel}),s("div",{slot:"content"},s("stzh-calendar",{value:this.calendarValue,class:"stzh-datepicker__calendar is-popover",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),s("div",{class:"stzh-datepicker__actions"},s("slot",{name:"action"})))))))}get element(){return e(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"],dateAdapter:["dateAdapterWatcher"],internalDateAdapter:["internalDateAdapterWatcher"]}}};l.style=c;const z='.sc-stzh-radio-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio.sc-stzh-radio{display:grid}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{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-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary90)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary90)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}';let p=0;const u=class{constructor(s){t(this,s);this.stzhChange=i(this,"stzhChange",7);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.input.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=t=>{const i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.hideOptional=false;this.checked=false;this.defaultChecked=undefined;this.label="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.a11yDescribedby=""}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(i){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}async componentWillLoad(){this.inputId=`stzh-radio-${p++}`;this.errorWatcher(this.error);this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radio")}}render(){var t;const i=h(this.element,"description")||!!this.description;const r=h(this.element,"description-long")||!!this.descriptionLong;const e=h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const a={"stzh-radio":true,"stzh-radio--has-description":i,"stzh-radio--has-description-long":r,"stzh-radio--has-error":e,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid||e,"stzh-radio--is-disabled":this.disabled};return s(o,{"is-invalid":this.invalid||e,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},s("div",{class:a},s("label",{class:"stzh-radio__field-wrapper"},s("input",{class:"stzh-radio__input",ref:t=>this.input=t,type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,defaultChecked:this.defaultChecked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),s("div",{class:"stzh-radio__mark"},s("div",{class:"stzh-radio__check"})),s("div",{class:"stzh-radio__label"},this.label?this.label:s("slot",null),!this.hideOptional&&s("span",{class:"stzh-radio__marker"},s("span",{class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),s("span",{class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),s(n,{classPrefix:"stzh-radio",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return e(this)}static get watchers(){return{error:["errorWatcher"]}}};u.style=z;const f=".sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{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-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{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-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);-moz-column-gap:var(--stzh-space-xxlarge);column-gap:var(--stzh-space-xxlarge)}";const g="stzh-radio, stzh-button[type=radio], stzh-card";let m=0;const _=class{constructor(i){t(this,i);this._preventUpdateProperties=[];this.handleReset=async()=>{this.value=this.defaultValue};this.init=()=>{this.radios=Array.from(this.element.querySelectorAll(g));this.updateRadiosProperty("hide-optional",true);this.updateRadiosProperty("a11y-describedby",`${this.radiogroupId}-description`);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchInvalid(this.invalid);this.watchRequired(this.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.hideOptional=false;this.value="";this.defaultValue="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}watchName(t){this.updateRadiosProperty("name",t)}watchDisabled(t){this.updateRadiosProperty("disabled",t)}watchInvalid(t){this.updateRadiosProperty("invalid",t)}watchRequired(t){this.updateRadiosProperty("required",t)}watchValue(t){this.updateCheckedRadioByValue(t)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(i){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}onChange(t){this.value=t.detail.value}updateRadiosProperty(t,i){this.radios.forEach((s=>{if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){s[d(t)]=i}}))}updateCheckedRadioByValue(t){this.checkedRadio=this.radios.find((i=>i.value===t));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()}uncheckRadios(){this.radios.forEach((t=>{if(!this.checkedRadio||t!==this.checkedRadio){t.checked=false}}))}componentDidLoad(){this.defaultValue=this.defaultValue?this.defaultValue:this.value}async componentWillLoad(){this.radiogroupId=`stzh-radiogroup-${m++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")}}componentShouldUpdate(t,i,s){return s!=="checkedRadio"}componentDidRender(){this.init()}connectedCallback(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(g));const t=this.radios.find((t=>t.checked));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){var t;const i=h(this.element,"description")||!!this.description;const r=h(this.element,"description-long")||!!this.descriptionLong;const e=h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const a={"stzh-radiogroup":true,"stzh-radiogroup--has-description":i,"stzh-radiogroup--has-description-long":r,"stzh-radiogroup--has-error":e,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid||e,"stzh-radiogroup--hide-legend":this.hideLegend,[`stzh-radiogroup--direction-${this.direction}`]:!!this.direction};return s(o,{"is-invalid":this.invalid||e},s("fieldset",{class:a},this.legend&&s("legend",{class:"stzh-radiogroup__legend"},this.legend,!this.hideOptional&&s("span",{class:"stzh-radiogroup__marker"},s("span",{class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),s("span",{class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),s("div",{class:"stzh-radiogroup__fields"},s("slot",null)),s(n,{classPrefix:"stzh-radiogroup",id:`${this.radiogroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return e(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};_.style=f;export{l as stzh_datepicker,u as stzh_radio,_ as stzh_radiogroup};
-//# sourceMappingURL=p-0bf70420.entry.js.map
+import{r as t,c as s,h as i,F as r,a as e,g as o}from"./p-c7bfac7a.js";import{a}from"./p-23d404e1.js";import{h}from"./p-7e304ea3.js";import{S as n}from"./p-fc692303.js";import{c as d}from"./p-9b063923.js";const c=".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";const l=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.handleReset=async()=>{this.value=this.defaultValue};this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onInputChanged=()=>{const t=this.dateAdapter.parse(this.input.value,"dateInput");if(this.input.value===""||t){const s=this._internalDateAdapter.format(t,"dateInput");if(this.value!==s){this.value=s}else{this.valueWatcher(s)}this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t})}};this.onCalendarChange=t=>{if(t.detail.component!=="stzh-calendar"){return}this.value=t.detail.valueAsDate&&this._internalDateAdapter.format(t.detail.valueAsDate,"dateInput");this.stzhChange.emit({component:"stzh-datepicker",value:this.value,valueAsDate:t.detail.valueAsDate});if(this.popover){this.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=()=>false;this.name="";this.value="";this.calendarValue="";this.inputValue="";this.defaultValue="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.hideOptional=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.internalDateAdapter="iso";this.localization=undefined;this.buttonLabel=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}createDateFormatters(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}}valueWatcher(t){if(!this._internalDateAdapter){return}const s=this._internalDateAdapter.parse(t,"dateInput");this.calendarValue=a(s);this.inputValue=this.dateAdapter.format(s,"dateInput");this.updateButtonAccessibleLabel()}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}internalDateAdapterWatcher(t){if(t==="iso"||!t){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsIso,this.localization.$globals)}else if(t==="legacy"){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsLegacy,this.localization.$globals)}else{this._internalDateAdapter=t}}async setDate(t){this.value=this._internalDateAdapter.format(t,"dateInput")}async getPopover(){return this.popover}updateButtonAccessibleLabel(){if(!this.localization){return}try{const t=this._internalDateAdapter.parse(this.value,"dateInput");this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(t)}`}catch(t){this.buttonLabel=`${this.label}, ${this.localization.buttonLabel}`}}connectedCallback(){this.createDateFormatters()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")}this.dateAdapterWatcher(this.dateAdapter);this.internalDateAdapterWatcher(this.internalDateAdapter);this.valueWatcher(this.value);this.defaultValue=this.defaultValue||this.value}render(){const t=h(this.element,"action");const s={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline,"stzh-datepicker--has-action":t};return i(e,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{class:s},i("input",{type:"hidden",name:this.name,value:this.value,defaultValue:this.defaultValue}),this.inline&&i(r,null,i("stzh-calendar",{value:this.calendarValue,class:"stzh-datepicker__calendar is-inline",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{class:"stzh-datepicker__actions"},i("slot",{name:"action"}))),!this.inline&&i("stzh-input",{value:this.inputValue,label:this.label,labelHidden:this.labelHidden,ref:t=>this.input=t,noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,hideOptional:this.hideOptional,size:this.size},i("stzh-popover",{ref:t=>this.popover=t,class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",label:this.label},i("stzh-button",{"icon-only":true,icon:"calendar",size:this.size,disabled:this.disabled,a11yLabel:this.buttonLabel}),i("div",{slot:"content"},i("stzh-calendar",{value:this.calendarValue,class:"stzh-datepicker__calendar is-popover",isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),i("div",{class:"stzh-datepicker__actions"},i("slot",{name:"action"})))))))}get element(){return o(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"],dateAdapter:["dateAdapterWatcher"],internalDateAdapter:["internalDateAdapterWatcher"]}}};l.style=c;const z='.sc-stzh-radio-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio.sc-stzh-radio{display:grid}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{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-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary90)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary90)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}';let p=0;const u=class{constructor(i){t(this,i);this.stzhChange=s(this,"stzhChange",7);this.stzhFocus=s(this,"stzhFocus",7);this.stzhBlur=s(this,"stzhBlur",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.input.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.hideOptional=false;this.checked=false;this.defaultChecked=undefined;this.label="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.a11yDescribedby=""}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}async componentWillLoad(){this.inputId=`stzh-radio-${p++}`;this.errorWatcher(this.error);this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radio")}}render(){var t;const s=h(this.element,"description")||!!this.description;const r=h(this.element,"description-long")||!!this.descriptionLong;const o=h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0;const a={"stzh-radio":true,"stzh-radio--has-description":s,"stzh-radio--has-description-long":r,"stzh-radio--has-error":o,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid||o,"stzh-radio--is-disabled":this.disabled};return i(e,{"is-invalid":this.invalid||o,tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},i("div",{class:a},i("label",{class:"stzh-radio__field-wrapper"},i("input",{class:"stzh-radio__input",ref:t=>this.input=t,type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":`${this.inputId}-description ${this.a11yDescribedby}`,"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,defaultChecked:this.defaultChecked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),i("div",{class:"stzh-radio__mark"},i("div",{class:"stzh-radio__check"})),i("div",{class:"stzh-radio__label"},this.label?this.label:i("slot",null),!this.hideOptional&&i("span",{class:"stzh-radio__marker"},i("span",{class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),i(n,{classPrefix:"stzh-radio",id:`${this.inputId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return o(this)}static get watchers(){return{error:["errorWatcher"]}}};u.style=z;const f=".sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{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-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{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-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);-moz-column-gap:var(--stzh-space-xxlarge);column-gap:var(--stzh-space-xxlarge)}";const g="stzh-radio, stzh-button[type=radio], stzh-card";let m=0;const _=class{constructor(s){t(this,s);this._preventUpdateProperties=[];this.handleReset=async()=>{this.value=this.defaultValue};this.init=()=>{this.radios=Array.from(this.element.querySelectorAll(g));this.updateRadiosProperty("hide-optional",true);this.updateRadiosProperty("a11y-describedby",`${this.radiogroupId}-description`);this.updateRadiosProperty("invalid",this.invalid||this.errorUsed);this.watchValue(this.value);this.watchName(this.name);this.watchDisabled(this.disabled);this.watchRequired(this.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.hideOptional=false;this.value="";this.defaultValue="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}watchName(t){this.updateRadiosProperty("name",t)}watchDisabled(t){this.updateRadiosProperty("disabled",t)}watchRequired(t){this.updateRadiosProperty("required",t)}watchValue(t){this.updateCheckedRadioByValue(t)}errorWatcher(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(s){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}}preventUpdatePropertiesWatcher(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}onChange(t){this.value=t.detail.value}updateRadiosProperty(t,s){this.radios.forEach((i=>{if(t==="name"||this._preventUpdateProperties.indexOf(t)===-1){i[d(t)]=s}}))}get errorUsed(){var t;return h(this.element,"error")||((t=this._error)===null||t===void 0?void 0:t.length)>0}updateCheckedRadioByValue(t){this.checkedRadio=this.radios.find((s=>s.value===t));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()}uncheckRadios(){this.radios.forEach((t=>{if(!this.checkedRadio||t!==this.checkedRadio){t.checked=false}}))}componentDidLoad(){this.defaultValue=this.defaultValue?this.defaultValue:this.value}async componentWillLoad(){this.radiogroupId=`stzh-radiogroup-${m++}`;this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")}}componentShouldUpdate(t,s,i){return i!=="checkedRadio"}componentDidRender(){this.init()}connectedCallback(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(g));const t=this.radios.find((t=>t.checked));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const t=h(this.element,"description")||!!this.description;const s=h(this.element,"description-long")||!!this.descriptionLong;const r={"stzh-radiogroup":true,"stzh-radiogroup--has-description":t,"stzh-radiogroup--has-description-long":s,"stzh-radiogroup--has-error":this.errorUsed,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid||this.errorUsed,"stzh-radiogroup--hide-legend":this.hideLegend,[`stzh-radiogroup--direction-${this.direction}`]:!!this.direction};return i(e,{"is-invalid":this.invalid||this.errorUsed},i("fieldset",{class:r},this.legend&&i("legend",{class:"stzh-radiogroup__legend"},this.legend,!this.hideOptional&&i("span",{class:"stzh-radiogroup__marker"},i("span",{class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),i("span",{class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),i("div",{class:"stzh-radiogroup__fields"},i("slot",null)),i(n,{classPrefix:"stzh-radiogroup",id:`${this.radiogroupId}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:s,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))}get element(){return o(this)}static get watchers(){return{name:["watchName"],disabled:["watchDisabled"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}}};_.style=f;export{l as stzh_datepicker,u as stzh_radio,_ as stzh_radiogroup};
+//# sourceMappingURL=p-af87b81a.entry.js.map

package/dist/stzh-components/p-af87b81a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","handleReset","async","value","defaultValue","onRootFocus","input","focus","onInputChanged","parsedDate","dateAdapter","parse","formattedDate","_internalDateAdapter","format","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","popover","hide","resetListener","target","contains","element","requestAnimationFrame","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","calendarValue","printISODate","inputValue","updateButtonAccessibleLabel","dateAdapterWatcher","window","stzhComponents","utils","createFormatParseAdapter","$formats","$globals","internalDateAdapterWatcher","$formatsIso","$formatsLegacy","setDate","getPopover","buttonLabel","label","selectedDateMessage","err","connectedCallback","componentWillLoad","fetchTranslations","internalDateAdapter","render","actionUsed","hasSlot","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","ref","el","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","hideOptional","size","slot","placement","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","checked","defaultChecked","onInput","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","errorWatcher","_error","JSON","e","inputId","descriptionUsed","descriptionLongUsed","errorUsed","_a","length","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchRequired","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","componentDidLoad","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n --calendar-width: #{$calendarWidth};\n\n width: 100%;\n\n &[inline]:not([inline=\"false\"]) {\n width: var(--calendar-width);\n }\n}\n\n.stzh-datepicker {\n &__popover {\n --width: auto;\n }\n\n &__calendar {\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n }\n\n &__actions {\n display: flex;\n width: var(--calendar-width);\n margin-left: auto;\n margin-right: auto;\n\n &.is-inline {\n width: 100%;\n margin-left: 0px;\n margin-right: 0px;\n }\n\n &:not(:empty) {\n padding-left: space('small');\n padding-right: space('small');\n }\n }\n\n /* Has action */\n\n &--has-action &__popover {\n --content-padding: 0 0 #{space('small')} 0;\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Element,\n h,\n Event,\n EventEmitter,\n Method,\n Watch,\n Fragment,\n State,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhCalendarChangeEvent,\n StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n tag: \"stzh-datepicker\",\n styleUrl: \"stzh-datepicker.scss\",\n scoped: true\n})\nexport class StzhDatepicker {\n /**\n * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the max property.\n */\n @Prop() calendarMin: string = \"\"\n\n /**\n * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n * This setting can be used alone or together with the min property.\n */\n @Prop() calendarMax: string = \"\"\n\n /**\n * Controls which days are disabled and therefore disallowed.\n * For example, this can be used to disallow selection of weekends.\n */\n @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n /** Name of the hidden date picker input. */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** Value of hidden date picker input (current selected date in ISO format). */\n @Prop({ mutable: true }) value: string = \"\";\n @State() calendarValue: string = \"\";\n @State() inputValue: string = \"\";\n\n /** Default value (used by reset) */\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /** Label for input field and popover */\n @Prop() label: string = \"\";\n\n /** Whether label is visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Show calendar inline */\n @Prop({ reflect: true }) inline: boolean = false;\n\n /**\n * Date adapter visible date shown to the user, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n */\n @Prop() dateAdapter: StzhLocaleAdapter;\n\n /**\n * Date adapter for internal date passed to backend, for custom parsing/formatting.\n * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.)\n */\n @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n private _internalDateAdapter: StzhLocaleAdapter;\n\n /** Translation strings. */\n @Prop() localization: StzhDatepickerLocalizedText;\n\n @State() buttonLabel: string;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"localization\")\n createDateFormatters() {\n if (this.localization) {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n }\n\n /** Update calendar and input when value prop has changed */\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n if (!this._internalDateAdapter) {\n return;\n }\n\n const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n this.calendarValue = printISODate(date);\n this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n this.updateButtonAccessibleLabel();\n }\n\n @Watch(\"dateAdapter\")\n dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n if (!newValue) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n @Watch(\"internalDateAdapter\")\n internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n if (newValue === \"iso\" || !newValue) {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsIso,\n this.localization.$globals\n );\n } else if (newValue === \"legacy\") {\n this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formatsLegacy,\n this.localization.$globals\n );\n } else {\n this._internalDateAdapter = newValue;\n }\n }\n\n /** Set value by a JS Date object */\n @Method()\n async setDate(date: Date) {\n this.value = this._internalDateAdapter.format(date, \"dateInput\");\n }\n\n /** Return internal popover element */\n @Method()\n async getPopover(): Promise<HTMLStzhPopoverElement> {\n return this.popover;\n }\n\n /** Datepicker change event */\n @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n @Element() element: HTMLStzhDatepickerElement;\n\n /**\n * To format dates exclusively for the benefit of screen readers.\n *\n * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n * better performance when formatting large number of dates. See:\n * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n */\n private dateFormatLong: Intl.DateTimeFormat\n\n private input: HTMLStzhInputElement;\n private popover: HTMLStzhPopoverElement;\n // private calendar: HTMLStzhCalendarElement;\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n }\n\n private onRootFocus = () => {\n if (this.input) {\n this.input.focus();\n }\n }\n\n private onInputChanged = () => {\n const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n if (this.input.value === \"\" || parsedDate) {\n const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n if (this.value !== formattedDate) {\n this.value = formattedDate;\n } else {\n this.valueWatcher(formattedDate);\n }\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: parsedDate,\n })\n }\n }\n\n private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n if (event.detail.component !== \"stzh-calendar\") {\n return;\n }\n\n this.value = event.detail.valueAsDate\n && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n this.stzhChange.emit({\n component: \"stzh-datepicker\",\n value: this.value,\n valueAsDate: event.detail.valueAsDate,\n });\n\n if (this.popover) {\n this.popover.hide();\n }\n }\n\n private updateButtonAccessibleLabel() {\n if (!this.localization) {\n return;\n }\n\n try {\n const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n } catch (err) {\n this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n }\n }\n\n connectedCallback() {\n this.createDateFormatters();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n }\n\n this.dateAdapterWatcher(this.dateAdapter);\n this.internalDateAdapterWatcher(this.internalDateAdapter);\n this.valueWatcher(this.value);\n this.defaultValue = this.defaultValue || this.value;\n }\n\n render() {\n const actionUsed = hasSlot(this.element, 'action');\n\n const classes = {\n \"stzh-datepicker\": true,\n \"stzh-datepicker--inline\": this.inline,\n \"stzh-datepicker--has-action\": actionUsed\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <input\n type=\"hidden\"\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n />\n\n {this.inline &&\n <Fragment>\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-inline\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n ></stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </Fragment>\n }\n\n {!this.inline &&\n <stzh-input\n value={this.inputValue}\n label={this.label}\n labelHidden={this.labelHidden}\n ref={(el) => (this.input = el as HTMLStzhInputElement)}\n noAutocomplete\n onStzhChanged={this.onInputChanged}\n readonly={this.readonly}\n disabled={this.disabled}\n description={this.description}\n descriptionLong={this.descriptionLong}\n error={this.error}\n invalid={this.invalid}\n required={this.required}\n hideOptional={this.hideOptional}\n size={this.size}\n >\n <stzh-popover\n ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n class=\"stzh-datepicker__popover\"\n slot=\"button-right\"\n placement=\"bottom-end\"\n label={this.label}\n >\n <stzh-button\n icon-only\n icon=\"calendar\"\n size={this.size}\n disabled={this.disabled}\n a11yLabel={this.buttonLabel}\n ></stzh-button>\n <div slot=\"content\">\n <stzh-calendar\n // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n value={this.calendarValue}\n class=\"stzh-datepicker__calendar is-popover\"\n isDateDisabled={this.calendarIsDateDisabled}\n min={this.calendarMin}\n max={this.calendarMax}\n onStzhChange={this.onCalendarChange}\n >\n </stzh-calendar>\n <div class=\"stzh-datepicker__actions\">\n <slot name=\"action\"></slot>\n </div>\n </div>\n </stzh-popover>\n </stzh-input>\n }\n </div>\n </Host>\n );\n }\n}\n",":host {\n display: inline-block;\n\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-radio {\n @include input-description;\n display: grid;\n\n &__field-wrapper {\n @include fontSize('milli');\n position: relative;\n display: flex;\n user-select: none;\n cursor: pointer;\n }\n\n &__input {\n @include visuallyhiddenInput;\n border-radius: $formInputBorderRadius;\n }\n\n &__mark {\n @include radio__mark();\n }\n\n &__check {\n @include radio__check();\n }\n\n &__label {\n --stzh-base-color: initial;\n\n display: inline-block;\n color: $baseColor;\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n line-height: 24px;\n\n &:empty {\n display: none;\n }\n }\n\n &__marker {\n @include fontSize('micro');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Hover / Focus / Checked */\n\n &:hover &__label,\n &__input:checked ~ &__label {\n color: $colorPrimary70;\n }\n\n &__input:checked:hover ~ &__label,\n &__input:checked:hover ~ &__mark &__check {\n color: $colorPrimary90;\n }\n\n &:hover &__mark,\n &__input:checked ~ &__mark {\n border-color: $colorPrimary70;\n }\n\n &__input:checked:hover ~ &__mark {\n border-color: $colorPrimary90;\n }\n\n &__input:checked ~ &__mark &__check {\n opacity: 1;\n }\n\n /* Invalid */\n\n &--is-invalid &__input ~ &__label,\n &--is-invalid &__input ~ &__mark &__check {\n color: $colorError60;\n }\n\n &--is-invalid &__input ~ &__mark {\n border-color: $colorError60;\n }\n\n /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n cursor: not-allowed;\n }\n\n &--is-disabled &__input ~ &__label {\n color: $colorGrey60;\n }\n\n &--is-disabled &__input ~ &__mark &__check {\n color: $colorGrey50;\n }\n\n &--is-disabled &__input ~ &__mark {\n border-color: $colorGrey50;\n }\n\n &--is-disabled &__mark {\n background-color: $colorGrey20;\n }\n}\n","import {\n Host,\n Component,\n Prop,\n Event,\n Element,\n EventEmitter,\n h,\n Watch,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhRadioChangeEvent,\n StzhRadioFocusEvent,\n StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-radio\",\n styleUrl: \"stzh-radio.scss\",\n scoped: true\n})\nexport class StzhRadio {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Checked status */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Element() element: HTMLStzhRadioElement;\n\n private input: HTMLInputElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-radio\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent('focus', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-radio\",\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 this.stzhBlur.emit({\n component: \"stzh-radio\",\n originalEvent: event\n });\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-radio-${radioCounter++}`;\n this.errorWatcher(this.error);\n\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n const classes = {\n \"stzh-radio\": true,\n \"stzh-radio--has-description\": descriptionUsed,\n \"stzh-radio--has-description-long\": descriptionLongUsed,\n \"stzh-radio--has-error\": errorUsed,\n \"stzh-radio--is-required\": this.required,\n \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n \"stzh-radio--is-disabled\": this.disabled\n };\n\n return (\n <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <label class=\"stzh-radio__field-wrapper\">\n <input\n class=\"stzh-radio__input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n id={this.inputId}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n checked={this.checked}\n defaultChecked={this.defaultChecked}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n <div class=\"stzh-radio__mark\">\n <div class=\"stzh-radio__check\"></div>\n </div>\n <div class=\"stzh-radio__label\">\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-radio__marker\">\n <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-radio__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </div>\n </label>\n <StzhInputDescription\n classPrefix=\"stzh-radio\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n",":host {\n &[disabled]:not([disabled=\"false\"]) {\n --description-color: #{$formDisabledColor};\n }\n}\n\n.stzh-radiogroup {\n @include input-description;\n margin: 0;\n padding: 0;\n border: none;\n\n &__fields {\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n gap: space('medium');\n }\n\n &__legend {\n @include font('heavy');\n @include fontSize('micro');\n color: $headingColor;\n padding: 0;\n margin-bottom: space('xsmall');\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n &--hide-legend &__legend {\n @include visuallyhidden;\n }\n\n &--direction-horizontal &__fields {\n flex-wrap: wrap;\n flex-direction: row;\n row-gap: space('medium');\n column-gap: space('xxlarge');\n }\n}\n","import {\n Component,\n Prop,\n Element,\n Watch,\n h,\n Listen,\n Host\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n tag: \"stzh-radiogroup\",\n styleUrl: \"stzh-radiogroup.scss\",\n scoped: true\n})\nexport class StzhRadiogroup {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n @Prop({ reflect: true }) name: string;\n\n /** The legend */\n @Prop() legend: string;\n\n /** Hide legend to show only for screenreaders */\n @Prop({ reflect: true }) hideLegend: boolean = false;\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /** Select a radio by value */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Default value (used by reset) */\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /** Direction */\n @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n @Prop() descriptionLongTitle: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Current checked radio element (readonly) */\n @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n @Prop() preventUpdateProperties: string[] | string = [];\n private _preventUpdateProperties: string[] = [];\n\n /** Host element */\n @Element() element: HTMLElement;\n\n @Watch(\"name\")\n watchName(newValue: string) {\n this.updateRadiosProperty(\"name\", newValue);\n }\n\n @Watch(\"disabled\")\n watchDisabled(newValue: boolean) {\n this.updateRadiosProperty(\"disabled\", newValue);\n }\n\n @Watch(\"required\")\n watchRequired(newValue: boolean) {\n this.updateRadiosProperty(\"required\", newValue);\n }\n\n @Watch(\"value\")\n watchValue(newValue: string) {\n this.updateCheckedRadioByValue(newValue);\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"preventUpdateProperties\")\n preventUpdatePropertiesWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n this._preventUpdateProperties = JSON.parse(newValue);\n } else {\n this._preventUpdateProperties = newValue;\n }\n }\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n\n @Listen(\"stzhChange\")\n onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n this.value = event.detail.value;\n }\n\n /** Radio elements */\n private radios: HTMLStzhRadioElement[];\n private radiogroupId: string;\n private observer: MutationObserver;\n\n private updateRadiosProperty(prop: string, value: any) {\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n radio[camelCase(prop)] = value;\n }\n });\n }\n\n private get errorUsed(): boolean {\n return hasSlot(this.element, 'error') || this._error?.length > 0;\n }\n\n private updateCheckedRadioByValue(value: string) {\n this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n if (this.checkedRadio) {\n this.checkedRadio.checked = true;\n }\n\n this.uncheckRadios();\n }\n\n private uncheckRadios() {\n // make sure that no other radios are checked than the current one or no one\n this.radios.forEach((radio: HTMLStzhRadioElement) => {\n if (!this.checkedRadio || radio !== this.checkedRadio) {\n radio.checked = false;\n }\n });\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n }\n\n private init = () => {\n // update radios\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n this.updateRadiosProperty(\"hide-optional\", true);\n this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n this.watchValue(this.value);\n this.watchName(this.name);\n this.watchDisabled(this.disabled);\n this.watchRequired(this.required);\n }\n\n componentDidLoad() {\n this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n }\n\n async componentWillLoad() {\n this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n this.errorWatcher(this.error);\n this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n }\n }\n\n componentShouldUpdate(_newValue, _oldValue, prop: string) {\n return prop !== \"checkedRadio\";\n }\n\n componentDidRender() {\n this.init();\n }\n\n connectedCallback() {\n if (!this.value) {\n this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n // try to find a checkbox that might has checked set to true\n const checkedRadio = this.radios.find(radio => radio.checked);\n\n if (checkedRadio) {\n this.value = checkedRadio.value;\n }\n }\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n\n const classes = {\n \"stzh-radiogroup\": true,\n \"stzh-radiogroup--has-description\": descriptionUsed,\n \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n \"stzh-radiogroup--has-error\": this.errorUsed,\n \"stzh-radiogroup--is-required\": this.required,\n \"stzh-radiogroup--is-disabled\": this.disabled,\n \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n \"stzh-radiogroup--hide-legend\": this.hideLegend,\n [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n };\n\n return (\n <Host is-invalid={this.invalid || this.errorUsed}>\n <fieldset class={classes}>\n {this.legend &&\n <legend class=\"stzh-radiogroup__legend\">\n {this.legend}\n {!this.hideOptional &&\n <span class=\"stzh-radiogroup__marker\">\n <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-radiogroup__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </legend>\n }\n <div class=\"stzh-radiogroup__fields\">\n <slot></slot>\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-radiogroup\"\n id={`${this.radiogroupId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </fieldset>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-c9eecee7.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,c as t,h as e,a as i,g as a}from"./p-c7bfac7a.js";import{i as h}from"./p-7e304ea3.js";import{a as r,r as o,m as c}from"./p-10e2901a.js";import"./p-9b063923.js";const l=".sc-stzh-carousel-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-carousel-h{display:none}.sc-stzh-carousel-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-carousel-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-carousel-h .sc-stzh-carousel,.sc-stzh-carousel-h .sc-stzh-carousel::before,.sc-stzh-carousel-h .sc-stzh-carousel::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-carousel-h .has-focus.sc-stzh-carousel{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel{outline-style:none !important}.sc-stzh-carousel-h .stzh-fylingfocus-focused.sc-stzh-carousel::-moz-focus-inner{border:0 !important}.sc-stzh-carousel-h{--gutter:var(--stzh-space-medium);--peek:calc(var(--peek-in, 0px) + var(--peek-out, 0px));--peek-in:calc(var(--stzh-space-medium) + var(--stzh-space-medium));--padding-top:0px;--padding-bottom:0px;--snap-stop:always;--slides:1;--slide-size:calc((100% - (var(--slides) - 1) var(--gutter)) / var(--slides))}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-large)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.sc-stzh-carousel-h{--gutter:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.sc-stzh-carousel-h{--peek-in:calc(var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge))}}@media screen and (min-width: 900px){.sc-stzh-carousel-h{--peek-in:calc(var(--stzh-space-big) + var(--stzh-space-xxlarge))}}.sc-stzh-carousel-h .sc-stzh-carousel-s>{width:100%;height:100%;flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:var(--snap-stop);transition:opacity var(--stzh-base-transition-animation-speed)}.sc-stzh-carousel-h .sc-stzh-carousel-s>:where([inert]){opacity:0.5}.sc-stzh-carousel-h .sc-stzh-carousel-s>:where(stzh-figure[inert]){--caption-opacity:0}.sc-stzh-carousel-h .sc-stzh-carousel-s img{-webkit-user-drag:none;user-drag:none;-moz-user-select:none;-webkit-user-select:none;user-select:none}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{position:absolute;top:0;left:0;z-index:1;pointer-events:none;padding:0 var(--peek)}@media print{.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions]{display:none}}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-text{width:auto}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] stzh-button{pointer-events:all}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous,.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{position:absolute;top:50%;transform:translateY(-50%)}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-medium) + var(--stzh-space-medium)) / -1)}@media screen and (min-width: 600px){.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-previous{left:calc((var(--stzh-space-big) + var(--stzh-space-xxlarge)) / -1)}}.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-medium) + var(--stzh-space-medium)) / -1)}@media screen and (min-width: 600px){.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-xxxlarge) + var(--stzh-space-xlarge)) / -1)}}@media screen and (min-width: 900px){.sc-stzh-carousel-h .sc-stzh-carousel-s>[slot=actions] .stzh-carousel-action-next{right:calc((var(--stzh-space-big) + var(--stzh-space-xxlarge)) / -1)}}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-space,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-hspace,.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions] stzh-vspace{padding:var(--stzh-space-xsmall)}.sc-stzh-carousel-h .sc-stzh-carousel-s>stzh-ratio[slot=actions]{--background-color:transparent}[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-xsmall);--padding-top:0.25rem;--padding-bottom:0.25rem}@media screen and (min-width: 900px){[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-small)}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--gutter:var(--stzh-space-medium)}}@media screen and (min-width: 900px){[variant=cards].sc-stzh-carousel-h{--peek-out:2.5rem}}@media screen and (min-width: 1260px){[variant=cards].sc-stzh-carousel-h{--peek-out:4rem}}@media screen and (min-width: 1600px){[variant=cards].sc-stzh-carousel-h{--peek-out:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2)}}.sc-stzh-carousel-h[variant=cards] .sc-stzh-carousel-s>[slot=actions]{position:relative;order:1;margin-top:calc(var(--stzh-space-medium) - var(--padding-bottom))}[no-peek].sc-stzh-carousel-h:not([no-peek=false]){--peek-out:0px;--peek-in:0px}.stzh-carousel.sc-stzh-carousel{position:relative;display:flex;flex-direction:column;width:calc(100% + var(--peek-out) 2);margin-left:calc(var(--peek-out) / -1);margin-right:calc(var(--peek-out) / -1)}.stzh-carousel__vhidden.sc-stzh-carousel{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-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-medium);margin-left:auto;margin-right:auto;position:relative;width:14.375rem;height:0.25rem;background-color:var(--stzh-color-black20op)}@media screen and (min-width: 600px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-carousel__indicator.sc-stzh-carousel{margin-top:var(--stzh-space-xxlarge)}}.stzh-carousel__indicator-track.sc-stzh-carousel{position:absolute;background-color:var(--stzh-color-secondary50);height:0.375rem;left:0px;bottom:0px;transition-property:left, width;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-carousel__scroll.sc-stzh-carousel{position:relative;grid-area:slides;display:grid;width:100%;height:100%;place-items:center;overflow-x:auto;overflow-y:visible;grid-auto-flow:column;grid-auto-columns:var(--slide-size);grid-auto-rows:100%;-moz-column-gap:var(--gutter);column-gap:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scroll-padding:0 var(--peek);padding:var(--padding-top) var(--peek) var(--padding-bottom)}@media (prefers-reduced-motion: reduce){.stzh-carousel__scroll.sc-stzh-carousel{scroll-behavior:auto}}.stzh-carousel__scroll.sc-stzh-carousel::-webkit-scrollbar{display:none}.stzh-carousel--is-draggable.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grab;cursor:grab}.stzh-carousel--is-dragging.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:-webkit-grabbing;cursor:grabbing}.stzh-carousel--is-disabled.sc-stzh-carousel .stzh-carousel__scroll.sc-stzh-carousel{cursor:not-allowed;overflow:hidden}.stzh-carousel--is-non-interactive.sc-stzh-carousel{pointer-events:none;touch-action:none}";const n=window.matchMedia("(prefers-reduced-motion: reduce)");let u=0;const d=class{constructor(e){s(this,e);this.stzhSlideStart=t(this,"stzhSlideStart",7);this.stzhSlidePassed=t(this,"stzhSlidePassed",7);this.stzhSlideEnd=t(this,"stzhSlideEnd",7);this.slideScrollLeft=0;this.scrolledByAutoplay=false;this.scrollTimeoutId=null;this.lastX=null;this.startX=null;this.startScrollLeft=null;this.disableTimeoutId=null;this.stoppedDragging=false;this.onReducedMotionMediaChange=()=>{this.autoplayDisabledByMotionMedia=n.matches};this.onMouseenter=()=>{if(!this.preventAutoplayPause){this.autoplayDisabledByMouse=true}};this.onMouseleave=()=>{this.autoplayDisabledByMouse=false};this.onFocusin=()=>{if(!this.preventAutoplayPause){this.autoplayDisabledByFocus=true}};this.onFocusout=()=>{this.autoplayDisabledByFocus=false};this.onPreviousClick=()=>{this.scrollToPreviousSnapPoint()};this.onNextClick=()=>{this.scrollToNextSnapPoint()};this.onSlideResize=()=>{if(this.scrollElement){this.itemSize=this.sizingMethod()}};this.onMutation=()=>{if(!this.scrollElement){return}this.slideElements=Array.from(this.scrollElement.children);this.slideElements.forEach(((s,t)=>{s.setAttribute("role","group");s.setAttribute("aria-roledescription","slide");s.setAttribute("aria-label",this.localization.slideLabel.replace(/\{current\}/gi,(t+1).toString()).replace(/\{total\}/gi,this.slideElements.length.toString()))}));this.previousElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-previous]"));this.nextElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-next]"));this.navigationTextElements=Array.from(this.element.querySelectorAll("[data-stzh-carousel-navigation-text]"))};this.onScroll=()=>{if(this.scrollTimeoutId===null){const s=this.scrollElement.scrollLeft>this.slideScrollLeft?1:-1;this.scrolling=true;if(!this.scrolledByAutoplay){if(this.preventAutoplayStop){this.autoplayDisabledByScroll=true}else{this.autoplay=false}}this.stzhSlideStart.emit({component:"stzh-carousel",index:this.slide+s})}if(this.slide!==this.calculateSlide()){this.update();this.stzhSlidePassed.emit({component:"stzh-carousel",index:this.slide})}this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=window.setTimeout(this.onScrollEnd,this.scrollTimeout)};this.onScrollEnd=()=>{this.scrollTimeoutId=null;this.update();this.scrolling=false;this.scrolledByAutoplay=false;this.autoplayDisabledByScroll=false;if(this.stoppedDragging){this.stoppedDragging=false;this.scrollElement.style.removeProperty("scroll-behavior");this.scrollElement.style.removeProperty("scroll-snap-type")}if(this.tabThrough\|\|this.variant==="cards"){this.ariaLive=""}else{this.ariaLive=(this.currentSlides>1?this.localization.slidesLabel:this.localization.slideLabel).replace(/\{(current\|from)\}/gi,(this.slide+1).toString()).replace(/\{to\}/gi,(this.slide+this.currentSlides).toString()).replace(/\{total\}/gi,this.slideElements.length.toString())}this.stzhSlideEnd.emit({component:"stzh-carousel",index:this.slide})};this.onMediaChange=()=>{const s=c("ultra").matches;const t=c("large").matches;const e=c("medium").matches;const i=c("small").matches;if(s&&this.slidesUltra!==0){this.currentSlides=this.slidesUltra}else if(t&&this.slidesLarge!==0){this.currentSlides=this.slidesLarge}else if(e&&this.slidesMedium!==0){this.currentSlides=this.slidesMedium}else if(i&&this.slidesSmall!==0){this.currentSlides=this.slidesSmall}else{this.currentSlides=this.slides}this.currentSwipeSlides=this.currentSlides};this.mouseMove=s=>{const t=this.lastX-s.clientX;this.lastX=s.clientX;this.scrollElement.scrollLeft+=t};this.startDragging=s=>{s.preventDefault();this.disableTimeoutId&&window.clearTimeout(this.disableTimeoutId);this.disableTimeoutId=null;this.startX=this.lastX=s.clientX;this.startScrollLeft=this.scrollElement.scrollLeft;this.scrollElement.style.setProperty("scroll-behavior","auto");this.scrollElement.style.setProperty("scroll-snap-type","unset");this.dragging=true;if(this.preventAutoplayStop){this.autoplayDisabledByDrag=true}else{this.autoplay=false}window.addEventListener("mousemove",this.mouseMove);window.addEventListener("mouseup",this.stopDragging,{capture:true});window.addEventListener("click",this.checkClick,{capture:true})};this.stopDragging=s=>{s.preventDefault();const t=Math.abs(this.startX-this.lastX);const e=t>this.distanceQuickSwipe;const i=this.lastX>this.startX?1:-1;this.dragging=false;this.autoplayDisabledByDrag=false;const a=this.scrollElement.scrollLeft;this.scrollElement.style.removeProperty("scroll-snap-type");const h=this.scrollElement.scrollLeft;this.scrollElement.style.setProperty("scroll-snap-type","unset");this.scrollElement.scrollTo({left:a,behavior:"auto"});if(h!==this.startScrollLeft\|\|!e){this.scrollElement.scrollTo({left:h,behavior:n.matches?"auto":"smooth"})}else if(i===1){this.slideToPrevious()}else{this.slideToNext()}window.removeEventListener("mousemove",this.mouseMove);window.removeEventListener("mouseup",this.stopDragging,{capture:true});this.stoppedDragging=true};this.checkClick=s=>{const t=Math.abs(this.startX-this.lastX);const e=t>this.distancePreventClick;if(e){s.preventDefault();s.stopPropagation()}this.lastX=null;window.removeEventListener("click",this.checkClick,{capture:true})};this.autoplayInterval=()=>{this.scrolledByAutoplay=true;if(this.hasReachedLastSlide()){this.slideTo(0)}else{this.slideToNext()}};this.localization=undefined;this.variant="default";this.disabled=false;this.noPeek=false;this.slides=1;this.slidesSmall=0;this.slidesMedium=0;this.slidesLarge=0;this.slidesUltra=0;this.slide=0;this.autoplay=false;this.autoplayTimeout=3e3;this.nonInteractive=false;this.preventMouseDrag=false;this.preventAutoplayPause=false;this.preventAutoplayStop=false;this.tabThrough=false;this.withTrack=false;this.scrollTimeout=100;this.distanceQuickSwipe=40;this.distancePreventClick=6;this.autoplayRunning=false;this.autoplayDisabledByMotionMedia=false;this.autoplayDisabledByMouse=false;this.autoplayDisabledByFocus=false;this.autoplayDisabledByScroll=false;this.autoplayDisabledByDrag=false;this.dragging=false;this.scrolling=false;this.ariaLive="";this.currentSlides=1;this.currentSwipeSlides=1;this.slideElements=[];this.previousElements=[];this.nextElements=[];this.navigationTextElements=[]}async slideTo(s,t="smooth"){this.scrollToSlide(s,t)}async slideToPrevious(s="smooth"){this.scrollToPreviousSnapPoint(s)}async slideToNext(s="smooth"){this.scrollToNextSnapPoint(s)}disabledWatcher(){if(this.disabled){this.scrollElement&&this.scrollElement.removeEventListener("scroll",this.onScroll);this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=null;this.element.removeEventListener("mouseenter",this.onMouseenter);this.element.removeEventListener("mouseleave",this.onMouseleave);this.element.removeEventListener("focusin",this.onFocusin);this.element.removeEventListener("focusout",this.onFocusout);this.onReducedMotionMediaChange();n&&n.removeEventListener("change",this.onReducedMotionMediaChange)}else{this.scrollElement&&this.scrollElement.addEventListener("scroll",this.onScroll,{passive:true});this.element.addEventListener("mouseenter",this.onMouseenter);this.element.addEventListener("mouseleave",this.onMouseleave);this.element.addEventListener("focusin",this.onFocusin);this.element.addEventListener("focusout",this.onFocusout);n&&n.addEventListener("change",this.onReducedMotionMediaChange)}}preventMouseDragWatcher(){if(this.preventMouseDrag\|\|this.disabled){this.disableTimeoutId&&window.clearTimeout(this.disableTimeoutId);this.disableTimeoutId=null;this.scrollElement&&this.scrollElement.removeEventListener("mousedown",this.startDragging);this.lastX=null}else{this.scrollElement&&this.scrollElement.addEventListener("mousedown",this.startDragging)}}autoplayRunningWatcher(){if(!this.autoplay\|\|this.disabled\|\|this.autoplayDisabledByMotionMedia\|\|this.autoplayDisabledByMouse\|\|this.autoplayDisabledByFocus\|\|this.autoplayDisabledByScroll\|\|this.autoplayDisabledByDrag){this.autoplayIntervalId&&window.clearInterval(this.autoplayIntervalId);this.autoplayIntervalId=null;this.autoplayRunning=false}else{this.autoplayIntervalId&&window.clearInterval(this.autoplayIntervalId);this.autoplayIntervalId=window.setInterval(this.autoplayInterval,this.autoplayTimeout);this.autoplayRunning=true}}snapAlignWatcher(){this.slideElements.forEach(((s,t)=>{const e=(t-this.currentSwipeSlides)%this.currentSwipeSlides===0;if(e){s.style.removeProperty("scroll-snap-align")}else{s.style.setProperty("scroll-snap-align","none")}}))}inertWatcher(){this.slideElements.forEach(((s,t)=>{const e=this.tabThrough\|\|this.variant==="cards"\|\|t>=this.slide&&t<this.slide+this.currentSlides;s.inert=!e;if(e){s.removeAttribute("aria-hidden")}else{s.setAttribute("aria-hidden",e?"false":"true")}}))}prevNextNavigationWatcher(){const s=this.tabThrough\|\|this.variant==="cards";const t=t=>{const e=h(t);if(s){t.setAttribute("aria-hidden","true");t.setAttribute(e?"a11y-tabindex":"tabindex","-1")}else{t.removeAttribute("aria-hidden");t.removeAttribute(e?"a11y-tabindex":"tabindex")}};this.nextElements.forEach(t);this.previousElements.forEach(t)}prevNextHiddenWatcher(){const s=this.slideElements.length<=this.currentSlides;const t=t=>{if(s){t.setAttribute("hidden","")}else{t.removeAttribute("hidden")}};this.navigationTextElements.forEach(t);this.nextElements.forEach(t);this.previousElements.forEach(t)}nextPrevDisabledWatcher(){if(!this.scrollElement){return}const s=this.slide===0;const t=this.hasReachedLastSlide();this.nextElements.forEach((s=>{const e=h(s);s.setAttribute(e?"a11y-disabled":"aria-disabled",t\|\|this.disabled?"true":"false")}));this.previousElements.forEach((t=>{const e=h(t);t.setAttribute(e?"a11y-disabled":"aria-disabled",s\|\|this.disabled?"true":"false")}))}nextElementsWatcher(){this.nextElements.forEach((s=>{const t=h(s);s.addEventListener("click",this.onNextClick);s.setAttribute(t?"a11y-controls":"aria-controls",`${this.carouselId}-scroll`)}))}previousElementsWatcher(){this.previousElements.forEach((s=>{const t=h(s);s.addEventListener("click",this.onPreviousClick);s.setAttribute(t?"a11y-controls":"aria-controls",`${this.carouselId}-scroll`)}))}scrollToSlide(s,t="smooth"){if(this.disabled){return}this.scrollElement.scrollTo({left:sthis.itemSize,behavior:n.matches?"auto":t})}sizingMethod(){const s=window.getComputedStyle(this.scrollElement);return(this.scrollElement.firstElementChild\|\|this.scrollElement).offsetWidth+parseInt(s.getPropertyValue("column-gap"),10)}calculateSlide(){return Math.round(this.scrollElement.scrollLeft/this.itemSize)}scrollToPreviousSnapPoint(s="smooth"){if(this.disabled){return}let t=this.slide;let e=false;while(!e&&t>0){t=t-1;e=(t-this.currentSwipeSlides)%this.currentSwipeSlides===0}this.slideTo(t,s)}scrollToNextSnapPoint(s="smooth"){if(this.disabled){return}this.slideTo(this.slide+this.currentSwipeSlides,s)}update(){this.slide=this.calculateSlide();this.slideScrollLeft=this.slidethis.itemSize;this.onMutation()}hasReachedLastSlide(){const{scrollLeft:s,offsetWidth:t,scrollWidth:e}=this.scrollElement;return Math.ceil(s+t)>=e}async componentWillLoad(){this.carouselId=`stzh-carousel-${u++}`;this.onMediaChange();if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"carousel")}}componentDidLoad(){this.itemSize=this.sizingMethod();this.update();this.disabledWatcher();this.preventMouseDragWatcher();this.autoplayRunningWatcher()}connectedCallback(){r(this.onMediaChange);this.resizeObserver=new ResizeObserver(this.onSlideResize);this.resizeObserver.observe(this.element);this.mutationObserver=new MutationObserver(this.onMutation);this.mutationObserver.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){this.scrollTimeoutId&&window.clearTimeout(this.scrollTimeoutId);this.scrollTimeoutId=null;o(this.onMediaChange);if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}}render(){var s,t;const a={"stzh-carousel":true,"stzh-carousel--is-disabled":this.disabled,"stzh-carousel--is-draggable":!this.preventMouseDrag,"stzh-carousel--is-non-interactive":this.nonInteractive,"stzh-carousel--is-dragging":this.dragging,"stzh-carousel--is-scrolling":this.scrolling,"stzh-carousel--has-autoplay":this.autoplay,"stzh-carousel--is-autoplay-running":this.autoplayRunning};return e(i,{"aria-roledescription":"carousel",style:{"--slides":this.currentSlides.toString()}},e("div",{class:a},e("slot",{name:"actions"}),e("div",{class:"stzh-carousel__vhidden","aria-live":this.autoplayDisabledByFocus\|\|this.autoplayDisabledByMouse?"polite":"off"},this.ariaLive),e("div",{ref:s=>this.scrollElement=s,id:`${this.carouselId}-scroll`,class:"stzh-carousel__scroll"},e("slot",null)),this.withTrack&&e("div",{class:"stzh-carousel__indicator"},e("div",{class:"stzh-carousel__indicator-track",style:{left:`${100/(((s=this.slideElements)===null\|\|s===void 0?void 0:s.length)\|\|1)this.slide}%`,width:`${100/(((t=this.slideElements)===null\|\|t===void 0?void 0:t.length)\|\|1)this.currentSlides\|\|0}%`}}))))}get element(){return a(this)}static get watchers(){return{disabled:["disabledWatcher","preventMouseDragWatcher","autoplayRunningWatcher","nextPrevDisabledWatcher"],preventMouseDrag:["preventMouseDragWatcher"],autoplay:["autoplayRunningWatcher"],autoplayDisabledByMotionMedia:["autoplayRunningWatcher"],autoplayDisabledByMouse:["autoplayRunningWatcher"],autoplayDisabledByFocus:["autoplayRunningWatcher"],autoplayDisabledByScroll:["autoplayRunningWatcher"],autoplayDisabledByDrag:["autoplayRunningWatcher"],autoplayTimeout:["autoplayRunningWatcher"],slideElements:["snapAlignWatcher","inertWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher"],currentSwipeSlides:["snapAlignWatcher"],slide:["inertWatcher","nextPrevDisabledWatcher"],variant:["inertWatcher","prevNextNavigationWatcher"],currentSlides:["inertWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher"],tabThrough:["inertWatcher","prevNextNavigationWatcher"],nextElements:["prevNextNavigationWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher","nextElementsWatcher"],previousElements:["prevNextNavigationWatcher","prevNextHiddenWatcher","nextPrevDisabledWatcher","previousElementsWatcher"],navigationTextElements:["prevNextHiddenWatcher"]}}};d.style=l;export{d as stzh_carousel};
2	+ //# sourceMappingURL=p-c9eecee7.entry.js.map