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

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

package/dist/esm/stzh-progressbar-item.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-e3050b18.js';
-const stzhProgressbarItemCss = ".sc-stzh-progressbar-item-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-progressbar-item-h{display:none}.sc-stzh-progressbar-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::before,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::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-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item{outline-style:none !important}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-progressbar-item-h{display:none}.stzh-progressbar-item.sc-stzh-progressbar-item{text-align:center}.stzh-progressbar-item__button.sc-stzh-progressbar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background-color:transparent;border:none;cursor:pointer;border-radius:var(--stzh-form-input-border-radius)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover);border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight;border-color:Highlight}}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-old-primary8)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{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-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:1.3125rem;text-align:center;box-sizing:border-box;color:var(--stzh-color-old-grey55);transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:none;content:\"\";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:1.25rem;right:2.5625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item::after{content:\"\";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:1.3125rem;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-old-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{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-progressbar-item__number.sc-stzh-progressbar-item,.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{z-index:1}.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:CanvasText}}.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:50%;cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:Highlight}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:var(--stzh-color-old-primary8)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:Canvas}}@media screen and (min-width: 600px){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before,.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block}.stzh-progressbar-item--first.sc-stzh-progressbar-item{position:relative}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{left:50%;transform:translateX(-50%)}.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.96875rem))}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:Canvas;border-color:CanvasText}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{border-color:Highlight}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Canvas}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary)}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:SelectedItem}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-primary);border:solid 0.0625rem var(--stzh-color-primary);color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block;background-color:var(--stzh-color-primary);z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:CanvasText}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{margin-bottom:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{padding-left:0;padding-right:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.8125rem;right:1.875rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:none}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:Canvas}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{cursor:not-allowed}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-old-grey55);border-color:var(--stzh-base-border-color)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:GrayText;border-color:GrayText}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-old-grey55)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:GrayText}}";
+const stzhProgressbarItemCss = ".sc-stzh-progressbar-item-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-progressbar-item-h{display:none}.sc-stzh-progressbar-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::before,.sc-stzh-progressbar-item-h *.sc-stzh-progressbar-item::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-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item{outline-style:none !important}.sc-stzh-progressbar-item-h .stzh-fylingfocus-focused.sc-stzh-progressbar-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-progressbar-item-h{display:none}.stzh-progressbar-item.sc-stzh-progressbar-item{text-align:center}.stzh-progressbar-item__button.sc-stzh-progressbar-item,.stzh-progressbar-item__unclickable.sc-stzh-progressbar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background-color:transparent;border:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-progressbar-item__button.sc-stzh-progressbar-item{cursor:pointer}.stzh-progressbar-item__unclickable.sc-stzh-progressbar-item{cursor:default;pointer-events:none}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover);border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight;border-color:Highlight}}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-old-primary8)}.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{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-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:1.3125rem;text-align:center;box-sizing:border-box;color:var(--stzh-color-old-grey55);transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 900px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:none;content:\"\";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:1.25rem;right:2.5625rem}}.stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item::after{content:\"\";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;border-radius:1.3125rem;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-old-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-progressbar-item__label-block.sc-stzh-progressbar-item{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-progressbar-item__number.sc-stzh-progressbar-item,.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{z-index:1}.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:CanvasText}}.stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{--size:var(--stzh-icon-size-small);color:currentColor}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-base-border-color);border-radius:50%;cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus{border-color:Highlight}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:var(--stzh-color-old-primary8)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover::after,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus::after{background-color:Canvas}}@media screen and (min-width: 600px){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:hover .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item,.stzh-progressbar-item__dotted.sc-stzh-progressbar-item:focus .stzh-progressbar-item__dotted-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before,.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block}.stzh-progressbar-item--first.sc-stzh-progressbar-item{position:relative}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{left:50%;transform:translateX(-50%)}.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-progressbar-item--last.sc-stzh-progressbar-item .stzh-progressbar-item__dotted.sc-stzh-progressbar-item{right:calc((100% / var(--steps)) - (0.96875rem))}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-white);border:solid 0.0625rem var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:Canvas;border-color:CanvasText}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{border-color:Highlight}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Canvas}}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary)}.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--passed.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:SelectedItem}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{background-color:var(--stzh-color-primary);border:solid 0.0625rem var(--stzh-color-primary);color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{display:block;background-color:var(--stzh-color-primary);z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:CanvasText}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item,.stzh-progressbar-item--current.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__user-icon.sc-stzh-progressbar-item{color:Highlight}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{margin-bottom:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{padding-left:0;padding-right:0}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{top:0.8125rem;right:1.875rem}}.stzh-progressbar-item--dotted.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{display:none}.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--first.sc-stzh-progressbar-item .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::before{background-color:Canvas}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item{cursor:not-allowed}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:var(--stzh-color-old-grey55);border-color:var(--stzh-base-border-color)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item{color:GrayText;border-color:GrayText}}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__number-block.sc-stzh-progressbar-item::after{display:none}.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:var(--stzh-color-old-grey55)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:hover .stzh-progressbar-item__label-block.sc-stzh-progressbar-item,.stzh-progressbar-item--is-disabled.sc-stzh-progressbar-item .stzh-progressbar-item__button.sc-stzh-progressbar-item:focus .stzh-progressbar-item__label-block.sc-stzh-progressbar-item{color:GrayText}}";
 const StzhProgressbarItem = class {
   constructor(hostRef) {
@@ -31,6 +31,7 @@ const StzhProgressbarItem = class {
     this.dotted = false;
     this.step = 1;
     this.icon = "";
+    this.clickDisabled = false;
     this.analyticsId = undefined;
   }
   componentDidRender() {
@@ -52,12 +53,15 @@ const StzhProgressbarItem = class {
       "stzh-progressbar-item--is-disabled": this.disabled
     };
     const dotted = (h("button", { class: "stzh-progressbar-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-progressbar-item__dotted-icon", name: "more-horizontal" })));
-    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, h("button", { ref: (el) => (this.button = el), class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+    const content = (h("span", null, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
+      ? h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
+      : (h("span", null, h("span", { class: "stzh-progressbar-item__number" }, this.step), this.passed && h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" })))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null))));
+    return (h(Host, { role: "listitem" }, h("div", { class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-progressbar-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: (el) => (this.button = el), class: "stzh-progressbar-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-progressbar-item__number-block" }, this.icon
       ?
         h("stzh-icon", { class: "stzh-progressbar-item__user-icon", name: this.icon })
       :
         h(Fragment, null, h("span", { class: "stzh-progressbar-item__number" }, this.step), this.passed &&
-          h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" }))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null))), this.first && this.dotted && dotted)));
+          h("stzh-icon", { class: "stzh-progressbar-item__icon", name: "checkmark" }))), h("span", { ref: (el) => (this.text = el), class: "stzh-progressbar-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
   }
   get element() { return getElement(this); }
 };

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

	@@ -1 +1 @@
1	- {"file":"stzh-progressbar-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n text-align: center;\n\n &__button {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n cursor: pointer;\n border-radius: $formInputBorderRadius;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorOldPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. /\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $progressbarItemSize;\n height: $progressbarItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $progressbarItemSmallUp / 2;\n text-align: center;\n box-sizing: border-box;\n color: $colorOldGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $progressbarItemSmallUp;\n height: $progressbarItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $progressbarItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $progressbarItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $progressbarItemSmallUp / 2;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorOldGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorOldPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / First and Last /\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n / First /\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n / Last /\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n }\n }\n\n / Passed /\n\n &--passed &__label-block {\n\t\t@include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &--passed &__number-block,\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Current /\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Dotted /\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) /\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled /\n\n // &--is-disabled &__number-block {\n // background-color: $baseBorderColor;\n // }\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorOldGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorOldGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarItemClickEvent,\n StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-progressbar-item\",\n styleUrl: \"stzh-progressbar-item.scss\",\n scoped: true\n})\nexport class StzhProgressbarItem {\n @Prop({ reflect: true }) label: string;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @Prop({ reflect: true }) first: boolean = false;\n\n @Prop({ reflect: true }) last: boolean = false;\n\n @Prop({ reflect: true }) passed: boolean = false;\n\n @Prop({ reflect: true }) current: boolean = false;\n\n @Prop({ reflect: true }) hide: boolean = false;\n\n @Prop({ reflect: true }) dotted: boolean = false;\n\n @Prop({ reflect: true }) step: number = 1;\n\n @Prop({ reflect: true }) icon: string = \"\";\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n @Element() element: HTMLStzhProgressbarItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const classes = {\n \"stzh-progressbar-item\": true,\n \"stzh-progressbar-item--first\": this.first,\n \"stzh-progressbar-item--last\": this.last,\n \"stzh-progressbar-item--passed\": this.passed,\n \"stzh-progressbar-item--current\": this.current,\n \"stzh-progressbar-item--hide\": this.hide,\n \"stzh-progressbar-item--dotted\": this.dotted,\n \"stzh-progressbar-item--has-icon\": !!this.icon,\n \"stzh-progressbar-item--is-disabled\": this.disabled\n };\n\n const dotted = (\n <button\n class=\"stzh-progressbar-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-progressbar-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) \|\| this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-progressbar-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n {this.passed &&\n <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-progressbar-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-progressbar-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n text-align: center;\n\n &__button,\n &__unclickable {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n border-radius: $formInputBorderRadius;\n }\n\n &__button {\n cursor: pointer;\n }\n\n &__unclickable {\n cursor: default;\n pointer-events: none;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorOldPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. /\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $progressbarItemSize;\n height: $progressbarItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $progressbarItemSmallUp / 2;\n text-align: center;\n box-sizing: border-box;\n color: $colorOldGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $progressbarItemSmallUp;\n height: $progressbarItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $progressbarItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $progressbarItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $progressbarItemSmallUp / 2;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorOldGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorOldPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / First and Last /\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n / First /\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n / Last /\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n }\n }\n\n / Passed /\n\n &--passed &__label-block {\n\t\t@include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &--passed &__number-block,\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Current /\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n / Dotted /\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) /\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled /\n\n // &--is-disabled &__number-block {\n // background-color: $baseBorderColor;\n // }\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorOldGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorOldGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarItemClickEvent,\n StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-progressbar-item\",\n styleUrl: \"stzh-progressbar-item.scss\",\n scoped: true\n})\nexport class StzhProgressbarItem {\n @Prop({ reflect: true }) label: string;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @Prop({ reflect: true }) first: boolean = false;\n\n @Prop({ reflect: true }) last: boolean = false;\n\n @Prop({ reflect: true }) passed: boolean = false;\n\n @Prop({ reflect: true }) current: boolean = false;\n\n @Prop({ reflect: true }) hide: boolean = false;\n\n @Prop({ reflect: true }) dotted: boolean = false;\n\n @Prop({ reflect: true }) step: number = 1;\n\n @Prop({ reflect: true }) icon: string = \"\";\n\n /\n Whether the progressbar-item is clickable.\n /\n @Prop() clickDisabled: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n @Element() element: HTMLStzhProgressbarItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const classes = {\n \"stzh-progressbar-item\": true,\n \"stzh-progressbar-item--first\": this.first,\n \"stzh-progressbar-item--last\": this.last,\n \"stzh-progressbar-item--passed\": this.passed,\n \"stzh-progressbar-item--current\": this.current,\n \"stzh-progressbar-item--hide\": this.hide,\n \"stzh-progressbar-item--dotted\": this.dotted,\n \"stzh-progressbar-item--has-icon\": !!this.icon,\n \"stzh-progressbar-item--is-disabled\": this.disabled\n };\n\n const dotted = (\n <button\n class=\"stzh-progressbar-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n );\n\n const content = (\n <span>\n <span class=\"stzh-progressbar-item__number-block\">\n {this.icon\n ? <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n : (\n <span>\n <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n {this.passed && <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>}\n </span>\n )\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-progressbar-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </span>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n {this.clickDisabled ? (\n <div class=\"stzh-progressbar-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n {content}\n </div>\n ) : (\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-progressbar-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) \|\| this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-progressbar-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n {this.passed &&\n <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-progressbar-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n )}\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -31,6 +31,7 @@ const StzhProgressbar = class {
     this.stepsMedium = 0;
     this.stepsLarge = 0;
     this.stepsUltra = 0;
+    this.clickDisabled = false;
     this.currentSteps = undefined;
   }
   /**
@@ -116,7 +117,7 @@ const StzhProgressbar = class {
     };
     return (h(Host, { style: {
         '--steps': this.currentSteps ? this.currentSteps.toString() : null,
-      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, class: "stzh-progressbar__item" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-progressbar__items", role: "list", "aria-label": this.localization.label }, this._data.map((step, index) => h("stzh-progressbar-item", Object.assign({}, this.getItemAttributes(index), { icon: step.icon, disabled: step.disabled, label: step.label, "click-disabled": this.clickDisabled, class: "stzh-progressbar__item" })))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

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

	@@ -1 +1 @@
1	- {"file":"stzh-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-progressbar.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n /\n Whether all the progressbar-items are clickable.\n /\n @Prop() clickDisabled: boolean = false;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"steps\")\n @Watch(\"stepsSmall\")\n @Watch(\"stepsMedium\")\n @Watch(\"stepsLarge\")\n @Watch(\"stepsUltra\")\n stepsWatcher() {\n this.setCurrentSteps();\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host\n style={{\n '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n }}\n >\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n click-disabled={this.clickDisabled}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -15,7 +15,7 @@ const StzhRatio = class {
   }
   render() {
     const classes = {
-      "stzh-ratio": true
+      "stzh-ratio": true,
     };
     return (h(Host, null, h("div", { class: classes }, h("slot", null))));
   }

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

	@@ -1 +1 @@
1	- {"file":"stzh-ratio.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,63QAA63Q;;~~MCkBr4Q~~,SAAS;;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=scoped","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/*\n @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n \n @prop --stzh-ratio-background-color: Global: Background color of ratios\n /\n\n:host {\n --background-color: #{$ratioBackgroundColor};\n --ratio: #{nth(map-get($ratios, $ratioDefault), 1)}\n / #{nth(map-get($ratios, $ratioDefault), 2)};\n\n ::slotted() {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n object-fit: cover;\n }\n}\n\n:host([fit=\"contain\"]) ::slotted() {\n object-fit: contain;\n}\n\n/ Ratio variants /\n\n:host([portrait]:not([portrait=\"false\"])) {\n --ratio: #{nth(map-get($ratios, $ratioDefault), 2)}\n / #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n @each $ratio, $value in $ratios {\n $firstNr: nth($value, 1);\n $secondNr: nth($value, 2);\n\n @if $breakpoint {\n :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n @include mq($from: $breakpoint) {\n --ratio: #{$firstNr} / #{$secondNr};\n }\n }\n\n :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n @include mq($from: $breakpoint) {\n --ratio: #{$secondNr} / #{$firstNr};\n }\n }\n } @else {\n :host([ratio=\"#{$ratio}\"]) {\n --ratio: #{$firstNr} / #{$secondNr};\n }\n\n :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n --ratio: #{$secondNr} / #{$firstNr};\n }\n }\n }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n position: relative;\n width: 100%;\n aspect-ratio: var(--ratio);\n background: var(--background-color);\n}\n","import {\n Component~~,\n~~ Host~~,\n h,\n Element,\n~~ Prop\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/\n @slot - Slot for e.g. image or video\n /\n@Component({\n tag: \"stzh-ratio\",\n styleUrl: \"stzh-ratio.scss\",\n scoped: true\n})\nexport class StzhRatio {\n /* Aspect ratio /\n @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n /* Aspect ratio above small breakpoint /\n @Prop({ reflect: true }) ratioSmall: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above medium breakpoint /\n @Prop({ reflect: true }) ratioMedium: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above large breakpoint /\n @Prop({ reflect: true }) ratioLarge: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above ultra breakpoint /\n @Prop({ reflect: true }) ratioUltra: Layout.Ratio \| \"inherit\" = \"inherit\";\n\n /* Whether aspect ratio is in portrait mode /\n @Prop({ reflect: true }) portrait: boolean = false;\n\n /* Fit mode */\n @Prop({ reflect: true }) fit: \"cover\" \| \"contain\" = \"cover\";\n\n @Element() element: HTMLStzhRatioElement;\n\n render() {\n const classes = {\n \"stzh-ratio\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-ratio.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,63QAA63Q;;MCYr4Q,SAAS;;;iBAE2B,MAAM;sBAEW,SAAS;uBAER,SAAS;sBAEV,SAAS;sBAET,SAAS;oBAG5B,KAAK;eAGE,OAAO;;EAI3D,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;KACnB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-ratio/stzh-ratio.scss?tag=stzh-ratio&encapsulation=scoped","src/components/stzh-ratio/stzh-ratio.tsx"],"sourcesContent":["/*\n @prop --ratio: Ratio (e.g. 16 / 9)\n * @prop --background-color: Background color of ratio area\n \n @prop --stzh-ratio-background-color: Global: Background color of ratios\n /\n\n:host {\n --background-color: #{$ratioBackgroundColor};\n --ratio: #{nth(map-get($ratios, $ratioDefault), 1)}\n / #{nth(map-get($ratios, $ratioDefault), 2)};\n\n ::slotted() {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n object-fit: cover;\n }\n}\n\n:host([fit=\"contain\"]) ::slotted() {\n object-fit: contain;\n}\n\n/ Ratio variants /\n\n:host([portrait]:not([portrait=\"false\"])) {\n --ratio: #{nth(map-get($ratios, $ratioDefault), 2)}\n / #{nth(map-get($ratios, $ratioDefault), 1)};\n}\n\n@mixin ratioProps($breakpoint: null) {\n @each $ratio, $value in $ratios {\n $firstNr: nth($value, 1);\n $secondNr: nth($value, 2);\n\n @if $breakpoint {\n :host([ratio-#{$breakpoint}=\"#{$ratio}\"]) {\n @include mq($from: $breakpoint) {\n --ratio: #{$firstNr} / #{$secondNr};\n }\n }\n\n :host([ratio-#{$breakpoint}=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n @include mq($from: $breakpoint) {\n --ratio: #{$secondNr} / #{$firstNr};\n }\n }\n } @else {\n :host([ratio=\"#{$ratio}\"]) {\n --ratio: #{$firstNr} / #{$secondNr};\n }\n\n :host([ratio=\"#{$ratio}\"][portrait]:not([portrait=\"false\"])) {\n --ratio: #{$secondNr} / #{$firstNr};\n }\n }\n }\n}\n\n@include ratioProps();\n\n@each $breakpoint, $size in $breakpoints {\n @include ratioProps($breakpoint);\n}\n\n.stzh-ratio {\n position: relative;\n width: 100%;\n aspect-ratio: var(--ratio);\n background: var(--background-color);\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/\n @slot - Slot for e.g. image or video\n /\n@Component({\n tag: \"stzh-ratio\",\n styleUrl: \"stzh-ratio.scss\",\n scoped: true,\n})\nexport class StzhRatio {\n /* Aspect ratio /\n @Prop({ reflect: true }) ratio: Layout.Ratio = \"16:9\";\n /* Aspect ratio above small breakpoint /\n @Prop({ reflect: true }) ratioSmall: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above medium breakpoint /\n @Prop({ reflect: true }) ratioMedium: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above large breakpoint /\n @Prop({ reflect: true }) ratioLarge: Layout.Ratio \| \"inherit\" = \"inherit\";\n /* Aspect ratio above ultra breakpoint /\n @Prop({ reflect: true }) ratioUltra: Layout.Ratio \| \"inherit\" = \"inherit\";\n\n /* Whether aspect ratio is in portrait mode /\n @Prop({ reflect: true }) portrait: boolean = false;\n\n /* Fit mode */\n @Prop({ reflect: true }) fit: \"cover\" \| \"contain\" = \"cover\";\n\n @Element() element: HTMLStzhRatioElement;\n\n render() {\n const classes = {\n \"stzh-ratio\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -59,6 +59,7 @@ window.rsConf = {
   // hlword: '#a4cbff'
   },
   general: {
+    usePost: true,
     enableSkipAlways: true,
     shadowDomSelector: "stzh-accordion-item,stzh-timeline-item,stzh-disturber"
   },

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

	@@ -1 +1 @@
1	- {"file":"stzh-readspeaker.entry.js","mappings":"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","names":[],"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"],"version":3}
1	+ {"file":"stzh-readspeaker.entry.js","mappings":"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","names":[],"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 usePost: true,\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"],"version":3}