npm - @oiz/stzh-components - Versions diffs - 4.12.2 → 4.13.0-beta1 - Mend

@oiz/stzh-components 4.12.2 → 4.13.0-beta1

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

Files changed (1023) hide show

package/dist/components/{p-ChcKhy4e.js → p-DtzaWGPc.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-BBg6OWDc.js';
-import { d as defineCustomElement$1 } from './p-CRo_30JG.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { d as defineCustomElement$1 } from './p-mPSUVIkD.js';
 const stzhStepperItemCss = () => `.sc-stzh-stepper-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-stepper-item-h,[stzh-hidden].sc-stzh-stepper-item-h{display:none}.sc-stzh-stepper-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-stepper-item-h *.sc-stzh-stepper-item,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::before,.sc-stzh-stepper-item-h *.sc-stzh-stepper-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-stepper-item-h .has-focus.sc-stzh-stepper-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item{outline-style:none !important}.sc-stzh-stepper-item-h .stzh-fylingfocus-focused.sc-stzh-stepper-item::-moz-focus-inner{border:0 !important}[hide].sc-stzh-stepper-item-h{display:none}.stzh-stepper-item.sc-stzh-stepper-item{text-align:center}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{appearance:none;font-family:inherit;background-color:transparent;border:none}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:pointer}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{cursor:default;pointer-events:none}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-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)}@media screen and (min-width: 900px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-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)}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;border:0.0625rem solid transparent;text-align:center;box-sizing:border-box;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:none;content:"";position:absolute;top:1rem;right:2.125rem;width:100vw;height:0.0625rem;z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:1.25rem;right:2.5625rem}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item::after{content:"";z-index:0;position:absolute;display:block;width:100%;height:100%;top:0;left:0;transition:background-color var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item::after{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:block;font-size:0.875rem;line-height:1.28;padding:var(--stzh-space-xxsmall) var(--stzh-space-small);letter-spacing:0.01em;transition:color var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 599px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{transition:none}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{z-index:1;position:relative;color:currentColor}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{forced-color-adjust:preserve-parent-color}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-xsmall);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);color:currentColor}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-small)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{z-index:1;appearance:none;font-family:inherit;position:absolute;top:0.1875rem;width:1.6875rem;height:1.6875rem;background-color:var(--stzh-color-grey20);border:0.0625rem solid transparent;cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{transition:none;color:ButtonText;border-color:ButtonBorder;background-color:ButtonFace}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){border-color:var(--stzh-color-grey20);cursor:default}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){color:HighlightText;border-color:Highlight;background-color:Highlight}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus)::after{background-color:var(--stzh-color-grey20)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus)::after{background-color:Highlight}}.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:HighlightText}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item{cursor:default}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item{color:CanvasText;border-color:CanvasText;background-color:Canvas}}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus){border-color:var(--stzh-base-border-color);cursor:default}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus){color:CanvasText;border-color:CanvasText;background-color:Canvas}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus)::after{background-color:inherit}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus)::after{background-color:Canvas}}.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item .stzh-stepper-item__dotted.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled.sc-stzh-stepper-item:where(:hover,.sc-stzh-stepper-item:focus) .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}@media screen and (min-width: 600px){.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item.sc-stzh-stepper-item{--base-line-color:var(--stzh-base-border-color);--base-item-text-color:var(--stzh-color-primary);--base-item-border-color:var(--stzh-color-secondary20);--base-item-background-color:var(--stzh-color-secondary20);--base-label-text-color:var(--stzh-color-grey80);--inert-item-text-color:var(--stzh-color-primary);--inert-item-border-color:var(--stzh-color-grey20);--inert-item-background-color:var(--stzh-color-grey20);--inert-label-text-color:var(--stzh-color-grey80);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-secondary40);--hover-item-background-color:var(--stzh-color-secondary40);--hover-label-text-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item.sc-stzh-stepper-item{--base-line-color:CanvasText;--base-item-text-color:ButtonText;--base-item-border-color:ButtonBorder;--base-item-background-color:ButtonFace;--base-label-text-color:ButtonText;--inert-item-text-color:CanvasText;--inert-item-border-color:CanvasText;--inert-item-background-color:Canvas;--inert-label-text-color:CanvasText;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__unclickable.sc-stzh-stepper-item{--line-color:var(--base-line-color);--item-text-color:var(--inert-item-text-color);--item-border-color:var(--inert-item-border-color);--item-background-color:var(--inert-item-background-color);--label-text-color:var(--inert-label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{--line-color:var(--base-line-color);--item-text-color:var(--base-item-text-color);--item-border-color:var(--base-item-border-color);--item-background-color:var(--base-item-background-color);--label-text-color:var(--base-label-text-color)}.stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:is(:hover,.sc-stzh-stepper-item:focus){--item-text-color:var(--hover-item-text-color);--item-border-color:var(--hover-item-border-color);--item-background-color:var(--hover-item-background-color);--label-text-color:var(--hover-label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--label-text-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--item-text-color);border-color:var(--item-border-color);background-color:var(--item-background-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:var(--line-color)}.stzh-stepper-item.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--item-background-color)}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before,.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{position:relative}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{left:50%;transform:translateX(-50%)}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{z-index:1}.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.84375rem))}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.96875rem))}}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item{--base-line-color:var(--base-item-background-color);--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-secondary60);--base-item-background-color:var(--stzh-color-secondary60);--base-label-text-color:var(--stzh-color-primary);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-item-background-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-secondary70);--hover-item-background-color:var(--stzh-color-secondary70);--hover-label-text-color:var(--stzh-color-primary-hover)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item{--base-item-text-color:SelectedItemText;--base-item-border-color:SelectedItem;--base-item-background-color:SelectedItem;--base-label-text-color:SelectedItem;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-stepper-item.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number.sc-stzh-stepper-item{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item{--base-line-color:var(--base-item-background-color);--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-primary);--base-item-background-color:var(--stzh-color-primary);--base-label-text-color:var(--base-item-background-color);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-item-background-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--stzh-color-primary-hover);--hover-item-background-color:var(--stzh-color-primary-hover);--hover-label-text-color:var(--hover-item-background-color)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item{--base-item-text-color:SelectedItemText;--base-item-border-color:SelectedItem;--base-item-background-color:SelectedItem;--base-label-text-color:SelectedItem;--hover-item-text-color:HighlightText;--hover-item-border-color:Highlight;--hover-item-background-color:Highlight;--hover-label-text-color:Highlight}}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-stepper-item.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{z-index:-1;display:block}.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item{--base-item-text-color:var(--stzh-color-white);--base-item-border-color:var(--stzh-color-grey60);--base-item-background-color:var(--stzh-color-grey60);--base-label-text-color:var(--stzh-color-grey80);--inert-item-text-color:var(--base-item-text-color);--inert-item-border-color:var(--base-item-border-color);--inert-item-background-color:var(--base-item-background-color);--inert-label-text-color:var(--base-label-text-color);--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--base-item-border-color);--hover-item-background-color:var(--base-item-background-color);--hover-label-text-color:var(--base-label-text-color)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item{--base-item-text-color:GrayText;--base-item-border-color:GrayText;--base-item-background-color:Canvas;--base-label-text-color:GrayText;--hover-item-text-color:var(--base-item-text-color);--hover-item-border-color:var(--base-item-border-color);--hover-item-background-color:var(--base-item-background-color);--hover-label-text-color:var(--base-label-text-color)}}.stzh-stepper-item.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:not-allowed}.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{--base-line-color:var(--stzh-color-white)}@media (forced-colors: active){.stzh-stepper-item.stzh-stepper-item--first.sc-stzh-stepper-item{--base-line-color:Canvas}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:none}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{position:relative;z-index:0;top:0.3125rem;width:1.6875rem;height:1.6875rem;margin-bottom:0;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{top:0.5rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.75rem;right:1.625rem}@media screen and (min-width: 600px){.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.8125rem;right:1.875rem}}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item.stzh-stepper-item--first.stzh-stepper-item--dotted.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{padding-left:0;padding-right:0}`;
@@ -67,9 +67,9 @@ const StzhStepperItem = /*@__PURE__*/ proxyCustomElement(class StzhStepperItem e
             "stzh-stepper-item--passed": this.passed,
             "stzh-stepper-item--passed-incomplete": this.passed && this.incomplete,
         };
-        const dotted = (h("span", { key: '9edca7be9297c15bb8dcd79d237539de201676c7' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
-        const content = (h("span", { key: '6b0b9a5c5de1d5b00b2d964e5065769e2c16a136' }, h("span", { key: '14862078e6a7c6ac14c3b53875daada325b32762', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'e3b194b2c36122d9be4653e1ebcacd4fbf4fb466', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
-        return (h(Host, { key: 'cd0072da45b67520a8617ff7fdd8eb180646903a', role: "listitem" }, h("div", { key: 'cae12a150b641dda90687d3c73c7e3a2a7f1206f', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
+        const dotted = (h("span", { key: '6189f4838f18c89c08894c16257485b24bc05de1' }, !this.clickDisabled ? (h("button", { class: "stzh-stepper-item__dotted", onClick: this.onDottedClick }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" }))) : (h("div", { class: "stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled" }, h("stzh-icon", { class: "stzh-stepper-item__dotted-icon", name: "more-horizontal" })))));
+        const content = (h("span", { key: 'b4395b3abd6297ddf7b894c07b1cb170b255f083' }, h("span", { key: '018a92abe41dadb86b36251580d346cd24849881', class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h("span", null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { key: 'b9369255ef299a08df7a9c440ce53ac70f7327d7', ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null))));
+        return (h(Host, { key: '49ad7c0997a290425d16f6cd9e8819e183c4c3ec', role: "listitem" }, h("div", { key: 'd5a4738c3c7da576a0dea3941226a950494def2d', class: classes }, this.last && this.dotted && dotted, this.clickDisabled ? (h("div", { class: "stzh-stepper-item__unclickable", "aria-pressed": this.current ? "true" : "false" }, content)) : (h("button", { ref: el => (this.button = el), class: "stzh-stepper-item__button", "aria-pressed": this.current ? "true" : "false", disabled: (this.dotted && this.first) || this.disabled, onClick: this.onClick }, h("span", { class: "stzh-stepper-item__number-block" }, this.icon ? (h("stzh-icon", { class: "stzh-stepper-item__user-icon", name: this.icon })) : (h(Fragment, null, h("span", { class: "stzh-stepper-item__number" }, this.step), this.passed && !this.incomplete && (h("stzh-icon", { class: "stzh-stepper-item__icon", name: "checkmark" }))))), h("span", { ref: el => (this.text = el), class: "stzh-stepper-item__label-block" }, this.label ? this.label : h("slot", null)))), this.first && this.dotted && dotted)));
     }
     get element() { return this; }
     static get style() { return stzhStepperItemCss(); }
@@ -108,6 +108,6 @@ function defineCustomElement() {
 }
 export { StzhStepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-ChcKhy4e.js.map
+//# sourceMappingURL=p-DtzaWGPc.js.map
-//# sourceMappingURL=p-ChcKhy4e.js.map
+//# sourceMappingURL=p-DtzaWGPc.js.map

package/dist/components/{p-ChcKhy4e.js.map → p-DtzaWGPc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-ChcKhy4e.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,+koBAA+koB,CAAC;;MCYrmoB,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAGtB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAG3B,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAGxB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGrB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAI,CAAA,IAAA,GAAW,CAAC;;AAGhB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGlC,QAAA,IAAa,CAAA,aAAA,GAAY,KAAK;AAoB9B,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,SAAS,EAAE,mBAAmB;AAC9B,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AACpF,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;AAC5C,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,gBAAA,SAAS,EAAE,mBAAmB;AAC9B,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC;AACpF,aAAA,CAAC;AACJ,SAAC;AA8FF;IA5FC,kBAAkB,GAAA;QAChB,qBAAqB,CAAC,MAAK;;AACzB,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;AACnF,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,mBAAmB,EAAE,IAAI;YACzB,0BAA0B,EAAE,IAAI,CAAC,KAAK;YACtC,yBAAyB,EAAE,IAAI,CAAC,IAAI;YACpC,4BAA4B,EAAE,IAAI,CAAC,OAAO;YAC1C,yBAAyB,EAAE,IAAI,CAAC,IAAI;YACpC,2BAA2B,EAAE,IAAI,CAAC,MAAM;AACxC,YAAA,6BAA6B,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAC1C,gCAAgC,EAAE,IAAI,CAAC,QAAQ;YAC/C,2BAA2B,EAAE,IAAI,CAAC,MAAM;AACxC,YAAA,sCAAsC,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU;SACvE;AAED,QAAA,MAAM,MAAM,IACV,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,CAAC,IAAI,CAAC,aAAa,IAClB,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,2BAA2B,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,EACnE,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,iBAAiB,EAAA,CAAa,CAC9E,KAET,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,+DAA+D,EAAA,EACxE,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,iBAAiB,EAAA,CAAa,CACjF,CACP,CACI,CACR;AAED,QAAA,MAAM,OAAO,IACX,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iCAAiC,EAC1C,EAAA,IAAI,CAAC,IAAI,IACR,CAAW,CAAA,WAAA,EAAA,EAAA,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAE7E,CAAA,CAAA,MAAA,EAAA,IAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,KAC9B,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,WAAW,EAAa,CAAA,CACzE,CACI,CACR,CACI,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAC,gCAAgC,EACrF,EAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACnC,CACF,CACR;AAED,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EAClC,IAAI,CAAC,aAAa,IACjB,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,gCAAgC,kBAAe,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EACtF,EAAA,OAAO,CACJ,KAEN,CAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EAClD,KAAK,EAAC,2BAA2B,EACnB,cAAA,EAAA,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,QAAQ,EACtD,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iCAAiC,EAAA,EAC1C,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,8BAA8B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAE7E,CAAA,CAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ,EACzD,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,KAC9B,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,WAAW,EAAa,CAAA,CACzE,CACQ,CACZ,CACI,EACP,CAAA,CAAA,MAAA,EAAA,EAAM,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,IAAI,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAC,gCAAgC,EAAA,EACrF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACnC,CACA,CACV,EACA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,CAChC,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n display: none;\n}\n\n.stzh-stepper-item {\n text-align: center;\n\n .stzh-stepper-item__button,\n .stzh-stepper-item__unclickable {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n }\n\n .stzh-stepper-item__button {\n cursor: pointer;\n }\n\n .stzh-stepper-item__unclickable {\n cursor: default;\n pointer-events: none;\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 .stzh-stepper-item__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: $stepperItemSize;\n height: $stepperItemSize;\n border: 1px solid transparent;\n text-align: center;\n box-sizing: border-box;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $stepperItemSmallUp;\n height: $stepperItemSmallUp;\n margin-bottom: space(\"large\");\n }\n\n @media (forced-colors: active) {\n transition: none;\n }\n\n // 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: $stepperItemSize - 1px;\n width: 100vw;\n height: 1px;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $stepperItemSmallUp - 1px;\n }\n }\n }\n\n .stzh-stepper-item__number-block,\n .stzh-stepper-item__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 transition: background-color $baseTransitionAnimationSpeed;\n\n @media (forced-colors: active) {\n transition: none;\n }\n }\n }\n\n .stzh-stepper-item__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\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 @media (forced-colors: active) {\n transition: none;\n }\n }\n\n .stzh-stepper-item__number,\n .stzh-stepper-item__icon,\n .stzh-stepper-item__user-icon,\n .stzh-stepper-item__dotted-icon {\n z-index: 1;\n position: relative;\n color: currentColor;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n .stzh-stepper-item__icon,\n .stzh-stepper-item__user-icon,\n .stzh-stepper-item__dotted-icon {\n --size: #{iconSize(\"xsmall\")};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: currentColor;\n }\n\n .stzh-stepper-item__user-icon {\n --size: #{iconSize(\"small\")};\n }\n\n .stzh-stepper-item__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n background-color: $colorGrey20;\n border: 1px solid transparent;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @media (forced-colors: active) {\n transition: none;\n color: ButtonText;\n border-color: ButtonBorder;\n background-color: ButtonFace;\n }\n\n &:is(:hover, :focus) {\n border-color: $colorGrey20;\n cursor: default;\n\n @media (forced-colors: active) {\n color: HighlightText;\n border-color: Highlight;\n background-color: Highlight;\n }\n\n &::after {\n background-color: $colorGrey20;\n\n @media (forced-colors: active) {\n background-color: Highlight;\n }\n }\n\n .stzh-stepper-item__dotted-icon {\n color: $colorPrimaryHover;\n\n @media (forced-colors: active) {\n color: HighlightText;\n }\n }\n }\n\n &.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled {\n cursor: default;\n\n @media (forced-colors: active) {\n color: CanvasText;\n border-color: CanvasText;\n background-color: Canvas;\n }\n\n .stzh-stepper-item__dotted-icon {\n @media (forced-colors: active) {\n color: CanvasText;\n }\n }\n\n &:where(:hover, :focus) {\n border-color: var(--stzh-base-border-color);\n cursor: default;\n\n @media (forced-colors: active) {\n color: CanvasText;\n border-color: CanvasText;\n background-color: Canvas;\n }\n\n &::after {\n background-color: inherit;\n\n @media (forced-colors: active) {\n background-color: Canvas;\n }\n }\n\n .stzh-stepper-item__dotted-icon {\n color: $colorPrimaryHover;\n\n @media (forced-colors: active) {\n color: CanvasText;\n }\n }\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n }\n\n // Variant: ~default~\n & {\n --base-line-color: #{$baseBorderColor};\n\n --base-item-text-color: #{$colorPrimary};\n --base-item-border-color: #{$colorSecondary20};\n --base-item-background-color: #{$colorSecondary20};\n --base-label-text-color: #{$colorGrey80};\n\n --inert-item-text-color: #{$colorPrimary};\n --inert-item-border-color: #{$colorGrey20};\n --inert-item-background-color: #{$colorGrey20};\n --inert-label-text-color: #{$colorGrey80};\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorSecondary40};\n --hover-item-background-color: #{$colorSecondary40};\n --hover-label-text-color: #{$colorPrimaryHover};\n\n @media (forced-colors: active) {\n --base-line-color: CanvasText;\n\n --base-item-text-color: ButtonText;\n --base-item-border-color: ButtonBorder;\n --base-item-background-color: ButtonFace;\n --base-label-text-color: ButtonText;\n\n --inert-item-text-color: CanvasText;\n --inert-item-border-color: CanvasText;\n --inert-item-background-color: Canvas;\n --inert-label-text-color: CanvasText;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__unclickable {\n --line-color: var(--base-line-color);\n\n --item-text-color: var(--inert-item-text-color);\n --item-border-color: var(--inert-item-border-color);\n --item-background-color: var(--inert-item-background-color);\n --label-text-color: var(--inert-label-text-color);\n }\n\n .stzh-stepper-item__button {\n --line-color: var(--base-line-color);\n\n --item-text-color: var(--base-item-text-color);\n --item-border-color: var(--base-item-border-color);\n --item-background-color: var(--base-item-background-color);\n --label-text-color: var(--base-label-text-color);\n\n // Add specifity with `:is` instead of `:where`\n &:is(:hover, :focus) {\n --item-text-color: var(--hover-item-text-color);\n --item-border-color: var(--hover-item-border-color);\n --item-background-color: var(--hover-item-background-color);\n --label-text-color: var(--hover-label-text-color);\n }\n }\n\n .stzh-stepper-item__label-block {\n color: var(--label-text-color);\n }\n\n .stzh-stepper-item__number-block {\n color: var(--item-text-color);\n border-color: var(--item-border-color);\n background-color: var(--item-background-color);\n\n // Line\n &::before {\n background-color: var(--line-color);\n }\n\n // Background\n &::after {\n background-color: var(--item-background-color);\n }\n }\n }\n\n // Variant: \"first\" or \"last\"\n &.stzh-stepper-item--first,\n &.stzh-stepper-item--last {\n .stzh-stepper-item__number-block {\n &::before {\n display: block;\n }\n }\n }\n\n // Variant: \"first\"\n &.stzh-stepper-item--first {\n position: relative;\n\n .stzh-stepper-item__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n .stzh-stepper-item__number-block::before {\n z-index: 1;\n }\n }\n\n // Variant: \"last\"\n &.stzh-stepper-item--last {\n .stzh-stepper-item__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize 0.5}));\n\n @include mq($from: small) {\n right: calc(\n (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n );\n }\n }\n }\n\n // Variant: \"passed\"\n &.stzh-stepper-item--passed {\n --base-line-color: var(--base-item-background-color);\n\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorSecondary60};\n --base-item-background-color: #{$colorSecondary60};\n --base-label-text-color: #{$colorPrimary};\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-item-background-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorSecondary70};\n --hover-item-background-color: #{$colorSecondary70};\n --hover-label-text-color: #{$colorPrimaryHover};\n\n @media (forced-colors: active) {\n --base-item-text-color: SelectedItemText;\n --base-item-border-color: SelectedItem;\n --base-item-background-color: SelectedItem;\n --base-label-text-color: SelectedItem;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__label-block {\n @include font(\"heavy\");\n }\n }\n\n // Variant: \"passed\" and not \"passed-incomplete\"\n &.stzh-stepper-item--passed:not(.stzh-stepper-item--passed-incomplete) {\n .stzh-stepper-item__number {\n @include visuallyhidden;\n }\n }\n\n // Variant: \"passed-incomplete\"\n &.stzh-stepper-item--passed-incomplete {\n //\n }\n\n // Variant: \"current\"\n &.stzh-stepper-item--current {\n --base-line-color: var(--base-item-background-color);\n\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorPrimary};\n --base-item-background-color: #{$colorPrimary};\n --base-label-text-color: var(--base-item-background-color);\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-item-background-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorPrimaryHover};\n --hover-item-background-color: #{$colorPrimaryHover};\n --hover-label-text-color: var(--hover-item-background-color);\n\n @media (forced-colors: active) {\n --base-item-text-color: SelectedItemText;\n --base-item-border-color: SelectedItem;\n --base-item-background-color: SelectedItem;\n --base-label-text-color: SelectedItem;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__label-block {\n @include font(\"heavy\");\n }\n\n .stzh-stepper-item__number-block {\n // Line\n &::before {\n z-index: -1;\n display: block;\n }\n }\n }\n\n /* Disabled /\n &.stzh-stepper-item--is-disabled {\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorGrey60};\n --base-item-background-color: #{$colorGrey60};\n --base-label-text-color: #{$colorGrey80};\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-label-text-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: var(--base-item-border-color);\n --hover-item-background-color: var(--base-item-background-color);\n --hover-label-text-color: var(--base-label-text-color);\n\n @media (forced-colors: active) {\n --base-item-text-color: GrayText;\n --base-item-border-color: GrayText;\n --base-item-background-color: Canvas;\n --base-label-text-color: GrayText;\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: var(--base-item-border-color);\n --hover-item-background-color: var(--base-item-background-color);\n --hover-label-text-color: var(--base-label-text-color);\n }\n\n .stzh-stepper-item__button {\n cursor: not-allowed;\n }\n }\n\n // Variant: \"first\" (line-color overwrite)\n &.stzh-stepper-item--first {\n --base-line-color: #{$colorWhite};\n\n @media (forced-colors: active) {\n --base-line-color: Canvas;\n }\n }\n\n // Variant: \"first\" and \"dotted\"\n &.stzh-stepper-item--first.stzh-stepper-item--dotted {\n .stzh-stepper-item__label-block {\n display: none;\n }\n\n // Hide number block behind dotted element\n .stzh-stepper-item__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n margin-bottom: 0;\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: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\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 &::after {\n display: none;\n }\n }\n\n .stzh-stepper-item__button {\n padding-left: 0;\n padding-right: 0;\n }\n }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-stepper-item\",\n styleUrl: \"stzh-stepper-item.scss\",\n scoped: true,\n})\nexport class StzhStepperItem {\n /* The label of the item. /\n @Prop({ reflect: true }) label: string;\n\n /* When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether it's the first item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) first: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) last: boolean = false;\n\n /* True when the item index is lower than the current index (used internally by stzh-stepper). /\n @Prop({ reflect: true }) passed: boolean = false;\n\n /* For passed items, this prevents displaying a checked icon when true (shows step number instead). /\n @Prop({ reflect: true }) incomplete: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) current: boolean = false;\n\n /* Whether it's a hidden item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) hide: boolean = false;\n\n /* Whether it's a dotted item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) dotted: boolean = false;\n\n /* The number of the step (used internally by stzh-stepper). /\n @Prop({ reflect: true }) step: number = 1;\n\n /* Displays a custom icon instead of the step number. /\n @Prop({ reflect: true }) icon: string = \"\";\n\n /* When true, it displays a default cursor on hover and no click event is emitted. /\n @Prop() clickDisabled: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n @Element() element: HTMLStzhStepperItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-stepper-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-stepper-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-stepper-item\": true,\n \"stzh-stepper-item--first\": this.first,\n \"stzh-stepper-item--last\": this.last,\n \"stzh-stepper-item--current\": this.current,\n \"stzh-stepper-item--hide\": this.hide,\n \"stzh-stepper-item--dotted\": this.dotted,\n \"stzh-stepper-item--has-icon\": !!this.icon,\n \"stzh-stepper-item--is-disabled\": this.disabled,\n \"stzh-stepper-item--passed\": this.passed,\n \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n };\n\n const dotted = (\n <span>\n {!this.clickDisabled ? (\n <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n ) : (\n <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled\">\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </div>\n )}\n </span>\n );\n\n const content = (\n <span>\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon ? (\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n ) : (\n <span>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (\n <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n )}\n </span>\n )}\n </span>\n <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n {this.label ? this.label : <slot></slot>}\n </span>\n </span>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n {this.clickDisabled ? (\n <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n {content}\n </div>\n ) : (\n <button\n ref={el => (this.button = el as HTMLButtonElement)}\n class=\"stzh-stepper-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-stepper-item__number-block\">\n {this.icon ? (\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n ) : (\n <Fragment>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (\n <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n )}\n </Fragment>\n )}\n </span>\n <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n )}\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DtzaWGPc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-stepper-item/stzh-stepper-item.scss?tag=stzh-stepper-item&encapsulation=scoped","src/components/stzh-stepper-item/stzh-stepper-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n display: none;\n}\n\n.stzh-stepper-item {\n text-align: center;\n\n .stzh-stepper-item__button,\n .stzh-stepper-item__unclickable {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n }\n\n .stzh-stepper-item__button {\n cursor: pointer;\n }\n\n .stzh-stepper-item__unclickable {\n cursor: default;\n pointer-events: none;\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 .stzh-stepper-item__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: $stepperItemSize;\n height: $stepperItemSize;\n border: 1px solid transparent;\n text-align: center;\n box-sizing: border-box;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $stepperItemSmallUp;\n height: $stepperItemSmallUp;\n margin-bottom: space(\"large\");\n }\n\n @media (forced-colors: active) {\n transition: none;\n }\n\n // 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: $stepperItemSize - 1px;\n width: 100vw;\n height: 1px;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $stepperItemSmallUp - 1px;\n }\n }\n }\n\n .stzh-stepper-item__number-block,\n .stzh-stepper-item__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 transition: background-color $baseTransitionAnimationSpeed;\n\n @media (forced-colors: active) {\n transition: none;\n }\n }\n }\n\n .stzh-stepper-item__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\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 @media (forced-colors: active) {\n transition: none;\n }\n }\n\n .stzh-stepper-item__number,\n .stzh-stepper-item__icon,\n .stzh-stepper-item__user-icon,\n .stzh-stepper-item__dotted-icon {\n z-index: 1;\n position: relative;\n color: currentColor;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n .stzh-stepper-item__icon,\n .stzh-stepper-item__user-icon,\n .stzh-stepper-item__dotted-icon {\n --size: #{iconSize(\"xsmall\")};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: currentColor;\n }\n\n .stzh-stepper-item__user-icon {\n --size: #{iconSize(\"small\")};\n }\n\n .stzh-stepper-item__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n background-color: $colorGrey20;\n border: 1px solid transparent;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @media (forced-colors: active) {\n transition: none;\n color: ButtonText;\n border-color: ButtonBorder;\n background-color: ButtonFace;\n }\n\n &:is(:hover, :focus) {\n border-color: $colorGrey20;\n cursor: default;\n\n @media (forced-colors: active) {\n color: HighlightText;\n border-color: Highlight;\n background-color: Highlight;\n }\n\n &::after {\n background-color: $colorGrey20;\n\n @media (forced-colors: active) {\n background-color: Highlight;\n }\n }\n\n .stzh-stepper-item__dotted-icon {\n color: $colorPrimaryHover;\n\n @media (forced-colors: active) {\n color: HighlightText;\n }\n }\n }\n\n &.stzh-stepper-item__dotted.stzh-stepper-item__dotted--disabled {\n cursor: default;\n\n @media (forced-colors: active) {\n color: CanvasText;\n border-color: CanvasText;\n background-color: Canvas;\n }\n\n .stzh-stepper-item__dotted-icon {\n @media (forced-colors: active) {\n color: CanvasText;\n }\n }\n\n &:where(:hover, :focus) {\n border-color: var(--stzh-base-border-color);\n cursor: default;\n\n @media (forced-colors: active) {\n color: CanvasText;\n border-color: CanvasText;\n background-color: Canvas;\n }\n\n &::after {\n background-color: inherit;\n\n @media (forced-colors: active) {\n background-color: Canvas;\n }\n }\n\n .stzh-stepper-item__dotted-icon {\n color: $colorPrimaryHover;\n\n @media (forced-colors: active) {\n color: CanvasText;\n }\n }\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\n }\n }\n\n // Variant: ~default~\n & {\n --base-line-color: #{$baseBorderColor};\n\n --base-item-text-color: #{$colorPrimary};\n --base-item-border-color: #{$colorSecondary20};\n --base-item-background-color: #{$colorSecondary20};\n --base-label-text-color: #{$colorGrey80};\n\n --inert-item-text-color: #{$colorPrimary};\n --inert-item-border-color: #{$colorGrey20};\n --inert-item-background-color: #{$colorGrey20};\n --inert-label-text-color: #{$colorGrey80};\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorSecondary40};\n --hover-item-background-color: #{$colorSecondary40};\n --hover-label-text-color: #{$colorPrimaryHover};\n\n @media (forced-colors: active) {\n --base-line-color: CanvasText;\n\n --base-item-text-color: ButtonText;\n --base-item-border-color: ButtonBorder;\n --base-item-background-color: ButtonFace;\n --base-label-text-color: ButtonText;\n\n --inert-item-text-color: CanvasText;\n --inert-item-border-color: CanvasText;\n --inert-item-background-color: Canvas;\n --inert-label-text-color: CanvasText;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__unclickable {\n --line-color: var(--base-line-color);\n\n --item-text-color: var(--inert-item-text-color);\n --item-border-color: var(--inert-item-border-color);\n --item-background-color: var(--inert-item-background-color);\n --label-text-color: var(--inert-label-text-color);\n }\n\n .stzh-stepper-item__button {\n --line-color: var(--base-line-color);\n\n --item-text-color: var(--base-item-text-color);\n --item-border-color: var(--base-item-border-color);\n --item-background-color: var(--base-item-background-color);\n --label-text-color: var(--base-label-text-color);\n\n // Add specifity with `:is` instead of `:where`\n &:is(:hover, :focus) {\n --item-text-color: var(--hover-item-text-color);\n --item-border-color: var(--hover-item-border-color);\n --item-background-color: var(--hover-item-background-color);\n --label-text-color: var(--hover-label-text-color);\n }\n }\n\n .stzh-stepper-item__label-block {\n color: var(--label-text-color);\n }\n\n .stzh-stepper-item__number-block {\n color: var(--item-text-color);\n border-color: var(--item-border-color);\n background-color: var(--item-background-color);\n\n // Line\n &::before {\n background-color: var(--line-color);\n }\n\n // Background\n &::after {\n background-color: var(--item-background-color);\n }\n }\n }\n\n // Variant: \"first\" or \"last\"\n &.stzh-stepper-item--first,\n &.stzh-stepper-item--last {\n .stzh-stepper-item__number-block {\n &::before {\n display: block;\n }\n }\n }\n\n // Variant: \"first\"\n &.stzh-stepper-item--first {\n position: relative;\n\n .stzh-stepper-item__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n .stzh-stepper-item__number-block::before {\n z-index: 1;\n }\n }\n\n // Variant: \"last\"\n &.stzh-stepper-item--last {\n .stzh-stepper-item__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize 0.5}));\n\n @include mq($from: small) {\n right: calc(\n (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n );\n }\n }\n }\n\n // Variant: \"passed\"\n &.stzh-stepper-item--passed {\n --base-line-color: var(--base-item-background-color);\n\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorSecondary60};\n --base-item-background-color: #{$colorSecondary60};\n --base-label-text-color: #{$colorPrimary};\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-item-background-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorSecondary70};\n --hover-item-background-color: #{$colorSecondary70};\n --hover-label-text-color: #{$colorPrimaryHover};\n\n @media (forced-colors: active) {\n --base-item-text-color: SelectedItemText;\n --base-item-border-color: SelectedItem;\n --base-item-background-color: SelectedItem;\n --base-label-text-color: SelectedItem;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__label-block {\n @include font(\"heavy\");\n }\n }\n\n // Variant: \"passed\" and not \"passed-incomplete\"\n &.stzh-stepper-item--passed:not(.stzh-stepper-item--passed-incomplete) {\n .stzh-stepper-item__number {\n @include visuallyhidden;\n }\n }\n\n // Variant: \"passed-incomplete\"\n &.stzh-stepper-item--passed-incomplete {\n //\n }\n\n // Variant: \"current\"\n &.stzh-stepper-item--current {\n --base-line-color: var(--base-item-background-color);\n\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorPrimary};\n --base-item-background-color: #{$colorPrimary};\n --base-label-text-color: var(--base-item-background-color);\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-item-background-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: #{$colorPrimaryHover};\n --hover-item-background-color: #{$colorPrimaryHover};\n --hover-label-text-color: var(--hover-item-background-color);\n\n @media (forced-colors: active) {\n --base-item-text-color: SelectedItemText;\n --base-item-border-color: SelectedItem;\n --base-item-background-color: SelectedItem;\n --base-label-text-color: SelectedItem;\n\n --hover-item-text-color: HighlightText;\n --hover-item-border-color: Highlight;\n --hover-item-background-color: Highlight;\n --hover-label-text-color: Highlight;\n }\n\n .stzh-stepper-item__label-block {\n @include font(\"heavy\");\n }\n\n .stzh-stepper-item__number-block {\n // Line\n &::before {\n z-index: -1;\n display: block;\n }\n }\n }\n\n /* Disabled /\n &.stzh-stepper-item--is-disabled {\n --base-item-text-color: #{$colorWhite};\n --base-item-border-color: #{$colorGrey60};\n --base-item-background-color: #{$colorGrey60};\n --base-label-text-color: #{$colorGrey80};\n\n --inert-item-text-color: var(--base-item-text-color);\n --inert-item-border-color: var(--base-item-border-color);\n --inert-item-background-color: var(--base-item-background-color);\n --inert-label-text-color: var(--base-label-text-color);\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: var(--base-item-border-color);\n --hover-item-background-color: var(--base-item-background-color);\n --hover-label-text-color: var(--base-label-text-color);\n\n @media (forced-colors: active) {\n --base-item-text-color: GrayText;\n --base-item-border-color: GrayText;\n --base-item-background-color: Canvas;\n --base-label-text-color: GrayText;\n\n --hover-item-text-color: var(--base-item-text-color);\n --hover-item-border-color: var(--base-item-border-color);\n --hover-item-background-color: var(--base-item-background-color);\n --hover-label-text-color: var(--base-label-text-color);\n }\n\n .stzh-stepper-item__button {\n cursor: not-allowed;\n }\n }\n\n // Variant: \"first\" (line-color overwrite)\n &.stzh-stepper-item--first {\n --base-line-color: #{$colorWhite};\n\n @media (forced-colors: active) {\n --base-line-color: Canvas;\n }\n }\n\n // Variant: \"first\" and \"dotted\"\n &.stzh-stepper-item--first.stzh-stepper-item--dotted {\n .stzh-stepper-item__label-block {\n display: none;\n }\n\n // Hide number block behind dotted element\n .stzh-stepper-item__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $stepperItemDottedSize;\n height: $stepperItemDottedSize;\n margin-bottom: 0;\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: $stepperItemDottedSizeSmallUp;\n height: $stepperItemDottedSizeSmallUp;\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 &::after {\n display: none;\n }\n }\n\n .stzh-stepper-item__button {\n padding-left: 0;\n padding-right: 0;\n }\n }\n}\n","import { Component, Host, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhStepperItemClickEvent, StzhStepperItemDottedClickEvent } from \"../../index\";\n\n/\n @slot - Slot for label (or use label prop)\n /\n@Component({\n tag: \"stzh-stepper-item\",\n styleUrl: \"stzh-stepper-item.scss\",\n scoped: true,\n})\nexport class StzhStepperItem {\n /* The label of the item. /\n @Prop({ reflect: true }) label: string;\n\n /* When true, it displays a not-allowed cursor on hover. Use this for steps that are not applicable. /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether it's the first item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) first: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) last: boolean = false;\n\n /* True when the item index is lower than the current index (used internally by stzh-stepper). /\n @Prop({ reflect: true }) passed: boolean = false;\n\n /* For passed items, this prevents displaying a checked icon when true (shows step number instead). /\n @Prop({ reflect: true }) incomplete: boolean = false;\n\n /* Whether it's the last item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) current: boolean = false;\n\n /* Whether it's a hidden item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) hide: boolean = false;\n\n /* Whether it's a dotted item (used internally by stzh-stepper). /\n @Prop({ reflect: true }) dotted: boolean = false;\n\n /* The number of the step (used internally by stzh-stepper). /\n @Prop({ reflect: true }) step: number = 1;\n\n /* Displays a custom icon instead of the step number. /\n @Prop({ reflect: true }) icon: string = \"\";\n\n /* When true, it displays a default cursor on hover and no click event is emitted. /\n @Prop() clickDisabled: boolean = false;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhStepperItemClickEvent>;\n\n /* Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhStepperItemDottedClickEvent>;\n\n @Element() element: HTMLStzhStepperItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-stepper-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-stepper-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-stepper-item\": true,\n \"stzh-stepper-item--first\": this.first,\n \"stzh-stepper-item--last\": this.last,\n \"stzh-stepper-item--current\": this.current,\n \"stzh-stepper-item--hide\": this.hide,\n \"stzh-stepper-item--dotted\": this.dotted,\n \"stzh-stepper-item--has-icon\": !!this.icon,\n \"stzh-stepper-item--is-disabled\": this.disabled,\n \"stzh-stepper-item--passed\": this.passed,\n \"stzh-stepper-item--passed-incomplete\": this.passed && this.incomplete,\n };\n\n const dotted = (\n <span>\n {!this.clickDisabled ? (\n <button class=\"stzh-stepper-item__dotted\" onClick={this.onDottedClick}>\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n ) : (\n <div class=\"stzh-stepper-item__dotted stzh-stepper-item__dotted--disabled\">\n <stzh-icon class=\"stzh-stepper-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </div>\n )}\n </span>\n );\n\n const content = (\n <span>\n <span class=\"stzh-stepper-item__number-block\">\n {this.icon ? (\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n ) : (\n <span>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (\n <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n )}\n </span>\n )}\n </span>\n <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n {this.label ? this.label : <slot></slot>}\n </span>\n </span>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n {this.clickDisabled ? (\n <div class=\"stzh-stepper-item__unclickable\" aria-pressed={this.current ? \"true\" : \"false\"}>\n {content}\n </div>\n ) : (\n <button\n ref={el => (this.button = el as HTMLButtonElement)}\n class=\"stzh-stepper-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-stepper-item__number-block\">\n {this.icon ? (\n <stzh-icon class=\"stzh-stepper-item__user-icon\" name={this.icon}></stzh-icon>\n ) : (\n <Fragment>\n <span class=\"stzh-stepper-item__number\">{this.step}</span>\n {this.passed && !this.incomplete && (\n <stzh-icon class=\"stzh-stepper-item__icon\" name=\"checkmark\"></stzh-icon>\n )}\n </Fragment>\n )}\n </span>\n <span ref={el => (this.text = el as HTMLElement)} class=\"stzh-stepper-item__label-block\">\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n )}\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-CWliRPVy.js → p-Dv3RTDbq.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
 import { w as waitForEvent } from './p--SdF31O7.js';
 import { s as stopAnimations, a as animateTo, b as shimKeyframesAutoValues } from './p-BOO84wnP.js';
 import { h as hasSlot } from './p-DBHUqFOB.js';
-import { d as defineCustomElement$2 } from './p-DEfzwFSm.js';
-import { d as defineCustomElement$1 } from './p-CRo_30JG.js';
+import { d as defineCustomElement$2 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$1 } from './p-mPSUVIkD.js';
 const stzhAccordionItemCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--trigger-color:currentColor;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size);--border-width:0px;--button-border-color:transparent;--button-color:var(--stzh-accordion-button-color, var(--stzh-color-primary70));--button-background-color:var(
     --stzh-accordion-button-background-color,
@@ -278,7 +278,7 @@ const StzhAccordionItem = /*@__PURE__*/ proxyCustomElement(class StzhAccordionIt
             "stzh-accordion-item--is-disabled": this.disabled,
             [`stzh-accordion-item--${this._variant}`]: !!this._variant,
         };
-        return (h(Host, { key: 'fd31568fdda53f20fda0f8d842366f7fb644a5e9', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: '4efef5018853bab3a2001bf02aab143b9ef3bded', class: classes }, h(Heading, { key: 'e0f63a76e3845fdcef402bac5034ec6b88d54ca9', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: 'c44389d6d2f3e57c6d133f8e826be569709f3e3b', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: 'f73b1304c07c260ff0cebb4aa0c56b4dc138198b', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: '75e6022707813eab13a120589c005574bfa20075', class: "stzh-accordion-item__button-text" }, h("span", { key: '8ced8d6042bf0212ad6b4f1d8597b830a5815ea7', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: '148edb081ed5b78e4939a4d115bf1cec6d526ba3', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: 'fb38a6fba1bbf73828d3f3f4826a1bc86679a243', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '79a890c2df7c3b17bd9dab004dd4c02a70403703', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '51dd73e9b89ad5825c2e61fce844811e196a7a38', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'b52d3a3c9926fbcc6cb1ac3e3442b84b3478b6a1', class: "stzh-accordion-item__content-inner" }, h("slot", { key: '6264ca1423c9544a28379113813e799b22b1fec8' }))))));
+        return (h(Host, { key: 'e7aa738315aac6083f5caa937ed7cbadcaf3baf3', tabindex: this.disabled ? null : this.rootTabindex, "is-variant": this._variant }, h("div", { key: '1357ff0ea21633639581511b537300e794871bde', class: classes }, h(Heading, { key: '00b7c4be0bd0575335487fe1d08c22dbb20ae69d', id: `${this.accordionItemId}-header`, class: "stzh-accordion-item__heading", onClick: this.handleHeaderClick }, h("button", { key: '5366b8dc125b5be6da0644be9fab0a6e659f3cb8', ref: el => (this.buttonElement = el), class: "stzh-accordion-item__button", "aria-controls": `${this.accordionItemId}-content`, "aria-expanded": `${this.open ? "true" : "false"}`, disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onButtonKeydown, type: "button", "s-object-id": this.analyticsId || this.heading }, h("span", { key: '912cf2069c4a82836e7f4a3814ac647e9a75fa83', class: "stzh-accordion-item__icon-wrapper", ref: el => (this.iconWrapperElement = el) }, this.icon ? (h("stzh-icon", { class: "stzh-accordion-item__icon", name: this.icon })) : (h("slot", { name: "icon" }))), h("span", { key: '0b4db6c073abcbfb545fd252715fc9451187c7f6', class: "stzh-accordion-item__button-text" }, h("span", { key: '1641e35d7088abaa0698609af3cd73245cd8fff1', class: "stzh-accordion-item__subtitle" }, this.subtitle), h("span", { key: 'aea87324820ec27eee6ea1298ccc6f74ac89fdf6', class: "stzh-accordion-item__heading-text" }, this.heading), h("span", { key: '1568aa30148d74e1095c55dc1e48ac5a36c30e59', class: "stzh-accordion-item__description" }, this.description)), this._variant === "table" ? (h("stzh-icon", { name: "angle-down", class: "stzh-accordion-item__button-icon is-table" })) : (h("span", { class: "stzh-accordion-item__button-icon is-default" })), (this.badge || this.badgeEmpty) && (h("stzh-badge", { key: '0bf5a2b1bbc0c2605b15ea5c4f8ab167fff58c69', class: "stzh-accordion-item__badge", label: this.badge, type: this.badgeType })))), h("div", { key: '8ad56fb98577555482e4cd7cdb1cb8bcdeb1ab14', id: `${this.accordionItemId}-content`, ref: el => (this.bodyElement = el), class: "stzh-accordion-item__content", "aria-labelledby": `${this.accordionItemId}-header`, role: "region", onKeyDown: this.onContentKeydown }, h("div", { key: 'e133e51a0453b678c9e2376caa20e1eb83884f77', class: "stzh-accordion-item__content-inner" }, h("slot", { key: 'f83d265af42c63bbda2c363c85d28f6107852531' }))))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -334,6 +334,6 @@ function defineCustomElement() {
 }
 export { StzhAccordionItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-CWliRPVy.js.map
+//# sourceMappingURL=p-Dv3RTDbq.js.map
-//# sourceMappingURL=p-CWliRPVy.js.map
+//# sourceMappingURL=p-Dv3RTDbq.js.map

package/dist/components/{p-CWliRPVy.js.map → p-Dv3RTDbq.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CWliRPVy.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/*\n @prop --content-background: Content background\n \n @prop --stzh-accordion-content-background: Global: Content background\n * @prop --stzh-accordion-button-color: Global: Button label background\n /\n\n@mixin accordion-item-button--forced-colors-default() {\n --border-width: 2px;\n\n --button-color: ButtonText;\n --button-border-color: ButtonBorder;\n --button-background-color: ButtonFace;\n --button-background-color-is-open: ButtonFace;\n --trigger-color: ButtonText;\n\n --hover-button-color: HighlightText;\n --hover-button-border-color: Highlight;\n --hover-button-background-color: Highlight;\n --hover-button-background-color-is-open: Highlight;\n --hover-trigger-color: HighlightText;\n}\n\n@mixin accordion-item-button--forced-colors-disabled() {\n --border-width: 2px;\n\n --button-color: GrayText;\n --button-border-color: GrayText;\n --button-background-color: transparent;\n --button-background-color-is-open: transparent;\n --trigger-color: GrayText;\n\n --hover-button-color: GrayText;\n --hover-button-border-color: GrayText;\n --hover-button-background-color: transparent;\n --hover-button-background-color-is-open: transparent;\n --hover-trigger-color: GrayText;\n}\n\n:host {\n --trigger-size: 18px;\n --trigger-color: currentColor;\n --content-background: #{$accordionContentBackground};\n --icon-size: #{iconSize()};\n --border-width: 0px;\n --button-border-color: transparent;\n --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n --button-background-color: var(\n --stzh-accordion-button-background-color,\n #{$colorSecondary30}\n );\n --button-background-color-is-open: var(\n --stzh-accordion-button-background-color-is-open,\n #{$colorSecondary30}\n );\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(\n --stzh-accordion-button-hover-background-color,\n #{$colorSecondary40}\n );\n --hover-button-background-color-is-open: var(\n --button-background-color-is-open\n );\n\n --hover-trigger-color: var(--trigger-color);\n\n --transition-duration: 200ms;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @media (forced-colors: active) {\n @include accordion-item-button--forced-colors-default;\n }\n}\n\n/ Table /\n:host(:where([is-variant=\"table\"])) {\n --trigger-size: #{iconSize()};\n\n @media (forced-colors: none) {\n --content-background: #{$colorGrey10};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorBlack};\n\n --hover-button-background-color: #{$colorGrey30};\n }\n}\n\n/ Disabled /\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n @media (forced-colors: none) {\n --button-color: #{$colorGrey80};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorGrey80};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n --hover-trigger-color: var(--trigger-color);\n }\n\n @media (forced-colors: active) {\n @include accordion-item-button--forced-colors-disabled;\n }\n}\n\n.stzh-accordion-item {\n &__heading {\n position: relative;\n margin: 0;\n }\n\n &__button {\n @include fontCurve(\"p1\");\n @include spaceCurve(\"--button-padding-top\", \"regular\");\n @include spaceCurve(\"--button-padding-bottom\", \"regular\");\n font-family: inherit;\n width: 100%;\n padding-top: calc(var(--button-padding-top) - var(--border-width));\n padding-bottom: calc(var(--button-padding-bottom) - var(--border-width));\n appearance: none;\n display: flex;\n align-items: center;\n min-height: 60px;\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border-width: var(--border-width);\n border-color: var(--button-border-color);\n transition-property: background-color;\n transition-duration: var(--transition-duration);\n cursor: pointer;\n\n @media (forced-colors: active) {\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n border-color: var(--hover-button-border-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button {\n @include spaceCurve(\"--button-padding-left\", \"regular\");\n @include spaceCurve(\"--button-padding-right\", \"regular\");\n padding-left: calc(var(--button-padding-left) - var(--border-width));\n padding-right: calc(var(--button-padding-right) - var(--border-width));\n }\n\n &__content-inner {\n @include spaceCurve(\"--content-padding-left\", \"regular\");\n @include spaceCurve(\"--content-padding-right\", \"regular\");\n padding-left: calc(var(--content-padding-left) - var(--border-width));\n padding-right: calc(var(--content-padding-right) - var(--border-width));\n\n @media (forced-colors: active) {\n border: var(--border-width) solid CanvasText;\n border-top: none;\n }\n }\n\n &__button-text {\n flex-grow: 1;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n &__button-icon {\n &.is-default {\n position: relative;\n display: block;\n width: var(--trigger-size);\n height: var(--trigger-size);\n margin-left: space(\"medium\");\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--trigger-size);\n height: 2.5px;\n transition-property: transform, background-color;\n transition-duration: var(--transition-duration);\n transform-origin: top left;\n background-color: var(--trigger-color);\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: var(--transition-duration);\n color: var(--trigger-color);\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n &.is-table {\n color: var(--hover-trigger-color);\n }\n }\n\n &__content {\n overflow: hidden;\n background-color: var(--content-background);\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n &__content-inner {\n @include spaceCurve(\"--content-padding-top\", \"medium\");\n @include spaceCurve(\"--content-padding-bottom\", \"medium\");\n padding-top: calc(var(--content-padding-top) - var(--border-width));\n padding-bottom: calc(var(--content-padding-bottom) - var(--border-width));\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n align-self: flex-start;\n }\n\n &__badge {\n position: absolute;\n right: -5px;\n top: -5px;\n }\n\n &__description {\n @include fontCurve(\"caption\");\n }\n\n &__heading-text,\n &__description,\n &__subtitle {\n display: block;\n }\n\n &__subtitle {\n @include fontCurve(\"p2\");\n }\n\n / Has icon /\n\n &--has-icon &__icon-wrapper {\n margin-right: space(\"xsmall\");\n }\n\n / Title Variant / Subtitle /\n\n &--title &__heading-text,\n &--has-subtitle &__heading-text {\n @include font(\"title\");\n @include fontCurve(\"h3\", \"heading\");\n }\n\n &--title &__subtitle:not(:empty) + &__heading-text,\n &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n @include spaceCurve(\"margin-top\", \"tiny\");\n\n @include mq($from: medium) {\n margin-top: space(\"xsmall\");\n }\n }\n\n / Open /\n\n &--is-open &__button {\n background-color: var(--button-background-color-is-open);\n\n &:hover {\n background-color: var(--hover-button-background-color-is-open);\n }\n }\n\n &--is-open &__button-icon {\n &.is-default {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n transform: rotate(180deg);\n }\n }\n\n / Table Variant /\n\n &--table &__button,\n &--table &__content-inner {\n padding-left: calc(#{space(\"medium\")} - var(--border-width));\n padding-right: calc(#{space(\"medium\")} - var(--border-width));\n }\n\n &__button {\n @include fontSize(\"milli\");\n padding-top: calc(#{space(\"medium\")} - var(--border-width));\n padding-bottom: calc(#{space(\"medium\")} - var(--border-width));\n min-height: 56px;\n }\n\n &--table &__content-inner {\n @include spaceCurve(\"--content-padding-top\", \"tiny\");\n @include spaceCurve(\"--content-padding-bottom\", \"regular\");\n padding-top: calc(var(--content-padding-top) - var(--border-width));\n padding-bottom: calc(var(--content-padding-bottom) - var(--border-width));\n }\n\n &--table &__heading-text {\n @include font(\"heavy\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhAccordionItemBlurEvent,\n StzhAccordionItemClosedEvent,\n StzhAccordionItemCloseEvent,\n StzhAccordionItemFocusEvent,\n StzhAccordionItemOpenedEvent,\n StzhAccordionItemOpenEvent,\n StzhAccordionVariant,\n StzhAccordionVariantChangeEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-accordion-item\",\n styleUrl: \"stzh-accordion-item.scss\",\n shadow: true,\n})\nexport class StzhAccordionItem {\n /* Variant (overwrites variant from accordion parent) /\n @Prop() variant: StzhAccordionVariant;\n\n /* Whether fold is collapsible (overwrites collapsible from accordion parent) /\n @Prop() collapsible: boolean;\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Whether fold disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Subtitle /\n @Prop() subtitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Badge /\n @Prop() badge: string = \"\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\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 `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhAccordionItemElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n if (typeof newValue !== \"undefined\") {\n this._variant = newValue;\n } else if (this.accordion) {\n this._variant = this.accordion.variant;\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n this.bodyElement.style.height = \"auto\";\n this.bodyElement.style.overflow = \"visible\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-accordion-item\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.style.overflow = \"hidden\";\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-accordion-item\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show accordion item content /\n @Method()\n async show() {\n if (this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide accordion item content /\n @Method()\n async hide() {\n if (!this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle accordion item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n @Listen(\"keydown\", { target: \"document\", capture: true })\n handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = true;\n }\n }\n\n @Listen(\"keyup\", { target: \"document\", capture: true })\n handleKeyup(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = false;\n }\n }\n\n @State() rootTabindex: number = 0;\n @State() _variant: StzhAccordionVariant;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n // @ts-ignore\n private buttonElement: HTMLButtonElement;\n private iconWrapperElement: HTMLDivElement;\n private accordionItemId: string;\n private accordion: HTMLStzhAccordionElement;\n // @ts-ignore\n private focusedByInput: boolean = false;\n private shiftPressed: boolean = false;\n\n private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n this.variantWatcher(this.variant);\n };\n\n private handleHeaderClick = () => {\n if (typeof this.collapsible !== \"undefined\") {\n if (this.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n } else if (!this.accordion \|\| this.accordion.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n if (this.shiftPressed) {\n // user presses currently shift\n this.rootTabindex = -1;\n }\n\n this.stzhFocus.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n this.rootTabindex = 0;\n\n this.stzhBlur.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onButtonKeydown = (event: KeyboardEvent) => {\n let action = null;\n\n if (event.key === \"ArrowDown\") {\n action = \"next\";\n } else if (event.key === \"ArrowUp\") {\n action = \"prev\";\n } else if (event.key === \"Home\") {\n action = \"first\";\n } else if (event.key === \"End\") {\n action = \"last\";\n } else if (event.key === \"PageDown\" && event.ctrlKey) {\n action = \"next\";\n } else if (event.key === \"PageUp\" && event.ctrlKey) {\n action = \"prev\";\n }\n\n if (event.key === \"Shift\") {\n this.rootTabindex = -1;\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n private onContentKeydown = (event: KeyboardEvent) => {\n if (!event.ctrlKey) {\n return;\n }\n\n let action = null;\n\n if (event.key === \"PageDown\") {\n action = \"next\";\n } else if (event.key === \"PageUp\") {\n action = \"prev\";\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n componentWillLoad() {\n this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n }\n\n async connectedCallback() {\n this.accordion = this.element.closest(\"stzh-accordion\");\n\n if (this.accordion) {\n this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n\n this.variantWatcher(this.variant);\n }\n\n disconnectedCallback() {\n if (this.accordion) {\n this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.accordion = null;\n }\n }\n\n render() {\n let hasIcon = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n if (this.iconWrapperElement) {\n hasIcon = hasSlot(this.iconWrapperElement, \"icon\") \|\| !!this.icon;\n }\n\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-accordion-item\": true,\n \"stzh-accordion-item--has-icon\": hasIcon,\n \"stzh-accordion-item--has-description\": !!this.description,\n \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n \"stzh-accordion-item--is-open\": this.open,\n \"stzh-accordion-item--is-disabled\": this.disabled,\n [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n <div class={classes}>\n <Heading\n id={`${this.accordionItemId}-header`}\n class=\"stzh-accordion-item__heading\"\n onClick={this.handleHeaderClick}\n >\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-accordion-item__button\"\n aria-controls={`${this.accordionItemId}-content`}\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n disabled={this.disabled}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onButtonKeydown}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span\n class=\"stzh-accordion-item__icon-wrapper\"\n ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n >\n {this.icon ? (\n <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n ) : (\n <slot name=\"icon\"></slot>\n )}\n </span>\n <span class=\"stzh-accordion-item__button-text\">\n <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n <span class=\"stzh-accordion-item__description\">{this.description}</span>\n </span>\n {this._variant === \"table\" ? (\n <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n ) : (\n <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n )}\n\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </button>\n </Heading>\n <div\n id={`${this.accordionItemId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-accordion-item__content\"\n aria-labelledby={`${this.accordionItemId}-header`}\n role=\"region\"\n onKeyDown={this.onContentKeydown}\n >\n <div class=\"stzh-accordion-item__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-Dv3RTDbq.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+4gBAA+4gB,CAAC;;ACOh5gB,MAAM,cAAc,GAAG;AACrB,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C;AAED,MAAM,cAAc,GAAG;AACrB,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE;CAC7C;AAED,IAAI,oBAAoB,GAAG,CAAC;MAWf,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;;;;;;AAa0C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGpC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAG1C,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGpB,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;;AAGrB,QAAA,IAAW,CAAA,WAAA,GAAW,EAAE;;AAGxB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGD,QAAA,IAAU,CAAA,UAAA,GAAY,KAAK;;AAG3B,QAAA,IAAS,CAAA,SAAA,GAAkB,SAAS;;AAGpC,QAAA,IAAY,CAAA,YAAA,GAA0B,GAAG;AAqJzD,QAAA,IAAY,CAAA,YAAA,GAAW,CAAC;AAGzB,QAAA,IAAe,CAAA,eAAA,GAAY,KAAK;;AAQhC,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;AAC/B,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;AAE7B,QAAA,IAAA,CAAA,mBAAmB,GAAG,CAAC,MAAoD,KAAI;AACrF,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;AACnC,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,MAAK;AAC/B,YAAA,IAAI,OAAO,IAAI,CAAC,WAAW,KAAK,WAAW,EAAE;AAC3C,gBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;oBACpB,IAAI,CAAC,MAAM,EAAE;;AACR,qBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACrB,IAAI,CAAC,IAAI,EAAE;;;iBAER,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;gBACxD,IAAI,CAAC,MAAM,EAAE;;AACR,iBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACrB,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,KAAiB,KAAI;AACtC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;AAE1B,YAAA,IAAI,IAAI,CAAC,YAAY,EAAE;;AAErB,gBAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;AAGxB,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,SAAS,EAAE,qBAAqB;AAChC,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,MAAM,GAAG,CAAC,KAAiB,KAAI;AACrC,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC;AAErB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,gBAAA,SAAS,EAAE,qBAAqB;AAChC,gBAAA,aAAa,EAAE,KAAK;AACrB,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;YACjD,IAAI,MAAM,GAAG,IAAI;AAEjB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBAC7B,MAAM,GAAG,MAAM;;AACV,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;gBAClC,MAAM,GAAG,MAAM;;AACV,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;gBAC/B,MAAM,GAAG,OAAO;;AACX,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;gBAC9B,MAAM,GAAG,MAAM;;iBACV,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,EAAE;gBACpD,MAAM,GAAG,MAAM;;iBACV,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,EAAE;gBAClD,MAAM,GAAG,MAAM;;AAGjB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,gBAAA,IAAI,CAAC,YAAY,GAAG,EAAE;;YAGxB,IAAI,MAAM,EAAE;gBACV,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;;AAErD,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAoB,KAAI;AAClD,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE;gBAClB;;YAGF,IAAI,MAAM,GAAG,IAAI;AAEjB,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,EAAE;gBAC5B,MAAM,GAAG,MAAM;;AACV,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACjC,MAAM,GAAG,MAAM;;YAGjB,IAAI,MAAM,EAAE;gBACV,KAAK,CAAC,cAAc,EAAE;gBACtB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;;AAErD,SAAC;AA4GF;AA5UC,IAAA,cAAc,CAAC,QAA8B,EAAA;AAC3C,QAAA,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE;AACnC,YAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;AACnB,aAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO;;;IAK1C,MAAM,WAAW,CAAC,QAAiB,EAAA;AACjC,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;;QAGF,IAAI,QAAQ,EAAE;AACZ,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,oBAAA,SAAS,EAAE,qBAAqB;AACjC,iBAAA,CAAC;;AAGJ,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;AACtC,YAAA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,KAAK;YAE/B,MAAM,SAAS,CACb,IAAI,CAAC,WAAW,EAChB,uBAAuB,CAAC,cAAc,CAAC,SAAS,EAAE;AAChD,gBAAA,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY;AACtC,aAAA,CAAC,EACF,cAAc,CAAC,OAAO,CACvB;YAED,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;YACtC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS;AAE3C,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,oBAAA,SAAS,EAAE,qBAAqB;AACjC,iBAAA,CAAC;;;aAEC;AACL,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,oBAAA,SAAS,EAAE,qBAAqB;AACjC,iBAAA,CAAC;;AAGJ,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC;YACtC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ;YAE1C,MAAM,SAAS,CACb,IAAI,CAAC,WAAW,EAChB,uBAAuB,CAAC,cAAc,CAAC,SAAS,EAAE;AAChD,gBAAA,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,YAAY;AACtC,aAAA,CAAC,EACF,cAAc,CAAC,OAAO,CACvB;AAED,YAAA,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI;YAC9B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,KAAK;AAErC,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACxB,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,oBAAA,SAAS,EAAE,qBAAqB;AACjC,iBAAA,CAAC;;;AAIN,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;;AAK9B,IAAA,MAAM,IAAI,GAAA;QACR,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC9B;;AAGF,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;QAChB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;;;AAKjD,IAAA,MAAM,IAAI,GAAA;QACR,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/B;;AAGF,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;AAC3B,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;QACjB,OAAO,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;;;AAKjD,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE;;aACnB;AACL,YAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE;;;AAW5B,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;;AAK5B,IAAA,WAAW,CAAC,KAAoB,EAAA;AAC9B,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,YAAY,GAAG,KAAK;;;IAyG7B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,uBAAuB,oBAAoB,EAAE,EAAE;;IAGxE,gBAAgB,GAAA;QACd,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI;AACpC,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,KAAK;AAC1D,QAAA,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,QAAQ;;AAGpE,IAAA,MAAM,iBAAiB,GAAA;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC;AAEvD,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,CAAC;;AAGhF,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGnC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,IAAI,CAAC,SAAS,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,CAAC;AACjF,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;;IAIzB,MAAM,GAAA;AACJ,QAAA,IAAI,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;AAC1D,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;AAC3B,YAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;;AAGnE,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,YAAY,EAAE;AACvC,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,+BAA+B,EAAE,OAAO;AACxC,YAAA,sCAAsC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW;AAC1D,YAAA,mCAAmC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YACpD,8BAA8B,EAAE,IAAI,CAAC,IAAI;YACzC,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,CAAC,CAAA,qBAAA,EAAwB,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ;SAC3D;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,YAAY,EAAA,YAAA,EAAc,IAAI,CAAC,QAAQ,EAAA,EACjF,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAA,CAAC,OAAO,EACN,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,CAAG,EAAA,IAAI,CAAC,eAAe,CAAS,OAAA,CAAA,EACpC,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE/B,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EACzD,KAAK,EAAC,6BAA6B,EACpB,eAAA,EAAA,CAAG,EAAA,IAAI,CAAC,eAAe,CAAU,QAAA,CAAA,mBACjC,CAAG,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO,CAAE,CAAA,EAChD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,eAAe,EAC/B,IAAI,EAAC,QAAQ,EAAA,aAAA,EACA,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,EAAA,EAE7C,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mCAAmC,EACzC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,EAE1D,EAAA,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,WAAA,EAAA,EAAW,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAc,KAE1E,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,MAAM,EAAQ,CAAA,CAC1B,CACI,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,+BAA+B,IAAE,IAAI,CAAC,QAAQ,CAAQ,EAClE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,mCAAmC,IAAE,IAAI,CAAC,OAAO,CAAQ,EACrE,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAAE,IAAI,CAAC,WAAW,CAAQ,CACnE,EACN,IAAI,CAAC,QAAQ,KAAK,OAAO,IACxB,CAAA,CAAA,WAAA,EAAA,EAAW,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,2CAA2C,EAAA,CAAa,KAE3F,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,6CAA6C,EAAA,CAAQ,CAClE,EAEA,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAC7B,CAAY,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,EAAe,CAAA,CACtG,CACM,CACD,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,CAAG,EAAA,IAAI,CAAC,eAAe,CAAU,QAAA,CAAA,EACrC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EACpD,KAAK,EAAC,8BAA8B,qBACnB,CAAA,EAAG,IAAI,CAAC,eAAe,CAAS,OAAA,CAAA,EACjD,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAA,EAEhC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oCAAoC,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx"],"sourcesContent":["/*\n @prop --content-background: Content background\n \n @prop --stzh-accordion-content-background: Global: Content background\n * @prop --stzh-accordion-button-color: Global: Button label background\n /\n\n@mixin accordion-item-button--forced-colors-default() {\n --border-width: 2px;\n\n --button-color: ButtonText;\n --button-border-color: ButtonBorder;\n --button-background-color: ButtonFace;\n --button-background-color-is-open: ButtonFace;\n --trigger-color: ButtonText;\n\n --hover-button-color: HighlightText;\n --hover-button-border-color: Highlight;\n --hover-button-background-color: Highlight;\n --hover-button-background-color-is-open: Highlight;\n --hover-trigger-color: HighlightText;\n}\n\n@mixin accordion-item-button--forced-colors-disabled() {\n --border-width: 2px;\n\n --button-color: GrayText;\n --button-border-color: GrayText;\n --button-background-color: transparent;\n --button-background-color-is-open: transparent;\n --trigger-color: GrayText;\n\n --hover-button-color: GrayText;\n --hover-button-border-color: GrayText;\n --hover-button-background-color: transparent;\n --hover-button-background-color-is-open: transparent;\n --hover-trigger-color: GrayText;\n}\n\n:host {\n --trigger-size: 18px;\n --trigger-color: currentColor;\n --content-background: #{$accordionContentBackground};\n --icon-size: #{iconSize()};\n --border-width: 0px;\n --button-border-color: transparent;\n --button-color: var(--stzh-accordion-button-color, #{$colorPrimary70});\n --button-background-color: var(\n --stzh-accordion-button-background-color,\n #{$colorSecondary30}\n );\n --button-background-color-is-open: var(\n --stzh-accordion-button-background-color-is-open,\n #{$colorSecondary30}\n );\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(\n --stzh-accordion-button-hover-background-color,\n #{$colorSecondary40}\n );\n --hover-button-background-color-is-open: var(\n --button-background-color-is-open\n );\n\n --hover-trigger-color: var(--trigger-color);\n\n --transition-duration: 200ms;\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n @media (forced-colors: active) {\n @include accordion-item-button--forced-colors-default;\n }\n}\n\n/ Table /\n:host(:where([is-variant=\"table\"])) {\n --trigger-size: #{iconSize()};\n\n @media (forced-colors: none) {\n --content-background: #{$colorGrey10};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorBlack};\n\n --hover-button-background-color: #{$colorGrey30};\n }\n}\n\n/ Disabled /\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n @media (forced-colors: none) {\n --button-color: #{$colorGrey80};\n --button-background-color: #{$colorGrey20};\n --trigger-color: #{$colorGrey80};\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n --hover-trigger-color: var(--trigger-color);\n }\n\n @media (forced-colors: active) {\n @include accordion-item-button--forced-colors-disabled;\n }\n}\n\n.stzh-accordion-item {\n &__heading {\n position: relative;\n margin: 0;\n }\n\n &__button {\n @include fontCurve(\"p1\");\n @include spaceCurve(\"--button-padding-top\", \"regular\");\n @include spaceCurve(\"--button-padding-bottom\", \"regular\");\n font-family: inherit;\n width: 100%;\n padding-top: calc(var(--button-padding-top) - var(--border-width));\n padding-bottom: calc(var(--button-padding-bottom) - var(--border-width));\n appearance: none;\n display: flex;\n align-items: center;\n min-height: 60px;\n color: var(--button-color);\n background-color: var(--button-background-color);\n text-align: left;\n border-width: var(--border-width);\n border-color: var(--button-border-color);\n transition-property: background-color;\n transition-duration: var(--transition-duration);\n cursor: pointer;\n\n @media (forced-colors: active) {\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n &:hover {\n color: var(--hover-button-color);\n border-color: var(--hover-button-border-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__button {\n @include spaceCurve(\"--button-padding-left\", \"regular\");\n @include spaceCurve(\"--button-padding-right\", \"regular\");\n padding-left: calc(var(--button-padding-left) - var(--border-width));\n padding-right: calc(var(--button-padding-right) - var(--border-width));\n }\n\n &__content-inner {\n @include spaceCurve(\"--content-padding-left\", \"regular\");\n @include spaceCurve(\"--content-padding-right\", \"regular\");\n padding-left: calc(var(--content-padding-left) - var(--border-width));\n padding-right: calc(var(--content-padding-right) - var(--border-width));\n\n @media (forced-colors: active) {\n border: var(--border-width) solid CanvasText;\n border-top: none;\n }\n }\n\n &__button-text {\n flex-grow: 1;\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n }\n }\n\n &__button-icon {\n &.is-default {\n position: relative;\n display: block;\n width: var(--trigger-size);\n height: var(--trigger-size);\n margin-left: space(\"medium\");\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: \"\";\n display: block;\n width: var(--trigger-size);\n height: 2.5px;\n transition-property: transform, background-color;\n transition-duration: var(--transition-duration);\n transform-origin: top left;\n background-color: var(--trigger-color);\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n --size: var(--trigger-size);\n\n transition-property: transform, color;\n transition-duration: var(--transition-duration);\n color: var(--trigger-color);\n\n @media (forced-colors: active) {\n forced-color-adjust: preserve-parent-color;\n transition: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n }\n\n &__button:hover &__button-icon {\n &.is-default {\n &::before,\n &::after {\n background-color: var(--hover-trigger-color);\n }\n }\n\n &.is-table {\n color: var(--hover-trigger-color);\n }\n }\n\n &__content {\n overflow: hidden;\n background-color: var(--content-background);\n\n @media print {\n height: auto !important;\n overflow: visible !important;\n display: block !important;\n }\n }\n\n &__content-inner {\n @include spaceCurve(\"--content-padding-top\", \"medium\");\n @include spaceCurve(\"--content-padding-bottom\", \"medium\");\n padding-top: calc(var(--content-padding-top) - var(--border-width));\n padding-bottom: calc(var(--content-padding-bottom) - var(--border-width));\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n align-self: flex-start;\n }\n\n &__badge {\n position: absolute;\n right: -5px;\n top: -5px;\n }\n\n &__description {\n @include fontCurve(\"caption\");\n }\n\n &__heading-text,\n &__description,\n &__subtitle {\n display: block;\n }\n\n &__subtitle {\n @include fontCurve(\"p2\");\n }\n\n / Has icon /\n\n &--has-icon &__icon-wrapper {\n margin-right: space(\"xsmall\");\n }\n\n / Title Variant / Subtitle /\n\n &--title &__heading-text,\n &--has-subtitle &__heading-text {\n @include font(\"title\");\n @include fontCurve(\"h3\", \"heading\");\n }\n\n &--title &__subtitle:not(:empty) + &__heading-text,\n &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n @include spaceCurve(\"margin-top\", \"tiny\");\n\n @include mq($from: medium) {\n margin-top: space(\"xsmall\");\n }\n }\n\n / Open /\n\n &--is-open &__button {\n background-color: var(--button-background-color-is-open);\n\n &:hover {\n background-color: var(--hover-button-background-color-is-open);\n }\n }\n\n &--is-open &__button-icon {\n &.is-default {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n &.is-table {\n transform: rotate(180deg);\n }\n }\n\n / Table Variant /\n\n &--table &__button,\n &--table &__content-inner {\n padding-left: calc(#{space(\"medium\")} - var(--border-width));\n padding-right: calc(#{space(\"medium\")} - var(--border-width));\n }\n\n &__button {\n @include fontSize(\"milli\");\n padding-top: calc(#{space(\"medium\")} - var(--border-width));\n padding-bottom: calc(#{space(\"medium\")} - var(--border-width));\n min-height: 56px;\n }\n\n &--table &__content-inner {\n @include spaceCurve(\"--content-padding-top\", \"tiny\");\n @include spaceCurve(\"--content-padding-bottom\", \"regular\");\n padding-top: calc(var(--content-padding-top) - var(--border-width));\n padding-bottom: calc(var(--content-padding-bottom) - var(--border-width));\n }\n\n &--table &__heading-text {\n @include font(\"heavy\");\n }\n\n / Disabled /\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n StzhAccordionItemBlurEvent,\n StzhAccordionItemClosedEvent,\n StzhAccordionItemCloseEvent,\n StzhAccordionItemFocusEvent,\n StzhAccordionItemOpenedEvent,\n StzhAccordionItemOpenEvent,\n StzhAccordionVariant,\n StzhAccordionVariantChangeEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { animateTo, shimKeyframesAutoValues, stopAnimations } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n keyframes: [\n { height: \"0\", opacity: \"0\" },\n { height: \"auto\", opacity: \"1\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nconst ANIMATION_HIDE = {\n keyframes: [\n { height: \"auto\", opacity: \"1\" },\n { height: \"0\", opacity: \"0\" },\n ],\n options: { duration: 300, easing: \"linear\" },\n};\n\nlet accordionItemCounter = 0;\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-accordion-item\",\n styleUrl: \"stzh-accordion-item.scss\",\n shadow: true,\n})\nexport class StzhAccordionItem {\n /* Variant (overwrites variant from accordion parent) /\n @Prop() variant: StzhAccordionVariant;\n\n /* Whether fold is collapsible (overwrites collapsible from accordion parent) /\n @Prop() collapsible: boolean;\n\n /* Whether fold is open /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Whether fold disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Heading title /\n @Prop() heading: string = \"\";\n\n /* Subtitle /\n @Prop() subtitle: string = \"\";\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Badge /\n @Prop() badge: string = \"\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Heading level, for accessibility, no visual impact /\n @Prop({ reflect: true }) headingLevel: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"3\";\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 `heading` prop.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhAccordionItemElement;\n\n /* Open event /\n @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n /* Opened event (after animation) /\n @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n /* Close event /\n @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n /* Closed event (after animation) /\n @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n @Watch(\"variant\")\n variantWatcher(newValue: StzhAccordionVariant) {\n if (typeof newValue !== \"undefined\") {\n this._variant = newValue;\n } else if (this.accordion) {\n this._variant = this.accordion.variant;\n }\n }\n\n @Watch(\"open\")\n async openWatcher(newValue: boolean) {\n if (!this.bodyElement) {\n return;\n }\n\n if (newValue) {\n if (this.toggledByMethod) {\n this.stzhOpen.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.hidden = false;\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_SHOW.options,\n );\n\n this.bodyElement.style.height = \"auto\";\n this.bodyElement.style.overflow = \"visible\";\n\n if (this.toggledByMethod) {\n this.stzhOpened.emit({\n component: \"stzh-accordion-item\",\n });\n }\n } else {\n if (this.toggledByMethod) {\n this.stzhClose.emit({\n component: \"stzh-accordion-item\",\n });\n }\n\n await stopAnimations(this.bodyElement);\n this.bodyElement.style.overflow = \"hidden\";\n\n await animateTo(\n this.bodyElement,\n shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n height: this.bodyElement.scrollHeight,\n }),\n ANIMATION_HIDE.options,\n );\n\n this.bodyElement.hidden = true;\n this.bodyElement.style.height = \"0px\";\n\n if (this.toggledByMethod) {\n this.stzhClosed.emit({\n component: \"stzh-accordion-item\",\n });\n }\n }\n\n this.toggledByMethod = false;\n }\n\n /* Show accordion item content /\n @Method()\n async show() {\n if (this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = true;\n return waitForEvent(this.element, \"stzhOpened\");\n }\n\n /* Hide accordion item content /\n @Method()\n async hide() {\n if (!this.open \|\| this.disabled) {\n return;\n }\n\n this.toggledByMethod = true;\n this.open = false;\n return waitForEvent(this.element, \"stzhClosed\");\n }\n\n /* Toggle accordion item content /\n @Method()\n async toggle() {\n if (this.open) {\n return await this.hide();\n } else {\n return await this.show();\n }\n }\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n @Listen(\"keydown\", { target: \"document\", capture: true })\n handleKeydown(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = true;\n }\n }\n\n @Listen(\"keyup\", { target: \"document\", capture: true })\n handleKeyup(event: KeyboardEvent) {\n if (event.key === \"Shift\") {\n this.shiftPressed = false;\n }\n }\n\n @State() rootTabindex: number = 0;\n @State() _variant: StzhAccordionVariant;\n\n private toggledByMethod: boolean = false;\n private bodyElement: HTMLDivElement;\n // @ts-ignore\n private buttonElement: HTMLButtonElement;\n private iconWrapperElement: HTMLDivElement;\n private accordionItemId: string;\n private accordion: HTMLStzhAccordionElement;\n // @ts-ignore\n private focusedByInput: boolean = false;\n private shiftPressed: boolean = false;\n\n private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n this.variantWatcher(this.variant);\n };\n\n private handleHeaderClick = () => {\n if (typeof this.collapsible !== \"undefined\") {\n if (this.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n } else if (!this.accordion \|\| this.accordion.collapsible) {\n this.toggle();\n } else if (!this.open) {\n this.show();\n }\n };\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n if (this.shiftPressed) {\n // user presses currently shift\n this.rootTabindex = -1;\n }\n\n this.stzhFocus.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onBlur = (event: FocusEvent) => {\n this.rootTabindex = 0;\n\n this.stzhBlur.emit({\n component: \"stzh-accordion-item\",\n originalEvent: event,\n });\n };\n\n private onButtonKeydown = (event: KeyboardEvent) => {\n let action = null;\n\n if (event.key === \"ArrowDown\") {\n action = \"next\";\n } else if (event.key === \"ArrowUp\") {\n action = \"prev\";\n } else if (event.key === \"Home\") {\n action = \"first\";\n } else if (event.key === \"End\") {\n action = \"last\";\n } else if (event.key === \"PageDown\" && event.ctrlKey) {\n action = \"next\";\n } else if (event.key === \"PageUp\" && event.ctrlKey) {\n action = \"prev\";\n }\n\n if (event.key === \"Shift\") {\n this.rootTabindex = -1;\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n private onContentKeydown = (event: KeyboardEvent) => {\n if (!event.ctrlKey) {\n return;\n }\n\n let action = null;\n\n if (event.key === \"PageDown\") {\n action = \"next\";\n } else if (event.key === \"PageUp\") {\n action = \"prev\";\n }\n\n if (action) {\n event.preventDefault();\n this.accordion.setItemFocus(this.element, action);\n }\n };\n\n componentWillLoad() {\n this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n }\n\n componentDidLoad() {\n this.bodyElement.hidden = !this.open;\n this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n }\n\n async connectedCallback() {\n this.accordion = this.element.closest(\"stzh-accordion\");\n\n if (this.accordion) {\n this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n }\n\n this.variantWatcher(this.variant);\n }\n\n disconnectedCallback() {\n if (this.accordion) {\n this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n this.accordion = null;\n }\n }\n\n render() {\n let hasIcon = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n if (this.iconWrapperElement) {\n hasIcon = hasSlot(this.iconWrapperElement, \"icon\") \|\| !!this.icon;\n }\n\n const Heading = `h${this.headingLevel}`;\n const classes = {\n \"stzh-accordion-item\": true,\n \"stzh-accordion-item--has-icon\": hasIcon,\n \"stzh-accordion-item--has-description\": !!this.description,\n \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n \"stzh-accordion-item--is-open\": this.open,\n \"stzh-accordion-item--is-disabled\": this.disabled,\n [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : this.rootTabindex} is-variant={this._variant}>\n <div class={classes}>\n <Heading\n id={`${this.accordionItemId}-header`}\n class=\"stzh-accordion-item__heading\"\n onClick={this.handleHeaderClick}\n >\n <button\n ref={el => (this.buttonElement = el as HTMLButtonElement)}\n class=\"stzh-accordion-item__button\"\n aria-controls={`${this.accordionItemId}-content`}\n aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n disabled={this.disabled}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onKeyDown={this.onButtonKeydown}\n type=\"button\"\n s-object-id={this.analyticsId \|\| this.heading}\n >\n <span\n class=\"stzh-accordion-item__icon-wrapper\"\n ref={el => (this.iconWrapperElement = el as HTMLDivElement)}\n >\n {this.icon ? (\n <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n ) : (\n <slot name=\"icon\"></slot>\n )}\n </span>\n <span class=\"stzh-accordion-item__button-text\">\n <span class=\"stzh-accordion-item__subtitle\">{this.subtitle}</span>\n <span class=\"stzh-accordion-item__heading-text\">{this.heading}</span>\n <span class=\"stzh-accordion-item__description\">{this.description}</span>\n </span>\n {this._variant === \"table\" ? (\n <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n ) : (\n <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n )}\n\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge class=\"stzh-accordion-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n )}\n </button>\n </Heading>\n <div\n id={`${this.accordionItemId}-content`}\n ref={el => (this.bodyElement = el as HTMLDivElement)}\n class=\"stzh-accordion-item__content\"\n aria-labelledby={`${this.accordionItemId}-header`}\n role=\"region\"\n onKeyDown={this.onContentKeydown}\n >\n <div class=\"stzh-accordion-item__content-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-BiFb4c_S.js → p-DvCfh0K2.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-BBg6OWDc.js';
-import { d as defineCustomElement$3 } from './p-DEfzwFSm.js';
-import { d as defineCustomElement$2 } from './p-CRo_30JG.js';
-import { d as defineCustomElement$1 } from './p-DrLVNdlm.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-DqjRJcEM.js';
+import { d as defineCustomElement$3 } from './p-Dn7rMHvA.js';
+import { d as defineCustomElement$2 } from './p-mPSUVIkD.js';
+import { d as defineCustomElement$1 } from './p-CxqE2nhG.js';
 const stzhClampCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-clamp{}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{--current-lines:var(--lines, 0);--trigger-color:var(--stzh-clamp-trigger-color, var(--stzh-link-color));--trigger-color-hover:var(
     --stzh-clamp-trigger-color-hover,
@@ -116,13 +116,13 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends H {
             "stzh-clamp": true,
             "stzh-clamp--is-not-expanded": !this.expanded,
         };
-        return (h(Host, { key: 'ff524cf09a159f9823a87901b572d177595721cc', style: {
+        return (h(Host, { key: 'c1d5b2ffa921e988354b1dda17f382f1b7173d31', style: {
                 "--lines": this.lines ? this.lines.toString() : null,
                 "--lines-small": this.linesSmall ? this.linesSmall.toString() : null,
                 "--lines-medium": this.linesMedium ? this.linesMedium.toString() : null,
                 "--lines-large": this.linesLarge ? this.linesLarge.toString() : null,
                 "--lines-ultra": this.linesUltra ? this.linesUltra.toString() : null,
-            } }, h("div", { key: '173f33b6b07ffa548f52d711743b2e1aae013463', class: classes }, h("div", { key: '3814afd9fa8b81d222c0badce723d1b975c93269', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: '0558cbf0c4c2d089e80651f6152eee2c03871e04' })), h("div", { key: 'd6906dc98f1c0d9e9ec767f23cfc379b0832baf7', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'fa7b9a5ba7e11f162c9c03a1e15fa84a4ea2625f', class: "stzh-clamp__trigger", size: this.expandLinkSize, a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
+            } }, h("div", { key: '26d6637235068d98826d5da90433533643e8c180', class: classes }, h("div", { key: '90a53859aca1137e4dc627ce136fbf1079f55aae', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: 'ad2fee651769a66e5a169e9ef07635f370a60513' })), h("div", { key: '23434246a47527ab57adc83ba6cc63c27c64ced1', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'd49f2b4e5e2eb1152747de6a4af530c292a57730', class: "stzh-clamp__trigger", size: this.expandLinkSize, a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
     }
     get element() { return this; }
     static get style() { return stzhClampCss(); }
@@ -169,6 +169,6 @@ function defineCustomElement() {
 }
 export { StzhClamp as S, defineCustomElement as d };
-//# sourceMappingURL=p-BiFb4c_S.js.map
+//# sourceMappingURL=p-DvCfh0K2.js.map
-//# sourceMappingURL=p-BiFb4c_S.js.map
+//# sourceMappingURL=p-DvCfh0K2.js.map

package/dist/components/{p-BiFb4c_S.js.map → p-DvCfh0K2.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-BiFb4c_S.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/*\n @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n /\n\nstzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n --trigger-color: var(--stzh-clamp-trigger-color, #{$linkColor});\n --trigger-color-hover: var(\n --stzh-clamp-trigger-color-hover,\n #{$linkHoverColor}\n );\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n );\n }\n\n @include mq($from: ultra) {\n --current-lines: var(\n --lines-ultra,\n var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n )\n );\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n --stzh-link-color: var(--trigger-color);\n --stzh-link-hover-color: var(--trigger-color-hover);\n\n @include mq($from: medium) {\n margin-top: space(\"xxsmall\");\n }\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent, StzhLinkSize } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n @slot - Slot for clamp text\n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether expand link is shown /\n @Prop() showExpandLink: boolean = false;\n\n /* Expand link Size variant /\n @Prop({ reflect: true }) expandLinkSize: StzhLinkSize = \"default\";\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped,\n });\n }\n };\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n };\n\n private handleMutaton = () => {\n this.update();\n };\n\n private handleExpandClick = async () => {\n this.expanded = !this.expanded;\n await this.waitForNextRender();\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded,\n });\n };\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded,\n };\n\n return (\n <Host\n style={{\n \"--lines\": this.lines ? this.lines.toString() : null,\n \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n <slot></slot>\n </div>\n\n <div\n ref={el => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone rs_skip\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped && (\n <stzh-link\n class=\"stzh-clamp__trigger\"\n size={this.expandLinkSize}\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-DvCfh0K2.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,i4BAAi4B,CAAC;;MCCr3B,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AAJtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AASU,QAAA,IAAK,CAAA,KAAA,GAAW,CAAC;;AAEjB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAW,CAAA,WAAA,GAAW,CAAC;;AAEvB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAEtB,QAAA,IAAU,CAAA,UAAA,GAAW,CAAC;;AAGtB,QAAA,IAAc,CAAA,cAAA,GAAY,KAAK;;AAGd,QAAA,IAAc,CAAA,cAAA,GAAiB,SAAS;;AAGzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAwBxD,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B;;AAGF,YAAA,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO;AAClC,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY;AAEtF,YAAA,IAAI,aAAa,KAAK,IAAI,CAAC,OAAO,EAAE;AAClC,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,oBAAA,SAAS,EAAE,YAAY;oBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,iBAAA,CAAC;;AAEN,SAAC;AAEO,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;AAC1B,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,gBAAA,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC;;YAGlD,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,aAAa,CAAC;AACjE,SAAC;AAEO,QAAA,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,IAAI,CAAC,MAAM,EAAE;AACf,SAAC;AAEO,QAAA,IAAiB,CAAA,iBAAA,GAAG,YAAW;AACrC,YAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;AAC9B,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,aAAA,CAAC;AACJ,SAAC;AAqFF;AAtIC,IAAA,MAAM,MAAM,GAAA;QACV,IAAI,CAAC,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS;QAC5D,IAAI,CAAC,aAAa,EAAE;;IAiDd,iBAAiB,GAAA;AACvB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;;AAGtE,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC;;;IAIlG,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC;QAChE,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;AAC9C,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;IAGJ,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE;;QAG7B,IAAI,CAAC,MAAM,EAAE;;IAGf,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC;QAC3D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;;IAG3C,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;AAGlC,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE;;;IAItC,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,YAAY,EAAE,IAAI;AAClB,YAAA,6BAA6B,EAAE,CAAC,IAAI,CAAC,QAAQ;SAC9C;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpD,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,gBAAgB,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,GAAG,IAAI;AACvE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACpE,gBAAA,eAAe,EAAE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,IAAI;AACrE,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAoB,CAAC,EAAE,KAAK,EAAC,kBAAkB,EAAA,EACjF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAoB,CAAC,EACzD,KAAK,EAAC,mCAAmC,EAAA,aAAA,EAC7B,MAAM,EACb,CAAA,EAEN,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,OAAO,KAClC,CAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,YAAY,EAAC,IAAI,EACL,aAAA,EAAA,MAAM,EAClB,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE9B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAC/D,CACb,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/*\n @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n /\n\nstzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n --trigger-color: var(--stzh-clamp-trigger-color, #{$linkColor});\n --trigger-color-hover: var(\n --stzh-clamp-trigger-color-hover,\n #{$linkHoverColor}\n );\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n );\n }\n\n @include mq($from: ultra) {\n --current-lines: var(\n --lines-ultra,\n var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n )\n );\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n --stzh-link-color: var(--trigger-color);\n --stzh-link-hover-color: var(--trigger-color-hover);\n\n @include mq($from: medium) {\n margin-top: space(\"xxsmall\");\n }\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent, StzhLinkSize } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n @slot - Slot for clamp text\n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether expand link is shown /\n @Prop() showExpandLink: boolean = false;\n\n /* Expand link Size variant /\n @Prop({ reflect: true }) expandLinkSize: StzhLinkSize = \"default\";\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped,\n });\n }\n };\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n };\n\n private handleMutaton = () => {\n this.update();\n };\n\n private handleExpandClick = async () => {\n this.expanded = !this.expanded;\n await this.waitForNextRender();\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded,\n });\n };\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded,\n };\n\n return (\n <Host\n style={{\n \"--lines\": this.lines ? this.lines.toString() : null,\n \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n <slot></slot>\n </div>\n\n <div\n ref={el => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone rs_skip\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped && (\n <stzh-link\n class=\"stzh-clamp__trigger\"\n size={this.expandLinkSize}\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}