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

@oiz/stzh-components 2.11.1 → 2.12.0-beta2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (257) 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})};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(){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};
 //# 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 });\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,G,qCA/C0B,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAmCxCH,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,qIAjHR,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","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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,s,r){function i(e){return e instanceof s?e:new s((function(t){t(e)}))}return new(s||(s=Promise))((function(s,a){function n(e){try{h(r.next(e))}catch(e){a(e)}}function o(e){try{h(r["throw"](e))}catch(e){a(e)}}function h(e){e.done?s(e.value):i(e.value).then(n,o)}h((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var s={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,n;return n={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function o(e){return function(t){return h([e,t])}}function h(o){if(r)throw new TypeError("Generator is already executing.");while(n&&(n=0,o[0]&&(s=0)),s)try{if(r=1,i&&(a=o[0]&2?i["return"]:o[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;if(i=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:s.label++;return{value:o[1],done:false};case 5:s.label++;i=o[1];o=[0];continue;case 7:o=s.ops.pop();s.trys.pop();continue;default:if(!(a=s.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){s=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){s.label=o[1];break}if(o[0]===6&&s.label<a[1]){s.label=a[1];a=o;break}if(a&&s.label<a[2]){s.label=a[2];s.ops.push(o);break}if(a[2])s.ops.pop();s.trys.pop();continue}o=t.call(e,s)}catch(e){o=[6,e];i=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{m as media,a as addMediaChangeListener,r as removeMediaChangeListener}from"./media-utils-ee5a59fa.js";var stzhProgressbarCss=".sc-stzh-progressbar-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-h{display:none}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}";var StzhProgressbar=function(){function e(e){var t=this;registerInstance(this,e);this.setCurrentSteps=function(){if(media("ultra").matches&&t.stepsUltra){t.currentSteps=t.stepsUltra}else if(media("large").matches&&t.stepsLarge){t.currentSteps=t.stepsLarge}else if(media("medium").matches&&t.stepsMedium){t.currentSteps=t.stepsMedium}else if(media("small").matches&&t.stepsSmall){t.currentSteps=t.stepsSmall}else{t.currentSteps=t.steps}t.element.style.setProperty("--steps",t.currentSteps.toString())};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.currentSteps=undefined}e.prototype.dataWatcher=function(e){if(typeof e==="string"){this._data=JSON.parse(e)}else{this._data=e}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex};e.prototype.getItemAttributes=function(e){var t={};t.step=e+1;t.first=e===0;t.last=e===this.lastItemIndex;t.current=e===this.index;t.passed=e<this.index;if(this._data.length>this.currentSteps){if(e===this.lastItemIndex&&!this.withinLastFewSteps){t.dotted=true}if(this.index<2){t.hide=e>this.maxStepIndex-1&&e<this.lastItemIndex}else{if(e===0){t.dotted=true}var s=this.index;if(this.withinLastFewSteps){s=this._data.length-this.maxStepIndex}t.hide=e>0&&e<s||e>this.index+(this.currentSteps-3)&&e<this.lastItemIndex}}return t};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:this.dataWatcher(this.data);if(!!this.localization)return[3,2];e=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.connectedCallback=function(){this.setCurrentSteps();addMediaChangeListener(this.setCurrentSteps)};e.prototype.disconnectedCallback=function(){removeMediaChangeListener(this.setCurrentSteps)};e.prototype.render=function(){var e;var t=this;var s=(e={"stzh-progressbar":true},e["stzh-progressbar--index-".concat(this.index)]=!!this.index,e);return h(Host,null,h("div",{class:s},h("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map((function(e,s){return h("stzh-progressbar-item",Object.assign({},t.getItemAttributes(s),{icon:e.icon,disabled:e.disabled,label:e.label,class:"stzh-progressbar__item"}))})))))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{data:["dataWatcher"]}},enumerable:false,configurable:true});return e}();StzhProgressbar.style=stzhProgressbarCss;export{StzhProgressbar as stzh_progressbar};
+var __awaiter=this&&this.__awaiter||function(t,e,s,r){function i(t){return t instanceof s?t:new s((function(e){e(t)}))}return new(s||(s=Promise))((function(s,a){function n(t){try{h(r.next(t))}catch(t){a(t)}}function o(t){try{h(r["throw"](t))}catch(t){a(t)}}function h(t){t.done?s(t.value):i(t.value).then(n,o)}h((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var s={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},r,i,a,n;return n={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function o(t){return function(e){return h([t,e])}}function h(o){if(r)throw new TypeError("Generator is already executing.");while(n&&(n=0,o[0]&&(s=0)),s)try{if(r=1,i&&(a=o[0]&2?i["return"]:o[0]?i["throw"]||((a=i["return"])&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;if(i=0,a)o=[o[0]&2,a.value];switch(o[0]){case 0:case 1:a=o;break;case 4:s.label++;return{value:o[1],done:false};case 5:s.label++;i=o[1];o=[0];continue;case 7:o=s.ops.pop();s.trys.pop();continue;default:if(!(a=s.trys,a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){s=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){s.label=o[1];break}if(o[0]===6&&s.label<a[1]){s.label=a[1];a=o;break}if(a&&s.label<a[2]){s.label=a[2];s.ops.push(o);break}if(a[2])s.ops.pop();s.trys.pop();continue}o=e.call(t,s)}catch(t){o=[6,t];i=0}finally{r=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{m as media,a as addMediaChangeListener,r as removeMediaChangeListener}from"./media-utils-ee5a59fa.js";var stzhProgressbarCss=".sc-stzh-progressbar-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-h{display:none}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-preferred-size:0;flex-basis:0}";var StzhProgressbar=function(){function t(t){var e=this;registerInstance(this,t);this.setCurrentSteps=function(){if(media("ultra").matches&&e.stepsUltra){e.currentSteps=e.stepsUltra}else if(media("large").matches&&e.stepsLarge){e.currentSteps=e.stepsLarge}else if(media("medium").matches&&e.stepsMedium){e.currentSteps=e.stepsMedium}else if(media("small").matches&&e.stepsSmall){e.currentSteps=e.stepsSmall}else{e.currentSteps=e.steps}e.element.style.setProperty("--steps",e.currentSteps.toString())};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.currentSteps=undefined}t.prototype.getItemData=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){return[2,this._data.map((function(e,s){return Object.assign(Object.assign({},e),t.getItemAttributes(s))}))]}))}))};t.prototype.dataWatcher=function(t){if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex};t.prototype.getItemAttributes=function(t){var e={};e.step=t+1;e.first=t===0;e.last=t===this.lastItemIndex;e.current=t===this.index;e.passed=t<this.index;if(this._data.length>this.currentSteps){if(t===this.lastItemIndex&&!this.withinLastFewSteps){e.dotted=true}if(this.index<2){e.hide=t>this.maxStepIndex-1&&t<this.lastItemIndex}else{if(t===0){e.dotted=true}var s=this.index;if(this.withinLastFewSteps){s=this._data.length-this.maxStepIndex}e.hide=t>0&&t<s||t>this.index+(this.currentSteps-3)&&t<this.lastItemIndex}}return e};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.dataWatcher(this.data);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.connectedCallback=function(){this.setCurrentSteps();addMediaChangeListener(this.setCurrentSteps)};t.prototype.disconnectedCallback=function(){removeMediaChangeListener(this.setCurrentSteps)};t.prototype.render=function(){var t;var e=this;var s=(t={"stzh-progressbar":true},t["stzh-progressbar--index-".concat(this.index)]=!!this.index,t);return h(Host,null,h("div",{class:s},h("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map((function(t,s){return h("stzh-progressbar-item",Object.assign({},e.getItemAttributes(s),{icon:t.icon,disabled:t.disabled,label:t.label,class:"stzh-progressbar__item"}))})))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{data:["dataWatcher"]}},enumerable:false,configurable:true});return t}();StzhProgressbar.style=stzhProgressbarCss;export{StzhProgressbar as stzh_progressbar};
 //# sourceMappingURL=stzh-progressbar.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","_this","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","element","style","setProperty","toString","class_1","prototype","~~dataWatcher~~","~~newValue~~","~~_data~~","~~JSON~~","~~parse~~","~~lastItemIndex~~","~~length~~","~~maxStepIndex~~","~~withinLastFewSteps~~","~~index~~","~~getItemAttributes~~","~~itemIndex~~","~~item~~","~~step~~","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","_a","window","stzhComponents","utils","fetchTranslations","_b","sent","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","concat","h","Host","class","role","label","~~map","Object","assign","~~icon","disabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint */\n @Prop() stepsUltra: number = 0;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n\n this.element.style.setProperty(\"--steps\", this.currentSteps.toString());\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"8oDAAA,IAAMA,mBAAqB,o8C,~~ICyBdC~~,gBAAe,W,~~kDAuGlBC~~,KAAAC,gBAAkB,WACxB,GAAIC,MAAM,SAASC,SAAWC,EAAKC,WAAY,CAC7CD,EAAKE,aAAeF,EAAKC,U,MACpB,GAAIH,MAAM,SAASC,SAAWC,EAAKG,WAAY,CACpDH,EAAKE,aAAeF,EAAKG,U,MACpB,GAAIL,MAAM,UAAUC,SAAWC,EAAKI,YAAa,CACtDJ,EAAKE,aAAeF,EAAKI,W,MACpB,GAAIN,MAAM,SAASC,SAAWC,EAAKK,WAAY,CACpDL,EAAKE,aAAeF,EAAKK,U,KACpB,CACLL,EAAKE,aAAeF,EAAKM,K,CAG3BN,EAAKO,QAAQC,MAAMC,YAAY,UAAWT,EAAKE,aAAaQ,W,~~wCAlGX~~,G,WAI3B,E,WAGA,E,gBAGK,E,iBAGC,E,gBAGD,E,gBAGA,E,~~4BAO7BC~~,EAAAC,UAAAC,YAAA,SAAYC,GACV,UAAWA,IAAa,SAAU,~~CAChClB~~,~~KAAKmB~~,~~MAAQC~~,KAAKC,~~MAAMH~~,E,KAErB,~~CACHlB~~,~~KAAKmB~~,~~MAAQD~~,C,~~CAGflB~~,~~KAAKsB~~,~~cAAgBtB~~,~~KAAKmB~~,~~MAAMI~~,OAAS,~~EACzCvB~~,~~KAAKwB~~,~~aAAexB~~,KAAKM,aAAe,EACxCN,~~KAAKyB~~,~~mBAAqBzB~~,~~KAAK0B~~,~~OAAS1B~~,~~KAAKmB~~,~~MAAMI~~,~~OAASvB~~,~~KAAKwB~~,Y,~~EAO3DT~~,EAAAC,~~UAAAW~~,kBAAA,~~SAAkBC~~,GACxB,IAAMC,EAAO,GAEbA,~~EAAKC~~,~~KAAOF~~,EAAY,EACxBC,~~EAAKE~~,~~MAAQH~~,IAAc,EAC3BC,~~EAAKG~~,~~KAAOJ~~,~~IAAc5B~~,~~KAAKsB~~,cAC/BO,~~EAAKI~~,~~QAAUL~~,~~IAAc5B~~,~~KAAK0B~~,~~MAClCG~~,~~EAAKK~~,~~OAASN~~,~~EAAY5B~~,~~KAAK0B~~,MAG/B,~~GAAI1B~~,~~KAAKmB~~,~~MAAMI~~,~~OAASvB~~,KAAKM,aAAc,CAEzC,~~GAAIsB~~,~~IAAc5B~~,~~KAAKsB~~,~~gBAAkBtB~~,~~KAAKyB~~,mBAAoB,~~CAChEI~~,~~EAAKM~~,OAAS,I,CAGhB,~~GAAInC~~,~~KAAK0B~~,MAAQ,EAAG,~~CAElBG~~,~~EAAKO~~,~~KAAOR~~,~~EAAY5B~~,~~KAAKwB~~,aAAe,~~GAAKI~~,~~EAAY5B~~,~~KAAKsB~~,a,KAC7D,CAEL,~~GAAIM~~,IAAc,EAAG,CACnBC,~~EAAKM~~,OAAS,I,CAGhB,IAAIE,~~EAAYrC~~,~~KAAK0B~~,MAIrB,~~GAAI1B~~,~~KAAKyB~~,mBAAoB,~~CAC3BY~~,~~EAAYrC~~,~~KAAKmB~~,~~MAAMI~~,~~OAASvB~~,~~KAAKwB~~,Y,~~CAIvCK~~,~~EAAKO~~,~~KAAOR~~,EAAY,GAAKA,~~EAAYS~~,~~GACpCT~~,~~EAAY5B~~,~~KAAK0B~~,~~OAAS1B~~,KAAKM,aAAe,~~IAAMsB~~,~~EAAY5B~~,~~KAAKsB~~,a,EAI9E,~~OAAOO~~,C,~~EAmBHd~~,EAAAC,~~UAAAsB~~,kBAAN,W,~~kHACEtC~~,~~KAAKiB~~,~~YAAYjB~~,~~KAAKuC~~,M,~~KAEjBvC~~,~~KAAKwC~~,aAAN,YACFC,~~EAAAzC~~,KAAoB,~~SAAM0C~~,OAAOC,eAAeC,MAAMC,~~kBAAkB7C~~,KAAKW,QAAS,gB,~~OAAtF8B~~,EAAKD,aAAeM,EAAAC,O,~~mCAIxBhC~~,EAAAC,~~UAAAgC~~,kBAAA,~~WACEhD~~,KAAKC,~~kBACLgD~~,~~uBAAuBjD~~,KAAKC,gB,EAG9Bc,EAAAC,~~UAAAkC~~,qBAAA,WACEC,~~0BAA0BnD~~,KAAKC,gB,EAGjCc,EAAAC,~~UAAAoC~~,OAAA,W,MAAA,~~IAAAhD~~,EAAAJ,KACE,~~IAAMqD~~,GAAOZ,EAAA,CACX,mBAAoB,MACpBA,EAAC,2BAAAa,~~OAA2BtD~~,~~KAAK0B~~,~~UAAY1B~~,~~KAAK0B~~,M,GAGpD,~~OACE6B~~,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OACEE,MAAM,0BACNC,KAAK,OAAM,~~aACC1D~~,~~KAAKwC~~,aAAamB,~~OAE7B3D~~,~~KAAKmB~~,~~MAAMyC~~,KAAI,~~SAAC9B~~,~~EAAMJ~~,GACrB,~~OAAA6B~~,EAAA,~~wBAAAM~~,OAAAC,OAAA,~~GACM1D~~,~~EAAKuB~~,~~kBAAkBD~~,GAAM,~~CACjCqC~~,~~KAAMjC~~,~~EAAKiC~~,KACXC,~~SAAUlC~~,~~EAAKkC~~,~~SACfL~~,~~MAAO7B~~,~~EAAK6B~~,MACZF,MAAM,2BALR,M,~~2PAvJc~~,G"}
1	+ {"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","_this","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","element","style","setProperty","toString","class_1","prototype","getItemData","_data","map","step","index","Object","assign","getItemAttributes","dataWatcher","newValue","JSON","parse","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","dotted","hide","substract","componentWillLoad","data","localization","_a","window","stzhComponents","utils","fetchTranslations","_b","sent","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","concat","h","Host","class","role","label","icon","disabled"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n @include mq($from: small) {\n min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n }\n}\n\n.stzh-progressbar {\n position: relative;\n\toverflow: hidden;\n\n &__items {\n display: flex;\n flex-wrap: nowrap;\n }\n\n &__item {\n /* flex the bullets to always have the same size /\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Watch,\n Method\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/\n @slot - Slot for any text content\n /\n@Component({\n tag: \"stzh-progressbar\",\n styleUrl: \"stzh-progressbar.scss\",\n scoped: true\n})\nexport class StzhProgressbar {\n /* Translation strings /\n @Prop() localization: StzhProgressbarLocalizedText;\n\n /\n Step data (JSON array with objects that have `label` attribute and optional:\n * - `disabled`, if step should be disabled\n * - `icon`, if icon instead of step number should be displayed):\n * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n \n ```\n * {\n * \"label\": \"Step Label\"\n * \"icon\": \"clock\",\n * \"disabled\": true\n * }\n * ```\n /\n @Prop() data: StzhProgressbarDataItem[] \| string = [];\n private _data: StzhProgressbarDataItem[];\n\n /* Index of the item that be active /\n @Prop() index: number = 0;\n\n /* Number of steps to show below small breakpoint /\n @Prop() steps: number = 5;\n\n /* Number of steps to show above small breakpoint /\n @Prop() stepsSmall: number = 6;\n\n /* Number of steps to show above medium breakpoint /\n @Prop() stepsMedium: number = 0;\n\n /* Number of steps to show above large breakpoint /\n @Prop() stepsLarge: number = 0;\n\n /* Number of steps to show above ultra breakpoint /\n @Prop() stepsUltra: number = 0;\n\n @State() currentSteps: number;\n\n @Element() element: HTMLStzhProgressbarElement;\n\n /\n Return infos about rendered progressbar items.\n * Array of objects including: hide (whether step is hidden)\n * / passed (whether step has been passed)\n * / current (whether step is currently active)\n * / dotted (whether step has dotted style active)\n * / first\|last (whether step is first or last)\n * / label\n */\n @Method()\n async getItemData() {\n return this._data.map((step, index) => {\n return {\n ...step,\n ...this.getItemAttributes(index)\n }\n });\n }\n\n @Watch(\"data\")\n dataWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._data = JSON.parse(newValue);\n }\n else {\n this._data = newValue;\n }\n\n this.lastItemIndex = this._data.length - 1;\n this.maxStepIndex = this.currentSteps - 1;\n this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n }\n\n private lastItemIndex: number;\n private maxStepIndex: number;\n private withinLastFewSteps: boolean;\n\n private getItemAttributes(itemIndex: number): any {\n const item = {} as HTMLStzhProgressbarItemElement;\n\n item.step = itemIndex + 1;\n item.first = itemIndex === 0;\n item.last = itemIndex === this.lastItemIndex;\n item.current = itemIndex === this.index;\n item.passed = itemIndex < this.index;\n\n // hide overflowings if more items than max steps in DOM\n if (this._data.length > this.currentSteps) {\n // add dots to last item if current index is below the last few items\n if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n item.dotted = true;\n }\n\n if (this.index < 2) {\n // hide overflowing items on the right\n item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n } else {\n // add dots to first item if current item is third or above\n if (itemIndex === 0) {\n item.dotted = true;\n }\n\n let substract = this.index;\n\n // if is within the last elements, calculate how much previous\n // should be shown to stay on 5 visible elements\n if (this.withinLastFewSteps) {\n substract = this._data.length - this.maxStepIndex;\n }\n\n // hide overflowing items on left and right side\n item.hide = itemIndex > 0 && itemIndex < substract\n \|\| itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n }\n }\n\n return item;\n }\n\n private setCurrentSteps = () => {\n if (media(\"ultra\").matches && this.stepsUltra) {\n this.currentSteps = this.stepsUltra;\n } else if (media(\"large\").matches && this.stepsLarge) {\n this.currentSteps = this.stepsLarge;\n } else if (media(\"medium\").matches && this.stepsMedium) {\n this.currentSteps = this.stepsMedium;\n } else if (media(\"small\").matches && this.stepsSmall) {\n this.currentSteps = this.stepsSmall;\n } else {\n this.currentSteps = this.steps;\n }\n\n this.element.style.setProperty(\"--steps\", this.currentSteps.toString());\n }\n\n async componentWillLoad() {\n this.dataWatcher(this.data);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n }\n }\n\n connectedCallback() {\n this.setCurrentSteps();\n addMediaChangeListener(this.setCurrentSteps);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.setCurrentSteps);\n }\n\n render() {\n const classes = {\n \"stzh-progressbar\": true,\n [`stzh-progressbar--index-${this.index}`]: !!this.index\n };\n\n return (\n <Host>\n <div class={classes}>\n <div\n class=\"stzh-progressbar__items\"\n role=\"list\"\n aria-label={this.localization.label}\n >\n {this._data.map((step, index) =>\n <stzh-progressbar-item\n {...this.getItemAttributes(index)}\n icon={step.icon}\n disabled={step.disabled}\n label={step.label}\n class=\"stzh-progressbar__item\"\n ></stzh-progressbar-item>\n )}\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-sticky.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";import{a as isVisible,o as offset}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhStickyCss='.sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::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-sticky-h .has-focus.sc-stzh-sticky{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky{outline-style:none !important}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky::-moz-focus-inner{border:0 !important}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;display:contents}@media print{.sc-stzh-sticky-h{display:none}}.stzh-sticky.sc-stzh-sticky{display:contents}.stzh-sticky__sticky.sc-stzh-sticky{position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem;z-index:var(--stzh-z-index-sticky)}.stzh-sticky__content.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky__content.sc-stzh-sticky::before,.stzh-sticky__content.sc-stzh-sticky::after{content:"";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky__content.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky__content.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky__spacer.sc-stzh-sticky{display:none}.stzh-sticky--is-disabled-sticky-top.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{top:auto}.stzh-sticky--is-disabled-sticky-bottom.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{bottom:auto}.stzh-sticky--is-stuck.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::after{opacity:1}.stzh-sticky--is-breakout.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;max-width:100vw}';var StzhSticky=function(){function t(t){var s=this;registerInstance(this,t);this.stzhStuckTop=createEvent(this,"stzhStuckTop",7);this.stzhStuckBottom=createEvent(this,"stzhStuckBottom",7);this.fixedHeight=0;this.fixedWidth=0;this.fixedLimit=null;this.handleScroll=function(){if(s.debounceScroll){window.cancelAnimationFrame(s.debounceScroll)}s.debounceScroll=requestAnimationFrame(s.updateFixedByScroll)};this.handleResize=function(){if(s.debounceResize){window.cancelAnimationFrame(s.debounceResize)}s.debounceResize=requestAnimationFrame(s.updateFixedByResize)};this.updateFixedByScroll=function(){if(!isVisible(s.stickyElement)){return}s.scrollX=window.scrollX;s.scrollY=window.scrollY;s.fixedLimit=s.getFixedLimit();if(s.isStuckTop||s.isStuckBottom){var t=offset(s.spacerElement);s.fixedTop=t.top;s.fixedLeft=t.left}else{var t=offset(s.stickyElement);s.fixedTop=t.top;s.fixedLeft=t.left}s.isStuckBottom=!s.disableStickyBottom&&s.scrollY+s.windowHeight<=s.fixedTop+s.fixedHeight;s.isStuckTop=!s.disableStickyTop&&s.scrollY>=s.fixedTop;s.hasReachedTopLimit=s.fixedLimit&&s.scrollY+s.windowHeight-s.fixedHeight<=s.fixedLimit.top;s.hasReachedBottomLimit=s.fixedLimit&&s.scrollY>=s.fixedLimit.bottom-s.fixedHeight;if(s.isStuckTop||s.isStuckBottom){s.setFixed()}else{s.setUnfixed()}};this.updateFixedByResize=function(){s.setUnfixed();s.stickyElement.style.position="static";s.isStuckTop=false;s.isStuckBottom=false;if(isVisible(s.stickyElement)){s.windowHeight=window.innerHeight;s.fixedHeight=s.stickyElement.offsetHeight;s.fixedWidth=s.stickyElement.offsetWidth;s.spacerElement.style.height="".concat(s.fixedHeight,"px");s.updateFixedByScroll()}};this.observe=function(){s.updateStuck()};this.disableStickyTop=false;this.disableStickyBottom=false;this.breakout=false;this.position="sticky";this.isStuckTop=false;this.isStuckBottom=false;this.hasReachedTopLimit=false;this.hasReachedBottomLimit=false}t.prototype.disableStickyWatcher=function(){var t=this;requestAnimationFrame((function(){requestAnimationFrame((function(){if(t.position==="fixed"){t.updateFixedByResize()}else{t.updateStuck()}}))}))};t.prototype.isStuckTopWatcher=function(t){this.stzhStuckTop.emit({component:"stzh-sticky",sticky:t})};t.prototype.isStuckBottomWatcher=function(t){this.stzhStuckBottom.emit({component:"stzh-sticky",sticky:t})};t.prototype.positionWatcher=function(t){if(t==="fixed"){if(this.observer){this.observer.disconnect()}window.addEventListener("scroll",this.handleScroll,{passive:true});window.addEventListener("resize",this.handleResize);this.updateFixedByResize()}else{window.removeEventListener("scroll",this.handleScroll);window.removeEventListener("resize",this.handleResize);this.setUnfixed();this.observer=new IntersectionObserver(this.observe,{threshold:[1]});this.observer.observe(this.stickyElement);this.updateStuck()}};t.prototype.updateStuck=function(){var t=parseInt(getComputedStyle(this.stickyElement).top,10);var s=parseInt(getComputedStyle(this.stickyElement).bottom,10);var i=this.stickyElement.getBoundingClientRect();if(t){this.isStuckTop=i.top<0}else{this.isStuckTop=false}if(s){this.isStuckBottom=document.documentElement.clientHeight<i.bottom}else{this.isStuckBottom=false}};t.prototype.getFixedLimit=function(){var t=this.element.closest("[data-stzh-sticky-container]");if(!t){return null}var s=offset(t);return{top:s.top,bottom:s.top+t.scrollHeight}};t.prototype.setUnfixed=function(){Object.assign(this.stickyElement.style,{position:null,top:null,bottom:null,left:null,width:null});Object.assign(this.spacerElement.style,{display:"none"})};t.prototype.setFixed=function(){var t=this.hasReachedTopLimit||this.hasReachedBottomLimit?"absolute":"fixed";Object.assign(this.stickyElement.style,{position:t,top:t==="absolute"?"".concat(this.isStuckTop?this.fixedLimit.bottom-this.fixedHeight:this.fixedLimit.top,"px"):this.isStuckTop?"0px":"auto",bottom:this.isStuckTop||t==="absolute"?"auto":"0px",left:"".concat(this.fixedLeft+(t==="fixed"?this.scrollX:0),"px"),width:"".concat(this.fixedWidth,"px")});Object.assign(this.spacerElement.style,{display:"block"})};t.prototype.componentDidLoad=function(){this.positionWatcher(this.position)};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}window.removeEventListener("scroll",this.handleScroll);window.removeEventListener("resize",this.handleResize)};t.prototype.render=function(){var t;var s=this;var i=this.isStuckTop||this.isStuckBottom;var e=(t={"stzh-sticky":true,"stzh-sticky--is-stuck":i,"stzh-sticky--is-stuck-top":this.isStuckTop,"stzh-sticky--is-stuck-bottom":this.isStuckBottom,"stzh-sticky--is-breakout":this.breakout,"stzh-sticky--is-disabled-sticky-top":this.disableStickyTop,"stzh-sticky--is-disabled-sticky-bottom":this.disableStickyBottom},t["stzh-sticky--position-".concat(this.position)]=!!this.position,t);return h(Host,{"is-stuck":this.isStuckTop||this.isStuckBottom,"is-stuck-top":this.isStuckTop,"is-stuck-bottom":this.isStuckBottom},h("div",{class:e},h("div",{ref:function(t){return s.spacerElement=t},class:"stzh-sticky__spacer"}),h("div",{ref:function(t){return s.stickyElement=t},class:"stzh-sticky__sticky"},h("div",{class:"stzh-sticky__content"},h("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disableStickyTop:["disableStickyWatcher"],disableStickyBottom:["disableStickyWatcher"],isStuckTop:["isStuckTopWatcher"],isStuckBottom:["isStuckBottomWatcher"],position:["positionWatcher"]}},enumerable:false,configurable:true});return t}();StzhSticky.style=stzhStickyCss;export{StzhSticky as stzh_sticky};
+import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{a as isVisible,o as offset}from"./utils-8bb4c3c6.js";import"./string-utils-e252977e.js";var stzhStickyCss='.sc-stzh-sticky-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-sticky-h{display:none}.sc-stzh-sticky-h *.sc-stzh-sticky,.sc-stzh-sticky-h *.sc-stzh-sticky::before,.sc-stzh-sticky-h *.sc-stzh-sticky::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-sticky-h .has-focus.sc-stzh-sticky{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky{outline-style:none !important}.sc-stzh-sticky-h .stzh-fylingfocus-focused.sc-stzh-sticky::-moz-focus-inner{border:0 !important}.sc-stzh-sticky-h{--padding:var(--stzh-space-large) 0;display:contents}@media print{.sc-stzh-sticky-h{display:none}}.stzh-sticky.sc-stzh-sticky{display:contents}.stzh-sticky__sticky.sc-stzh-sticky{position:-webkit-sticky;position:sticky;top:-0.0625rem;bottom:-0.0625rem;z-index:var(--stzh-z-index-sticky)}.stzh-sticky__content.sc-stzh-sticky{position:relative;padding:var(--padding)}.stzh-sticky__content.sc-stzh-sticky::before,.stzh-sticky__content.sc-stzh-sticky::after{content:"";pointer-events:none;display:block;position:absolute;left:0;width:100%;height:var(--stzh-space-xxlarge);opacity:0;-webkit-transition:opacity var(--stzh-base-transition-animation-speed);transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-sticky__content.sc-stzh-sticky::before{background:-webkit-gradient(linear, left bottom, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));background:linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);top:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.stzh-sticky__content.sc-stzh-sticky::after{background:-webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));background:linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);bottom:0;-webkit-transform:translateY(100%);transform:translateY(100%)}.stzh-sticky__spacer.sc-stzh-sticky{display:none}.stzh-sticky--is-disabled-sticky-top.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{top:auto}.stzh-sticky--is-disabled-sticky-bottom.sc-stzh-sticky .stzh-sticky__sticky.sc-stzh-sticky{bottom:auto}.stzh-sticky--is-stuck.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{background-color:var(--stzh-color-white)}.stzh-sticky--is-stuck-bottom.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::before{opacity:1}.stzh-sticky--is-stuck-top.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky::after{opacity:1}.stzh-sticky--is-breakout.sc-stzh-sticky .stzh-sticky__content.sc-stzh-sticky{position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}';var StzhSticky=function(){function t(t){var s=this;registerInstance(this,t);this.stzhStuckTop=createEvent(this,"stzhStuckTop",7);this.stzhStuckBottom=createEvent(this,"stzhStuckBottom",7);this.fixedHeight=0;this.fixedWidth=0;this.fixedLimit=null;this.handleScroll=function(){if(s.debounceScroll){window.cancelAnimationFrame(s.debounceScroll)}s.debounceScroll=requestAnimationFrame(s.updateFixedByScroll)};this.handleResize=function(){if(s.debounceResize){window.cancelAnimationFrame(s.debounceResize)}s.debounceResize=requestAnimationFrame(s.updateFixedByResize)};this.updateFixedByScroll=function(){if(!isVisible(s.stickyElement)){return}s.scrollX=window.scrollX;s.scrollY=window.scrollY;s.fixedLimit=s.getFixedLimit();if(s.isStuckTop||s.isStuckBottom){var t=offset(s.spacerElement);s.fixedTop=t.top;s.fixedLeft=t.left}else{var t=offset(s.stickyElement);s.fixedTop=t.top;s.fixedLeft=t.left}s.isStuckBottom=!s.disableStickyBottom&&s.scrollY+s.windowHeight<=s.fixedTop+s.fixedHeight;s.isStuckTop=!s.disableStickyTop&&s.scrollY>=s.fixedTop;s.hasReachedTopLimit=s.fixedLimit&&s.scrollY+s.windowHeight-s.fixedHeight<=s.fixedLimit.top;s.hasReachedBottomLimit=s.fixedLimit&&s.scrollY>=s.fixedLimit.bottom-s.fixedHeight;if(s.isStuckTop||s.isStuckBottom){s.setFixed()}else{s.setUnfixed()}};this.updateFixedByResize=function(){s.setUnfixed();s.stickyElement.style.position="static";s.isStuckTop=false;s.isStuckBottom=false;if(isVisible(s.stickyElement)){s.windowHeight=window.innerHeight;s.fixedHeight=s.stickyElement.offsetHeight;s.fixedWidth=s.stickyElement.offsetWidth;s.spacerElement.style.height="".concat(s.fixedHeight,"px");s.updateFixedByScroll()}};this.observe=function(){s.updateStuck()};this.disableStickyTop=false;this.disableStickyBottom=false;this.breakout=false;this.position="sticky";this.isStuckTop=false;this.isStuckBottom=false;this.hasReachedTopLimit=false;this.hasReachedBottomLimit=false}t.prototype.disableStickyWatcher=function(){var t=this;requestAnimationFrame((function(){requestAnimationFrame((function(){if(t.position==="fixed"){t.updateFixedByResize()}else{t.updateStuck()}}))}))};t.prototype.isStuckTopWatcher=function(t){this.stzhStuckTop.emit({component:"stzh-sticky",sticky:t})};t.prototype.isStuckBottomWatcher=function(t){this.stzhStuckBottom.emit({component:"stzh-sticky",sticky:t})};t.prototype.positionWatcher=function(t){if(t==="fixed"){if(this.observer){this.observer.disconnect()}window.addEventListener("scroll",this.handleScroll,{passive:true});window.addEventListener("resize",this.handleResize);this.updateFixedByResize()}else{window.removeEventListener("scroll",this.handleScroll);window.removeEventListener("resize",this.handleResize);this.setUnfixed();this.observer=new IntersectionObserver(this.observe,{threshold:[1]});this.observer.observe(this.stickyElement);this.updateStuck()}};t.prototype.updateStuck=function(){var t=parseInt(getComputedStyle(this.stickyElement).top,10);var s=parseInt(getComputedStyle(this.stickyElement).bottom,10);var i=this.stickyElement.getBoundingClientRect();if(t){this.isStuckTop=i.top<0}else{this.isStuckTop=false}if(s){this.isStuckBottom=document.documentElement.clientHeight<i.bottom}else{this.isStuckBottom=false}};t.prototype.getFixedLimit=function(){var t=this.element.closest("[data-stzh-sticky-container]");if(!t){return null}var s=offset(t);return{top:s.top,bottom:s.top+t.scrollHeight}};t.prototype.setUnfixed=function(){Object.assign(this.stickyElement.style,{position:null,top:null,bottom:null,left:null,width:null});Object.assign(this.spacerElement.style,{display:"none"})};t.prototype.setFixed=function(){var t=this.hasReachedTopLimit||this.hasReachedBottomLimit?"absolute":"fixed";Object.assign(this.stickyElement.style,{position:t,top:t==="absolute"?"".concat(this.isStuckTop?this.fixedLimit.bottom-this.fixedHeight:this.fixedLimit.top,"px"):this.isStuckTop?"0px":"auto",bottom:this.isStuckTop||t==="absolute"?"auto":"0px",left:"".concat(this.fixedLeft+(t==="fixed"?this.scrollX:0),"px"),width:"".concat(this.fixedWidth,"px")});Object.assign(this.spacerElement.style,{display:"block"})};t.prototype.componentDidLoad=function(){this.positionWatcher(this.position)};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}window.removeEventListener("scroll",this.handleScroll);window.removeEventListener("resize",this.handleResize)};t.prototype.render=function(){var t;var s=this;var i=this.isStuckTop||this.isStuckBottom;var e=(t={"stzh-sticky":true,"stzh-sticky--is-stuck":i,"stzh-sticky--is-stuck-top":this.isStuckTop,"stzh-sticky--is-stuck-bottom":this.isStuckBottom,"stzh-sticky--is-breakout":this.breakout,"stzh-sticky--is-disabled-sticky-top":this.disableStickyTop,"stzh-sticky--is-disabled-sticky-bottom":this.disableStickyBottom},t["stzh-sticky--position-".concat(this.position)]=!!this.position,t);return h(Host,{"is-stuck":this.isStuckTop||this.isStuckBottom,"is-stuck-top":this.isStuckTop,"is-stuck-bottom":this.isStuckBottom},h("div",{class:e},h("div",{ref:function(t){return s.spacerElement=t},class:"stzh-sticky__spacer"}),h("div",{ref:function(t){return s.stickyElement=t},class:"stzh-sticky__sticky"},h("div",{class:"stzh-sticky__content"},h("slot",null)))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{disableStickyTop:["disableStickyWatcher"],disableStickyBottom:["disableStickyWatcher"],isStuckTop:["isStuckTopWatcher"],isStuckBottom:["isStuckBottomWatcher"],position:["positionWatcher"]}},enumerable:false,configurable:true});return t}();StzhSticky.style=stzhStickyCss;export{StzhSticky as stzh_sticky};
 //# sourceMappingURL=stzh-sticky.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhStickyCss","StzhSticky","this","fixedHeight","fixedWidth","fixedLimit","handleScroll","_this","debounceScroll","window","cancelAnimationFrame","requestAnimationFrame","updateFixedByScroll","handleResize","debounceResize","updateFixedByResize","isVisible","stickyElement","scrollX","scrollY","getFixedLimit","isStuckTop","isStuckBottom","off","offset","spacerElement","fixedTop","top","fixedLeft","left","disableStickyBottom","windowHeight","disableStickyTop","hasReachedTopLimit","hasReachedBottomLimit","bottom","setFixed","setUnfixed","style","position","innerHeight","offsetHeight","offsetWidth","height","concat","observe","updateStuck","prototype","disableStickyWatcher","isStuckTopWatcher","newValue","stzhStuckTop","emit","component","sticky","isStuckBottomWatcher","stzhStuckBottom","positionWatcher","observer","disconnect","addEventListener","passive","removeEventListener","IntersectionObserver","threshold","topCss","parseInt","getComputedStyle","bottomCss","rect","getBoundingClientRect","document","documentElement","clientHeight","stickyContainer","element","closest","scrollHeight","Object","assign","width","display","componentDidLoad","disconnectedCallback","render","isStuck","classes","_a","breakout","h","Host","class","ref","el"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=scoped","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding: Padding of sticky element\n /\n\n:host {\n --padding: #{space('large')} 0;\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n }\n\n &__content {\n position: relative;\n padding: var(--padding);\n\n &::before,\n &::after {\n content: '';\n pointer-events: none;\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n height: space('xxlarge');\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &::before {\n background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n top: 0;\n transform: translateY(-100%);\n }\n\n &::after {\n background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n bottom: 0;\n transform: translateY(100%);\n }\n }\n\n &__spacer {\n display: none;\n }\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n &--is-stuck &__content {\n background-color: $colorWhite;\n }\n\n &--is-stuck-bottom &__content {\n &::before {\n opacity: 1;\n }\n }\n\n &--is-stuck-top &__content {\n &::after {\n opacity: 1;\n }\n }\n\n / Position sticky variant /\n\n &--is-breakout &__content {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n width: 100vw;\n max-width: 100vw;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\n\n/\n \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n scoped: true\n})\nexport class StzhSticky {\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether to breakout container /\n @Prop({ reflect: true }) breakout: boolean = false;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean = false;\n @State() isStuckBottom: boolean = false;\n\n @State() hasReachedTopLimit: boolean = false;\n @State() hasReachedBottomLimit: boolean = false;\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n positionWatcher(newValue: string) {\n if (newValue === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n private observer: IntersectionObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(\"[data-stzh-sticky-container]\");\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private updateFixedByScroll = () => {\n if (!isVisible(this.stickyElement)) {\n return;\n }\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n const off = offset(this.spacerElement);\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n } else {\n const off = offset(this.stickyElement);\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n }\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight, \n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit \n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit \n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n } else {\n this.setUnfixed();\n }\n }\n\n private updateFixedByResize = () => {\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.fixedHeight = this.stickyElement.offsetHeight; \n this.fixedWidth = this.stickyElement.offsetWidth;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.updateFixedByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.positionWatcher(this.position);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-breakout\": this.breakout,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"mMAAA,IAAMA,cAAgB,o4F,IC2BTC,WAAU,W,kKAgGbC,KAAAC,YAAsB,EACtBD,KAAAE,WAAqB,EACrBF,KAAAG,WAAqD,KAsErDH,KAAAI,aAAe,WACrB,GAAIC,EAAKC,eAAgB,CACvBC,OAAOC,qBAAqBH,EAAKC,e,CAGnCD,EAAKC,eAAiBG,sBAAsBJ,EAAKK,oB,EAG3CV,KAAAW,aAAe,WACrB,GAAIN,EAAKO,eAAgB,CACvBL,OAAOC,qBAAqBH,EAAKO,e,CAGnCP,EAAKO,eAAiBH,sBAAsBJ,EAAKQ,oB,EAG3Cb,KAAAU,oBAAsB,WAC5B,IAAKI,UAAUT,EAAKU,eAAgB,CAClC,M,CAGFV,EAAKW,QAAUT,OAAOS,QACtBX,EAAKY,QAAUV,OAAOU,QACtBZ,EAAKF,WAAaE,EAAKa,gBAEvB,GAAIb,EAAKc,YAAcd,EAAKe,cAAe,CACzC,IAAMC,EAAMC,OAAOjB,EAAKkB,eAExBlB,EAAKmB,SAAWH,EAAII,IACpBpB,EAAKqB,UAAYL,EAAIM,I,KAChB,CACL,IAAMN,EAAMC,OAAOjB,EAAKU,eAExBV,EAAKmB,SAAWH,EAAII,IACpBpB,EAAKqB,UAAYL,EAAIM,I,CAavBtB,EAAKe,eAAiBf,EAAKuB,qBACtBvB,EAAKY,QAAUZ,EAAKwB,cAAgBxB,EAAKmB,SAAWnB,EAAKJ,YAC9DI,EAAKc,YAAcd,EAAKyB,kBACnBzB,EAAKY,SAAWZ,EAAKmB,SAE1BnB,EAAK0B,mBAAqB1B,EAAKF,YAC1BE,EAAKY,QAAUZ,EAAKwB,aAAexB,EAAKJ,aAAeI,EAAKF,WAAWsB,IAC5EpB,EAAK2B,sBAAwB3B,EAAKF,YAC7BE,EAAKY,SAAWZ,EAAKF,WAAW8B,OAAS5B,EAAKJ,YASnD,GAAII,EAAKc,YAAcd,EAAKe,cAAe,CACzCf,EAAK6B,U,KACA,CACL7B,EAAK8B,Y,GAIDnC,KAAAa,oBAAsB,WAE5BR,EAAK8B,aACL9B,EAAKU,cAAcqB,MAAMC,SAAW,SACpChC,EAAKc,WAAa,MAClBd,EAAKe,cAAgB,MAErB,GAAIN,UAAUT,EAAKU,eAAgB,CACjCV,EAAKwB,aAAetB,OAAO+B,YAC3BjC,EAAKJ,YAAcI,EAAKU,cAAcwB,aACtClC,EAAKH,WAAaG,EAAKU,cAAcyB,YACrCnC,EAAKkB,cAAca,MAAMK,OAAS,GAAAC,OAAGrC,EAAKJ,YAAW,MAErDI,EAAKK,qB,GAIDV,KAAA2C,QAAU,WAChBtC,EAAKuC,a,wBA/P8C,M,yBAGG,M,cAGX,M,cAQW,S,gBAkBzB,M,mBACG,M,wBAEK,M,2BACG,K,CAlB1C7C,EAAA8C,UAAAC,qBAAA,eAAAzC,EAAAL,KACES,uBAAsB,WACpBA,uBAAsB,WACpB,GAAIJ,EAAKgC,WAAa,QAAS,CAC7BhC,EAAKQ,qB,KACA,CACLR,EAAKuC,a,SAeb7C,EAAA8C,UAAAE,kBAAA,SAAkBC,GAChBhD,KAAKiD,aAAaC,KAAK,CACrBC,UAAW,cACXC,OAAQJ,G,EAKZjD,EAAA8C,UAAAQ,qBAAA,SAAqBL,GACnBhD,KAAKsD,gBAAgBJ,KAAK,CACxBC,UAAW,cACXC,OAAQJ,G,EAKZjD,EAAA8C,UAAAU,gBAAA,SAAgBP,GACd,GAAIA,IAAa,QAAS,CACxB,GAAIhD,KAAKwD,SAAU,CACjBxD,KAAKwD,SAASC,Y,CAGhBlD,OAAOmD,iBAAiB,SAAU1D,KAAKI,aAAc,CAAEuD,QAAS,OAChEpD,OAAOmD,iBAAiB,SAAU1D,KAAKW,cAEvCX,KAAKa,qB,KACA,CACLN,OAAOqD,oBAAoB,SAAU5D,KAAKI,cAC1CG,OAAOqD,oBAAoB,SAAU5D,KAAKW,cAC1CX,KAAKmC,aAELnC,KAAKwD,SAAW,IAAIK,qBAAqB7D,KAAK2C,QAAS,CAAEmB,UAAW,CAAC,KACrE9D,KAAKwD,SAASb,QAAQ3C,KAAKe,eAE3Bf,KAAK4C,a,GAyBD7C,EAAA8C,UAAAD,YAAA,WACN,IAAMmB,EAASC,SAASC,iBAAiBjE,KAAKe,eAAeU,IAAK,IAClE,IAAMyC,EAAYF,SAASC,iBAAiBjE,KAAKe,eAAekB,OAAQ,IACxE,IAAMkC,EAAOnE,KAAKe,cAAcqD,wBAEhC,GAAIL,EAAQ,CACV/D,KAAKmB,WAAagD,EAAK1C,IAAM,C,KACxB,CACLzB,KAAKmB,WAAa,K,CAGpB,GAAI+C,EAAW,CACblE,KAAKoB,cAAgBiD,SAASC,gBAAgBC,aAAeJ,EAAKlC,M,KAC7D,CACLjC,KAAKoB,cAAgB,K,GAIjBrB,EAAA8C,UAAA3B,cAAA,WACN,IAAMsD,EAAkBxE,KAAKyE,QAAQC,QAAQ,gCAE7C,IAAKF,EAAiB,CACpB,OAAO,I,CAGT,IAAMnD,EAAMC,OAAOkD,GAEnB,MAAO,CACL/C,IAAKJ,EAAII,IACTQ,OAAQZ,EAAII,IAAM+C,EAAgBG,a,EAI9B5E,EAAA8C,UAAAV,WAAA,WACNyC,OAAOC,OAAO7E,KAAKe,cAAcqB,MAAO,CACtCC,SAAU,KACVZ,IAAK,KACLQ,OAAQ,KACRN,KAAM,KACNmD,MAAO,OAGTF,OAAOC,OAAO7E,KAAKuB,cAAca,MAAO,CACtC2C,QAAS,Q,EAILhF,EAAA8C,UAAAX,SAAA,WACN,IAAMG,EAAYrC,KAAK+B,oBAAsB/B,KAAKgC,sBAC9C,WACA,QAEJ4C,OAAOC,OAAO7E,KAAKe,cAAcqB,MAAO,CACtCC,SAAQA,EACRZ,IAAKY,IAAa,WACd,GAAAK,OAAG1C,KAAKmB,WAAanB,KAAKG,WAAW8B,OAASjC,KAAKC,YAAcD,KAAKG,WAAWsB,IAAG,MACpFzB,KAAKmB,WAAa,MAAQ,OAC9Bc,OAAQjC,KAAKmB,YAAckB,IAAa,WACpC,OAAS,MACbV,KAAM,GAAAe,OAAG1C,KAAK0B,WAAaW,IAAa,QAAUrC,KAAKgB,QAAU,GAAE,MACnE8D,MAAO,GAAApC,OAAG1C,KAAKE,WAAU,QAG3B0E,OAAOC,OAAO7E,KAAKuB,cAAca,MAAO,CACtC2C,QAAS,S,EAgGbhF,EAAA8C,UAAAmC,iBAAA,WACEhF,KAAKuD,gBAAgBvD,KAAKqC,S,EAG5BtC,EAAA8C,UAAAoC,qBAAA,WACE,GAAIjF,KAAKwD,SAAU,CACjBxD,KAAKwD,SAASC,Y,CAGhBlD,OAAOqD,oBAAoB,SAAU5D,KAAKI,cAC1CG,OAAOqD,oBAAoB,SAAU5D,KAAKW,a,EAG5CZ,EAAA8C,UAAAqC,OAAA,W,MAAA,IAAA7E,EAAAL,KACE,IAAMmF,EAAUnF,KAAKmB,YAAcnB,KAAKoB,cAExC,IAAMgE,GAAOC,EAAA,CACX,cAAe,KACf,wBAAyBF,EACzB,4BAA6BnF,KAAKmB,WAClC,+BAAgCnB,KAAKoB,cACrC,2BAA4BpB,KAAKsF,SACjC,sCAAuCtF,KAAK8B,iBAC5C,yCAA0C9B,KAAK4B,qBAC/CyD,EAAC,yBAAA3C,OAAyB1C,KAAKqC,aAAerC,KAAKqC,S,GAGrD,OACEkD,EAACC,KAAI,YACOxF,KAAKmB,YAAcnB,KAAKoB,cAAa,eACjCpB,KAAKmB,WAAU,kBACZnB,KAAKoB,eAEtBmE,EAAA,OAAKE,MAAOL,GACVG,EAAA,OACEG,IAAK,SAACC,GAAE,OAAMtF,EAAKkB,cAAgBoE,CAA3B,EACRF,MAAM,wBAERF,EAAA,OACEG,IAAK,SAACC,GAAE,OAAMtF,EAAKU,cAAgB4E,CAA3B,EACRF,MAAM,uBAENF,EAAA,OAAKE,MAAM,wBACTF,EAAA,gB,kaA/SS,G"}
1	+ {"version":3,"names":["stzhStickyCss","StzhSticky","this","fixedHeight","fixedWidth","fixedLimit","handleScroll","_this","debounceScroll","window","cancelAnimationFrame","requestAnimationFrame","updateFixedByScroll","handleResize","debounceResize","updateFixedByResize","isVisible","stickyElement","scrollX","scrollY","getFixedLimit","isStuckTop","isStuckBottom","off","offset","spacerElement","fixedTop","top","fixedLeft","left","disableStickyBottom","windowHeight","disableStickyTop","hasReachedTopLimit","hasReachedBottomLimit","bottom","setFixed","setUnfixed","style","position","innerHeight","offsetHeight","offsetWidth","height","concat","observe","updateStuck","prototype","disableStickyWatcher","isStuckTopWatcher","newValue","stzhStuckTop","emit","component","sticky","isStuckBottomWatcher","stzhStuckBottom","positionWatcher","observer","disconnect","addEventListener","passive","removeEventListener","IntersectionObserver","threshold","topCss","parseInt","getComputedStyle","bottomCss","rect","getBoundingClientRect","document","documentElement","clientHeight","stickyContainer","element","closest","scrollHeight","Object","assign","width","display","componentDidLoad","disconnectedCallback","render","isStuck","classes","_a","breakout","h","Host","class","ref","el"],"sources":["src/components/stzh-sticky/stzh-sticky.scss?tag=stzh-sticky&encapsulation=scoped","src/components/stzh-sticky/stzh-sticky.tsx"],"sourcesContent":["/*\n @prop --padding: Padding of sticky element\n /\n\n:host {\n --padding: #{space('large')} 0;\n\n display: contents;\n\n @media print {\n display: none;\n }\n}\n\n.stzh-sticky {\n display: contents;\n\n &__sticky {\n position: sticky;\n top: -1px;\n bottom: -1px;\n z-index: $zIndexSticky;\n }\n\n &__content {\n position: relative;\n padding: var(--padding);\n\n &::before,\n &::after {\n content: '';\n pointer-events: none;\n display: block;\n position: absolute;\n left: 0;\n width: 100%;\n height: space('xxlarge');\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &::before {\n background: linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);\n top: 0;\n transform: translateY(-100%);\n }\n\n &::after {\n background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);\n bottom: 0;\n transform: translateY(100%);\n }\n }\n\n &__spacer {\n display: none;\n }\n\n &--is-disabled-sticky-top &__sticky {\n top: auto;\n }\n\n &--is-disabled-sticky-bottom &__sticky {\n bottom: auto;\n }\n\n &--is-stuck &__content {\n background-color: $colorWhite;\n }\n\n &--is-stuck-bottom &__content {\n &::before {\n opacity: 1;\n }\n }\n\n &--is-stuck-top &__content {\n &::after {\n opacity: 1;\n }\n }\n\n / Position sticky variant /\n\n &--is-breakout &__content {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhStickyStuckTopEvent,\n StzhStickyStuckBottomEvent\n} from \"../../index\";\n\nimport { isVisible, offset } from \"../../utils/utils\";\n\n/\n \n /\n@Component({\n tag: \"stzh-sticky\",\n styleUrl: \"stzh-sticky.scss\",\n scoped: true\n})\nexport class StzhSticky {\n /* Whether to disable sticking to top /\n @Prop({ reflect: true }) disableStickyTop: boolean = false;\n\n /* Whether to disable sticking to bottom /\n @Prop({ reflect: true }) disableStickyBottom: boolean = false;\n\n /* Whether to breakout container /\n @Prop({ reflect: true }) breakout: boolean = false;\n\n /\n Position type used.\n \n - sticky: used only css position sticky\n * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)\n /\n @Prop({ reflect: true }) position: \"sticky\" \| \"fixed\" = \"sticky\";\n\n @Watch(\"disableStickyTop\")\n @Watch(\"disableStickyBottom\")\n disableStickyWatcher() {\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (this.position === \"fixed\") {\n this.updateFixedByResize();\n } else {\n this.updateStuck();\n }\n });\n });\n }\n\n @Element() element: HTMLStzhStickyElement;\n\n @State() isStuckTop: boolean = false;\n @State() isStuckBottom: boolean = false;\n\n @State() hasReachedTopLimit: boolean = false;\n @State() hasReachedBottomLimit: boolean = false;\n\n @Watch(\"isStuckTop\")\n isStuckTopWatcher(newValue: boolean) {\n this.stzhStuckTop.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"isStuckBottom\")\n isStuckBottomWatcher(newValue: boolean) {\n this.stzhStuckBottom.emit({\n component: \"stzh-sticky\",\n sticky: newValue\n });\n }\n\n @Watch(\"position\")\n positionWatcher(newValue: string) {\n if (newValue === \"fixed\") {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.addEventListener(\"scroll\", this.handleScroll, { passive: true });\n window.addEventListener(\"resize\", this.handleResize);\n\n this.updateFixedByResize();\n } else {\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n this.setUnfixed();\n\n this.observer = new IntersectionObserver(this.observe, { threshold: [1] });\n this.observer.observe(this.stickyElement);\n\n this.updateStuck();\n }\n }\n\n /* Sticky stuck top event /\n @Event() stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;\n\n /* Sticky stuck bottom event */\n @Event() stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;\n\n private observer: IntersectionObserver;\n private debounceScroll: number;\n private debounceResize: number;\n private stickyElement: HTMLElement;\n private spacerElement: HTMLElement;\n\n private windowHeight: number;\n private scrollX: number;\n private scrollY: number;\n private fixedTop: number;\n private fixedLeft: number;\n private fixedHeight: number = 0;\n private fixedWidth: number = 0;\n private fixedLimit: { top: number, bottom: number } \| null = null;\n\n private updateStuck() {\n const topCss = parseInt(getComputedStyle(this.stickyElement).top, 10);\n const bottomCss = parseInt(getComputedStyle(this.stickyElement).bottom, 10);\n const rect = this.stickyElement.getBoundingClientRect();\n\n if (topCss) {\n this.isStuckTop = rect.top < 0;\n } else {\n this.isStuckTop = false;\n }\n\n if (bottomCss) {\n this.isStuckBottom = document.documentElement.clientHeight < rect.bottom;\n } else {\n this.isStuckBottom = false;\n }\n }\n\n private getFixedLimit(): { top: number, bottom: number } \| null {\n const stickyContainer = this.element.closest(\"[data-stzh-sticky-container]\");\n\n if (!stickyContainer) {\n return null;\n }\n\n const off = offset(stickyContainer);\n\n return {\n top: off.top,\n bottom: off.top + stickyContainer.scrollHeight,\n };\n }\n\n private setUnfixed() {\n Object.assign(this.stickyElement.style, {\n position: null,\n top: null,\n bottom: null,\n left: null,\n width: null,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"none\",\n });\n }\n\n private setFixed() {\n const position = (this.hasReachedTopLimit \|\| this.hasReachedBottomLimit)\n ? \"absolute\"\n : \"fixed\";\n\n Object.assign(this.stickyElement.style, {\n position,\n top: position === \"absolute\"\n ? `${this.isStuckTop ? this.fixedLimit.bottom - this.fixedHeight : this.fixedLimit.top}px`\n : this.isStuckTop ? \"0px\" : \"auto\",\n bottom: this.isStuckTop \|\| position === \"absolute\"\n ? \"auto\" : \"0px\",\n left: `${this.fixedLeft + (position === \"fixed\" ? this.scrollX : 0)}px`,\n width: `${this.fixedWidth}px`,\n });\n\n Object.assign(this.spacerElement.style, {\n display: \"block\",\n });\n }\n\n private handleScroll = () => {\n if (this.debounceScroll) {\n window.cancelAnimationFrame(this.debounceScroll);\n }\n\n this.debounceScroll = requestAnimationFrame(this.updateFixedByScroll);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateFixedByResize);\n }\n\n private updateFixedByScroll = () => {\n if (!isVisible(this.stickyElement)) {\n return;\n }\n\n this.scrollX = window.scrollX;\n this.scrollY = window.scrollY;\n this.fixedLimit = this.getFixedLimit();\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n const off = offset(this.spacerElement);\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n } else {\n const off = offset(this.stickyElement);\n\n this.fixedTop = off.top;\n this.fixedLeft = off.left;\n }\n\n // console.log(\n // this.scrollX,\n // this.scrollY,\n // this.windowHeight, \n // this.fixedTop,\n // this.fixedLeft,\n // this.fixedHeight,\n // this.fixedLimit,\n // );\n\n this.isStuckBottom = !this.disableStickyBottom\n && this.scrollY + this.windowHeight <= this.fixedTop + this.fixedHeight;\n this.isStuckTop = !this.disableStickyTop\n && this.scrollY >= this.fixedTop;\n\n this.hasReachedTopLimit = this.fixedLimit \n && this.scrollY + this.windowHeight - this.fixedHeight <= this.fixedLimit.top;\n this.hasReachedBottomLimit = this.fixedLimit \n && this.scrollY >= this.fixedLimit.bottom - this.fixedHeight;\n\n // console.log(\n // this.isStuckBottom,\n // this.isStuckTop,\n // this.hasReachedBottomLimit,\n // this.hasReachedTopLimit,\n // );\n\n if (this.isStuckTop \|\| this.isStuckBottom) {\n this.setFixed();\n } else {\n this.setUnfixed();\n }\n }\n\n private updateFixedByResize = () => {\n // reset sticky so we can read current offsets\n this.setUnfixed();\n this.stickyElement.style.position = \"static\";\n this.isStuckTop = false;\n this.isStuckBottom = false;\n\n if (isVisible(this.stickyElement)) {\n this.windowHeight = window.innerHeight;\n this.fixedHeight = this.stickyElement.offsetHeight; \n this.fixedWidth = this.stickyElement.offsetWidth;\n this.spacerElement.style.height = `${this.fixedHeight}px`;\n\n this.updateFixedByScroll();\n }\n }\n\n private observe = () => {\n this.updateStuck();\n };\n\n componentDidLoad() {\n this.positionWatcher(this.position);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n window.removeEventListener(\"scroll\", this.handleScroll);\n window.removeEventListener(\"resize\", this.handleResize);\n }\n\n render() {\n const isStuck = this.isStuckTop \|\| this.isStuckBottom;\n\n const classes = {\n \"stzh-sticky\": true,\n \"stzh-sticky--is-stuck\": isStuck,\n \"stzh-sticky--is-stuck-top\": this.isStuckTop,\n \"stzh-sticky--is-stuck-bottom\": this.isStuckBottom,\n \"stzh-sticky--is-breakout\": this.breakout,\n \"stzh-sticky--is-disabled-sticky-top\": this.disableStickyTop,\n \"stzh-sticky--is-disabled-sticky-bottom\": this.disableStickyBottom,\n [`stzh-sticky--position-${this.position}`]: !!this.position,\n };\n\n return (\n <Host\n is-stuck={this.isStuckTop \|\| this.isStuckBottom}\n is-stuck-top={this.isStuckTop}\n is-stuck-bottom={this.isStuckBottom}\n >\n <div class={classes}>\n <div\n ref={(el) => (this.spacerElement = el as HTMLDivElement)}\n class=\"stzh-sticky__spacer\"\n ></div>\n <div\n ref={(el) => (this.stickyElement = el as HTMLDivElement)}\n class=\"stzh-sticky__sticky\"\n >\n <div class=\"stzh-sticky__content\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,o){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,r){function a(t){try{l(o.next(t))}catch(t){r(t)}}function s(t){try{l(o["throw"](t))}catch(t){r(t)}}function l(t){t.done?n(t.value):i(t.value).then(a,s)}l((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},o,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return l([t,e])}}function l(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(n=0)),n)try{if(o=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:n.label++;return{value:s[1],done:false};case 5:n.label++;i=s[1];s=[0];continue;case 7:s=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){n=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){n.label=s[1];break}if(s[0]===6&&n.label<r[1]){n.label=r[1];r=s;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(s);break}if(r[2])n.ops.pop();n.trys.pop();continue}s=e.call(t,n)}catch(t){s=[6,t];i=0}finally{o=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{j as js_cookie}from"./js.cookie-e27f385b.js";import"./_commonjsHelpers-ba3f0406.js";var stzhToastbarCss=":host{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;}:host[hidden]{display:none}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;bottom:var(--stzh-header-sticky-appnav-height, 0);left:1.25rem;right:1.25rem}@media screen and (min-width: 1024px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:35rem;max-width:min(35rem, calc(100% - (2rem * 2)))}}@media screen and (min-width: 1024px){:host{left:2.5rem}}@media screen and (min-width: 1260px){:host{left:5.5rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-xlarge)}}.stzh-toastbar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{-ms-flex-align:start;align-items:flex-start}}";var KEY_PREFIX_CLOSED="stzh-components-toastbar-closed";var StzhToastbar=function(){function t(t){var e=this;registerInstance(this,t);this._initialToasts=[];this.handleSlotchange=function(){e.toastsAppended();e.hideOverflowingItems()};this.hideAfter=30;this.max=5;this.initialToasts=[]}t.prototype.toast=function(t,e){var n=e===void 0?{type:"info"}:e,o=n.type,i=n.link;return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=document.createElement("stzh-toast");e.hidden=true;e.label=t;e.role="alert";e.type=o||"info";e.initialOpenAnimation=true;if(i){i.slot="link";i.size="small";e.appendChild(i)}this.element.appendChild(e);return[2,e]}))}))};t.prototype.initialToastsWatcher=function(t){if(typeof t==="string"){this._initialToasts=JSON.parse(t)}else{this._initialToasts=t}};t.prototype.toastAppended=function(t){if(t.getAttribute("data-stzh-toastbar-managed")){return}t.setAttribute("data-stzh-toastbar-managed","");t.addEventListener("stzhClosed",(function(){t.remove()}));if(t.type!=="error"){var e=(new Date).getTime();var n=this.hideAfter*1e3;var o=window.setTimeout((function(){t.hide()}),n);t.addEventListener("pointerenter",(function(){if(o){window.clearTimeout(o);var t=(new Date).getTime()-e;n=n-t}}));t.addEventListener("pointerleave",(function(){e=(new Date).getTime();o=window.setTimeout((function(){t.hide()}),n)}))}};t.prototype.toastsAppended=function(){var t=this;Array.from(this.element.children).forEach((function(e){t.toastAppended(e)}))};t.prototype.hideOverflowingItems=function(){var t=this.element.children.length;Array.from(this.element.children).splice(0,t-this.max).forEach((function(t){t.hide()}))};t.prototype.componentWillLoad=function(){this.initialToastsWatcher(this.initialToasts)};t.prototype.componentDidLoad=function(){var t=this;this._initialToasts.forEach((function(e){return __awaiter(t,void 0,void 0,(function(){var t,n,o,i;return __generator(this,(function(r){switch(r.label){case 0:if(e.cookie){t=js_cookie.get("".concat(KEY_PREFIX_CLOSED,"-").concat(e.cookie));if(t){return[2]}}n=e.link;if(!(n instanceof HTMLElement)){o=document.createElement("stzh-link");o.slot="link";o.size="small";Object.assign(o,e.link);n=o}return[4,this.toast(e.label,{type:e.type,link:n})];case 1:i=r.sent();if(e.cookie){i.addEventListener("stzhClosed",(function(){js_cookie.set("".concat(KEY_PREFIX_CLOSED,"-").concat(e.cookie),"1",{expires:typeof e.cookieExpires!=="undefined"?e.cookieExpires:365})}))}return[2]}}))}))}))};t.prototype.render=function(){var t={"stzh-toastbar":true};return h(Host,null,h("div",{class:t},h("slot",{onSlotchange:this.handleSlotchange})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{initialToasts:["initialToastsWatcher"]}},enumerable:false,configurable:true});return t}();StzhToastbar.style=stzhToastbarCss;export{StzhToastbar as stzh_toastbar};
+var __awaiter=this&&this.__awaiter||function(t,e,n,i){function o(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,r){function s(t){try{l(i.next(t))}catch(t){r(t)}}function a(t){try{l(i["throw"](t))}catch(t){r(t)}}function l(t){t.done?n(t.value):o(t.value).then(s,a)}l((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},i,o,r,s;return s={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function a(t){return function(e){return l([t,e])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(s&&(s=0,a[0]&&(n=0)),n)try{if(i=1,o&&(r=a[0]&2?o["return"]:a[0]?o["throw"]||((r=o["return"])&&r.call(o),0):o.next)&&!(r=r.call(o,a[1])).done)return r;if(o=0,r)a=[a[0]&2,r.value];switch(a[0]){case 0:case 1:r=a;break;case 4:n.label++;return{value:a[1],done:false};case 5:n.label++;o=a[1];a=[0];continue;case 7:a=n.ops.pop();n.trys.pop();continue;default:if(!(r=n.trys,r=r.length>0&&r[r.length-1])&&(a[0]===6||a[0]===2)){n=0;continue}if(a[0]===3&&(!r||a[1]>r[0]&&a[1]<r[3])){n.label=a[1];break}if(a[0]===6&&n.label<r[1]){n.label=r[1];r=a;break}if(r&&n.label<r[2]){n.label=r[2];n.ops.push(a);break}if(r[2])n.ops.pop();n.trys.pop();continue}a=e.call(t,n)}catch(t){a=[6,t];o=0}finally{i=r=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};import{r as registerInstance,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{j as js_cookie}from"./js.cookie-e27f385b.js";import"./_commonjsHelpers-ba3f0406.js";var stzhToastbarCss=":host{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;}:host[hidden]{display:none}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;bottom:var(--stzh-header-sticky-appnav-height, 0);left:1.25rem;right:1.25rem}@media screen and (min-width: 1024px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:35rem;max-width:min(35rem, calc(100% - (2rem * 2)))}}@media screen and (min-width: 1024px){:host{left:2.5rem}}@media screen and (min-width: 1260px){:host{left:5.5rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 1024px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-xlarge)}}.stzh-toastbar{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:end;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{-ms-flex-align:start;align-items:flex-start}}";var KEY_PREFIX_CLOSED="stzh-components-toastbar-closed";var StzhToastbar=function(){function t(t){var e=this;registerInstance(this,t);this._initialToasts=[];this.handleSlotchange=function(){e.toastsAppended();e.hideOverflowingItems()};this.hideAfter=30;this.max=5;this.initialToasts=[]}t.prototype.toast=function(t,e){var n=e===void 0?{type:"info"}:e,i=n.type,o=n.link;return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){e=document.createElement("stzh-toast");e.hidden=true;e.label=t;e.role="alert";e.type=i||"info";e.initialOpenAnimation=true;if(o){o.slot="link";o.size="small";e.appendChild(o)}this.element.appendChild(e);return[2,e]}))}))};t.prototype.initialToastsWatcher=function(t){if(typeof t==="string"){this._initialToasts=JSON.parse(t)}else{this._initialToasts=t}};t.prototype.toastAppended=function(t){if(t.getAttribute("data-stzh-toastbar-managed")){return}t.setAttribute("data-stzh-toastbar-managed","");t.addEventListener("stzhClosed",(function(){t.remove()}));if(t.type!=="error"){var e=(new Date).getTime();var n=this.hideAfter*1e3;var i=window.setTimeout((function(){t.hide()}),n);t.addEventListener("pointerenter",(function(){if(i){window.clearTimeout(i);var t=(new Date).getTime()-e;n=n-t}}));t.addEventListener("pointerleave",(function(){e=(new Date).getTime();i=window.setTimeout((function(){t.hide()}),n)}))}};t.prototype.toastsAppended=function(){var t=this;Array.from(this.element.children).forEach((function(e){t.toastAppended(e)}))};t.prototype.hideOverflowingItems=function(){var t=this.element.children.length;Array.from(this.element.children).splice(0,t-this.max).forEach((function(t){t.hide()}))};t.prototype.componentWillLoad=function(){this.initialToastsWatcher(this.initialToasts)};t.prototype.componentDidLoad=function(){var t=this;this._initialToasts.forEach((function(e){return __awaiter(t,void 0,void 0,(function(){var t,n,i,o,r;return __generator(this,(function(s){switch(s.label){case 0:if(e.cookie){t=js_cookie.get("".concat(KEY_PREFIX_CLOSED,"-").concat(e.cookie));if(t){return[2]}}n=e.link;if(!(n instanceof HTMLElement)){i=document.createElement("stzh-link");i.slot="link";i.size="small";Object.assign(i,e.link);n=i}return[4,this.toast(e.label,{type:e.type,link:n})];case 1:o=s.sent();if(e.cookie){r=365;if(e.cookieExpires===0){r=null}else if(e.cookieExpires){r=e.cookieExpires}o.addEventListener("stzhClosed",(function(){js_cookie.set("".concat(KEY_PREFIX_CLOSED,"-").concat(e.cookie),"1",{expires:r})}))}return[2]}}))}))}))};t.prototype.render=function(){var t={"stzh-toastbar":true};return h(Host,null,h("div",{class:t},h("slot",{onSlotchange:this.handleSlotchange})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{initialToasts:["initialToastsWatcher"]}},enumerable:false,configurable:true});return t}();StzhToastbar.style=stzhToastbarCss;export{StzhToastbar as stzh_toastbar};
 //# sourceMappingURL=stzh-toastbar.entry.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["stzhToastbarCss","KEY_PREFIX_CLOSED","StzhToastbar","this","_initialToasts","handleSlotchange","_this","toastsAppended","hideOverflowingItems","class_1","prototype","toast","label","_a","_b","type","link","document","createElement","hidden","role","initialOpenAnimation","slot","size","appendChild","element","initialToastsWatcher","newValue","JSON","parse","toastAppended","getAttribute","setAttribute","addEventListener","remove","timeoutStarted_1","Date","getTime","restTime_1","hideAfter","currentTimeout_1","window","setTimeout","hide","clearTimeout","timePassed","Array","from","children","forEach","childCount","length","splice","max","componentWillLoad","initialToasts","componentDidLoad","data","__awaiter","cookie","alreadyClosedBefore","Cookie","get","concat","HTMLElement","generatedLink","Object","assign","sent","~~set~~","~~expires~~","~~cookieExpires~~","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n bottom: var(--stzh-header-sticky-appnav-height, 0);\n left: $containerMargin;\n right: $containerMargin;\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 560px;\n max-width: min(560px, calc(100% - (#{$containerMarginSmall} * 2)));\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n // max-width: calc(100% - (#{$containerMarginMedium} * 2));\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n // max-width: calc(100% - (#{$containerMarginLarge} * 2));\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n @include spaceCurve('margin-bottom', 'regular');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastbarInitialToast,\n StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType, link?: HTMLStzhLinkElement } = { type: \"info\" }\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const childCount = this.element.children.length;\n\n Array.from(this.element.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async (data) => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-link\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhLinkElement\n })\n\n if (data.cookie) {\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n expires: ~~typeof data.~~cookieExpires ~~!==~~ \~~"undefined\" ? data.cookieExpires : 365\~~n });\n });\n }\n })\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"4nDAAA,IAAMA,gBAAkB,+zDCiBxB,IAAMC,kBAAoB,kC,IAUbC,aAAY,W,kDAuBfC,KAAAC,eAA6C,GAwF7CD,KAAAE,iBAAmB,WACzBC,EAAKC,iBACLD,EAAKE,sB,iBA5GqB,G,SAMN,E,mBAWuC,E,CAOvDC,EAAAC,UAAAC,MAAN,SACEC,EACAC,G,IAAAC,EAAAD,SAAA,EAAuE,CAAEE,KAAM,QAAQF,EAArFE,EAAID,EAAAC,KAAEC,EAAIF,EAAAE,K,2FAENL,EAAQM,SAASC,cAAc,cACrCP,EAAMQ,OAAS,KACfR,EAAMC,MAAQA,EACdD,EAAMS,KAAO,QACbT,EAAMI,KAAOA,GAAQ,OACrBJ,EAAMU,qBAAuB,KAE7B,GAAIL,EAAM,CACRA,EAAKM,KAAO,OACZN,EAAKO,KAAO,QACZZ,EAAMa,YAAYR,E,CAGpBb,KAAKsB,QAAQD,YAAYb,GAEzB,SAAOA,E,QAITF,EAAAC,UAAAgB,qBAAA,SAAqBC,GACnB,UAAWA,IAAa,SAAU,CAChCxB,KAAKC,eAAiBwB,KAAKC,MAAMF,E,KAC5B,CACLxB,KAAKC,eAAiBuB,C,GAIlBlB,EAAAC,UAAAoB,cAAA,SAAcnB,GACpB,GAAIA,EAAMoB,aAAa,8BAA+B,CACpD,M,CAGFpB,EAAMqB,aAAa,6BAA8B,IAEjDrB,EAAMsB,iBAAiB,cAAc,WACnCtB,EAAMuB,Q,IAGR,GAAIvB,EAAMI,OAAS,QAAS,CAC1B,IAAIoB,GAAiB,IAAIC,MAAOC,UAChC,IAAIC,EAAWnC,KAAKoC,UAAY,IAChC,IAAIC,EAAiBC,OAAOC,YAAW,WACrC/B,EAAMgC,M,GACLL,GAEH3B,EAAMsB,iBAAiB,gBAAgB,WACrC,GAAIO,EAAgB,CAClBC,OAAOG,aAAaJ,GACpB,IAAMK,GAAa,IAAIT,MAAOC,UAAYF,EAC1CG,EAAWA,EAAWO,C,KAI1BlC,EAAMsB,iBAAiB,gBAAgB,WACrCE,GAAiB,IAAIC,MAAOC,UAC5BG,EAAiBC,OAAOC,YAAW,WACjC/B,EAAMgC,M,GACLL,E,MAKD7B,EAAAC,UAAAH,eAAA,eAAAD,EAAAH,KACN2C,MAAMC,KAAK5C,KAAKsB,QAAQuB,UAAUC,SAAQ,SAACtC,GACzCL,EAAKwB,cAAcnB,E,KAIfF,EAAAC,UAAAF,qBAAA,WACN,IAAM0C,EAAa/C,KAAKsB,QAAQuB,SAASG,OAEzCL,MAAMC,KAAK5C,KAAKsB,QAAQuB,UACrBI,OAAO,EAAGF,EAAa/C,KAAKkD,KAC5BJ,SAAQ,SAACtC,GACRA,EAAMgC,M,KASZlC,EAAAC,UAAA4C,kBAAA,WACEnD,KAAKuB,qBAAqBvB,KAAKoD,c,EAGjC9C,EAAAC,UAAA8C,iBAAA,eAAAlD,EAAAH,KACEA,KAAKC,eAAe6C,SAAQ,SAAOQ,GAAI,OAAAC,UAAApD,OAAA,qB,~~wEACrC~~,GAAImD,EAAKE,OAAQ,CACTC,EAAsBC,UAAOC,IAAI,GAAAC,OAAG9D,kBAAiB,KAAA8D,OAAIN,EAAKE,SAEpE,GAAIC,EAAqB,CACvB,S,EAIA5C,EAAOyC,EAAKzC,KAEhB,KAAMA,aAAgBgD,aAAc,CAC5BC,EAAgBhD,SAASC,cAAc,aAC7C+C,EAAc3C,KAAO,OACrB2C,EAAc1C,KAAO,QAErB2C,OAAOC,OAAOF,EAAeR,EAAKzC,MAClCA,EAAOiD,C,CAGK,SAAM9D,KAAKQ,MAAM8C,EAAK7C,MAAO,CACzCG,KAAM0C,EAAK1C,KACXC,KAAMA,K,OAFFL,EAAQE,EAAAuD,OAKd,GAAIX,EAAKE,OAAQ,~~CACfhD~~,EAAMsB,iBAAiB,cAAc,WACnC4B,~~UAAOQ~~,IAAI,~~GAAAN~~,OAAG9D,kBAAiB,KAAA8D,OAAIN,EAAKE,QAAU,IAAK,~~CACrDW~~,~~eAAgBb~~,~~EAAKc~~,~~gBAAkB~~,~~YAAcd,EAAKc,cAAgB,K,yBAOpF9D,~~EAAAC,~~UAAA8D~~,OAAA,WACE,IAAMC,EAAU,CACd,gBAAiB,MAGnB,OACEC,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,QAAMG,~~aAAc1E~~,KAAKE,oB,~~6QApKV~~,G"}
1	+ {"version":3,"names":["stzhToastbarCss","KEY_PREFIX_CLOSED","StzhToastbar","this","_initialToasts","handleSlotchange","_this","toastsAppended","hideOverflowingItems","class_1","prototype","toast","label","_a","_b","type","link","document","createElement","hidden","role","initialOpenAnimation","slot","size","appendChild","element","initialToastsWatcher","newValue","JSON","parse","toastAppended","getAttribute","setAttribute","addEventListener","remove","timeoutStarted_1","Date","getTime","restTime_1","hideAfter","currentTimeout_1","window","setTimeout","hide","clearTimeout","timePassed","Array","from","children","forEach","childCount","length","splice","max","componentWillLoad","initialToasts","componentDidLoad","data","__awaiter","cookie","alreadyClosedBefore","Cookie","get","concat","HTMLElement","generatedLink","Object","assign","sent","cookieExpires_1","cookieExpires","set","expires","render","classes","h","Host","class","onSlotchange"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n bottom: var(--stzh-header-sticky-appnav-height, 0);\n left: $containerMargin;\n right: $containerMargin;\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 560px;\n max-width: min(560px, calc(100% - (#{$containerMarginSmall} * 2)));\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n // max-width: calc(100% - (#{$containerMarginMedium} * 2));\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n // max-width: calc(100% - (#{$containerMarginLarge} * 2));\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n @include spaceCurve('margin-bottom', 'regular');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastbarInitialToast,\n StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType, link?: HTMLStzhLinkElement } = { type: \"info\" }\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n Array.from(this.element.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const childCount = this.element.children.length;\n\n Array.from(this.element.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async (data) => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-link\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhLinkElement\n })\n\n if (data.cookie) {\n let cookieExpires = 365;\n\n if (data.cookieExpires === 0) {\n cookieExpires = null;\n } else if (data.cookieExpires) {\n cookieExpires = data.cookieExpires;\n }\n\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n expires: cookieExpires\n });\n });\n }\n })\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,r,n){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function a(t){try{c(n.next(t))}catch(t){o(t)}}function s(t){try{c(n["throw"](t))}catch(t){o(t)}}function c(t){t.done?r(t.value):i(t.value).then(a,s)}c((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return c([t,e])}}function c(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(n=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;i=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){r.label=s[1];break}if(s[0]===6&&r.label<o[1]){r.label=o[1];o=s;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(s);break}if(o[2])r.ops.pop();r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t];i=0}finally{n=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{a as axios}from"./axios-85a0baad.js";import{a as createParagraphsFromBrs}from"./string-utils-e252977e.js";import{VBZ}from"./index.js";var stzhVbzMajortickerCss=".sc-stzh-vbz-majorticker-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-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-vbz-majorticker-h .has-focus.sc-stzh-vbz-majorticker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker{outline-style:none !important}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker::-moz-focus-inner{border:0 !important}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--stzh-base-invert-color-rgb:var(--stzh-color-black-rgb);--color:var(--stzh-color-black);--background-color:var(--stzh-color-coral)}";var StzhVbzMajorticker=function(){function t(t){var e=this;registerInstance(this,t);this.stzhDisturbanceFetched=createEvent(this,"stzhDisturbanceFetched",7);this.disturbance=null;this.onGhettoboxOpen=function(){e.ghettoboxShown=true};this.onGhettoboxClose=function(){e.ghettoboxShown=false};this.api="https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";this.data="";this.moreInfoLink="https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";this.dateAdapter=undefined;this.localization=undefined;this.ghettoboxCloseTimeKey=undefined;this.ghettoboxShown=true}t.prototype.getGhettoboxShown=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.ghettoboxShown]}))}))};t.prototype.getDisturbance=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.disturbance]}))}))};t.prototype.apiWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e,r;return __generator(this,(function(n){switch(n.label){case 0:if(!t){return[2]}e=this.api.replace(/\{lang\}/,this.localization.$locale);e=e+(e.includes("?")?"&":"?")+Date.now();return[4,axios.get(e)];case 1:r=n.sent().data;this.data=r;return[2]}}))}))};t.prototype.dataWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e,r,n,i,o;return __generator(this,(function(a){if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}n=(r=(e=this._data)===null||e===void 0?void 0:e.Message)===null||r===void 0?void 0:r.find((function(t){return t.category===VBZ.DISTURBANCE_INFORMATION&&t.baseType===VBZ.BASE_TYPE_GLOBAL}));if(n){i=n.channel.filter((function(t){return t.name===VBZ.CHANNEL_TICKER&&t.url})).map((function(t){return t.url})).reduce((function(t,e){return t.concat(e)}),[]);o=i.find((function(t){return t.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER)!==-1}));this.disturbance={id:n.id,head:n.head,text:createParagraphsFromBrs(n.text),startDate:new Date("".concat(n.sDate,"T").concat(n.sTime,"+02:00")),endDate:new Date("".concat(n.eDate,"T").concat(n.eTime,"+02:00")),altStart:n.altStart,altEnd:n.altEnd,infoUrl:o}}this.stzhDisturbanceFetched.emit({component:"stzh-vbz-majorticker",disturbance:this.disturbance});return[2]}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"vbz-majorticker")];case 1:t.localization=e.sent();e.label=2;case 2:if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}if(!this.data)return[3,4];return[4,this.dataWatcher(this.data)];case 3:e.sent();return[3,6];case 4:return[4,this.apiWatcher(this.api)];case 5:e.sent();e.label=6;case 6:return[2]}}))}))};t.prototype.render=function(){var t={"stzh-vbz-majorticker":true};return h(Host,{hidden:!this.disturbance||!this.ghettoboxShown},h("div",{class:t},this.disturbance&&h("stzh-ghettobox",{onStzhOpen:this.onGhettoboxOpen,onStzhClose:this.onGhettoboxClose,class:"stzh-vbz-majorticker__ghettobox",hideClose:true,closeTimeKey:this.ghettoboxCloseTimeKey,mainTitle:this.disturbance.head,publishDate:this.disturbance.startDate},h("stzh-richtext",{innerHTML:this.disturbance.text}),this.disturbance.infoUrl?h("stzh-button",{slot:"button",href:this.disturbance.infoUrl.url},this.disturbance.infoUrl.name):h("stzh-button",{slot:"button",target:"_blank",href:this.moreInfoLink.replace(/\{lang\}/,this.localization.$locale).replace(/\{id\}/,this.disturbance.id)},this.localization.moreInfo))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{api:["apiWatcher"],data:["dataWatcher"]}},enumerable:false,configurable:true});return t}();StzhVbzMajorticker.style=stzhVbzMajortickerCss;export{StzhVbzMajorticker as stzh_vbz_majorticker};
+var __awaiter=this&&this.__awaiter||function(t,e,r,n){function i(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,o){function a(t){try{c(n.next(t))}catch(t){o(t)}}function s(t){try{c(n["throw"](t))}catch(t){o(t)}}function c(t){t.done?r(t.value):i(t.value).then(a,s)}c((n=n.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},n,i,o,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return c([t,e])}}function c(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(n=1,i&&(o=s[0]&2?i["return"]:s[0]?i["throw"]||((o=i["return"])&&o.call(i),0):i.next)&&!(o=o.call(i,s[1])).done)return o;if(i=0,o)s=[s[0]&2,o.value];switch(s[0]){case 0:case 1:o=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;i=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(o=r.trys,o=o.length>0&&o[o.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!o||s[1]>o[0]&&s[1]<o[3])){r.label=s[1];break}if(s[0]===6&&r.label<o[1]){r.label=o[1];o=s;break}if(o&&r.label<o[2]){r.label=o[2];r.ops.push(s);break}if(o[2])r.ops.pop();r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t];i=0}finally{n=o=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{a as axios}from"./axios-85a0baad.js";import{a as createParagraphsFromBrs}from"./string-utils-e252977e.js";import{VBZ}from"./index.js";var stzhVbzMajortickerCss=".sc-stzh-vbz-majorticker-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-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-vbz-majorticker-h .has-focus.sc-stzh-vbz-majorticker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker{outline-style:none !important}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker::-moz-focus-inner{border:0 !important}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--stzh-base-invert-color-rgb:var(--stzh-color-black-rgb);--color:var(--stzh-color-black);--background-color:var(--stzh-color-coral)}";var StzhVbzMajorticker=function(){function t(t){var e=this;registerInstance(this,t);this.stzhDisturbanceFetched=createEvent(this,"stzhDisturbanceFetched",7);this.disturbance=null;this.onGhettoboxOpen=function(){e.ghettoboxShown=true};this.onGhettoboxClose=function(){e.ghettoboxShown=false};this.api="https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";this.data="";this.moreInfoLink="https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";this.dateAdapter=undefined;this.localization=undefined;this.ghettoboxCloseTimeKey=undefined;this.ghettoboxShown=true}t.prototype.getGhettoboxShown=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.ghettoboxShown]}))}))};t.prototype.getDisturbance=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.disturbance]}))}))};t.prototype.apiWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e,r;return __generator(this,(function(n){switch(n.label){case 0:if(!t){return[2]}e=this.api.replace(/\{lang\}/,this.localization.$locale);e=e+(e.includes("?")?"&":"?")+Date.now();return[4,axios.get(e)];case 1:r=n.sent().data;this.data=r;return[2]}}))}))};t.prototype.dateAdapterWatcher=function(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}};t.prototype.dataWatcher=function(t){return __awaiter(this,void 0,void 0,(function(){var e,r,n,i,o;return __generator(this,(function(a){if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}n=(r=(e=this._data)===null||e===void 0?void 0:e.Message)===null||r===void 0?void 0:r.find((function(t){return t.category===VBZ.DISTURBANCE_INFORMATION&&t.baseType===VBZ.BASE_TYPE_GLOBAL}));if(n){i=n.channel.filter((function(t){return t.name===VBZ.CHANNEL_TICKER&&t.url})).map((function(t){return t.url})).reduce((function(t,e){return t.concat(e)}),[]);o=i.find((function(t){return t.url.indexOf(VBZ.CHANNEL_INFO_URL_FILTER)!==-1}));this.disturbance={id:n.id,head:n.head,text:createParagraphsFromBrs(n.text),startDate:new Date("".concat(n.sDate,"T").concat(n.sTime,"+02:00")),endDate:new Date("".concat(n.eDate,"T").concat(n.eTime,"+02:00")),altStart:n.altStart,altEnd:n.altEnd,infoUrl:o}}this.stzhDisturbanceFetched.emit({component:"stzh-vbz-majorticker",disturbance:this.disturbance});return[2]}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"vbz-majorticker")];case 1:t.localization=e.sent();e.label=2;case 2:this.dateAdapterWatcher(this.dateAdapter);if(!this.data)return[3,4];return[4,this.dataWatcher(this.data)];case 3:e.sent();return[3,6];case 4:return[4,this.apiWatcher(this.api)];case 5:e.sent();e.label=6;case 6:return[2]}}))}))};t.prototype.render=function(){var t={"stzh-vbz-majorticker":true};return h(Host,{hidden:!this.disturbance||!this.ghettoboxShown},h("div",{class:t},this.disturbance&&h("stzh-ghettobox",{onStzhOpen:this.onGhettoboxOpen,onStzhClose:this.onGhettoboxClose,class:"stzh-vbz-majorticker__ghettobox",hideClose:true,closeTimeKey:this.ghettoboxCloseTimeKey,mainTitle:this.disturbance.head,publishDate:this.disturbance.startDate},h("stzh-richtext",{innerHTML:this.disturbance.text}),this.disturbance.infoUrl?h("stzh-button",{slot:"button",href:this.disturbance.infoUrl.url},this.disturbance.infoUrl.name):h("stzh-button",{slot:"button",target:"_blank",href:this.moreInfoLink.replace(/\{lang\}/,this.localization.$locale).replace(/\{id\}/,this.disturbance.id)},this.localization.moreInfo))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{api:["apiWatcher"],dateAdapter:["dateAdapterWatcher"],data:["dataWatcher"]}},enumerable:false,configurable:true});return t}();StzhVbzMajorticker.style=stzhVbzMajortickerCss;export{StzhVbzMajorticker as stzh_vbz_majorticker};
 //# sourceMappingURL=stzh-vbz-majorticker.entry.js.map