@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta4

package/dist/stzh-components/{p-e63dfe12.entry.js → p-5b9b2425.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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 .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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
-//# sourceMappingURL=p-e63dfe12.entry.js.map
+import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-7e304ea3.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner",onClick:this.onClick},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType,onClick:this.onClick}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":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]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}: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 .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{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
+//# sourceMappingURL=p-5b9b2425.entry.js.map

package/dist/stzh-components/{p-e63dfe12.entry.js.map → p-5b9b2425.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","filled","label","class","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","href","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","nameWatcher","iconDisplay","response","fetch","pathMedia","status","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","setTimeout","a11yTitleWatcher","a11yTitle","svgHtml","iconId","title","querySelector","document","createElement","appendChild","innerHTML","outerHTML","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-grid;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n    --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\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  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\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 iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","filled","label","class","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","href","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","StzhIcon","nameWatcher","iconDisplay","response","fetch","pathMedia","status","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","setTimeout","a11yTitleWatcher","a11yTitle","svgHtml","iconId","title","querySelector","document","createElement","appendChild","innerHTML","outerHTML","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorGrey90};\n  display: inline-flex;\n\n  &[type=\"success\"] {\n    --background-color: #{$colorSuccess70};\n  }\n\n  &[type=\"warning\"] {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n  }\n\n  &[type=\"error\"] {\n    --background-color: #{$colorError60};\n  }\n\n  &[type=\"info\"] {\n    --background-color: #{$colorPrimary70};\n  }\n\n  &[filled][type=\"error\"] {\n    --background-color: #{$colorError70};\n  }\n}\n\n.stzh-badge {\n  @include badge;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n  tag: \"stzh-badge\",\n  styleUrl: \"stzh-badge.scss\",\n  scoped: true\n})\nexport class StzhBadge {\n  /** Text content of the badge */\n  @Prop() label: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n  render() {\n    const classes = {\n      \"stzh-badge\": true,\n      [`stzh-badge--type-${this.type}`]: !!this.type\n    };\n\n    return (\n      <Host filled={!!this.label}>\n        <div class={classes}>\n          {this.label}\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n@mixin button--size-default() {\n  --height: #{$formInputHeight};\n  --padding-top: calc(#{space('xsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n  --padding-left: #{space('xlarge')};\n  --padding-right: #{space('xlarge')};\n  --font-size: var(--stzh-font-centi-font-size);\n  --line-height: var(--stzh-font-centi-text-line-height);\n  --letter-spacing: normal;\n  --icon-size: #{iconSize('medium')};\n  --icon-toggle-size: 14.5px;\n\n  &:where([icon-only]:not([icon-only=\"false\"])) {\n    --icon-size: #{iconSize('large')};\n  }\n}\n\n@mixin button--size-small() {\n  --height: #{$formInputHeightSmall};\n  --padding-left: #{space('large')};\n  --padding-right: #{space('large')};\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n  --height: #{$formInputHeightTiny};\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n  --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --icon-size: #{iconSize('medium')};\n}\n\n:host {\n  @include button--size-default;\n  --color: var(--stzh-button-color, #{$colorWhite});\n  --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n  --border-width: 0px;\n  --border-color: transparent;\n  --border-radius: 0px;\n  --icon-text-margin: #{space('xsmall')};\n  --icon-toggle-color: currentColor;\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --white-space: var(--stzh-button-white-space, normal);\n  --box-shadow: none;\n  --cursor: pointer;\n\n  --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n  --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n  --hover-border-color: transparent;\n\n  display: inline-grid;\n  width: auto;\n  min-width: var(--height);\n  min-height: var(--height);\n  pointer-events: var(--stzh-button-pointer-events, auto);\n\n  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\n\n  &[icon-only]:not([icon-only=\"false\"]) {\n    --padding-top: 0;\n    --padding-bottom: 0;\n    --padding-left: 0;\n    --padding-right: 0;\n\n    width: var(--height);\n    height: var(--height);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[no-padding-left]:not([no-padding-left=\"false\"]) {\n    --padding-left: 0px;\n  }\n\n  &[no-padding-right]:not([no-padding-right=\"false\"]) {\n    --padding-right: 0px;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n    --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n    --background-color: transparent;\n\n    --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --hover-background-color: var(--background-color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-button-active-color, #{$colorWhite});\n    --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n    --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --color: var(--stzh-button-disabled-color, #{$colorWhite});\n    --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n    --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n    --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n    --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n    --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n  @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include button--size-default;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include button--size-small;\n    }\n\n    :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n      @include button--size-tiny;\n    }\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n  @include font('heavy');\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding-top: var(--padding-top);\n  padding-bottom: var(--padding-bottom);\n  padding-left: var(--padding-left);\n  padding-right: var(--padding-right);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: var(--cursor);\n  text-decoration-line: none;\n  width: 100%;\n  height: 100%;\n  border-radius: var(--border-radius);\n  text-align: left;\n  box-shadow: var(--box-shadow);\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper,\n  &__toggle-icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n    width: auto;\n    height: 1em;\n  }\n\n  &__toggle-icon-wrapper {\n    width: var(--icon-size);\n    height: var(--icon-size);\n  }\n\n  &__toggle-icon {\n    position: relative;\n    display: block;\n    width: var(--icon-toggle-size);\n    height: var(--icon-toggle-size);\n\n    &::before,\n    &::after {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      content: '';\n      display: block;\n      width: var(--icon-toggle-size);\n      height: 2px;\n      transition-property: transform, background-color;\n      transition-duration: 500ms;\n      transform-origin: top left;\n      background-color: var(--icon-toggle-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n\n    &::before {\n      transform: rotate(180deg) translate(-50%, -50%);\n    }\n\n    &::after {\n      transform: rotate(90deg) translate(-50%, -50%);\n    }\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorSecondary60;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorSecondary60;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Is expanded */\n\n  &--is-expanded &__toggle-icon {\n    &::before,\n    &::after {\n      transform: rotate(0) translate(-50%, -50%);\n    }\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n\n  /* Default */\n\n  &--default.has-focus {\n    outline: var(--stzh-flyingfocus-color) solid 3px;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset, if type is radio) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** The name of the input element (if type is button or radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is button or radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Whether padding left should be removed */\n  @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n  /** Whether padding right should be removed */\n  @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n  /** Access key of button (usually a number e.g. 1) */\n  @Prop() buttonAccesskey: string;\n\n  /** ID of button element */\n  @Prop() buttonId: string;\n\n  /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n  @Prop({ reflect: true }) showToggleIcon: boolean = false;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\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  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon &&\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n        }\n        {!this.icon && this.showToggleIcon &&\n          <div class=\"stzh-button__toggle-icon-wrapper\">\n            <div class=\"stzh-button__toggle-icon\"></div>\n          </div>\n        }\n        {!this.icon && !this.showToggleIcon &&\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div\n        class=\"stzh-button__text\"\n        ref={(el) => (this.text = el as HTMLDivElement)}\n      >\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        {this.label ? this.label : <slot></slot>}\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\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 iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      \"stzh-button--is-expanded\": this.a11yExpanded,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            id={this.buttonId}\n            accessKey={this.buttonAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                defaultChecked={this.defaultChecked}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                aria-current={this.a11yCurrent || null}\n                id={this.buttonId}\n                accessKey={this.buttonAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              aria-current={this.a11yCurrent || null}\n              id={this.buttonId}\n              accessKey={this.buttonAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n  --size: #{iconSize()};\n  --color: #{$iconColor};\n  --vertical-align: #{$iconVerticalAlign};\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  color: var(--color);\n  vertical-align: var(--vertical-align);\n  width: var(--size);\n  height: var(--size);\n}\n\n.stzh-icon {\n  display: none;\n\n  &__svg {\n    width: var(--size);\n    height: var(--size);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Watch,\n  State,\n  Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n@Component({\n  tag: \"stzh-icon\",\n  styleUrl: \"stzh-icon.scss\",\n  shadow: true\n})\nexport class StzhIcon {\n  /**\n   * Icon which should be displayed\n   * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n   */\n  @Prop() name: string = \"\";\n\n  /**\n   * Hidden icon title for screenreader\n   * (usually not needed when e.g. inside links or buttons that have text)\n  */\n  @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n  @Element() element: HTMLStzhIconElement;\n\n  @State() svgHtml: string = \"\";\n  @State() iconDisplay: string = \"none\";\n\n  @Watch(\"name\")\n  async nameWatcher(name: string) {\n    this.iconDisplay = \"none\";\n\n    if (name) {\n      const response = await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);\n\n      if (response.status === 200) {\n        const svgString = await response.text();\n\n        const parser = new DOMParser();\n        const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n\n        this.svgElement = svgDoc.documentElement as unknown as SVGElement;\n        this.svgElement.classList.add('stzh-icon__svg');\n\n        // for some obscure reason we need to delay showing the icon in safari,\n        // otherwise the icon doesn't show up randomly\n        // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n        window.setTimeout(() => {\n          this.iconDisplay = \"contents\";\n        }, 0);\n\n        this.a11yTitleWatcher(this.a11yTitle);\n      } else {\n        this.svgElement = null;\n        this.svgHtml = '';\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n    this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n    this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n    let title = this.svgElement.querySelector('title');\n\n    if (!title) {\n      title = document.createElement('title');\n      title.id = `${this.iconId}-title`;\n      this.svgElement.appendChild(title);\n    }\n\n    title.innerHTML = a11yTitle;\n    this.svgHtml = this.svgElement.outerHTML;\n  }\n\n  private svgElement: SVGElement | null;\n  private iconId: string;\n\n  async componentWillLoad() {\n    this.iconId = `stzh-icon-${iconCounter++}`;\n    this.nameWatcher(this.name);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-bb87a6e2.entry.js → p-75fec3cd.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,F as n,a as s,g as h}from"./p-c7bfac7a.js";import{h as l}from"./p-7e304ea3.js";import"./p-9b063923.js";const a='@charset "UTF-8";.sc-stzh-link-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-link-h{display:none}.sc-stzh-link-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-link-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h .has-focus.sc-stzh-link{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link{outline-style:none !important}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link::-moz-focus-inner{border:0 !important}.sc-stzh-link-h{--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--color:var(--stzh-link-color);--text-decoration-line:var(--stzh-link-text-decoration-line);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--icon-size:var(--stzh-link-icon-size);--height:var(--stzh-link-height, 40px);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:var(--stzh-link-hover-text-decoration-line);color:var(--color);display:inline-grid;width:auto;min-height:var(--height);pointer-events:var(--stzh-link-pointer-events, auto)}@media screen and (min-width: 900px){.sc-stzh-link-h{--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h{--height:var(--stzh-link-height, auto)}}[height=auto].sc-stzh-link-h{--height:var(--stzh-link-auto-height, auto)}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:grid}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-link-secondary-color);--hover-color:var(--stzh-link-secondary-hover-color)}[variant=back].sc-stzh-link-h{--text-decoration-line:none;--hover-color:var(--color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey60);--hover-color:var(--stzh-color-grey60)}.sc-stzh-link-h:where([size="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}.sc-stzh-link-h:where([size="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px) and (min-width: 900px){.sc-stzh-link-h:where([size-small="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px) and (min-width: 900px){.sc-stzh-link-h:where([size-medium="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px) and (min-width: 900px){.sc-stzh-link-h:where([size-large="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px) and (min-width: 900px){.sc-stzh-link-h:where([size-ultra="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}.stzh-link.sc-stzh-link{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);font-family:inherit;position:relative;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link__inner.sc-stzh-link{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{--stzh-icon-size:var(--icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{--stzh-base-color:initial;-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';const r=class{constructor(e){t(this,e);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.link.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=t=>{const i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.size="default";this.height="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";this.linkAccesskey=undefined;this.linkId=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.a11yCurrent=undefined;this.analyticsId=undefined}renderIcon(){return e("div",{class:"stzh-link__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-link__icon",name:this.icon}):e("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&e("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))}renderContent(){return e("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&e("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&e("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),e("div",{ref:t=>this.text=t},this.label?this.label:e("slot",null)))}renderInner(t){return e(n,null,e("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&e("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"link")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.link)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=l(this.element,"icon")||!!this.icon;const i={"stzh-link":true,"stzh-link--has-icon":t,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active,[`stzh-link--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-link--align-${this.textAlign}`]:!!this.textAlign,[`stzh-link--${this.variant}`]:!!this.variant};return e(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?e("a",{ref:t=>this.link=t,href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:i,id:this.linkId,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):e("button",{ref:t=>this.link=t,class:i,type:this.type,disabled:this.disabled,id:this.linkId,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))}get element(){return h(this)}};r.style=a;export{r as stzh_link};
-//# sourceMappingURL=p-bb87a6e2.entry.js.map
+import{r as t,c as i,h as e,F as n,a as s,g as h}from"./p-c7bfac7a.js";import{h as l}from"./p-7e304ea3.js";import"./p-9b063923.js";const a='@charset "UTF-8";.sc-stzh-link-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-link-h{display:none}.sc-stzh-link-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-link-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-link-h *.sc-stzh-link,.sc-stzh-link-h *.sc-stzh-link::before,.sc-stzh-link-h *.sc-stzh-link::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-link-h .has-focus.sc-stzh-link{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link{outline-style:none !important}.sc-stzh-link-h .stzh-fylingfocus-focused.sc-stzh-link::-moz-focus-inner{border:0 !important}.sc-stzh-link-h{--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal;--color:var(--stzh-link-color);--text-decoration-line:var(--stzh-link-text-decoration-line);--icon-wrapper-height:var(--stzh-link-icon-wrapper-height);--icon-size:var(--stzh-link-icon-size);--height:var(--stzh-link-height, 40px);--hover-color:var(--stzh-link-hover-color);--hover-text-decoration-line:var(--stzh-link-hover-text-decoration-line);color:var(--color);display:inline-grid;width:auto;min-height:var(--height);pointer-events:var(--stzh-link-pointer-events, auto)}@media screen and (min-width: 900px){.sc-stzh-link-h{--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h{--height:var(--stzh-link-height, auto)}}[height=auto].sc-stzh-link-h{--height:var(--stzh-link-auto-height, auto)}[fullwidth].sc-stzh-link-h:not([fullwidth=false]){width:100%;display:grid}[variant=secondary].sc-stzh-link-h{--color:var(--stzh-link-secondary-color);--hover-color:var(--stzh-link-secondary-hover-color)}[variant=back].sc-stzh-link-h{--text-decoration-line:none;--hover-color:var(--color)}[active].sc-stzh-link-h:not([active=false]){--color:var(--hover-color)}[disabled].sc-stzh-link-h:not([disabled=false]){--color:var(--stzh-color-grey60);--hover-color:var(--stzh-color-grey60)}.sc-stzh-link-h:where([size="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}.sc-stzh-link-h:where([size="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px) and (min-width: 900px){.sc-stzh-link-h:where([size-small="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 600px){.sc-stzh-link-h:where([size-small="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px) and (min-width: 900px){.sc-stzh-link-h:where([size-medium="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 900px){.sc-stzh-link-h:where([size-medium="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px) and (min-width: 900px){.sc-stzh-link-h:where([size-large="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1260px){.sc-stzh-link-h:where([size-large="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="default"]){--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px) and (min-width: 900px){.sc-stzh-link-h:where([size-ultra="default"]){--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="small"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal}}@media screen and (min-width: 1600px){.sc-stzh-link-h:where([size-ultra="inherit"]){--font-size:inherit;--line-height:inherit;--letter-spacing:inherit}}.stzh-link.sc-stzh-link{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);font-family:inherit;position:relative;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;color:var(--color);transition:color var(--stzh-base-transition-animation-speed);cursor:pointer;width:100%;-webkit-text-decoration-line:none;text-decoration-line:none;background-color:transparent;padding:0;border-radius:var(--stzh-button-border-radius);text-align:left}.stzh-link.sc-stzh-link:hover{color:var(--hover-color)}.stzh-link.sc-stzh-link:hover .stzh-link__text.sc-stzh-link{-webkit-text-decoration-line:var(--hover-text-decoration-line);text-decoration-line:var(--hover-text-decoration-line)}.stzh-link__vhidden.sc-stzh-link{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link__inner.sc-stzh-link{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-link__icon-wrapper.sc-stzh-link{--stzh-icon-size:var(--icon-size);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:var(--icon-wrapper-height)}.stzh-link__text.sc-stzh-link{--stzh-base-color:initial;-webkit-text-decoration-line:var(--text-decoration-line);text-decoration-line:var(--text-decoration-line)}.stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xxsmall)}.stzh-link__badge.sc-stzh-link{position:absolute;z-index:1;top:0;right:0}.stzh-link--has-icon-only.sc-stzh-link .stzh-link__text.sc-stzh-link{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-link--badge-position-link.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:static}.stzh-link__badge.sc-stzh-link,.stzh-link--badge-position-link.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xxsmall) * -1);right:calc(var(--stzh-space-large) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link{position:relative}.stzh-link--badge-position-icon.stzh-link--has-icon.sc-stzh-link .stzh-link__badge.sc-stzh-link{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge.sc-stzh-link .stzh-link__icon-wrapper.sc-stzh-link+.stzh-link__text.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-small)}.stzh-link--align-left.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-start}.stzh-link--align-right.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:flex-end}.stzh-link--align-center.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:center}.stzh-link--align-space-between.sc-stzh-link .stzh-link__inner.sc-stzh-link{justify-content:space-between}.stzh-link--is-disabled.sc-stzh-link{cursor:not-allowed}';const r=class{constructor(e){t(this,e);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.link.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const i=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhFocus.emit({component:"stzh-link",originalEvent:t})};this.onBlur=t=>{const i=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(i);this.stzhBlur.emit({component:"stzh-link",originalEvent:t})};this.localization=undefined;this.icon="";this.iconPosition="left";this.height="default";this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.variant="default";this.fullwidth=false;this.textAlign="default";this.badge="";this.badgeType="default";this.badgeEmpty=false;this.badgePosition="icon";this.disabled=false;this.active=false;this.iconOnly=false;this.label="";this.linkAccesskey=undefined;this.linkId=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yTabindex=undefined;this.a11yCurrent=undefined;this.analyticsId=undefined}renderIcon(){return e("div",{class:"stzh-link__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-link__icon",name:this.icon}):e("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&e("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))}renderContent(){return e("div",{class:"stzh-link__text"},this.rel&&this.rel.includes("external")&&e("div",{class:"stzh-link__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&e("div",{class:"stzh-link__vhidden"},this.localization.$globals.downloadLinkLabel),e("div",{ref:t=>this.text=t},this.label?this.label:e("slot",null)))}renderInner(t){return e(n,null,e("div",{class:"stzh-link__inner"},this.iconPosition==="left"&&this.renderIcon(),this.renderContent(),this.iconPosition==="right"&&this.renderIcon()),(this.badge||this.badgeEmpty)&&!t&&e("stzh-badge",{class:"stzh-link__badge",label:this.badge,type:this.badgeType}))}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"link")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.link)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=l(this.element,"icon")||!!this.icon;const i={"stzh-link":true,"stzh-link--has-icon":t,"stzh-link--has-icon-only":this.iconOnly,"stzh-link--has-badge":!!this.badge,"stzh-link--is-fullwidth":this.fullwidth,"stzh-link--is-disabled":this.disabled,"stzh-link--is-active":this.active,[`stzh-link--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-link--align-${this.textAlign}`]:!!this.textAlign,[`stzh-link--${this.variant}`]:!!this.variant};return e(s,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?e("a",{ref:t=>this.link=t,href:this.disabled?null:this.href,download:this.download,rel:this.rel,target:this.target,class:i,id:this.linkId,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)):e("button",{ref:t=>this.link=t,class:i,type:this.type,disabled:this.disabled,id:this.linkId,accessKey:this.linkAccesskey,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,"aria-disabled":typeof this.a11yDisabled!=="undefined"?this.a11yDisabled?"true":"false":null,"aria-expanded":typeof this.a11yExpanded!=="undefined"?this.a11yExpanded?"true":"false":null,"aria-controls":this.a11yControls||null,"aria-current":this.a11yCurrent||null,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner(t)))}get element(){return h(this)}};r.style=a;export{r as stzh_link};
+//# sourceMappingURL=p-75fec3cd.entry.js.map

package/dist/stzh-components/{p-bb87a6e2.entry.js.map → p-75fec3cd.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","badgePosition","textAlign","variant","Host","tabindex","href","target","id","linkId","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","a11yCurrent"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include link--size-default;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include link--size-small;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n      @include link--size-inherit;\n    }\n  }\n}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);;\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent,\n  StzhLinkSize,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhLinkCss","StzhLink","this","focusedByInput","onRootFocus","link","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","renderIcon","h","class","icon","name","badge","badgeEmpty","label","type","badgeType","renderContent","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","ref","el","text","renderInner","iconUsed","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","innerText","render","hasSlot","classes","iconOnly","fullwidth","disabled","active","badgePosition","textAlign","variant","Host","tabindex","href","target","id","linkId","accessKey","linkAccesskey","a11yTabindex","a11yLabel","a11yDescribedby","a11yDisabled","a11yExpanded","a11yControls","a11yCurrent"],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include link--size-default;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include link--size-small;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n      @include link--size-inherit;\n    }\n  }\n}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);;\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent,\n  StzhLinkSize,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAc,mjS,MC8BPC,EAAQ,M,iGAwHXC,KAAAC,eAA0B,MAE1BD,KAAAE,YAAc,KACpB,IAAKF,KAAKC,eAAgB,CACxBD,KAAKG,KAAKC,O,CAGZJ,KAAKC,eAAiB,KAAK,EAGrBD,KAAAK,QAAWC,IACjBN,KAAKC,eAAiB,KAEtB,MAAMM,EAAa,IAAIC,WAAW,QAAS,CACzCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcP,GAC3BP,KAAKe,UAAUC,KAAK,CAClBC,UAAW,YACXC,cAAeZ,GACf,EAGIN,KAAAmB,OAAUb,IAChB,MAAMc,EAAY,IAAIZ,WAAW,OAAQ,CACvCC,KAAMC,OACNC,QAAS,MACTC,WAAY,QAGdZ,KAAKa,QAAQC,cAAcM,GAC3BpB,KAAKqB,SAASL,KAAK,CACjBC,UAAW,YACXC,cAAeZ,GACf,E,sCAxJmB,G,kBAGmC,O,YAGJ,U,UAGR,U,+GAevB,G,+BAME,G,kCAMqB,S,aAGuB,U,eAGvB,M,eAGkD,U,WAGxE,G,eAG4B,U,gBAGL,M,mBAGW,O,cAGb,M,YAGF,M,cAGE,M,WAGrB,G,iGAY2C,G,sKA0E3D,UAAAgB,GACN,OACEC,EAAA,OAAKC,MAAM,2BACRxB,KAAKyB,KACJF,EAAA,aAAWC,MAAM,kBAAkBE,KAAM1B,KAAKyB,OAE9CF,EAAA,QAAMG,KAAK,UAEX1B,KAAK2B,OAAS3B,KAAK4B,aACnBL,EAAA,cAAYC,MAAM,mBAAmBK,MAAO7B,KAAK2B,MAAOG,KAAM9B,KAAK+B,Y,CAMnE,aAAAC,GACN,OACET,EAAA,OAAKC,MAAM,mBACRxB,KAAKiC,KAAOjC,KAAKiC,IAAIC,SAAS,aAAeX,EAAA,OAAKC,MAAM,sBAAsBxB,KAAKmC,aAAaC,SAASC,mBACzGrC,KAAKsC,UAAYf,EAAA,OAAKC,MAAM,sBAAsBxB,KAAKmC,aAAaC,SAASG,mBAC9EhB,EAAA,OAAKiB,IAAMC,GAAQzC,KAAK0C,KAAOD,GAAwBzC,KAAK6B,MAAQ7B,KAAK6B,MAAQN,EAAA,c,CAK/E,WAAAoB,CAAYC,GAClB,OACErB,EAACsB,EAAQ,KACPtB,EAAA,OAAKC,MAAM,oBACRxB,KAAK8C,eAAiB,QAAU9C,KAAKsB,aACrCtB,KAAKgC,gBACLhC,KAAK8C,eAAiB,SAAW9C,KAAKsB,eAEvCtB,KAAK2B,OAAS3B,KAAK4B,cAAgBgB,GACnCrB,EAAA,cAAYC,MAAM,mBAAmBK,MAAO7B,KAAK2B,MAAOG,KAAM9B,KAAK+B,Y,CAM3E,uBAAMgB,GACJ,IAAK/C,KAAKmC,aAAc,CACtBnC,KAAKmC,mBAAqBzB,OAAOsC,eAAeC,MAAMC,kBAAkBlD,KAAKa,QAAS,O,EAI1F,kBAAAsC,GACEC,uBAAsB,K,OACpBC,EAAArD,KAAKG,QAAI,MAAAkD,SAAA,SAAAA,EAAEC,aAAa,cAAetD,KAAKuD,aAAevD,KAAK0C,KAAKc,UAAU,G,CAInF,MAAAC,GACE,MAAMb,EAAWc,EAAQ1D,KAAKa,QAAS,WAAab,KAAKyB,KACzD,MAAMkC,EAAU,CACd,YAAa,KACb,sBAAuBf,EACvB,2BAA4B5C,KAAK4D,SACjC,yBAA0B5D,KAAK2B,MAC/B,0BAA2B3B,KAAK6D,UAChC,yBAA0B7D,KAAK8D,SAC/B,uBAAwB9D,KAAK+D,OAC7B,CAAC,6BAA6B/D,KAAKgE,mBAAoBhE,KAAKgE,cAC5D,CAAC,oBAAoBhE,KAAKiE,eAAgBjE,KAAKiE,UAC/C,CAAC,cAAcjE,KAAKkE,aAAclE,KAAKkE,SAGzC,OACE3C,EAAC4C,EAAI,CAACC,SAAUpE,KAAK8D,SAAW,KAAO,KAAMzD,QAASL,KAAKE,aACxDF,KAAKqE,KACJ9C,EAAA,KACEiB,IAAMC,GAAQzC,KAAKG,KAAOsC,EAC1B4B,KAAMrE,KAAK8D,SAAW,KAAO9D,KAAKqE,KAClC/B,SAAUtC,KAAKsC,SACfL,IAAKjC,KAAKiC,IACVqC,OAAQtE,KAAKsE,OACb9C,MAAOmC,EACPY,GAAIvE,KAAKwE,OACTC,UAAWzE,KAAK0E,cAChBN,SAAUpE,KAAK2E,aAAY,aACf3E,KAAK4E,WAAa,KAAI,mBAChB5E,KAAK6E,iBAAmB,KAAI,uBACxB7E,KAAK8E,eAAiB,YACvC9E,KAAK8E,aAAe,OAAS,QAAW,KAAI,uBAC3B9E,KAAK+E,eAAiB,YACvC/E,KAAK+E,aAAe,OAAS,QAAW,KAAI,gBAClC/E,KAAKgF,cAAgB,KAAI,eAC1BhF,KAAKiF,aAAe,KAClC5E,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK2C,YAAYC,IAGpBrB,EAAA,UACEiB,IAAMC,GAAQzC,KAAKG,KAAOsC,EAC1BjB,MAAOmC,EACP7B,KAAM9B,KAAK8B,KACXgC,SAAU9D,KAAK8D,SACfS,GAAIvE,KAAKwE,OACTC,UAAWzE,KAAK0E,cAChBN,SAAUpE,KAAK2E,aAAY,aACf3E,KAAK4E,WAAa,KAAI,mBAChB5E,KAAK6E,iBAAmB,KAAI,uBACxB7E,KAAK8E,eAAiB,YACvC9E,KAAK8E,aAAe,OAAS,QAAW,KAAI,uBAC3B9E,KAAK+E,eAAiB,YACvC/E,KAAK+E,aAAe,OAAS,QAAW,KAAI,gBAClC/E,KAAKgF,cAAgB,KAAI,eAC1BhF,KAAKiF,aAAe,KAClC5E,QAASL,KAAKK,QACdc,OAAQnB,KAAKmB,QAEZnB,KAAK2C,YAAYC,I"}

package/dist/stzh-components/p-78eaea8d.js

@@ -0,0 +1,2 @@
+const t="@oiz/stzh-components";const n="3.0.0-beta4";const o=t.substring(t.indexOf("/")+1);const e=t=>{const n=document.querySelector("[autofocus]");if(window.stzhComponents.fixAutofocus&&!document.location.hash&&n&&t.detail.namespace===o&&n.tagName.toLowerCase().indexOf("stzh-")===0&&"focus"in n){n.focus()}else if(window.stzhComponents.fixHashfocus&&document.location.hash){const t=document.querySelector(document.location.hash);if(t){t.scrollIntoView()}}};function s(){window.addEventListener("appload",e)}function i(){const t={threshold:1};const n=t=>{t.forEach((t=>{let n=0;if(t.intersectionRatio<1){n=window.innerWidth-document.documentElement.clientWidth}document.documentElement.style.setProperty("--stzh-scrollbar-width",n+"px");document.documentElement.style.setProperty("--stzh-scrollbar-active",n>0?"1":"0")}))};const o=new IntersectionObserver(n,t);o.observe(document.body)}function a(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.format(t,n)}function r(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parse(t,n)}function c(t,n,o="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:e,$globals:s}=window.stzhComponents.translations;const i=f(e,s);return i.formatSpan(t,n,o)}function l(t,n="datetime"){if(!window.stzhComponents.translations){console.log("Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`");return}const{$formats:o,$globals:e}=window.stzhComponents.translations;const s=f(o,e);return s.parseSpan(t,n)}function f(t,n){const o=function(t,o){if(!o||!(o instanceof Date)||isNaN(o.getTime())){return""}let e=o.getDate().toString(10);let s=e;let i=(o.getMonth()+1).toString(10);let a=i;let r=o.getFullYear().toString(10);let c=o.getHours().toString(10);let l=c;let f=o.getMinutes().toString(10);let u=n.monthNames[o.getMonth()];let d=n.monthNamesShort[o.getMonth()];let w=n.dayNames[o.getDay()];let m=n.dayNamesShort[o.getDay()];if(o.getMonth()<9){a=`0${a}`}if(o.getDate()<10){s=`0${s}`}if(o.getHours()<10){l=`0${l}`}if(o.getMinutes()<10){f=`0${f}`}return t.replace(/\{j\}/g,e).replace(/\{d\}/g,s).replace(/\{D\}/g,m).replace(/\{l\}/g,w).replace(/\{n\}/g,i).replace(/\{m\}/g,a).replace(/\{F\}/g,u).replace(/\{M\}/g,d).replace(/\{Y\}/g,r).replace(/\{H\}/g,l).replace(/\{G\}/g,c).replace(/\{i\}/g,f)};const e=function(t,n){if(!n){return}const o=new RegExp(t);const e=n.match(o);if(e){const{groups:t}=e;const n=parseInt(t.Y||"",10);const o=parseInt(t.n||t.m||"",10);const s=parseInt(t.j||t.d||"",10);const i=parseInt(t.G||t.H||"",10);const a=parseInt(t.i||"",10);if(!isNaN(n)&&(n<1e3||n>9999)){return}if(!isNaN(o)&&(o<1||o>12)){return}if(!isNaN(s)&&(s<1||s>31)){return}if(!isNaN(i)&&(i<0||i>23)){return}if(!isNaN(a)&&(a<0||a>59)){return}const r=new Date(!isNaN(n)?n:null,!isNaN(o)?o-1:null,!isNaN(s)?s:null,!isNaN(i)?i:null,!isNaN(a)?a:null);if(r.getMonth()+1!==o){return}return r}};const s={format:function(n,e="datetime"){const s={...t[e],...window.stzhComponents?.formats[e]||{}};if(typeof s.format==="string"){return o(s.format,n)}else{return s.format(n)}},parse:function(n,o="datetime"){const s={...t[o],...window.stzhComponents?.formats[o]||{}};if(typeof s.parse==="string"){return e(s.parse,n)}else{return s.parse(n)}},formatSpan:function(t,o,e="datetime"){let s=t;let i=o;if(t instanceof Date&&!isNaN(t.getTime())){s=this.format(t,e)}if(o instanceof Date&&!isNaN(o.getTime())){i=this.format(o,e)}let a=n.dateRange;if(e.startsWith("time")){a=n.timeRange}return s+(i&&(!(i instanceof Date)||i instanceof Date&&!isNaN(t.getTime()))?a+i:"")},parseSpan:function(t,o){let e=n.dateRange;if(o.startsWith("time")){e=n.timeRange}const s=t.split(e);const i=this.parse(s[0],o);const a=this.parse(s[1],o);return[i,a,e]}};return s}function u(t){const n=t.closest("[lang]");const o=n&&n.lang.split("-")[0];if(window.stzhComponents.supportedLocales.indexOf(o)===-1||!o){return window.stzhComponents.defaultLocale}else{return o}}async function d(t,n){const o=u(t);const e=JSON.parse(sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`));if(window.stzhComponents.cacheTranslations&&window.stzhComponents.version.match(/-dev-snapshot/i)===null&&e&&Object.keys(e).length>0){return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}try{const t=await fetch(`${window.stzhComponents.pathTranslations}/${o}.json`);if(t.ok){const e=await t.json();sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${o}`,JSON.stringify(e));return{...e[n]||{},$globals:e.$globals,$locale:e.$code,$formats:e.$formats,$formatsIso:e.$formatsIso,$formatsLegacy:e.$formatsLegacy}}}catch(t){console.error(`Error loading locale: ${o}`,t)}}const w=Object.freeze({__proto__:null,format:a,parse:r,formatSpan:c,parseSpan:l,createFormatParseAdapter:f,getLocale:u,fetchTranslations:d});function m(){window.stzhComponents=Object.assign(Object.assign({defaultLocale:"de",pathMedia:"/",pathTranslations:"/",cacheTranslations:true,formats:{},translations:null,fixAutofocus:true,fixHashfocus:true},window.stzhComponents||{}),{version:n,supportedLocales:["de","en"],utils:w});if(window.stzhComponents.translations===null){window.stzhComponents.translationsLoading=d(document.documentElement).then((t=>{window.stzhComponents.translations=t})).catch((t=>{console.error("Translations couldn't load:",t)}))}s();i()}const p=m;export{p as g};
+//# sourceMappingURL=p-78eaea8d.js.map