@oiz/stzh-components 4.10.0-beta1 → 4.10.0-beta2

package/dist/components/{p-DLFjdAqn.js → p-DXFYCyWz.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-VlIs_0mL.js';
-import { d as defineCustomElement$1 } from './p-DriV35S7.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { d as defineCustomElement$1 } from './p-mWRI28It.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__button.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__button.sc-stzh-stepper-item{cursor:pointer}.stzh-stepper-item__unclickable.sc-stzh-stepper-item{cursor:default;pointer-events:none}.stzh-stepper-item__unclickable.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-grey20);color:var(--stzh-color-primary70);border:0.0625rem solid var(--stzh-color-grey20)}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-primary70);border-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight;border-color:Highlight}}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary40)}.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:Highlight}}.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__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__number-block.sc-stzh-stepper-item{position:relative;display:inline-flex;justify-content:center;align-items:center;width:2.1875rem;height:2.1875rem;background-color:var(--stzh-color-secondary20);border:0.0625rem solid var(--stzh-color-secondary20);text-align:center;box-sizing:border-box;color:var(--stzh-color-primary70);transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-stepper-item__number-block.sc-stzh-stepper-item{width:2.625rem;height:2.625rem;margin-bottom:var(--stzh-space-large)}}.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;background-color:var(--stzh-base-border-color);z-index:-2;overflow:hidden}@media screen and (min-width: 600px){.stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:1.25rem;right:2.5625rem}}.stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.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)}.stzh-stepper-item__label-block.sc-stzh-stepper-item{display:block;font-size:0.875rem;line-height:1.28;color:var(--stzh-color-grey80);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__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}}.stzh-stepper-item__number.sc-stzh-stepper-item,.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{z-index:1}.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.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:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:CanvasText}}.stzh-stepper-item__user-icon.sc-stzh-stepper-item{--size:var(--stzh-icon-size-small);color:currentColor}.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 var(--stzh-color-grey20);cursor:pointer;transition-property:color, border-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus{border-color:var(--stzh-color-grey20);cursor:default}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus{border-color:Highlight}}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus::after{background-color:var(--stzh-color-grey20)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus::after{background-color:Canvas}}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item{cursor:default}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:hover,.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:focus{border-color:var(--stzh-base-border-color);cursor:default}.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:hover::after,.stzh-stepper-item__dotted__disabled.sc-stzh-stepper-item:focus::after{background-color:inherit}@media screen and (min-width: 600px){.stzh-stepper-item__dotted.sc-stzh-stepper-item{top:0.3125rem;width:1.9375rem;height:1.9375rem}}.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item__dotted.sc-stzh-stepper-item:hover .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item,.stzh-stepper-item__dotted.sc-stzh-stepper-item:focus .stzh-stepper-item__dotted-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before,.stzh-stepper-item--last.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block}.stzh-stepper-item--first.sc-stzh-stepper-item{position:relative}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{left:50%;transform:translateX(-50%)}.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--last.sc-stzh-stepper-item .stzh-stepper-item__dotted.sc-stzh-stepper-item{right:calc(100% / var(--steps) - (0.96875rem))}}.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);color:var(--stzh-color-primary)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-secondary60);border:solid 0.0625rem var(--stzh-color-secondary60)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:Canvas;border-color:CanvasText}}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary70)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:var(--stzh-color-white)}.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:transparent}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Canvas}}.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{border-color:var(--stzh-color-primary70)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed.sc-stzh-stepper-item:not(.stzh-stepper-item--passed-incomplete) .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{border-color:Highlight}}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);background-color:var(--stzh-color-secondary60);border:0.0625rem solid var(--stzh-color-secondary60)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-primary)}}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border-color:var(--stzh-color-secondary70)}.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-secondary70)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--passed-incomplete.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight;border-color:Highlight}}.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);color:var(--stzh-color-primary)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:SelectedItem}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-primary);border:solid 0.0625rem var(--stzh-color-primary);color:var(--stzh-color-white)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:SelectedItem;border-color:SelectedItem;background-color:Canvas}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{display:block;background-color:var(--stzh-color-primary);z-index:-1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:CanvasText}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border:0.0625rem solid var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:var(--stzh-color-primary-hover)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{background-color:Canvas}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:SelectedItem}}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__user-icon.sc-stzh-stepper-item,.stzh-stepper-item--current.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__user-icon.sc-stzh-stepper-item{color:Highlight}}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{margin-bottom:0}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{padding-left:0;padding-right:0}.stzh-stepper-item--dotted.stzh-stepper-item--first.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;border:none;background-color:transparent}@media screen and (min-width: 600px){.stzh-stepper-item--dotted.stzh-stepper-item--first.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--dotted.stzh-stepper-item--first.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--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{top:0.8125rem;right:1.875rem}}.stzh-stepper-item--dotted.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{display:none}.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:var(--stzh-color-white);z-index:1}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--first.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item::before{background-color:Canvas}}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item{cursor:not-allowed}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__number-block.sc-stzh-stepper-item{background-color:var(--stzh-color-grey60);color:white;border:0.0625rem solid var(--stzh-color-grey60)}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:var(--stzh-color-white);border:0.0625rem solid var(--stzh-color-grey60) !important}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item{color:GrayText;border-color:GrayText}}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__number-block.sc-stzh-stepper-item::after,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__number-block.sc-stzh-stepper-item::after{display:none}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-grey80)}.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:var(--stzh-color-grey80)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:hover .stzh-stepper-item__label-block.sc-stzh-stepper-item,.stzh-stepper-item--is-disabled.sc-stzh-stepper-item .stzh-stepper-item__button.sc-stzh-stepper-item:focus .stzh-stepper-item__label-block.sc-stzh-stepper-item{color:GrayText}}`;
 
@@ -108,6 +108,6 @@ function defineCustomElement() {
 }
 
 export { StzhStepperItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-DLFjdAqn.js.map
+//# sourceMappingURL=p-DXFYCyWz.js.map
 
-//# sourceMappingURL=p-DLFjdAqn.js.map
+//# sourceMappingURL=p-DXFYCyWz.js.map

package/dist/components/{p-DLFjdAqn.js.map → p-DXFYCyWz.js.map}

@@ -1 +1 @@
-{"file":"p-DLFjdAqn.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  &__button,\n  &__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__unclickable &__number-block {\n    background-color: $colorGrey20;\n    color: $colorPrimary70;\n    border: 1px solid $colorGrey20;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimary70;\n    border-color: $colorSecondary40;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorSecondary40;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color:$colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    background-color: $colorSecondary20;\n    border: 1px solid $colorSecondary20;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorPrimary70;\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    // 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      background-color: $baseBorderColor;\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  &__number-block,\n  &__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey80;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize(\"small\")};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid $colorGrey20;   \n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorGrey20;\n      cursor: default;  \n      \n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorGrey20;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    &__disabled {\n      cursor: default;\n\n      &:hover,\n      &:focus {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n      }\n\n      &:hover::after,\n      &:focus::after {\n        background-color: inherit;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block;\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n    @include mq($from: small) {\n      right: calc(\n        (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n      );\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorSecondary60;\n    border: solid 1px $colorSecondary60;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n\n    &::after {\n     background-color: $colorSecondary70;\n    }\n  }\n\n  &--passed &__icon, \n  &--passed &__user-icon {\n    color: $colorWhite;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that are **not** incomplete */\n  &--passed:not(&--passed-incomplete) &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    border-color: $colorPrimary70;\n\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that **are** incomplete */\n  &--passed-incomplete &__number-block {\n    color: $colorWhite;\n    background-color: $colorSecondary60;\n    border: 1px solid $colorSecondary60;\n\n    @include highContrast() {\n      color: $colorPrimary;\n    }\n  }\n\n  &--passed-incomplete &__button:hover &__number-block,\n  &--passed-incomplete &__button:focus &__number-block {\n    color: $colorWhite;\n    border-color: $colorSecondary70;\n    &::after {\n      background-color: $colorSecondary70;\n    }\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\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\n  &--dotted#{&}--first &__label-block {\n    display: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__number-block {\n    background-color: $colorGrey60;\n    color: white;\n    border: 1px solid $colorGrey60;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorGrey60 !important;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__label-block {\n    color: $colorGrey80;\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey80;\n\n    @include highContrast() {\n      color: GrayText;\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}
+{"file":"p-DXFYCyWz.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  &__button,\n  &__unclickable {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n  }\n\n  &__button {\n    cursor: pointer;\n  }\n\n  &__unclickable {\n    cursor: default;\n    pointer-events: none;\n  }\n\n  &__unclickable &__number-block {\n    background-color: $colorGrey20;\n    color: $colorPrimary70;\n    border: 1px solid $colorGrey20;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimary70;\n    border-color: $colorSecondary40;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorSecondary40;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color:$colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font(\"heavy\");\n    @include fontCurve(\"p1\");\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $stepperItemSize;\n    height: $stepperItemSize;\n    background-color: $colorSecondary20;\n    border: 1px solid $colorSecondary20;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorPrimary70;\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    // 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      background-color: $baseBorderColor;\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  &__number-block,\n  &__dotted {\n    &::after {\n      content: \"\";\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorGrey80;\n    padding: space(\"xxsmall\") space(\"small\");\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize(\"xsmall\")};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize(\"small\")};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\n    background-color: $colorGrey20;\n    border: 1px solid $colorGrey20;   \n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorGrey20;\n      cursor: default;  \n      \n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorGrey20;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    &__disabled {\n      cursor: default;\n\n      &:hover,\n      &:focus {\n        border-color: var(--stzh-base-border-color);\n        cursor: default;\n      }\n\n      &:hover::after,\n      &:focus::after {\n        background-color: inherit;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $stepperItemDottedSizeSmallUp;\n      height: $stepperItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block;\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$stepperItemDottedSize * 0.5}));\n\n    @include mq($from: small) {\n      right: calc(\n        (100% / var(--steps)) - (#{$stepperItemDottedSizeSmallUp * 0.5})\n      );\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorSecondary60;\n    border: solid 1px $colorSecondary60;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n\n    &::after {\n     background-color: $colorSecondary70;\n    }\n  }\n\n  &--passed &__icon, \n  &--passed &__user-icon {\n    color: $colorWhite;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that are **not** incomplete */\n  &--passed:not(&--passed-incomplete) &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed:not(&--passed-incomplete) &__button:hover &__number-block,\n  &--passed:not(&--passed-incomplete) &__button:focus &__number-block {\n    border-color: $colorPrimary70;\n\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  /* Styles specific to passed items that **are** incomplete */\n  &--passed-incomplete &__number-block {\n    color: $colorWhite;\n    background-color: $colorSecondary60;\n    border: 1px solid $colorSecondary60;\n\n    @include highContrast() {\n      color: $colorPrimary;\n    }\n  }\n\n  &--passed-incomplete &__button:hover &__number-block,\n  &--passed-incomplete &__button:focus &__number-block {\n    color: $colorWhite;\n    border-color: $colorSecondary70;\n    &::after {\n      background-color: $colorSecondary70;\n    }\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font(\"heavy\");\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorPrimary90;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $stepperItemDottedSize;\n    height: $stepperItemDottedSize;\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\n  &--dotted#{&}--first &__label-block {\n    display: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__number-block {\n    background-color: $colorGrey60;\n    color: white;\n    border: 1px solid $colorGrey60;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorWhite;\n    border: 1px solid $colorGrey60 !important;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__label-block {\n    color: $colorGrey80;\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorGrey80;\n\n    @include highContrast() {\n      color: GrayText;\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-D-6EO5vG.js → p-DZGcrLIr.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
 import { s as setPropsIfNull } from './p-CN5apKPb.js';
 
 const stzhActionsCss = () => `: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 ::slotted([slot=primary]),:host ::slotted([slot=secondary]),:host ::slotted([slot=tertiary]){flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}@media screen and (min-width: 600px){:host[space-between=true] ::slotted([slot=tertiary]){flex-grow:inherit}}.stzh-actions__actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions{flex-direction:row}}.stzh-actions__primary-actions,.stzh-actions__secondary-actions,.stzh-actions__tertiary-actions{display:flex}.stzh-actions__wrapper{display:contents}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__wrapper{display:flex;flex-wrap:wrap}}.stzh-actions--process .stzh-actions__actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process .stzh-actions__primary-actions,.stzh-actions--process .stzh-actions__secondary-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process .stzh-actions__tertiary-actions{margin-right:auto}}.stzh-actions--search .stzh-actions__actions{justify-content:flex-end}.stzh-actions{}.stzh-actions--space-between .stzh-actions__actions{justify-content:space-between}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:column}}@media screen and (min-width: 900px){.stzh-actions--space-between .stzh-actions__actions{flex-direction:row}}@media screen and (min-width: 600px){.stzh-actions--space-between .stzh-actions__wrapper{display:flex;justify-content:flex-end}}`;
@@ -71,6 +71,6 @@ function defineCustomElement() {
 }
 
 export { StzhActions as S, defineCustomElement as d };
-//# sourceMappingURL=p-D-6EO5vG.js.map
+//# sourceMappingURL=p-DZGcrLIr.js.map
 
-//# sourceMappingURL=p-D-6EO5vG.js.map
+//# sourceMappingURL=p-DZGcrLIr.js.map

package/dist/components/{p-D-6EO5vG.js.map → p-DZGcrLIr.js.map}

@@ -1 +1 @@
-{"file":"p-D-6EO5vG.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DZGcrLIr.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=shadow","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n  ::slotted([slot=\"primary\"]),\n  ::slotted([slot=\"secondary\"]),\n  ::slotted([slot=\"tertiary\"]) {\n    flex-grow: 1;\n    margin: calc(#{space(\"medium\")} / 2);\n  }\n\n  &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n    @include mq($from: small) {\n      flex-grow: inherit;\n    }\n  }\n}\n\n.stzh-actions {\n  &__actions {\n    display: flex;\n    flex-direction: column-reverse;\n    margin: calc(#{space(\"medium\")} / -2);\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__primary-actions,\n  &__secondary-actions,\n  &__tertiary-actions {\n    display: flex;\n  }\n\n  &__wrapper {\n    display: contents;\n  }\n\n  // &--dialog &__actions {\n  //   justify-content: flex-end;\n  // }\n\n  &--process &__wrapper {\n    @include mq($to: small) {\n      display: flex;\n      flex-wrap: wrap;\n    }\n  }\n\n  &--process &__actions {\n    justify-content: flex-end;\n  }\n\n  &--process &__primary-actions,\n  &--process &__secondary-actions {\n    @include mq($to: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &--process &__tertiary-actions {\n    @include mq($from: small) {\n      margin-right: auto;\n    }\n  }\n\n  &--search &__actions {\n    justify-content: flex-end;\n  }\n\n  /* space between */\n  &--space-between &__actions {\n    justify-content: space-between;\n\n    @include mq($from: small) {\n      flex-direction: column;\n    }\n\n    @include mq($from: medium) {\n      flex-direction: row;\n    }\n  }\n\n  &--space-between &__wrapper {\n    @include mq($from: small) {\n      display: flex;\n      justify-content: flex-end;\n    }\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n  tag: \"stzh-actions\",\n  styleUrl: \"stzh-actions.scss\",\n  shadow: true,\n})\nexport class StzhActions {\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n  /** Whether to split tertiary and primary/secondary from each other (left and right). */\n  @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n  @Element() element: HTMLStzhActionsElement;\n\n  private observer: MutationObserver;\n\n  private init = () => {\n    const secondaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button',\n    );\n\n    const tertiaryButtons = this.element.querySelectorAll(\n      'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button',\n    );\n\n    secondaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"secondary\",\n      } as HTMLStzhButtonElement);\n    });\n\n    tertiaryButtons.forEach(button => {\n      setPropsIfNull(button, {\n        variant: \"tertiary\",\n      } as HTMLStzhButtonElement);\n    });\n  };\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actions\": true,\n      \"stzh-actions--space-between\": this.spaceBetween,\n      [`stzh-actions--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host space-between={this.spaceBetween}>\n        <div class={classes}>\n          <div class=\"stzh-actions__actions\" role=\"group\">\n            <div class=\"stzh-actions__tertiary-actions\">\n              <slot name=\"tertiary\"></slot>\n            </div>\n            <div class=\"stzh-actions__wrapper\">\n              <div class=\"stzh-actions__secondary-actions\">\n                <slot name=\"secondary\"></slot>\n              </div>\n              <div class=\"stzh-actions__primary-actions\">\n                <slot name=\"primary\"></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-dax2kiNX.js → p-DZmJJLfK.js}

@@ -1,13 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-VlIs_0mL.js';
-import { S as StzhInputDescription } from './p-D1C6erqJ.js';
-import { d as defineCustomElement$8 } from './p-C6vp9SBX.js';
-import { d as defineCustomElement$7 } from './p-BcCp3tOb.js';
-import { d as defineCustomElement$6 } from './p-D-kokQzu.js';
-import { d as defineCustomElement$5 } from './p-4xjLemRb.js';
-import { d as defineCustomElement$4 } from './p-DriV35S7.js';
-import { d as defineCustomElement$3 } from './p-Buh91n-u.js';
-import { d as defineCustomElement$2 } from './p-CR_uLfdV.js';
-import { d as defineCustomElement$1 } from './p-lUUPgNcQ.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-hyzEZfgL.js';
+import { S as StzhInputDescription } from './p-b61bpkSU.js';
+import { d as defineCustomElement$8 } from './p-s4RWk35S.js';
+import { d as defineCustomElement$7 } from './p-C0eoM6jL.js';
+import { d as defineCustomElement$6 } from './p-Ds3Xf7HO.js';
+import { d as defineCustomElement$5 } from './p-CPhenplF.js';
+import { d as defineCustomElement$4 } from './p-mWRI28It.js';
+import { d as defineCustomElement$3 } from './p-GLNS1q2a.js';
+import { d as defineCustomElement$2 } from './p-D36sFB-f.js';
+import { d as defineCustomElement$1 } from './p-DLlZq7iU.js';
 
 const stzhChipselectCss = () => `.sc-stzh-chipselect-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-chipselect-h,[stzh-hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::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-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}[active].sc-stzh-chipselect-h:not([active=false]){--background-color:var(
     --stzh-chip-active-background-color,
@@ -383,6 +383,6 @@ function defineCustomElement() {
 }
 
 export { StzhChipselect as S, defineCustomElement as d };
-//# sourceMappingURL=p-dax2kiNX.js.map
+//# sourceMappingURL=p-DZmJJLfK.js.map
 
-//# sourceMappingURL=p-dax2kiNX.js.map
+//# sourceMappingURL=p-DZmJJLfK.js.map

package/dist/components/{p-dax2kiNX.js.map → p-DZmJJLfK.js.map}

@@ -1 +1 @@
-{"file":"p-dax2kiNX.js","mappings":";;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACjC;AACA;AACA;AACA;AACA;AACA,yuIAAyuI,CAAC;;ACG1uI,IAAI,iBAAiB,GAAG,CAAC;MAcZ,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAUU,QAAA,IAAI,CAAA,IAAA,GAAkC,EAAE;AACxC,QAAA,IAAK,CAAA,KAAA,GAAyB,EAAE;AAChC,QAAA,IAAa,CAAA,aAAA,GAAU,EAAE;;AAMzB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;;AAGX,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;AAC9C,QAAA,IAAM,CAAA,MAAA,GAAa,EAAE;;AAGJ,QAAA,IAAY,CAAA,YAAA,GAAsB,EAAE;;AAkBpC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAGxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAG9C,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;;AAGA,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAE5D,QAAA,IAAsB,CAAA,sBAAA,GAAW,EAAE;AAEnC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmF1B,QAAA,IAAW,CAAA,WAAA,GAAG,YAAW;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;;;;AAMhC,SAAC;AAGO,QAAA,IAAA,CAAA,sBAAsB,GAAG,CAAC,KAA0B,KAAI;AAC9D,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,OAAO;AAC/B,SAAC;QAMO,IAAA,CAAA,eAAe,GAAG,OAAO,IAAwB,EAAE,KAAa,KAAI;AAC1E,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE;AACvG,oBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AACV,qBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;AAC5B,oBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK;AAC1C,0BAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;0BAChD,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;;;iBAE7B;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;AAGzB,YAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK;AAEnC,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,iBAAiB;AAC5B,gBAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACpD,aAAA,CAAC;AACJ,SAAC;AACD;;;;;;;;;;;;;;;AAeA;AACQ,QAAA,IAAA,CAAA,oBAAoB,GAAG,OAAO,KAA2C,KAAI;AACnF,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAE9F,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE;YAEzD,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAG;gBACxD,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;AACnC,aAAC,CAAC;AAEF,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,iBAAiB;AAC5B,gBAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACpD,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,cAAc,GAAW,IAAI;AACjC,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,sBAAsB;AAErD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBACxD,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,IAAI,iBAAiB,GAAG,CAAC,EAAE;AACzB,oBAAA,cAAc,GAAG,iBAAiB,GAAG,CAAC;;;AAEnC,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;gBAClE,KAAK,CAAC,cAAc,EAAE;gBAEtB,IAAI,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7C,oBAAA,cAAc,GAAG,iBAAiB,GAAG,CAAC;;;AAEnC,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrD,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,IAAI,iBAAiB,GAAG,CAAC,EAAE;oBACzB;;AAGF,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IACE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,KAAK,EAAE;AAC1C,wBAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;AACtB,wBAAA,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EACpD;AACA,wBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;yBACV,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,KAAK,EAAE,EAAE;AACrD,wBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;8BACjE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;AAC3E,8BAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC;;;qBAEtD;oBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;;AAElD,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,oBAAA,SAAS,EAAE,iBAAiB;oBAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,iBAAA,CAAC;;AAGJ,YAAA,IAAI,cAAc,KAAK,IAAI,EAAE;AAC3B,gBAAA,IAAI,CAAC,sBAAsB,GAAG,cAAc;;AAEhD,SAAC;AAoLF;AAvXC,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACxD,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,WAAW,EAAE;AACpB,aAAC,CAAC;;;AAKN,IAAA,YAAY,CAAC,QAA2B,EAAA;AACtC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI;gBACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzC,gBAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC9B,oBAAA,IAAI,CAAC,MAAM,GAAG,WAAW;;qBACpB;AACL,oBAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;;YAE1C,OAAO,EAAE,EAAE;AACX,gBAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;;aAErC;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAE;;;AAK1C,IAAA,WAAW,CAAC,QAAuC,EAAA;AACjD,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;aAC5B;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;;AAGvB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,IAAG;AACzB,YAAA,IAAI,OAAO,SAAS,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACvC,MAAM,IAAI,SAAS,CACjB,CAAA,EAAG,SAAS,CAAC,KAAK,CAAyL,uLAAA,CAAA,CAC5M;;AAEL,SAAC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;YACzC,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAK,EAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAA,CAAG,GAAG,IAAI,CAAC,KAAK;gBACnE,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;AACH,SAAC,CAAC;;AAIJ,IAAA,YAAY,CAAC,QAA2B,EAAA;AACtC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;YAClC,OAAO,CAAC,EAAE;gBACV,IAAI,QAAQ,EAAE;AACZ,oBAAA,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC;;qBACnB;AACL,oBAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;;aAGf,IAAI,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;aACjB;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;IAOZ,iBAAiB,GAAA;AACvB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;;AAiBtE,IAAA,IAAY,mBAAmB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB;;IA2G/C,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE;;;AAI/B,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,EAAE,GAAG,mBAAmB,iBAAiB,EAAE,EAAE;AAElD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;AAEnD,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC;YACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO;;AAGzC,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,YAAY,CAAC;;;IAIvG,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC;;;IAI3E,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC;;;IAI9E,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW;AAC1C,QAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AAClD,QAAA,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAE9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,sBAAsB,IAAI,CAAC;AAClD,QAAA,MAAM,QAAQ,GAAG,SAAS,GAAG,GAAG,IAAI,CAAC,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,sBAAsB,CAAA,CAAE,GAAG,SAAS;AAE3F,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,kCAAkC,EAAE,eAAe;AACnD,YAAA,uCAAuC,EAAE,mBAAmB;AAC5D,YAAA,4BAA4B,EAAE,SAAS;AACvC,YAAA,6BAA6B,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;YACxD,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,mCAAmC,EAAE,IAAI,CAAC,WAAW;SACtD;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAa,IAAI,CAAC,OAAO,IAAI,SAAS,EAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,CAAC,IAAI,CAAC,mBAAmB;AACxB,aAAC,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KACpB,CAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAI,CAAA,CACvD,CAAC,CACO,KAEX,CAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,CAAI,CAC5D,CAAC,EAEH,CAAC,IAAI,CAAC,mBAAmB,KACxB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,CAAC,IAAI,CAAC,YAAY,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,aAAA,EAAa,MAAM,EAC5D,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;cAC3B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,8BAA8B,EACvC,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;AAC7B,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACK,CACT,EAEA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KACpB,CAAC,CAAA,QAAQ,uDACN,CAAC,IAAI,CAAC,mBAAmB,IACxB,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,GAAG,EAAA,sBAAA,EACU,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/B,uBAAA,EAAA,QAAQ,sBACb,CAAG,EAAA,IAAI,CAAC,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,eAAe,CAAA,CAAE,EAClE,SAAS,EAAE,IAAI,CAAC,aAAa,EAE5B,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1B,CAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;AAC7B,gBAAA,YAAY,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;AACpD,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,OAAO,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,MAAM,EACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,iBAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;iBACrF,CAAC,IAAI,CAAC,KAAK;AACV,oBAAA,IAAI,CAAC,QAAQ;AACb,qBAAC,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAA,eAAA,EAGpF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,iBAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;iBACrF,CAAC,IAAI,CAAC,KAAK;AACV,oBAAA,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AACjF,kBAAE;kBACA,OAAO,EAEb,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,CAAE,EAChC,YAAY,EAAC,IAAI,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EACrC,CAAA,CACd,CAAC,CACE,EAEN,CAAA,CAAC,oBAAoB,EACnB,EAAA,WAAW,EAAC,iBAAiB,EAC7B,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,EAAE,CAAA,YAAA,CAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,EAAA,CACnE,CACO,KAEX,qBACE,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAC3E,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,oBAAoB,GACxB,CAClB,CACQ,CACZ,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n.stzh-chipselect {\n  @include input-description;\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space(\"xsmall\");\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @include highContrast() {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  &__dropdown {\n    display: block;\n    width: max-content;\n    --popover-width: max-content;\n    --popover-min-width: 100%;\n    --popover-max-width: calc(100vw - 2rem);\n    /*\n      @include mq($from: medium) {\n        display: none;\n      }\n    */\n  }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport { StzhChipselectItem, StzhChipselectChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Whether chips are shown as dropdown on mobile devices */\n  @Prop() dropdownOnMobile: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = -1;\n\n  @State() isMobile: boolean = false;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    this._dataDropdown = this._data.map(data => {\n      return {\n        text: data.counter ? `${data.label} (${data.counter})` : data.label,\n        value: data.value,\n      };\n    });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private mediaQuery?: MediaQueryList;\n  private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n    this.isMobile = event.matches;\n  };\n\n  private get useDropdownOnMobile() {\n    return this.isMobile && this.dropdownOnMobile;\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n  /***\n  private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === this.value;\n    });\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.value,\n    });\n  };\n*/\n  private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const newValue = Array.isArray(event.detail.value) ? event.detail.value : [event.detail.value];\n\n    this.value = this.multiple ? newValue : newValue[0] || \"\";\n\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === newValue[0];\n    });\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < 0) {\n        return;\n      }\n\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value;\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (typeof window !== \"undefined\") {\n      this.mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n      this.isMobile = this.mediaQuery.matches;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.mediaQuery) {\n      this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const hasActive = this.activeFocusOptionIndex >= 0;\n    const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {!this.useDropdownOnMobile &&\n            (this.multiple ? (\n              <Fragment>\n                {this._value.map(value => (\n                  <input type=\"hidden\" name={this.name} value={value} />\n                ))}\n              </Fragment>\n            ) : (\n              <input type=\"hidden\" name={this.name} value={this.value} />\n            ))}\n\n          {!this.useDropdownOnMobile && (\n            <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-chipselect__marker\">\n                  <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-chipselect__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </label>\n          )}\n\n          {this._data.length > 0 && (\n            <Fragment>\n              {!this.useDropdownOnMobile ? (\n                <Fragment>\n                  <div\n                    id={this.id}\n                    class=\"stzh-chipselect__chips\"\n                    role=\"listbox\"\n                    tabindex=\"0\"\n                    aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                    aria-activedescendant={activeId}\n                    aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                    onKeyDown={this.handleKeydown}\n                  >\n                    {this._data.map((data, index) => (\n                      <stzh-chip\n                        role=\"option\"\n                        class={{\n                          \"stzh-chipselect__chip\": true,\n                          \"is-focused\": this.activeFocusOptionIndex === index,\n                        }}\n                        label={data.label}\n                        counter={data.counter}\n                        icon={data.icon}\n                        type={data.type}\n                        inverted={data.inverted}\n                        variant={data.variant}\n                        size={data.size || \"small\"}\n                        disabled={this.disabled || data.disabled}\n                        active={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        }\n                        aria-selected={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                            ? \"true\"\n                            : \"false\"\n                        }\n                        id={`${this.id}-option-${index}`}\n                        a11yTabindex=\"-1\"\n                        onClick={() => this.handleChipClick(data, index)}\n                      ></stzh-chip>\n                    ))}\n                  </div>\n\n                  <StzhInputDescription\n                    classPrefix=\"stzh-chipselect\"\n                    id={`${this.id}-description`}\n                    error={this._error}\n                    description={this.description}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  />\n                </Fragment>\n              ) : (\n                <stzh-dropdown\n                  class=\"stzh-chipselect__dropdown\"\n                  name={this.name}\n                  multiple={this.multiple}\n                  disabled={this.disabled}\n                  error={this._error}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  required={this.required}\n                  invalid={this.invalid}\n                  items={this.multiple ? this._value : this._value[0] ? [this._value[0]] : []}\n                  label={this.label}\n                  labelHidden={this.labelHidden}\n                  options={this._dataDropdown}\n                  hideOptional={this.hideOptional}\n                  onStzhChange={this.handleDropdownChange}\n                ></stzh-dropdown>\n              )}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-DZmJJLfK.js","mappings":";;;;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,MAAM,CAAC;AACjC;AACA;AACA;AACA;AACA;AACA,yuIAAyuI,CAAC;;ACG1uI,IAAI,iBAAiB,GAAG,CAAC;MAcZ,cAAc,iBAAAA,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAUU,QAAA,IAAI,CAAA,IAAA,GAAkC,EAAE;AACxC,QAAA,IAAK,CAAA,KAAA,GAAyB,EAAE;AAChC,QAAA,IAAa,CAAA,aAAA,GAAU,EAAE;;AAMzB,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;;AAGX,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAK,CAAA,KAAA,GAAsB,EAAE;AAC9C,QAAA,IAAM,CAAA,MAAA,GAAa,EAAE;;AAGJ,QAAA,IAAY,CAAA,YAAA,GAAsB,EAAE;;AAkBpC,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAGxB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAGzB,QAAA,IAAY,CAAA,YAAA,GAAY,KAAK;;AAG9C,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;;AAGA,QAAA,IAAe,CAAA,eAAA,GAAW,EAAE;AAE5D,QAAA,IAAsB,CAAA,sBAAA,GAAW,EAAE;AAEnC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmF1B,QAAA,IAAW,CAAA,WAAA,GAAG,YAAW;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;;;;;AAMhC,SAAC;AAGO,QAAA,IAAA,CAAA,sBAAsB,GAAG,CAAC,KAA0B,KAAI;AAC9D,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,OAAO;AAC/B,SAAC;QAMO,IAAA,CAAA,eAAe,GAAG,OAAO,IAAwB,EAAE,KAAa,KAAI;AAC1E,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE;AACvG,oBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;AACV,qBAAA,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;AAC5B,oBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK;AAC1C,0BAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;0BAChD,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC;;;iBAE7B;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;;AAGzB,YAAA,IAAI,CAAC,sBAAsB,GAAG,KAAK;AAEnC,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,iBAAiB;AAC5B,gBAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACpD,aAAA,CAAC;AACJ,SAAC;AACD;;;;;;;;;;;;;;;AAeA;AACQ,QAAA,IAAA,CAAA,oBAAoB,GAAG,OAAO,KAA2C,KAAI;AACnF,YAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAE9F,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,EAAE;YAEzD,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAG;gBACxD,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC;AACnC,aAAC,CAAC;AAEF,YAAA,MAAM,IAAI,CAAC,iBAAiB,EAAE;AAE9B,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,gBAAA,SAAS,EAAE,iBAAiB;AAC5B,gBAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACpD,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;YAC/C,IAAI,cAAc,GAAW,IAAI;AACjC,YAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,sBAAsB;AAErD,YAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;gBACxD,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,IAAI,iBAAiB,GAAG,CAAC,EAAE;AACzB,oBAAA,cAAc,GAAG,iBAAiB,GAAG,CAAC;;;AAEnC,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;gBAClE,KAAK,CAAC,cAAc,EAAE;gBAEtB,IAAI,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7C,oBAAA,cAAc,GAAG,iBAAiB,GAAG,CAAC;;;AAEnC,iBAAA,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrD,KAAK,CAAC,cAAc,EAAE;AAEtB,gBAAA,IAAI,iBAAiB,GAAG,CAAC,EAAE;oBACzB;;AAGF,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;oBACjB,IACE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,KAAK,EAAE;AAC1C,wBAAA,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;AACtB,wBAAA,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,EACpD;AACA,wBAAA,IAAI,CAAC,KAAK,GAAG,EAAE;;yBACV,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,KAAK,EAAE,EAAE;AACrD,wBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;8BACjE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;AAC3E,8BAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC;;;qBAEtD;oBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC,KAAK;;AAElD,gBAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACnB,oBAAA,SAAS,EAAE,iBAAiB;oBAC5B,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,iBAAA,CAAC;;AAGJ,YAAA,IAAI,cAAc,KAAK,IAAI,EAAE;AAC3B,gBAAA,IAAI,CAAC,sBAAsB,GAAG,cAAc;;AAEhD,SAAC;AAoLF;AAvXC,IAAA,aAAa,CAAC,KAAY,EAAA;QACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACxD,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,WAAW,EAAE;AACpB,aAAC,CAAC;;;AAKN,IAAA,YAAY,CAAC,QAA2B,EAAA;AACtC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI;gBACF,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AACzC,gBAAA,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;AAC9B,oBAAA,IAAI,CAAC,MAAM,GAAG,WAAW;;qBACpB;AACL,oBAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;;YAE1C,OAAO,EAAE,EAAE;AACX,gBAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,CAAC,QAAQ,CAAC,GAAG,EAAE;;;aAErC;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,EAAE;;;AAK1C,IAAA,WAAW,CAAC,QAAuC,EAAA;AACjD,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;aAC5B;AACL,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;;AAGvB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,IAAG;AACzB,YAAA,IAAI,OAAO,SAAS,CAAC,KAAK,KAAK,QAAQ,EAAE;gBACvC,MAAM,IAAI,SAAS,CACjB,CAAA,EAAG,SAAS,CAAC,KAAK,CAAyL,uLAAA,CAAA,CAC5M;;AAEL,SAAC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,IAAG;YACzC,OAAO;gBACL,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAK,EAAA,EAAA,IAAI,CAAC,OAAO,CAAA,CAAA,CAAG,GAAG,IAAI,CAAC,KAAK;gBACnE,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;AACH,SAAC,CAAC;;AAIJ,IAAA,YAAY,CAAC,QAA2B,EAAA;AACtC,QAAA,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAChC,YAAA,IAAI;gBACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;YAClC,OAAO,CAAC,EAAE;gBACV,IAAI,QAAQ,EAAE;AACZ,oBAAA,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC;;qBACnB;AACL,oBAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;;aAGf,IAAI,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;aACjB;AACL,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;;;IAOZ,iBAAiB,GAAA;AACvB,QAAA,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;;AAiBtE,IAAA,IAAY,mBAAmB,GAAA;AAC7B,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,gBAAgB;;IA2G/C,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC7B,IAAI,CAAC,oBAAoB,EAAE;;;AAI/B,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,EAAE,GAAG,mBAAmB,iBAAiB,EAAE,EAAE;AAElD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAC3B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC7B,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;QAE7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK;AAEnD,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC;YACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO;;AAGzC,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,YAAY,CAAC;;;IAIvG,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC;;;IAI3E,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,sBAAsB,CAAC;;;IAI9E,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW;AAC1C,QAAA,MAAM,mBAAmB,GAAG,CAAC,CAAC,IAAI,CAAC,eAAe;AAClD,QAAA,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;AAE9B,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,sBAAsB,IAAI,CAAC;AAClD,QAAA,MAAM,QAAQ,GAAG,SAAS,GAAG,GAAG,IAAI,CAAC,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,sBAAsB,CAAA,CAAE,GAAG,SAAS;AAE3F,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,iBAAiB,EAAE,IAAI;AACvB,YAAA,kCAAkC,EAAE,eAAe;AACnD,YAAA,uCAAuC,EAAE,mBAAmB;AAC5D,YAAA,4BAA4B,EAAE,SAAS;AACvC,YAAA,6BAA6B,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;YACxD,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;YAC7C,mCAAmC,EAAE,IAAI,CAAC,WAAW;SACtD;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAa,IAAI,CAAC,OAAO,IAAI,SAAS,EAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EAChB,CAAC,IAAI,CAAC,mBAAmB;AACxB,aAAC,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,KACpB,CAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAI,CAAA,CACvD,CAAC,CACO,KAEX,CAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,CAAI,CAC5D,CAAC,EAEH,CAAC,IAAI,CAAC,mBAAmB,KACxB,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACvC,CAAC,IAAI,CAAC,YAAY,KACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAA,aAAA,EAAa,MAAM,EAC5D,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;cAC3B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAC7C,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,8BAA8B,EACvC,EAAA,IAAI,CAAC;AACJ,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;AAC7B,cAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAC3C,CACF,CACR,CACK,CACT,EAEA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,KACpB,CAAC,CAAA,QAAQ,uDACN,CAAC,IAAI,CAAC,mBAAmB,IACxB,EAAC,QAAQ,EAAA,IAAA,EACP,CAAA,CAAA,KAAA,EAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAC,SAAS,EACd,QAAQ,EAAC,GAAG,EAAA,sBAAA,EACU,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/B,uBAAA,EAAA,QAAQ,sBACb,CAAG,EAAA,IAAI,CAAC,EAAE,CAAgB,aAAA,EAAA,IAAI,CAAC,eAAe,CAAA,CAAE,EAClE,SAAS,EAAE,IAAI,CAAC,aAAa,EAE5B,EAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC1B,CAAA,CAAA,WAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;AACL,gBAAA,uBAAuB,EAAE,IAAI;AAC7B,gBAAA,YAAY,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;AACpD,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,OAAO,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EACxC,MAAM,EACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,iBAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;iBACrF,CAAC,IAAI,CAAC,KAAK;AACV,oBAAA,IAAI,CAAC,QAAQ;AACb,qBAAC,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAA,eAAA,EAGpF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;AAChC,iBAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;iBACrF,CAAC,IAAI,CAAC,KAAK;AACV,oBAAA,IAAI,CAAC,QAAQ;qBACZ,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AACjF,kBAAE;kBACA,OAAO,EAEb,EAAE,EAAE,GAAG,IAAI,CAAC,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,CAAE,EAChC,YAAY,EAAC,IAAI,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EACrC,CAAA,CACd,CAAC,CACE,EAEN,CAAA,CAAC,oBAAoB,EACnB,EAAA,WAAW,EAAC,iBAAiB,EAC7B,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,EAAE,CAAA,YAAA,CAAc,EAC5B,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,EAAA,CACnE,CACO,KAEX,qBACE,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAC3E,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,YAAY,EAAE,IAAI,CAAC,oBAAoB,GACxB,CAClB,CACQ,CACZ,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n  &[active]:not([active=\"false\"]) {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n  &[active].is-focused {\n    --background-color: var(\n      --stzh-chip-active-background-color,\n      #{$colorPrimary70}\n    );\n  }\n}\n\n.stzh-chipselect {\n  @include input-description;\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space(\"xsmall\");\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space(\"medium\");\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @include highContrast() {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused:not([active]) {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  &__dropdown {\n    display: block;\n    width: max-content;\n    --popover-width: max-content;\n    --popover-min-width: 100%;\n    --popover-max-width: calc(100vw - 2rem);\n    /*\n      @include mq($from: medium) {\n        display: none;\n      }\n    */\n  }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space(\"xsmall\");\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import { Component, Host, h, Element, Prop, Watch, Event, EventEmitter, State, Fragment, Listen } from \"@stencil/core\";\n\nimport { StzhChipselectItem, StzhChipselectChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true,\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Whether chips are shown as dropdown on mobile devices */\n  @Prop() dropdownOnMobile: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = -1;\n\n  @State() isMobile: boolean = false;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        } else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map(dataEntry => {\n      if (typeof dataEntry.value !== \"string\") {\n        throw new TypeError(\n          `${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`,\n        );\n      }\n    });\n    this._dataDropdown = this._data.map(data => {\n      return {\n        text: data.counter ? `${data.label} (${data.counter})` : data.label,\n        value: data.value,\n      };\n    });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  };\n\n  private mediaQuery?: MediaQueryList;\n  private handleMediaQueryChange = (event: MediaQueryListEvent) => {\n    this.isMobile = event.matches;\n  };\n\n  private get useDropdownOnMobile() {\n    return this.isMobile && this.dropdownOnMobile;\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n  /***\n  private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === this.value;\n    });\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.value,\n    });\n  };\n*/\n  private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const newValue = Array.isArray(event.detail.value) ? event.detail.value : [event.detail.value];\n\n    this.value = this.multiple ? newValue : newValue[0] || \"\";\n\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === newValue[0];\n    });\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0],\n    });\n  };\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < 0) {\n        return;\n      }\n\n      if (this.multiple) {\n        if (\n          this._data[activeOptionIndex].value === \"\" &&\n          this._value.length > 0 &&\n          !(this._value.length === 1 && this._value[0] === \"\")\n        ) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value;\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value,\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (typeof window !== \"undefined\") {\n      this.mediaQuery = window.matchMedia(\"(max-width: 767px)\");\n      this.isMobile = this.mediaQuery.matches;\n    }\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.mediaQuery) {\n      this.mediaQuery.addEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mediaQuery) {\n      this.mediaQuery.removeEventListener(\"change\", this.handleMediaQueryChange);\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const hasActive = this.activeFocusOptionIndex >= 0;\n    const activeId = hasActive ? `${this.id}-option-${this.activeFocusOptionIndex}` : undefined;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {!this.useDropdownOnMobile &&\n            (this.multiple ? (\n              <Fragment>\n                {this._value.map(value => (\n                  <input type=\"hidden\" name={this.name} value={value} />\n                ))}\n              </Fragment>\n            ) : (\n              <input type=\"hidden\" name={this.name} value={this.value} />\n            ))}\n\n          {!this.useDropdownOnMobile && (\n            <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional && (\n                <span class=\"stzh-chipselect__marker\">\n                  <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-chipselect__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </label>\n          )}\n\n          {this._data.length > 0 && (\n            <Fragment>\n              {!this.useDropdownOnMobile ? (\n                <Fragment>\n                  <div\n                    id={this.id}\n                    class=\"stzh-chipselect__chips\"\n                    role=\"listbox\"\n                    tabindex=\"0\"\n                    aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                    aria-activedescendant={activeId}\n                    aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                    onKeyDown={this.handleKeydown}\n                  >\n                    {this._data.map((data, index) => (\n                      <stzh-chip\n                        role=\"option\"\n                        class={{\n                          \"stzh-chipselect__chip\": true,\n                          \"is-focused\": this.activeFocusOptionIndex === index,\n                        }}\n                        label={data.label}\n                        counter={data.counter}\n                        icon={data.icon}\n                        type={data.type}\n                        inverted={data.inverted}\n                        variant={data.variant}\n                        size={data.size || \"small\"}\n                        disabled={this.disabled || data.disabled}\n                        active={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        }\n                        aria-selected={\n                          this._value.includes(data.value) ||\n                          (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\")) ||\n                          (!data.value &&\n                            this.multiple &&\n                            (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                            ? \"true\"\n                            : \"false\"\n                        }\n                        id={`${this.id}-option-${index}`}\n                        a11yTabindex=\"-1\"\n                        onClick={() => this.handleChipClick(data, index)}\n                      ></stzh-chip>\n                    ))}\n                  </div>\n\n                  <StzhInputDescription\n                    classPrefix=\"stzh-chipselect\"\n                    id={`${this.id}-description`}\n                    error={this._error}\n                    description={this.description}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  />\n                </Fragment>\n              ) : (\n                <stzh-dropdown\n                  class=\"stzh-chipselect__dropdown\"\n                  name={this.name}\n                  multiple={this.multiple}\n                  disabled={this.disabled}\n                  error={this._error}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  required={this.required}\n                  invalid={this.invalid}\n                  items={this.multiple ? this._value : this._value[0] ? [this._value[0]] : []}\n                  label={this.label}\n                  labelHidden={this.labelHidden}\n                  options={this._dataDropdown}\n                  hideOptional={this.hideOptional}\n                  onStzhChange={this.handleDropdownChange}\n                ></stzh-dropdown>\n              )}\n            </Fragment>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-xIHszt2i.js → p-D_o61BZJ.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
 import { s as setPropsIfNull } from './p-CN5apKPb.js';
 import { c as createBaseFocusTrapOptions } from './p-BzugsqyR.js';
 import { c as createFocusTrap } from './p-CBUfcdIy.js';
-import { d as defineCustomElement$4 } from './p-C6vp9SBX.js';
-import { d as defineCustomElement$3 } from './p-29jzXFRt.js';
-import { d as defineCustomElement$2 } from './p-CWcbfJk_.js';
-import { d as defineCustomElement$1 } from './p-DriV35S7.js';
+import { d as defineCustomElement$4 } from './p-s4RWk35S.js';
+import { d as defineCustomElement$3 } from './p-LRN3e03F.js';
+import { d as defineCustomElement$2 } from './p-B4ov3VSW.js';
+import { d as defineCustomElement$1 } from './p-mWRI28It.js';
 
 const stzhDialogCss = () => `.sc-stzh-dialog-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-dialog-h,[stzh-hidden].sc-stzh-dialog-h{display:none}.sc-stzh-dialog-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-dialog-h *.sc-stzh-dialog,.sc-stzh-dialog-h *.sc-stzh-dialog::before,.sc-stzh-dialog-h *.sc-stzh-dialog::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-dialog-h .has-focus.sc-stzh-dialog{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog{outline-style:none !important}.sc-stzh-dialog-h .stzh-fylingfocus-focused.sc-stzh-dialog::-moz-focus-inner{border:0 !important}.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-top:var(--stzh-space-xxxxlarge)}}.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-bottom:var(--stzh-space-xxxxlarge)}}.sc-stzh-dialog-h{--padding-left:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-left:var(--stzh-space-xxxlarge)}}.sc-stzh-dialog-h{--padding-right:var(--stzh-space-large)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--padding-right:var(--stzh-space-xxxlarge)}}.sc-stzh-dialog-h{--width:100%;--backdrop-opacity:var(--stzh-dialog-backdrop-opacity);--backdrop-background-color:var(--stzh-dialog-backdrop-background-color)}@media screen and (min-width: 600px){.sc-stzh-dialog-h{--width:33.5rem}}@media screen and (min-width: 900px){.sc-stzh-dialog-h{--width:38.125rem}}@media screen and (min-width: 1260px){.sc-stzh-dialog-h{--width:54.125rem}}@media screen and (min-width: 1600px){.sc-stzh-dialog-h{--width:55.5rem}}@media screen and (min-width: 600px){[size=small].sc-stzh-dialog-h{--width:24.6875rem}}@media screen and (min-width: 900px){[size=small].sc-stzh-dialog-h{--width:28.75rem}}@media screen and (min-width: 1260px){[size=small].sc-stzh-dialog-h{--width:32rem}}.stzh-dialog.sc-stzh-dialog{z-index:var(--stzh-z-index-dialog);display:none;position:fixed;top:0;left:0;width:100%;height:100%;flex-direction:column;align-items:stretch;justify-content:stretch}.stzh-dialog__content.sc-stzh-dialog{z-index:2;position:relative;display:flex;flex-direction:column;align-items:center;flex-grow:1;overflow:auto}.stzh-dialog__dialog.sc-stzh-dialog{position:relative;display:flex;flex-direction:column;margin:auto;border:none;background-color:var(--stzh-color-white);width:auto;min-width:var(--width);max-width:100%;box-shadow:var(--stzh-box-shadow-overlay);height:100vh;max-height:100vh;overflow:hidden;outline:none}.stzh-dialog__dialog--fit-content.sc-stzh-dialog{width:-moz-fit-content;width:fit-content}@media screen and (min-width: 600px){.stzh-dialog__dialog.sc-stzh-dialog{height:auto}}.stzh-dialog__backdrop.sc-stzh-dialog{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;text-align:center;background-color:var(--backdrop-background-color);opacity:var(--backdrop-opacity)}.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__heading.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-dialog__heading.sc-stzh-dialog{padding-top:var(--padding-top);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-top:var(--stzh-space-xxxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-dialog__dialog-content.sc-stzh-dialog{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-dialog__dialog-content.sc-stzh-dialog{overflow:auto;flex-grow:1}.stzh-dialog__actions.sc-stzh-dialog:not(:empty){padding:var(--stzh-space-medium) var(--padding-right) var(--padding-bottom) var(--padding-left)}.stzh-dialog__close-button.sc-stzh-dialog{position:absolute;top:var(--stzh-space-xsmall);right:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-dialog__close-button.sc-stzh-dialog{top:var(--stzh-space-large);right:var(--stzh-space-large)}}.stzh-dialog--is-open.sc-stzh-dialog{display:flex}`;
 
@@ -229,6 +229,6 @@ function defineCustomElement() {
 }
 
 export { StzhDialog as S, defineCustomElement as d };
-//# sourceMappingURL=p-xIHszt2i.js.map
+//# sourceMappingURL=p-D_o61BZJ.js.map
 
-//# sourceMappingURL=p-xIHszt2i.js.map
+//# sourceMappingURL=p-D_o61BZJ.js.map

package/dist/components/{p-xIHszt2i.js.map → p-D_o61BZJ.js.map}

@@ -1 +1 @@
-{"file":"p-xIHszt2i.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve(\"--padding-top\", \"large\");\n  @include spaceCurve(\"--padding-bottom\", \"large\");\n  @include spaceCurve(\"--padding-left\", \"medium\");\n  @include spaceCurve(\"--padding-right\", \"medium\");\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: auto;\n    min-width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    overflow: hidden;\n    outline: none;\n\n    &--fit-content {\n      width: fit-content;\n    }\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve(\"padding-top\", \"medium\");\n    @include spaceCurve(\"padding-bottom\", \"medium\");\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding: space(\"medium\") var(--padding-right) var(--padding-bottom)\n        var(--padding-left);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space(\"xsmall\");\n    right: space(\"xsmall\");\n\n    @include mq($from: medium) {\n      top: space(\"large\");\n      right: space(\"large\");\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Host, Component, Element, Method, Listen, Prop, Event, EventEmitter, h } from \"@stencil/core\";\n\nimport { StzhDialogOpenEvent, StzhDialogCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true,\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text\n   * *mandatory* since DESI 4.0\n   * */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    if (isClickOutside) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Escape\" && activeDialog === this && this.closeOnEscapeKey) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\",\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\",\n      } as HTMLStzhActionsElement);\n    }\n  };\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              <stzh-heading id={`${this.id}-heading`} class=\"stzh-dialog__heading\" level=\"2\">\n                {this.heading ? this.heading : \"Title\"}\n              </stzh-heading>\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose && (\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-D_o61BZJ.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,igMAAigM,CAAC;;ACW/hM,MAAM,eAAe,GAAG,kBAAkB;AAE1C,IAAI,YAAY,GAAe,IAAI;AACnC,IAAI,aAAa,GAAG,CAAC;MAWR,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAUU,QAAA,IAAgB,CAAA,gBAAA,GAAY,KAAK;;AAGjC,QAAA,IAAoB,CAAA,oBAAA,GAAY,KAAK;;AAGpB,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGtC,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;;AAGH,QAAA,IAAI,CAAA,IAAA,GAAwB,SAAS;;AAGtD,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAElC;;AAEK;AACG,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;;AAGM,QAAA,IAAQ,CAAA,QAAA,GAA6B,aAAa;AA2E5E,QAAA,IAAA,CAAA,iBAAiB,GAAG,CAAC,KAAiB,KAAI;AAChD,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAC1C,YAAA,IAAI,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE;gBAClC,IAAI,CAAC,IAAI,EAAE;;iBACN;gBACL,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,0BAA0B,CAAC;gBAE1D,IAAI,OAAO,EAAE;oBACX,IAAI,CAAC,IAAI,EAAE;;;AAGjB,SAAC;AAEO,QAAA,IAAsB,CAAA,sBAAA,GAAG,MAAK;YACpC,IAAI,CAAC,IAAI,EAAE;AACb,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;YAClB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,8BAA8B,CAAC;YAE1E,IAAI,OAAO,EAAE;gBACX,cAAc,CAAC,OAAO,EAAE;AACtB,oBAAA,OAAO,EAAE,QAAQ;AACQ,iBAAA,CAAC;;AAEhC,SAAC;AAmJF;AArOC,IAAA,kBAAkB,CAAC,KAAiB,EAAA;QAClC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE;YAC5C;;QAGF,MAAM,cAAc,GAClB,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,KAAK,KAAK;QAE3G,IAAI,cAAc,EAAE;YAClB,IAAI,CAAC,IAAI,EAAE;;;AAKf,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,YAAY,KAAK,IAAI,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5E,IAAI,CAAC,IAAI,EAAE;;;AAKf,IAAA,sBAAsB,CAAC,KAAiB,EAAA;AACtC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;AAE1C,QAAA,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE;YACxD,IAAI,CAAC,IAAI,EAAE;;aACN;YACL,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,4BAA4B,CAAgB;AAE3E,YAAA,IAAI,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,iBAAiB,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,EAAE;gBACpE,IAAI,CAAC,IAAI,EAAE;;;;AAMjB,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,SAAS,EAAE,aAAa;AACzB,SAAA,CAAC;;AAIJ,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,YAAA,SAAS,EAAE,aAAa;AACzB,SAAA,CAAC;;IAoCI,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAC1B,YAAA,OAAO,EAAE;;QAGX,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC;;IAGnF,eAAe,GAAA;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,IAAG;AACnC,YAAA,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AAC7C,SAAC,CAAC;;IAGI,cAAc,GAAA;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,IAAG;AACnC,YAAA,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;AACxC,SAAC,CAAC;;IAGI,WAAW,GAAA;QACjB,YAAY,GAAG,IAAI;QACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;QAC5C,IAAI,CAAC,eAAe,EAAE;AAEtB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;;;IAIhB,YAAY,GAAA;QAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;QAC/C,IAAI,CAAC,cAAc,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;;QAGxB,YAAY,GAAG,IAAI;;AAGrB,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,IAAI,CAAC,EAAE,GAAG,CAAe,YAAA,EAAA,aAAa,EAAE;AACxC,QAAA,aAAa,EAAE;AAEf,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,QAAQ,CAAC;;;IAInG,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;;IAGtD,kBAAkB,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGjD,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACtC,aAAa,EAAE,IAAI,CAAC,aAAa,IAC9B,0BAA0B,EAAE,EAC/B;AAEF,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,WAAW,EAAE;;;IAItB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;YAC9D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;QAGzC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa;QAElD,IAAI,CAAC,IAAI,EAAE;QAEX,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;AAClC,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;QAClB,IAAI,CAAC,YAAY,EAAE;AAEnB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;;IAI9B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,aAAa,EAAE,IAAI;gBACnB,sBAAsB,EAAE,IAAI,CAAC,IAAI;AACjC,gBAAA,0BAA0B,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO;gBAC1C,+BAA+B,EAAE,IAAI,CAAC,SAAS;gBAC/C,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;AAChD,aAAA,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAO,CAAA,EACzC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAoB,CAAC,EACtD,QAAQ,EAAC,IAAI,EACb,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,aAAA,EACN,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EACzC,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAAA,EAE/B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,EAAE,EAAE,CAAA,EAAG,IAAI,CAAC,EAAE,CAAA,QAAA,CAAU,EAAE,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAC,GAAG,EAAA,EAC3E,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,OAAO,CACzB,EAEf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAQ,CACxB,EAEL,CAAC,IAAI,CAAC,SAAS,KACd,CACE,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EACjC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,WAAW,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAA,CAChD,CAChB,CACG,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-dialog/stzh-dialog.scss?tag=stzh-dialog&encapsulation=scoped","src/components/stzh-dialog/stzh-dialog.tsx"],"sourcesContent":["/**\n * @prop --width: Width of dialog\n * @prop --padding-top: Padding top of dialog\n * @prop --padding-bottom: Padding bottom of dialog\n * @prop --padding-left: Padding left of dialog\n * @prop --padding-right: Padding right of dialog\n * @prop --backdrop-opacity: Opacity of dialog backdrop\n * @prop --backdrop-background-color: Opacity of dialog background color\n *\n * @prop --stzh-dialog-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-dialog-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  @include spaceCurve(\"--padding-top\", \"large\");\n  @include spaceCurve(\"--padding-bottom\", \"large\");\n  @include spaceCurve(\"--padding-left\", \"medium\");\n  @include spaceCurve(\"--padding-right\", \"medium\");\n  --width: 100%;\n  --backdrop-opacity: #{$dialogBackdropOpacity};\n  --backdrop-background-color: #{$dialogBackdropBackgroundColor};\n\n  @include mq($from: small) {\n    --width: 536px;\n  }\n\n  @include mq($from: medium) {\n    --width: 610px; // 786 before\n  }\n\n  @include mq($from: large) {\n    --width: 866px; // 832 before\n  }\n\n  @include mq($from: ultra) {\n    --width: 888px;\n  }\n\n  &[size=\"small\"] {\n    @include mq($from: small) {\n      --width: 395px;\n    }\n\n    @include mq($from: medium) {\n      --width: 460px;\n    }\n\n    @include mq($from: large) {\n      --width: 512px;\n    }\n  }\n}\n\n.stzh-dialog {\n  z-index: $zIndexDialog;\n  display: none;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: stretch;\n  justify-content: stretch;\n\n  &__content {\n    z-index: 2;\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__dialog {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    margin: auto;\n    border: none;\n    background-color: $colorWhite;\n    width: auto;\n    min-width: var(--width);\n    max-width: 100%;\n    box-shadow: $boxShadowOverlay;\n    height: 100vh;\n    max-height: 100vh;\n    overflow: hidden;\n    outline: none;\n\n    &--fit-content {\n      width: fit-content;\n    }\n\n    @include mq($from: small) {\n      height: auto;\n    }\n  }\n\n  &__backdrop {\n    z-index: 1;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    overflow-x: hidden;\n    overflow-y: auto;\n    text-align: center;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n  }\n\n  &__heading {\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    padding-top: var(--padding-top);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n  }\n\n  &__dialog-content {\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    @include spaceCurve(\"padding-top\", \"medium\");\n    @include spaceCurve(\"padding-bottom\", \"medium\");\n    overflow: auto;\n    flex-grow: 1;\n  }\n\n  &__actions {\n    &:not(:empty) {\n      padding: space(\"medium\") var(--padding-right) var(--padding-bottom)\n        var(--padding-left);\n    }\n  }\n\n  &__close-button {\n    position: absolute;\n    top: space(\"xsmall\");\n    right: space(\"xsmall\");\n\n    @include mq($from: medium) {\n      top: space(\"large\");\n      right: space(\"large\");\n    }\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Host, Component, Element, Method, Listen, Prop, Event, EventEmitter, h } from \"@stencil/core\";\n\nimport { StzhDialogOpenEvent, StzhDialogCloseEvent } from \"../../index\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { StzhDialogLocalizedText } from \"./stzh-dialog.localization\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-dialog-open\";\n\nlet activeDialog: StzhDialog = null;\nlet dialogCounter = 0;\n\n/**\n * @slot actions - Slot for actions element\n * @slot - Slot for any content inside the dialog\n */\n@Component({\n  tag: \"stzh-dialog\",\n  styleUrl: \"stzh-dialog.scss\",\n  scoped: true,\n})\nexport class StzhDialog {\n  /** Translation strings */\n  @Prop() localization: StzhDialogLocalizedText;\n\n  /** Close dialog when pressing ESC */\n  @Prop() closeOnEscapeKey: boolean = false;\n\n  /** Close dialog when clicking outside of it */\n  @Prop() closeOnBackdropClick: boolean = false;\n\n  /** Open status */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Size */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Heading text\n   * *mandatory* since DESI 4.0\n   * */\n  @Prop() heading: string = \"\";\n\n  /** Accessibility role */\n  @Prop({ attribute: \"a11y-role\" }) a11yRole: \"dialog\" | \"alertdialog\" = \"alertdialog\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the close button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() closeAnalyticsId: string;\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhDialogOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhDialogCloseEvent>;\n\n  @Element() element: HTMLStzhDialogElement;\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleOutsideClick(event: MouseEvent) {\n    if (!this.open || !this.closeOnBackdropClick) {\n      return;\n    }\n\n    const isClickOutside =\n      event.target !== this.dialogElement && this.dialogElement.contains(event.target as HTMLElement) === false;\n\n    if (isClickOutside) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Escape\" && activeDialog === this && this.closeOnEscapeKey) {\n      this.hide();\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleOpenTriggerClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (target.dataset.stzhDialogTrigger === this.element.id) {\n      this.show();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-trigger]\") as HTMLElement;\n\n      if (closest && closest.dataset.stzhDialogTrigger === this.element.id) {\n        this.show();\n      }\n    }\n  }\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-dialog\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-dialog\",\n    });\n  }\n\n  private observer: MutationObserver;\n  private id: string;\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private handleDialogClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    if (target.dataset.stzhDialogClose) {\n      this.hide();\n    } else {\n      const closest = target.closest(\"[data-stzh-dialog-close]\");\n\n      if (closest) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleCloseButtonClick = () => {\n    this.hide();\n  };\n\n  private init = () => {\n    const actions = this.element.querySelector('stzh-actions[slot=\"actions\"]');\n\n    if (actions) {\n      setPropsIfNull(actions, {\n        variant: \"dialog\",\n      } as HTMLStzhActionsElement);\n    }\n  };\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    activeDialog = this;\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n\n    activeDialog = null;\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-dialog-${dialogCounter}`;\n    dialogCounter++;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"dialog\");\n    }\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n\n    this.init();\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-dialog\": true,\n            \"stzh-dialog--is-open\": this.open,\n            \"stzh-dialog--has-heading\": !!this.heading,\n            \"stzh-dialog--has-close-hidden\": this.hideClose,\n            [`stzh-dialog--size-${this.size}`]: !!this.size,\n          }}\n        >\n          <div class=\"stzh-dialog__backdrop\"></div>\n          <div class=\"stzh-dialog__content\">\n            <div\n              class=\"stzh-dialog__dialog\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role={this.a11yRole}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n              onClick={this.handleDialogClick}\n            >\n              <stzh-heading id={`${this.id}-heading`} class=\"stzh-dialog__heading\" level=\"2\">\n                {this.heading ? this.heading : \"Title\"}\n              </stzh-heading>\n\n              <div class=\"stzh-dialog__dialog-content\">\n                <slot></slot>\n              </div>\n\n              <div class=\"stzh-dialog__actions\">\n                <slot name=\"actions\"></slot>\n              </div>\n\n              {!this.hideClose && (\n                <stzh-button\n                  class=\"stzh-dialog__close-button\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"close\"\n                  iconOnly={true}\n                  onClick={this.handleCloseButtonClick}\n                  a11yLabel={this.localization.close}\n                  analyticsId={this.closeAnalyticsId || this.localization.close}\n                ></stzh-button>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-BfqihN6x.js → p-D_w8j389.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-VlIs_0mL.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-hyzEZfgL.js';
 
 const stzhRatioCss = () => `: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{--background-color:var(--stzh-ratio-background-color);--ratio:16 /
     9;--max-height:inherit;--overflow:inherit}:host ::slotted(*){position:absolute;width:100%;height:100%;inset:0;object-fit:cover}:host ::slotted(.stzh-card-searchresult__image-placeholder){display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--placeholder-image-color)}:host([fit=contain]) ::slotted(*){object-fit:contain}:host([portrait]:not([portrait=false])){--ratio:9 /
@@ -58,6 +58,6 @@ function defineCustomElement() {
 }
 
 export { StzhRatio as S, defineCustomElement as d };
-//# sourceMappingURL=p-BfqihN6x.js.map
+//# sourceMappingURL=p-D_w8j389.js.map
 
-//# sourceMappingURL=p-BfqihN6x.js.map
+//# sourceMappingURL=p-D_w8j389.js.map