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

@oiz/stzh-components 2.12.0-beta2 → 2.13.0-beta1

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

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhProgressbarItemCss='.sc-stzh-progressbar-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-item-h{display:none}.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{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@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-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, var(--stzh-color-zueribluedark))}@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:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stzh-color-grey55);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.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;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);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-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;-webkit-transition:color var(--stzh-base-transition-animation-speed);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%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@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;-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);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, var(--stzh-color-zueribluedark))}@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-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, var(--stzh-color-zueribluedark))}@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%;-webkit-transform:translateX(-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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueriblue))}@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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}@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, var(--stzh-color-zueriblue))}@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, var(--stzh-color-zueriblue));border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));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, var(--stzh-color-zueriblue));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, var(--stzh-color-zueribluedark))}@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-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-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}}';var StzhProgressbarItem=function(){function r(r){var s=this;registerInstance(this,r);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhDottedClick=createEvent(this,"stzhDottedClick",7);this.onClick=function(r){s.stzhClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.onDottedClick=function(r){s.stzhDottedClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.label=undefined;this.disabled=false;this.first=false;this.last=false;this.passed=false;this.current=false;this.hide=false;this.dotted=false;this.step=1;this.icon="";this.analyticsId=undefined}r.prototype.componentDidRender=function(){var r=this;requestAnimationFrame((function(){r.button.setAttribute("s-object-id",r.analyticsId||r.text.innerText)}))};r.prototype.render=function(){var r=this;var s={"stzh-progressbar-item":true,"stzh-progressbar-item--first":this.first,"stzh-progressbar-item--last":this.last,"stzh-progressbar-item--passed":this.passed,"stzh-progressbar-item--current":this.current,"stzh-progressbar-item--hide":this.hide,"stzh-progressbar-item--dotted":this.dotted,"stzh-progressbar-item--has-icon":!!this.icon,"stzh-progressbar-item--is-disabled":this.disabled};var t=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:s},this.last&&this.dotted&&t,h("button",{ref:function(s){return r.button=s},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:function(s){return r.text=s},class:"stzh-progressbar-item__label-block"},this.label?this.label:h("slot",null))),this.first&&this.dotted&&t))};Object.defineProperty(r.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();StzhProgressbarItem.style=stzhProgressbarItemCss;export{StzhProgressbarItem as stzh_progressbar_item};
+import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhProgressbarItemCss='.sc-stzh-progressbar-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-progressbar-item-h{display:none}.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{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-progressbar-item-h .has-focus.sc-stzh-progressbar-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}@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-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, var(--stzh-color-zueribluedark))}@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:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stzh-color-grey55);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 1024px){.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;-webkit-transition:background-color var(--stzh-base-transition-animation-speed);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-grey55);padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;-webkit-transition:color var(--stzh-base-transition-animation-speed);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%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}@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;-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);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, var(--stzh-color-zueribluedark))}@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-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, var(--stzh-color-zueribluedark))}@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%;-webkit-transform:translateX(-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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueriblue))}@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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}@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, var(--stzh-color-zueriblue))}@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, var(--stzh-color-zueriblue));border:solid 0.0625rem var(--stzh-color-primary, var(--stzh-color-zueriblue));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, var(--stzh-color-zueriblue));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, var(--stzh-color-zueribluedark))}@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-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-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}}';var StzhProgressbarItem=function(){function r(r){var s=this;registerInstance(this,r);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhDottedClick=createEvent(this,"stzhDottedClick",7);this.onClick=function(r){s.stzhClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.onDottedClick=function(r){s.stzhDottedClick.emit({component:"stzh-progressbar-item",originalEvent:r,index:Array.prototype.indexOf.call(s.element.parentNode.children,s.element)})};this.label=undefined;this.disabled=false;this.first=false;this.last=false;this.passed=false;this.current=false;this.hide=false;this.dotted=false;this.step=1;this.icon="";this.analyticsId=undefined}r.prototype.componentDidRender=function(){var r=this;requestAnimationFrame((function(){var s;(s=r.button)===null||s===void 0?void 0:s.setAttribute("s-object-id",r.analyticsId||r.text.innerText)}))};r.prototype.render=function(){var r=this;var s={"stzh-progressbar-item":true,"stzh-progressbar-item--first":this.first,"stzh-progressbar-item--last":this.last,"stzh-progressbar-item--passed":this.passed,"stzh-progressbar-item--current":this.current,"stzh-progressbar-item--hide":this.hide,"stzh-progressbar-item--dotted":this.dotted,"stzh-progressbar-item--has-icon":!!this.icon,"stzh-progressbar-item--is-disabled":this.disabled};var t=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:s},this.last&&this.dotted&&t,h("button",{ref:function(s){return r.button=s},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:function(s){return r.text=s},class:"stzh-progressbar-item__label-block"},this.label?this.label:h("slot",null))),this.first&&this.dotted&&t))};Object.defineProperty(r.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();StzhProgressbarItem.style=stzhProgressbarItemCss;export{StzhProgressbarItem as stzh_progressbar_item};
 //# sourceMappingURL=stzh-progressbar-item.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","this","onClick","event","_this","stzhClick","emit","component","originalEvent","index","Array","prototype","indexOf","call","element","parentNode","children","onDottedClick","stzhDottedClick","componentDidRender","requestAnimationFrame","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"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: $colorPrimary8;\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: $colorGrey55;\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: $colorGrey55;\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: $colorPrimary8;\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: $colorGrey55;\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: $colorGrey55;\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"],"mappings":"kHAAA,IAAMA,uBAAyB,++qB,ICwBlBC,oBAAmB,W,4JAuCtBC,KAAAC,QAAU,SAACC,GACjBC,EAAKC,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,EAIvEb,KAAAgB,cAAgB,SAACd,GACvBC,EAAKc,gBAAgBZ,KAAK,CACxBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,qCAhDlC,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAoCxCd,EAAAW,UAAAQ,mBAAA,eAAAf,EAAAH,KACEmB,uBAAsB,WACpBhB,EAAKiB,OAAOC,aAAa,cAAelB,EAAKmB,aAAenB,EAAKoB,KAAKC,U,KAI1EzB,EAAAW,UAAAe,OAAA,eAAAtB,EAAAH,KACE,IAAM0B,EAAU,CACd,wBAAyB,KACzB,+BAAgC1B,KAAK2B,MACrC,8BAA+B3B,KAAK4B,KACpC,gCAAiC5B,KAAK6B,OACtC,iCAAkC7B,KAAK8B,QACvC,8BAA+B9B,KAAK+B,KACpC,gCAAiC/B,KAAKgC,OACtC,oCAAqChC,KAAKiC,KAC1C,qCAAsCjC,KAAKkC,UAG7C,IAAMF,EACJG,EAAA,UACEC,MAAM,gCACNnC,QAASD,KAAKgB,eAEdmB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,KAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACT1B,KAAK4B,MAAQ5B,KAAKgC,QAAUA,EAC7BG,EAAA,UACEK,IAAK,SAACC,GAAE,OAAMtC,EAAKiB,OAASqB,CAApB,EACRL,MAAM,gCAA+B,eACvBpC,KAAK8B,QAAU,OAAS,QACtCI,SAAWlC,KAAKgC,QAAUhC,KAAK2B,OAAU3B,KAAKkC,SAC9CjC,QAASD,KAAKC,SAEdkC,EAAA,QAAMC,MAAM,uCACTpC,KAAKiC,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAMrC,KAAKiC,OAE/DE,EAACO,SAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiCpC,KAAK2C,MACjD3C,KAAK6B,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAK,SAACC,GAAE,OAAMtC,EAAKoB,KAAOkB,CAAlB,EACRL,MAAM,sCAELpC,KAAK4C,MAAQ5C,KAAK4C,MAAQT,EAAA,eAG9BnC,KAAK2B,OAAS3B,KAAKgC,QAAUA,G,qIAlHR,G"}
1	+ {"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","this","onClick","event","_this","stzhClick","emit","component","originalEvent","index","Array","prototype","indexOf","call","element","parentNode","children","onDottedClick","stzhDottedClick","componentDidRender","requestAnimationFrame","_a","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"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: $colorPrimary8;\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: $colorGrey55;\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: $colorGrey55;\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: $colorPrimary8;\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: $colorGrey55;\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: $colorGrey55;\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"],"mappings":"kHAAA,IAAMA,uBAAyB,++qB,ICwBlBC,oBAAmB,W,4JAuCtBC,KAAAC,QAAU,SAACC,GACjBC,EAAKC,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,EAIvEb,KAAAgB,cAAgB,SAACd,GACvBC,EAAKc,gBAAgBZ,KAAK,CACxBC,UAAW,wBACXC,cAAeL,EACfM,MAAOC,MAAMC,UAAUC,QAAQC,KAAKT,EAAKU,QAAQC,WAAWC,SAAUZ,EAAKU,U,qCAhDlC,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAoCxCd,EAAAW,UAAAQ,mBAAA,eAAAf,EAAAH,KACEmB,uBAAsB,W,OACpBC,EAAAjB,EAAKkB,UAAM,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAenB,EAAKoB,aAAepB,EAAKqB,KAAKC,U,KAI3E1B,EAAAW,UAAAgB,OAAA,eAAAvB,EAAAH,KACE,IAAM2B,EAAU,CACd,wBAAyB,KACzB,+BAAgC3B,KAAK4B,MACrC,8BAA+B5B,KAAK6B,KACpC,gCAAiC7B,KAAK8B,OACtC,iCAAkC9B,KAAK+B,QACvC,8BAA+B/B,KAAKgC,KACpC,gCAAiChC,KAAKiC,OACtC,oCAAqCjC,KAAKkC,KAC1C,qCAAsClC,KAAKmC,UAG7C,IAAMF,EACJG,EAAA,UACEC,MAAM,gCACNpC,QAASD,KAAKgB,eAEdoB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,KAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACT3B,KAAK6B,MAAQ7B,KAAKiC,QAAUA,EAC7BG,EAAA,UACEK,IAAK,SAACC,GAAE,OAAMvC,EAAKkB,OAASqB,CAApB,EACRL,MAAM,gCAA+B,eACvBrC,KAAK+B,QAAU,OAAS,QACtCI,SAAWnC,KAAKiC,QAAUjC,KAAK4B,OAAU5B,KAAKmC,SAC9ClC,QAASD,KAAKC,SAEdmC,EAAA,QAAMC,MAAM,uCACTrC,KAAKkC,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAMtC,KAAKkC,OAE/DE,EAACO,SAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiCrC,KAAK4C,MACjD5C,KAAK8B,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAK,SAACC,GAAE,OAAMvC,EAAKqB,KAAOkB,CAAlB,EACRL,MAAM,sCAELrC,KAAK6C,MAAQ7C,KAAK6C,MAAQT,EAAA,eAG9BpC,KAAK4B,OAAS5B,KAAKiC,QAAUA,G,qIAlHR,G"}

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

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhSkiplinkCss=".sc-stzh-skiplink-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-skiplink-h .has-focus.sc-stzh-skiplink{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink{outline-style:none !important}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink::-moz-focus-inner{border:0 !important}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";var StzhSkiplink=function(){function t(t){var s=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!s.focusedByInput){s.link.focus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var e=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(e);s.stzhFocus.emit({component:"stzh-skiplink",originalEvent:t})};this.onBlur=function(t){var e=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(e);s.stzhBlur.emit({component:"stzh-skiplink",originalEvent:t})};this.label="";this.href=undefined;this.linkAccesskey=undefined;this.linkTitle=undefined;this.analyticsId=undefined;this.focused=false}t.prototype.focusinHandler=function(){this.focused=true};t.prototype.focusoutHandler=function(){this.focused=false};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.link.setAttribute("s-object-id",t.analyticsId||t.label||t.text.innerText)}))};t.prototype.render=function(){var t=this;return h(Host,{focused:this.focused,tabindex:"-1",onFocus:this.onRootFocus},h("a",{ref:function(s){return t.link=s},class:"stzh-skiplink",href:this.href,accessKey:this.linkAccesskey,title:this.linkTitle,onFocus:this.onFocus,onBlur:this.onBlur},h("div",{ref:function(s){return t.text=s}},this.label?this.label:h("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhSkiplink.style=stzhSkiplinkCss;export{StzhSkiplink as stzh_skiplink};
+import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhSkiplinkCss=".sc-stzh-skiplink-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-skiplink-h{display:none}.sc-stzh-skiplink-h *.sc-stzh-skiplink,.sc-stzh-skiplink-h *.sc-stzh-skiplink::before,.sc-stzh-skiplink-h *.sc-stzh-skiplink::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-skiplink-h .has-focus.sc-stzh-skiplink{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink{outline-style:none !important}.sc-stzh-skiplink-h .stzh-fylingfocus-focused.sc-stzh-skiplink::-moz-focus-inner{border:0 !important}.sc-stzh-skiplink-h:not([focused]){padding:0 !important;margin:0 !important}.stzh-skiplink.sc-stzh-skiplink{display:inline-block;right:0;top:0;white-space:nowrap;padding:var(--stzh-space-large) var(--stzh-space-xxlarge);border:solid 0.0625rem var(--stzh-color-grey40);border-radius:0.125rem;background:var(--stzh-color-white);color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-skiplink.sc-stzh-skiplink:not(:focus):not(:active){border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-skiplink.sc-stzh-skiplink:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}";var StzhSkiplink=function(){function t(t){var s=this;registerInstance(this,t);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!s.focusedByInput){s.link.focus()}s.focusedByInput=false};this.onFocus=function(t){s.focusedByInput=true;var i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhFocus.emit({component:"stzh-skiplink",originalEvent:t})};this.onBlur=function(t){var i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});s.element.dispatchEvent(i);s.stzhBlur.emit({component:"stzh-skiplink",originalEvent:t})};this.label="";this.href=undefined;this.linkAccesskey=undefined;this.linkTitle=undefined;this.analyticsId=undefined;this.focused=false}t.prototype.focusinHandler=function(){this.focused=true};t.prototype.focusoutHandler=function(){this.focused=false};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){var s;(s=t.link)===null||s===void 0?void 0:s.setAttribute("s-object-id",t.analyticsId||t.label||t.text.innerText)}))};t.prototype.render=function(){var t=this;return h(Host,{focused:this.focused,tabindex:"-1",onFocus:this.onRootFocus},h("a",{ref:function(s){return t.link=s},class:"stzh-skiplink",href:this.href,accessKey:this.linkAccesskey,title:this.linkTitle,onFocus:this.onFocus,onBlur:this.onBlur},h("div",{ref:function(s){return t.text=s}},this.label?this.label:h("slot",null))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhSkiplink.style=stzhSkiplinkCss;export{StzhSkiplink as stzh_skiplink};
 //# sourceMappingURL=stzh-skiplink.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","this","focusedByInput","onRootFocus","_this","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","prototype","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n} from \"@stencil/core\";\n\nimport {\n StzhSkiplinkFocusEvent,\n StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /* Label /\n @Prop() label: string = \"\";\n\n /* href for linking to e.g. id of an element to skip to /\n @Prop() href: string;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Link title for description e.g. how to use skiplink with access key ([ALT + 1]) /\n @Prop() linkTitle: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Whether the skiplink is currently focused /\n @State() focused: boolean = false;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n /* Blur event */\n @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n @Element() element: HTMLStzhSkiplinkElement;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n // dispatch native focus event\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n\n // dispatch own focus event for updating flyingfocus position correctly\n this.stzhFocus.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n\n this.stzhBlur.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link.setAttribute(\"s-object-id\", this.analyticsId \|\| this.label \|\| this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,IAAMA,gBAAkB,+xD,ICyBXC,aAAY,W,8IA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,KAAKC,O,CAGZF,EAAKF,eAAiB,K,EAGhBD,KAAAM,QAAU,SAACC,GACjBJ,EAAKF,eAAiB,KAGtB,IAAMO,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcP,GAG3BL,EAAKa,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,G,EAIXP,KAAAoB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcM,GAE3BlB,EAAKmB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,G,aAjFK,G,kHAmBI,K,CAW5BR,EAAAwB,UAAAC,eAAA,WACExB,KAAKyB,QAAU,I,EAIjB1B,EAAAwB,UAAAG,gBAAA,WACE1B,KAAKyB,QAAU,K,EAiDjB1B,EAAAwB,UAAAI,mBAAA,eAAAxB,EAAAH,KACE4B,uBAAsB,~~WACpBzB~~,EAAKC,~~KAAKyB~~,~~aAAa~~,~~cAAe1B~~,~~EAAK2B~~,~~aAAe3B~~,EAAK4B,~~OAAS5B~~,EAAK6B,KAAKC,U,~~KAItFlC~~,EAAAwB,~~UAAAW~~,OAAA,~~eAAA/B~~,EAAAH,KACE,~~OACEmC~~,EAACC,KAAI,~~CAACX~~,QAASzB,KAAKyB,~~QAASY~~,SAAS,~~KAAK/B~~,QAASN,KAAKE,~~aACvDiC~~,EAAA,KACEG,IAAK,SAACC,GAAE,~~OAAMpC~~,EAAKC,~~KAAOmC~~,CAAlB,EACRC,MAAM,gBACNC,~~KAAMzC~~,~~KAAKyC~~,KACXC,~~UAAW1C~~,~~KAAK2C~~,cAChBC,~~MAAO5C~~,~~KAAK6C~~,~~UACZvC~~,QAASN,KAAKM,QACdc,OAAQpB,KAAKoB,~~QAEbe~~,EAAA,OAAKG,IAAK,SAACC,GAAE,~~OAAMpC~~,~~EAAK6B~~,KAAOO,CAAlB,~~GACVvC~~,~~KAAK+B~~,~~MAAQ/B~~,~~KAAK+B~~,MAAQI,EAAA,e,qIA1Gd,G"}
1	+ {"version":3,"names":["stzhSkiplinkCss","StzhSkiplink","this","focusedByInput","onRootFocus","_this","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","prototype","focusinHandler","focused","focusoutHandler","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","label","text","innerText","render","h","Host","tabindex","ref","el","class","href","accessKey","linkAccesskey","title","linkTitle"],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n} from \"@stencil/core\";\n\nimport {\n StzhSkiplinkFocusEvent,\n StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/*\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /* Label /\n @Prop() label: string = \"\";\n\n /* href for linking to e.g. id of an element to skip to /\n @Prop() href: string;\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* Link title for description e.g. how to use skiplink with access key ([ALT + 1]) /\n @Prop() linkTitle: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Whether the skiplink is currently focused /\n @State() focused: boolean = false;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n /* Blur event */\n @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n @Element() element: HTMLStzhSkiplinkElement;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n // dispatch native focus event\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n\n // dispatch own focus event for updating flyingfocus position correctly\n this.stzhFocus.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n\n this.stzhBlur.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.label \|\| this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,IAAMA,gBAAkB,+xD,ICyBXC,aAAY,W,8IA2CfC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,WACpB,IAAKC,EAAKF,eAAgB,CACxBE,EAAKC,KAAKC,O,CAGZF,EAAKF,eAAiB,K,EAGhBD,KAAAM,QAAU,SAACC,GACjBJ,EAAKF,eAAiB,KAGtB,IAAMO,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcP,GAG3BL,EAAKa,UAAUC,KAAK,CAClBC,UAAW,gBACXC,cAAeZ,G,EAIXP,KAAAoB,OAAS,SAACb,GAChB,IAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdV,EAAKW,QAAQC,cAAcM,GAE3BlB,EAAKmB,SAASL,KAAK,CACjBC,UAAW,gBACXC,cAAeZ,G,aAjFK,G,kHAmBI,K,CAW5BR,EAAAwB,UAAAC,eAAA,WACExB,KAAKyB,QAAU,I,EAIjB1B,EAAAwB,UAAAG,gBAAA,WACE1B,KAAKyB,QAAU,K,EAiDjB1B,EAAAwB,UAAAI,mBAAA,eAAAxB,EAAAH,KACE4B,uBAAsB,W,OACpBC,EAAA1B,EAAKC,QAAI,MAAAyB,SAAA,SAAAA,EAAEC,aAAa,cAAe3B,EAAK4B,aAAe5B,EAAK6B,OAAS7B,EAAK8B,KAAKC,U,KAIvFnC,EAAAwB,UAAAY,OAAA,eAAAhC,EAAAH,KACE,OACEoC,EAACC,KAAI,CAACZ,QAASzB,KAAKyB,QAASa,SAAS,KAAKhC,QAASN,KAAKE,aACvDkC,EAAA,KACEG,IAAK,SAACC,GAAE,OAAMrC,EAAKC,KAAOoC,CAAlB,EACRC,MAAM,gBACNC,KAAM1C,KAAK0C,KACXC,UAAW3C,KAAK4C,cAChBC,MAAO7C,KAAK8C,UACZxC,QAASN,KAAKM,QACdc,OAAQpB,KAAKoB,QAEbgB,EAAA,OAAKG,IAAK,SAACC,GAAE,OAAMrC,EAAK8B,KAAOO,CAAlB,GACVxC,KAAKgC,MAAQhC,KAAKgC,MAAQI,EAAA,e,qIA1Gd,G"}