@oiz/stzh-components 3.8.0-beta1 → 3.8.0

package/dist/stzh-components/{p-f156650a.entry.js.map → p-8c5fb0e2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhEventdataCss","StzhEventdata","render","classes","h","Host","class","this","label","name"],"sources":["src/components/stzh-eventdata/stzh-eventdata.scss?tag=stzh-eventdata&encapsulation=scoped","src/components/stzh-eventdata/stzh-eventdata.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-eventdata {\n  display: flex;\n  flex-direction: column;\n  row-gap: space('xsmall');\n  column-gap: space('medium');\n\n  @include mq($from: small) {\n    flex-direction: row;\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p1');\n    flex-shrink: 0;\n\n    @include mq($from: small) {\n      min-width: 160px;\n    }\n\n    @include mq($from: medium) {\n      min-width: 174px;\n    }\n\n    @include mq($from: large) {\n      min-width: 182px;\n    }\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    row-gap: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for multiple elements\n * @slot label - Slot for label (alternative for label property)\n */\n@Component({\n  tag: \"stzh-eventdata\",\n  styleUrl: \"stzh-eventdata.scss\",\n  scoped: true\n})\nexport class StzhEventdata {\n  /** Label (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  @Element() element: HTMLStzhEventdataElement;\n\n  render() {\n    const classes = {\n      \"stzh-eventdata\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-eventdata__label\">\n            {this.label ? this.label : <slot name=\"label\"></slot>}\n          </div>\n          <div class=\"stzh-eventdata__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,kiF,MCiBZC,EAAa,M,oCAEA,E,CAIxB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,yBACRC,KAAKC,MAAQD,KAAKC,MAAQJ,EAAA,QAAMK,KAAK,WAExCL,EAAA,OAAKE,MAAM,2BACTF,EAAA,e"}
+{"version":3,"names":["stzhEventdataCss","StzhEventdata","render","classes","h","Host","class","this","label","name"],"sources":["src/components/stzh-eventdata/stzh-eventdata.scss?tag=stzh-eventdata&encapsulation=scoped","src/components/stzh-eventdata/stzh-eventdata.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-eventdata {\n  display: flex;\n  flex-direction: column;\n  row-gap: space('xsmall');\n  column-gap: space('medium');\n\n  &__label {\n    @include font('heavy');\n    @include fontCurve('p1');\n    flex-shrink: 0;\n\n    @include mq($from: small) {\n      min-width: 160px;\n    }\n\n    @include mq($from: medium) {\n      min-width: 174px;\n    }\n\n    @include mq($from: large) {\n      min-width: 182px;\n    }\n  }\n\n  &__content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    row-gap: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for multiple elements\n * @slot label - Slot for label (alternative for label property)\n */\n@Component({\n  tag: \"stzh-eventdata\",\n  styleUrl: \"stzh-eventdata.scss\",\n  scoped: true\n})\nexport class StzhEventdata {\n  /** Label (use label slot as alternative) */\n  @Prop() label: string = \"\";\n\n  @Element() element: HTMLStzhEventdataElement;\n\n  render() {\n    const classes = {\n      \"stzh-eventdata\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-eventdata__label\">\n            {this.label ? this.label : <slot name=\"label\"></slot>}\n          </div>\n          <div class=\"stzh-eventdata__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,u8E,MCiBZC,EAAa,M,oCAEA,E,CAIxB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,OAAKE,MAAM,yBACRC,KAAKC,MAAQD,KAAKC,MAAQJ,EAAA,QAAMK,KAAK,WAExCL,EAAA,OAAKE,MAAM,2BACTF,EAAA,e"}

package/dist/stzh-components/p-9f91ca1f.entry.js

@@ -0,0 +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-ebd6dda5.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,[stzh-hidden].sc-stzh-badge-h{display:none}.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||s("slot",null)))}};a.style=h;const c='.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,[stzh-hidden].sc-stzh-button-h{display:none}.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-flex;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))}[active][variant=secondary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[active][variant=tertiary].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[active][variant=tertiary-plain].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--background-color:transparent}[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;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%;min-height:100%;margin:0;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);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;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button--not-hyphenated.sc-stzh-button .stzh-button__text.sc-stzh-button{hyphens:none}.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;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);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.stzhClick=e(this,"stzhClick",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()}else{if(this.disableOnClick){this.disabled=true}this.stzhClick.emit({component:"stzh-button",originalEvent:t,href:this.href})}};this.localization=undefined;this.badge="";this.noHyphenation=false;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.disableOnClick=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"},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}))}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--not-hyphenated":this.noHyphenation,[`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],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .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)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=new Map;const b=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){if(u.has(t)){this.svgHtml=await u.get(t);this.updateAccessibilityAttributes();this.showIcon()}else{const s=fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`).then((t=>{if(t.status===200){return t.text()}throw new Error("Failed to fetch icon")})).then((t=>{const s=new DOMParser;const o=s.parseFromString(t,"image/svg+xml");const e=o.documentElement;e.classList.add("stzh-icon__svg");return e.outerHTML}));u.set(t,s);this.svgHtml=await s;this.updateAccessibilityAttributes();this.showIcon()}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){if(!this.svgElement)return;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++}`;await this.nameWatcher(this.name)}updateAccessibilityAttributes(){this.a11yTitleWatcher(this.a11yTitle)}showIcon(){window.setTimeout((()=>{this.iconDisplay="contents"}),0)}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"]}}};b.style=d;export{a as stzh_badge,l as stzh_button,b as stzh_icon};
+//# sourceMappingURL=p-9f91ca1f.entry.js.map

package/dist/stzh-components/p-9f91ca1f.entry.js.map

@@ -0,0 +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","disableOnClick","stzhClick","href","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","noHyphenation","effect","textAlign","variant","tabindex","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","iconCache","Map","StzhIcon","nameWatcher","iconDisplay","has","svgHtml","get","updateAccessibilityAttributes","showIcon","fetchSvgPromise","fetch","pathMedia","then","response","status","Error","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","outerHTML","set","a11yTitleWatcher","a11yTitle","iconId","title","querySelector","document","createElement","appendChild","innerHTML","setTimeout","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 || <slot></slot>}\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-flex;\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\n  &[active][variant=\"secondary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n  }\n\n  &[active][variant=\"tertiary\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n  }\n\n  &[active][variant=\"tertiary-plain\"]:not([active=\"false\"]) {\n    --color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n    --background-color: transparent;\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  min-height: 100%;\n  margin: 0;\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  &--not-hyphenated &__text {\n    hyphens: none;\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 { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop } from '@stencil/core';\n\nimport {\n  StzhBadgeType,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent,\n  StzhButtonClickEvent,\n  StzhButtonFocusEvent,\n  StzhButtonSize,\n  StzhButtonVariant,\n  StzhLocaleComponent,\n} from '../../index';\n\nimport { hasSlot } from '../../utils/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  /** Disable hyphenation for text inside button */\n  @Prop() noHyphenation: boolean = false;\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 (above small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n  /** Size variant (above medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n  /** Size variant (above large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n  /** Size variant (above 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 to disable the button on click or not */\n  @Prop() disableOnClick: 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  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\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    } else {\n      if (this.disableOnClick) {\n        this.disabled = true;\n      }\n      this.stzhClick.emit({\n        component: 'stzh-button',\n        originalEvent: event,\n        href: this.href,\n      });\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') &&\n          <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 class=\"stzh-button__inner\">\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          ></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--not-hyphenated': this.noHyphenation,\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  @media print {\n    -webkit-print-color-adjust: exact;\n    print-color-adjust: exact;\n  }\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// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\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      if (iconCache.has(name)) {\n        this.svgHtml = await iconCache.get(name)!;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      } else {\n        const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n          .then(response => {\n            if (response.status === 200) {\n              return response.text();\n            }\n            throw new Error('Failed to fetch icon');\n          })\n          .then(svgString => {\n            const parser = new DOMParser();\n            const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n            const svgElement = svgDoc.documentElement as unknown as SVGElement;\n            svgElement.classList.add('stzh-icon__svg');\n\n            return svgElement.outerHTML;\n          });\n\n        iconCache.set(name, fetchSvgPromise);\n\n        this.svgHtml = await fetchSvgPromise;\n        this.updateAccessibilityAttributes();\n        this.showIcon();\n      }\n    } else {\n      this.svgElement = null;\n      this.svgHtml = '';\n    }\n  }\n\n  @Watch(\"a11yTitle\")\n  a11yTitleWatcher(a11yTitle: string) {\n    if (!this.svgElement) return;\n\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    await this.nameWatcher(this.name);\n  }\n\n  private updateAccessibilityAttributes() {\n    this.a11yTitleWatcher(this.a11yTitle);\n  }\n\n  private showIcon() {\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\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-d41803d1.js

@@ -0,0 +1,2 @@
+const t="@oiz/stzh-components";const n="3.8.0";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&&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 g=m;export{g};
+//# sourceMappingURL=p-d41803d1.js.map

package/dist/stzh-components/{p-64ba89a2.js.map → p-d41803d1.js.map}

@@ -1 +1 @@
-{"version":3,"names":["packageName","packageNameScoped","substring","indexOf","debouncedFocus","event","autofocus","document","querySelector","window","stzhComponents","fixAutofocus","location","hash","detail","namespace","tagName","toLowerCase","focus","fixHashfocus","hashElement","scrollIntoView","applyAutofocus","addEventListener","observeScrollbarWidth","config","threshold","handleIntersect","entries","forEach","entry","scrollbarWidth","intersectionRatio","innerWidth","documentElement","clientWidth","style","setProperty","bodyScrollObserver","IntersectionObserver","observe","body","format","date","type","translations","console","log","$formats","$globals","adapter","createFormatParseAdapter","parse","string","formatSpan","date2","parseSpan","formats","globals","globalFormatter","Date","isNaN","getTime","j","getDate","toString","d","n","getMonth","m","yC","getFullYear","gC","getHours","hC","i","getMinutes","fC","monthNames","mC","monthNamesShort","l","dayNames","getDay","D","dayNamesShort","replace","globalParser","input","regex","RegExp","match","groups","year","parseInt","Y","month","day","hours","G","H","minutes","globalAdapter","dateFormats","formattedDate","formattedDate2","this","range","dateRange","startsWith","timeRange","dates","split","getLocale","element","closestElement","closest","locale","lang","supportedLocales","defaultLocale","async","fetchTranslations","host","component","existingTranslations","JSON","sessionStorage","getItem","version","cacheTranslations","Object","keys","length","$locale","$code","$formatsIso","$formatsLegacy","result","fetch","pathTranslations","ok","data","json","setItem","stringify","exception","error","assign","pathMedia","utils","translationsLoading","then","catch","reason","globalScripts","appGlobalScript"],"sources":["src/global/js/helpers/autofocus.js","src/global/js/helpers/scrollbar-width.js","src/global/js/helpers/utils.js","src/global/js/script.js","@stencil/core/internal/app-globals"],"sourcesContent":["import { name as packageNameScoped } from '../../../../package.json';\n\nconst packageName = packageNameScoped.substring(packageNameScoped.indexOf('/')+1);\n// let focused = false;\n\n// function debounce(func, timeout = 500){\n//   let timer;\n//   return (...args) => {\n//     clearTimeout(timer);\n//     timer = setTimeout(() => { func.apply(this, args); }, timeout);\n//   };\n// }\n\nconst debouncedFocus = (event) => {\n  // if (focused) {\n  //   return false;\n  // }\n\n  const autofocus = document.querySelector('[autofocus]');\n\n  if (window.stzhComponents.fixAutofocus\n      && !document.location.hash\n      && autofocus\n      && event.detail.namespace === packageName\n      && autofocus.tagName.toLowerCase().indexOf('stzh-') === 0\n      && 'focus' in autofocus\n  ) {\n    autofocus.focus();\n    // focused = true;\n  } else if (window.stzhComponents.fixHashfocus && document.location.hash) {\n    const hashElement = document.querySelector(document.location.hash);\n\n    if (hashElement) {\n      hashElement.scrollIntoView();\n      // focused = true;\n    }\n  }\n}\n\n/**\n * Execute setFocus method if it exists\n * on stzh-element with autofocus on pageload\n * when (child components are loaded)\n */\nexport function applyAutofocus() {\n  window.addEventListener('appload', debouncedFocus);\n}\n","export function observeScrollbarWidth() {\n  const config = {\n    threshold: 1.0\n  };\n\n  const handleIntersect = (entries) => {\n    entries.forEach(entry => {\n      let scrollbarWidth = 0;\n\n      if (entry.intersectionRatio < 1) {\n        // scrollbarWidth = window.innerWidth - document.body.clientWidth;\n        scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n      }\n\n      document.documentElement.style.setProperty('--stzh-scrollbar-width', scrollbarWidth + 'px');\n      document.documentElement.style.setProperty('--stzh-scrollbar-active', scrollbarWidth > 0 ? '1' : '0');\n    });\n  };\n\n  const bodyScrollObserver = new IntersectionObserver(handleIntersect, config);\n  bodyScrollObserver.observe(document.body);\n}\n","export function format(date, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.format(date, type);\n}\n\nexport function parse(string, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.parse(string, type);\n}\n\nexport function formatSpan(date, date2, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.formatSpan(date, date2, type);\n}\n\nexport function parseSpan(string, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.parseSpan(string, type);\n}\n\nexport function createFormatParseAdapter(formats, globals) {\n  // format letters from https://www.php.net/manual/de/datetime.format.php\n  const globalFormatter = function (format, date) {\n    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {\n      return '';\n    }\n\n    let j = date.getDate().toString(10);\n    let d = j;\n    let n = (date.getMonth() + 1).toString(10);\n    let m = n;\n    let yC = date.getFullYear().toString(10);\n    let gC = date.getHours().toString(10);\n    let hC = gC;\n    let i = date.getMinutes().toString(10);\n\n    // full textual representation of a month\n    let fC = globals.monthNames[date.getMonth()];\n    // short textual representation of a month\n    let mC = globals.monthNamesShort[date.getMonth()];\n    // full textual representation of the day\n    let l = globals.dayNames[date.getDay()];\n    // short textual representation of the day\n    let D = globals.dayNamesShort[date.getDay()];\n\n    // months *are* zero-indexed, pad if less than 9!\n    if (date.getMonth() < 9) {\n      m = `0${m}`;\n    }\n\n    if (date.getDate() < 10) {\n      d = `0${d}`;\n    }\n\n    if (date.getHours() < 10) {\n      hC = `0${hC}`;\n    }\n\n    if (date.getMinutes() < 10) {\n      i = `0${i}`;\n    }\n\n    return format\n      .replace(/\\{j\\}/g, j)\n      .replace(/\\{d\\}/g, d)\n      .replace(/\\{D\\}/g, D)\n      .replace(/\\{l\\}/g, l)\n      .replace(/\\{n\\}/g, n)\n      .replace(/\\{m\\}/g, m)\n      .replace(/\\{F\\}/g, fC)\n      .replace(/\\{M\\}/g, mC)\n      .replace(/\\{Y\\}/g, yC)\n      .replace(/\\{H\\}/g, hC)\n      .replace(/\\{G\\}/g, gC)\n      .replace(/\\{i\\}/g, i);\n  };\n\n  const globalParser = function (parse, input) {\n    if (!input) {\n      return;\n    }\n\n    const regex = new RegExp(parse);\n    const match = input.match(regex);\n\n    if (match) {\n      const { groups } = match;\n\n      const year = parseInt(groups.Y || '', 10);\n      const month = parseInt(groups.n || groups.m || '', 10);\n      const day = parseInt(groups.j || groups.d || '', 10);\n      const hours = parseInt(groups.G || groups.H || '', 10);\n      const minutes = parseInt(groups.i || '', 10);\n\n      if (!isNaN(year) && (year < 1000 || year > 9999)) {\n        return;\n      }\n\n      if (!isNaN(month) && (month < 1 || month > 12)) {\n        return;\n      }\n\n      // we check day later again (if month changed, it was out of range)\n      if (!isNaN(day) && (day < 1 || day > 31)) {\n        return;\n      }\n\n      if (!isNaN(hours) && (hours < 0 || hours > 23)) {\n        return;\n      }\n\n      if (!isNaN(minutes) && (minutes < 0 || minutes > 59)) {\n        return;\n      }\n\n      const date = new Date(\n        !isNaN(year) ? year : null,\n        !isNaN(month) ? month - 1 : null,\n        !isNaN(day) ? day : null,\n        !isNaN(hours) ? hours : null,\n        !isNaN(minutes) ? minutes : null\n      );\n\n      // if day was out of possible range (1 - 28/29/30/31)\n      // we find out by check if month has changed\n      if (date.getMonth() + 1 !== month) {\n        return;\n      }\n\n      return date;\n    }\n  };\n\n  const globalAdapter = {\n    format: function (date, type = 'datetime') {\n      const dateFormats = {\n        ...formats[type],\n        ...(window.stzhComponents?.formats[type] || {})\n      };\n\n      if (typeof dateFormats.format === 'string') {\n        return globalFormatter(dateFormats.format, date);\n      } else {\n        return dateFormats.format(date);\n      }\n    },\n    parse: function (input, type = 'datetime') {\n      const dateFormats = {\n        ...formats[type],\n        ...(window.stzhComponents?.formats[type] || {})\n      };\n\n      if (typeof dateFormats.parse === 'string') {\n        return globalParser(dateFormats.parse, input);\n      } else {\n        return dateFormats.parse(input);\n      }\n    },\n    formatSpan: function (date, date2, type = 'datetime') {\n      let formattedDate = date;\n      let formattedDate2 = date2;\n\n      if (date instanceof Date && !isNaN(date.getTime())) {\n        formattedDate = this.format(date, type);\n      }\n\n      if (date2 instanceof Date && !isNaN(date2.getTime())) {\n        formattedDate2 = this.format(date2, type);\n      }\n\n      let range = globals.dateRange;\n\n      if (type.startsWith('time')) {\n        range = globals.timeRange;\n      }\n\n      return (\n        formattedDate +\n        (formattedDate2 &&\n        (!(formattedDate2 instanceof Date) || (formattedDate2 instanceof Date && !isNaN(date.getTime())))\n          ? range + formattedDate2\n          : '')\n      );\n    },\n    parseSpan: function (string, type) {\n      let range = globals.dateRange;\n\n      if (type.startsWith('time')) {\n        range = globals.timeRange;\n      }\n\n      const dates = string.split(range);\n      const date = this.parse(dates[0], type);\n      const date2 = this.parse(dates[1], type);\n\n      return [date, date2, range];\n    }\n  };\n\n  return globalAdapter;\n}\n\nexport function getLocale(element) {\n  const closestElement = element.closest('[lang]');\n  const locale = closestElement && closestElement.lang.split('-')[0];\n\n  if (window.stzhComponents.supportedLocales.indexOf(locale) === -1 || !locale) {\n    return window.stzhComponents.defaultLocale;\n  } else {\n    return locale;\n  }\n}\n\nexport async function fetchTranslations(host, component) {\n  const locale = getLocale(host);\n  const existingTranslations = JSON.parse(\n    sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${locale}`)\n  );\n\n  if (window.stzhComponents.cacheTranslations && existingTranslations && Object.keys(existingTranslations).length > 0) {\n    return {\n      ...(existingTranslations[component] || {}),\n      $globals: existingTranslations.$globals,\n      $locale: existingTranslations.$code,\n      $formats: existingTranslations.$formats,\n      $formatsIso: existingTranslations.$formatsIso,\n      $formatsLegacy: existingTranslations.$formatsLegacy\n    };\n  }\n\n  try {\n    const result = await fetch(`${window.stzhComponents.pathTranslations}/${locale}.json`);\n\n    if (result.ok) {\n      const data = await result.json();\n      sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${locale}`, JSON.stringify(data));\n      return {\n        ...(data[component] || {}),\n        $globals: data.$globals,\n        $locale: data.$code,\n        $formats: data.$formats,\n        $formatsIso: data.$formatsIso,\n        $formatsLegacy: data.$formatsLegacy\n      };\n    }\n  } catch (exception) {\n    console.error(`Error loading locale: ${locale}`, exception);\n  }\n}\n","import { version } from '../../../package.json';\nimport { applyAutofocus } from './helpers/autofocus';\nimport { observeScrollbarWidth } from './helpers/scrollbar-width';\nimport * as utils from './helpers/utils';\n\nexport default function () {\n  window.stzhComponents = {\n    defaultLocale: 'de',\n    pathMedia: '/',\n    pathTranslations: '/',\n    cacheTranslations: true,\n    formats: {},\n    translations: null,\n    fixAutofocus: true,\n    fixHashfocus: true,\n    ...window.stzhComponents || {},\n    version,\n    supportedLocales: ['de', 'en'],\n    utils\n  };\n\n  if (window.stzhComponents.translations === null) {\n    window.stzhComponents.translationsLoading = utils.fetchTranslations(document.documentElement).then((translations) => {\n      window.stzhComponents.translations = translations;\n    }).catch((reason) => {\n      console.error(\"Translations couldn't load:\", reason)\n    });\n  }\n\n  applyAutofocus();\n  observeScrollbarWidth();\n}\n","import appGlobalScript from '/builds/OE-5041/desi/desi-code/stzh-components/src/global/js/script.js';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"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"}
+{"version":3,"names":["packageName","packageNameScoped","substring","indexOf","debouncedFocus","event","autofocus","document","querySelector","window","stzhComponents","fixAutofocus","location","hash","detail","namespace","tagName","toLowerCase","focus","fixHashfocus","hashElement","scrollIntoView","applyAutofocus","addEventListener","observeScrollbarWidth","config","threshold","handleIntersect","entries","forEach","entry","scrollbarWidth","intersectionRatio","innerWidth","documentElement","clientWidth","style","setProperty","bodyScrollObserver","IntersectionObserver","observe","body","format","date","type","translations","console","log","$formats","$globals","adapter","createFormatParseAdapter","parse","string","formatSpan","date2","parseSpan","formats","globals","globalFormatter","Date","isNaN","getTime","j","getDate","toString","d","n","getMonth","m","yC","getFullYear","gC","getHours","hC","i","getMinutes","fC","monthNames","mC","monthNamesShort","l","dayNames","getDay","D","dayNamesShort","replace","globalParser","input","regex","RegExp","match","groups","year","parseInt","Y","month","day","hours","G","H","minutes","globalAdapter","dateFormats","formattedDate","formattedDate2","this","range","dateRange","startsWith","timeRange","dates","split","getLocale","element","closestElement","closest","locale","lang","supportedLocales","defaultLocale","async","fetchTranslations","host","component","existingTranslations","JSON","sessionStorage","getItem","version","cacheTranslations","Object","keys","length","$locale","$code","$formatsIso","$formatsLegacy","result","fetch","pathTranslations","ok","data","json","setItem","stringify","exception","error","assign","pathMedia","utils","translationsLoading","then","catch","reason","globalScripts","appGlobalScript"],"sources":["src/global/js/helpers/autofocus.js","src/global/js/helpers/scrollbar-width.js","src/global/js/helpers/utils.js","src/global/js/script.js","@stencil/core/internal/app-globals"],"sourcesContent":["import { name as packageNameScoped } from '../../../../package.json';\n\nconst packageName = packageNameScoped.substring(packageNameScoped.indexOf('/')+1);\n// let focused = false;\n\n// function debounce(func, timeout = 500){\n//   let timer;\n//   return (...args) => {\n//     clearTimeout(timer);\n//     timer = setTimeout(() => { func.apply(this, args); }, timeout);\n//   };\n// }\n\nconst debouncedFocus = (event) => {\n  // if (focused) {\n  //   return false;\n  // }\n\n  const autofocus = document.querySelector('[autofocus]');\n\n  if (window.stzhComponents.fixAutofocus\n      && !document.location.hash\n      && autofocus\n      && event.detail.namespace === packageName\n      && autofocus.tagName.toLowerCase().indexOf('stzh-') === 0\n      && 'focus' in autofocus\n  ) {\n    autofocus.focus();\n    // focused = true;\n  } else if (window.stzhComponents.fixHashfocus && document.location.hash) {\n    const hashElement = document.querySelector(document.location.hash);\n\n    if (hashElement) {\n      hashElement.scrollIntoView();\n      // focused = true;\n    }\n  }\n}\n\n/**\n * Execute setFocus method if it exists\n * on stzh-element with autofocus on pageload\n * when (child components are loaded)\n */\nexport function applyAutofocus() {\n  window.addEventListener('appload', debouncedFocus);\n}\n","export function observeScrollbarWidth() {\n  const config = {\n    threshold: 1.0\n  };\n\n  const handleIntersect = (entries) => {\n    entries.forEach(entry => {\n      let scrollbarWidth = 0;\n\n      if (entry.intersectionRatio < 1) {\n        // scrollbarWidth = window.innerWidth - document.body.clientWidth;\n        scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n      }\n\n      document.documentElement.style.setProperty('--stzh-scrollbar-width', scrollbarWidth + 'px');\n      document.documentElement.style.setProperty('--stzh-scrollbar-active', scrollbarWidth > 0 ? '1' : '0');\n    });\n  };\n\n  const bodyScrollObserver = new IntersectionObserver(handleIntersect, config);\n  bodyScrollObserver.observe(document.body);\n}\n","export function format(date, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.format(date, type);\n}\n\nexport function parse(string, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.parse(string, type);\n}\n\nexport function formatSpan(date, date2, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.formatSpan(date, date2, type);\n}\n\nexport function parseSpan(string, type = 'datetime') {\n  if (!window.stzhComponents.translations) {\n    console.log('Translations not loaded yet, check for Promise `window.stzhComponents.translationsLoading`');\n    return;\n  }\n\n  const { $formats, $globals } = window.stzhComponents.translations;\n  const adapter = createFormatParseAdapter($formats, $globals);\n  return adapter.parseSpan(string, type);\n}\n\nexport function createFormatParseAdapter(formats, globals) {\n  // format letters from https://www.php.net/manual/de/datetime.format.php\n  const globalFormatter = function (format, date) {\n    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {\n      return '';\n    }\n\n    let j = date.getDate().toString(10);\n    let d = j;\n    let n = (date.getMonth() + 1).toString(10);\n    let m = n;\n    let yC = date.getFullYear().toString(10);\n    let gC = date.getHours().toString(10);\n    let hC = gC;\n    let i = date.getMinutes().toString(10);\n\n    // full textual representation of a month\n    let fC = globals.monthNames[date.getMonth()];\n    // short textual representation of a month\n    let mC = globals.monthNamesShort[date.getMonth()];\n    // full textual representation of the day\n    let l = globals.dayNames[date.getDay()];\n    // short textual representation of the day\n    let D = globals.dayNamesShort[date.getDay()];\n\n    // months *are* zero-indexed, pad if less than 9!\n    if (date.getMonth() < 9) {\n      m = `0${m}`;\n    }\n\n    if (date.getDate() < 10) {\n      d = `0${d}`;\n    }\n\n    if (date.getHours() < 10) {\n      hC = `0${hC}`;\n    }\n\n    if (date.getMinutes() < 10) {\n      i = `0${i}`;\n    }\n\n    return format\n      .replace(/\\{j\\}/g, j)\n      .replace(/\\{d\\}/g, d)\n      .replace(/\\{D\\}/g, D)\n      .replace(/\\{l\\}/g, l)\n      .replace(/\\{n\\}/g, n)\n      .replace(/\\{m\\}/g, m)\n      .replace(/\\{F\\}/g, fC)\n      .replace(/\\{M\\}/g, mC)\n      .replace(/\\{Y\\}/g, yC)\n      .replace(/\\{H\\}/g, hC)\n      .replace(/\\{G\\}/g, gC)\n      .replace(/\\{i\\}/g, i);\n  };\n\n  const globalParser = function (parse, input) {\n    if (!input) {\n      return;\n    }\n\n    const regex = new RegExp(parse);\n    const match = input.match(regex);\n\n    if (match) {\n      const { groups } = match;\n\n      const year = parseInt(groups.Y || '', 10);\n      const month = parseInt(groups.n || groups.m || '', 10);\n      const day = parseInt(groups.j || groups.d || '', 10);\n      const hours = parseInt(groups.G || groups.H || '', 10);\n      const minutes = parseInt(groups.i || '', 10);\n\n      if (!isNaN(year) && (year < 1000 || year > 9999)) {\n        return;\n      }\n\n      if (!isNaN(month) && (month < 1 || month > 12)) {\n        return;\n      }\n\n      // we check day later again (if month changed, it was out of range)\n      if (!isNaN(day) && (day < 1 || day > 31)) {\n        return;\n      }\n\n      if (!isNaN(hours) && (hours < 0 || hours > 23)) {\n        return;\n      }\n\n      if (!isNaN(minutes) && (minutes < 0 || minutes > 59)) {\n        return;\n      }\n\n      const date = new Date(\n        !isNaN(year) ? year : null,\n        !isNaN(month) ? month - 1 : null,\n        !isNaN(day) ? day : null,\n        !isNaN(hours) ? hours : null,\n        !isNaN(minutes) ? minutes : null\n      );\n\n      // if day was out of possible range (1 - 28/29/30/31)\n      // we find out by check if month has changed\n      if (date.getMonth() + 1 !== month) {\n        return;\n      }\n\n      return date;\n    }\n  };\n\n  const globalAdapter = {\n    format: function (date, type = 'datetime') {\n      const dateFormats = {\n        ...formats[type],\n        ...(window.stzhComponents?.formats[type] || {})\n      };\n\n      if (typeof dateFormats.format === 'string') {\n        return globalFormatter(dateFormats.format, date);\n      } else {\n        return dateFormats.format(date);\n      }\n    },\n    parse: function (input, type = 'datetime') {\n      const dateFormats = {\n        ...formats[type],\n        ...(window.stzhComponents?.formats[type] || {})\n      };\n\n      if (typeof dateFormats.parse === 'string') {\n        return globalParser(dateFormats.parse, input);\n      } else {\n        return dateFormats.parse(input);\n      }\n    },\n    formatSpan: function (date, date2, type = 'datetime') {\n      let formattedDate = date;\n      let formattedDate2 = date2;\n\n      if (date instanceof Date && !isNaN(date.getTime())) {\n        formattedDate = this.format(date, type);\n      }\n\n      if (date2 instanceof Date && !isNaN(date2.getTime())) {\n        formattedDate2 = this.format(date2, type);\n      }\n\n      let range = globals.dateRange;\n\n      if (type.startsWith('time')) {\n        range = globals.timeRange;\n      }\n\n      return (\n        formattedDate +\n        (formattedDate2 &&\n        (!(formattedDate2 instanceof Date) || (formattedDate2 instanceof Date && !isNaN(date.getTime())))\n          ? range + formattedDate2\n          : '')\n      );\n    },\n    parseSpan: function (string, type) {\n      let range = globals.dateRange;\n\n      if (type.startsWith('time')) {\n        range = globals.timeRange;\n      }\n\n      const dates = string.split(range);\n      const date = this.parse(dates[0], type);\n      const date2 = this.parse(dates[1], type);\n\n      return [date, date2, range];\n    }\n  };\n\n  return globalAdapter;\n}\n\nexport function getLocale(element) {\n  const closestElement = element.closest('[lang]');\n  const locale = closestElement && closestElement.lang.split('-')[0];\n\n  if (window.stzhComponents.supportedLocales.indexOf(locale) === -1 || !locale) {\n    return window.stzhComponents.defaultLocale;\n  } else {\n    return locale;\n  }\n}\n\nexport async function fetchTranslations(host, component) {\n  const locale = getLocale(host);\n  const existingTranslations = JSON.parse(\n    sessionStorage.getItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${locale}`)\n  );\n\n  if (window.stzhComponents.cacheTranslations && existingTranslations && Object.keys(existingTranslations).length > 0) {\n    return {\n      ...(existingTranslations[component] || {}),\n      $globals: existingTranslations.$globals,\n      $locale: existingTranslations.$code,\n      $formats: existingTranslations.$formats,\n      $formatsIso: existingTranslations.$formatsIso,\n      $formatsLegacy: existingTranslations.$formatsLegacy\n    };\n  }\n\n  try {\n    const result = await fetch(`${window.stzhComponents.pathTranslations}/${locale}.json`);\n\n    if (result.ok) {\n      const data = await result.json();\n      sessionStorage.setItem(`stzhComponents.v${window.stzhComponents.version}.i18n.${locale}`, JSON.stringify(data));\n      return {\n        ...(data[component] || {}),\n        $globals: data.$globals,\n        $locale: data.$code,\n        $formats: data.$formats,\n        $formatsIso: data.$formatsIso,\n        $formatsLegacy: data.$formatsLegacy\n      };\n    }\n  } catch (exception) {\n    console.error(`Error loading locale: ${locale}`, exception);\n  }\n}\n","import { version } from '../../../package.json';\nimport { applyAutofocus } from './helpers/autofocus';\nimport { observeScrollbarWidth } from './helpers/scrollbar-width';\nimport * as utils from './helpers/utils';\n\nexport default function () {\n  window.stzhComponents = {\n    defaultLocale: 'de',\n    pathMedia: '/',\n    pathTranslations: '/',\n    cacheTranslations: true,\n    formats: {},\n    translations: null,\n    fixAutofocus: true,\n    fixHashfocus: true,\n    ...window.stzhComponents || {},\n    version,\n    supportedLocales: ['de', 'en'],\n    utils\n  };\n\n  if (window.stzhComponents.translations === null) {\n    window.stzhComponents.translationsLoading = utils.fetchTranslations(document.documentElement).then((translations) => {\n      window.stzhComponents.translations = translations;\n    }).catch((reason) => {\n      console.error(\"Translations couldn't load:\", reason)\n    });\n  }\n\n  applyAutofocus();\n  observeScrollbarWidth();\n}\n","import appGlobalScript from '/builds/OE-5041/desi/desi-code/stzh-components/src/global/js/script.js';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"+CAEA,MAAMA,EAAcC,EAAkBC,UAAUD,EAAkBE,QAAQ,KAAK,GAW/E,MAAMC,EAAkBC,IAKtB,MAAMC,EAAYC,SAASC,cAAc,eAEzC,GAAIC,OAAOC,eAAeC,eAClBJ,SAASK,SAASC,MACnBP,GACAD,EAAMS,OAAOC,YAAcf,GAC3BM,EAAUU,QAAQC,cAAcd,QAAQ,WAAa,GACrD,UAAWG,EAChB,CACAA,EAAUY,OAEd,MAAS,GAAIT,OAAOC,eAAeS,cAAgBZ,SAASK,SAASC,KAAM,CACvE,MAAMO,EAAcb,SAASC,cAAcD,SAASK,SAASC,MAE7D,GAAIO,EAAa,CACfA,EAAYC,gBAElB,CACA,GAQO,SAASC,IACdb,OAAOc,iBAAiB,UAAWnB,EACrC,CC9CO,SAASoB,IACd,MAAMC,EAAS,CACbC,UAAW,GAGb,MAAMC,EAAmBC,IACvBA,EAAQC,SAAQC,IACd,IAAIC,EAAiB,EAErB,GAAID,EAAME,kBAAoB,EAAG,CAE/BD,EAAiBtB,OAAOwB,WAAa1B,SAAS2B,gBAAgBC,WACtE,CAEM5B,SAAS2B,gBAAgBE,MAAMC,YAAY,yBAA0BN,EAAiB,MACtFxB,SAAS2B,gBAAgBE,MAAMC,YAAY,0BAA2BN,EAAiB,EAAI,IAAM,IAAI,GACrG,EAGJ,MAAMO,EAAqB,IAAIC,qBAAqBZ,EAAiBF,GACrEa,EAAmBE,QAAQjC,SAASkC,KACtC,CCrBO,SAASC,EAAOC,EAAMC,EAAO,YAClC,IAAKnC,OAAOC,eAAemC,aAAc,CACvCC,QAAQC,IAAI,8FACZ,MACJ,CAEE,MAAMC,SAAEA,EAAQC,SAAEA,GAAaxC,OAAOC,eAAemC,aACrD,MAAMK,EAAUC,EAAyBH,EAAUC,GACnD,OAAOC,EAAQR,OAAOC,EAAMC,EAC9B,CAEO,SAASQ,EAAMC,EAAQT,EAAO,YACnC,IAAKnC,OAAOC,eAAemC,aAAc,CACvCC,QAAQC,IAAI,8FACZ,MACJ,CAEE,MAAMC,SAAEA,EAAQC,SAAEA,GAAaxC,OAAOC,eAAemC,aACrD,MAAMK,EAAUC,EAAyBH,EAAUC,GACnD,OAAOC,EAAQE,MAAMC,EAAQT,EAC/B,CAEO,SAASU,EAAWX,EAAMY,EAAOX,EAAO,YAC7C,IAAKnC,OAAOC,eAAemC,aAAc,CACvCC,QAAQC,IAAI,8FACZ,MACJ,CAEE,MAAMC,SAAEA,EAAQC,SAAEA,GAAaxC,OAAOC,eAAemC,aACrD,MAAMK,EAAUC,EAAyBH,EAAUC,GACnD,OAAOC,EAAQI,WAAWX,EAAMY,EAAOX,EACzC,CAEO,SAASY,EAAUH,EAAQT,EAAO,YACvC,IAAKnC,OAAOC,eAAemC,aAAc,CACvCC,QAAQC,IAAI,8FACZ,MACJ,CAEE,MAAMC,SAAEA,EAAQC,SAAEA,GAAaxC,OAAOC,eAAemC,aACrD,MAAMK,EAAUC,EAAyBH,EAAUC,GACnD,OAAOC,EAAQM,UAAUH,EAAQT,EACnC,CAEO,SAASO,EAAyBM,EAASC,GAEhD,MAAMC,EAAkB,SAAUjB,EAAQC,GACxC,IAAKA,KAAUA,aAAgBiB,OAASC,MAAMlB,EAAKmB,WAAY,CAC7D,MAAO,EACb,CAEI,IAAIC,EAAIpB,EAAKqB,UAAUC,SAAS,IAChC,IAAIC,EAAIH,EACR,IAAII,GAAKxB,EAAKyB,WAAa,GAAGH,SAAS,IACvC,IAAII,EAAIF,EACR,IAAIG,EAAK3B,EAAK4B,cAAcN,SAAS,IACrC,IAAIO,EAAK7B,EAAK8B,WAAWR,SAAS,IAClC,IAAIS,EAAKF,EACT,IAAIG,EAAIhC,EAAKiC,aAAaX,SAAS,IAGnC,IAAIY,EAAKnB,EAAQoB,WAAWnC,EAAKyB,YAEjC,IAAIW,EAAKrB,EAAQsB,gBAAgBrC,EAAKyB,YAEtC,IAAIa,EAAIvB,EAAQwB,SAASvC,EAAKwC,UAE9B,IAAIC,EAAI1B,EAAQ2B,cAAc1C,EAAKwC,UAGnC,GAAIxC,EAAKyB,WAAa,EAAG,CACvBC,EAAI,IAAIA,GACd,CAEI,GAAI1B,EAAKqB,UAAY,GAAI,CACvBE,EAAI,IAAIA,GACd,CAEI,GAAIvB,EAAK8B,WAAa,GAAI,CACxBC,EAAK,IAAIA,GACf,CAEI,GAAI/B,EAAKiC,aAAe,GAAI,CAC1BD,EAAI,IAAIA,GACd,CAEI,OAAOjC,EACJ4C,QAAQ,SAAUvB,GAClBuB,QAAQ,SAAUpB,GAClBoB,QAAQ,SAAUF,GAClBE,QAAQ,SAAUL,GAClBK,QAAQ,SAAUnB,GAClBmB,QAAQ,SAAUjB,GAClBiB,QAAQ,SAAUT,GAClBS,QAAQ,SAAUP,GAClBO,QAAQ,SAAUhB,GAClBgB,QAAQ,SAAUZ,GAClBY,QAAQ,SAAUd,GAClBc,QAAQ,SAAUX,EACzB,EAEE,MAAMY,EAAe,SAAUnC,EAAOoC,GACpC,IAAKA,EAAO,CACV,MACN,CAEI,MAAMC,EAAQ,IAAIC,OAAOtC,GACzB,MAAMuC,EAAQH,EAAMG,MAAMF,GAE1B,GAAIE,EAAO,CACT,MAAMC,OAAEA,GAAWD,EAEnB,MAAME,EAAOC,SAASF,EAAOG,GAAK,GAAI,IACtC,MAAMC,EAAQF,SAASF,EAAOzB,GAAKyB,EAAOvB,GAAK,GAAI,IACnD,MAAM4B,EAAMH,SAASF,EAAO7B,GAAK6B,EAAO1B,GAAK,GAAI,IACjD,MAAMgC,EAAQJ,SAASF,EAAOO,GAAKP,EAAOQ,GAAK,GAAI,IACnD,MAAMC,EAAUP,SAASF,EAAOjB,GAAK,GAAI,IAEzC,IAAKd,MAAMgC,KAAUA,EAAO,KAAQA,EAAO,MAAO,CAChD,MACR,CAEM,IAAKhC,MAAMmC,KAAWA,EAAQ,GAAKA,EAAQ,IAAK,CAC9C,MACR,CAGM,IAAKnC,MAAMoC,KAASA,EAAM,GAAKA,EAAM,IAAK,CACxC,MACR,CAEM,IAAKpC,MAAMqC,KAAWA,EAAQ,GAAKA,EAAQ,IAAK,CAC9C,MACR,CAEM,IAAKrC,MAAMwC,KAAaA,EAAU,GAAKA,EAAU,IAAK,CACpD,MACR,CAEM,MAAM1D,EAAO,IAAIiB,MACdC,MAAMgC,GAAQA,EAAO,MACrBhC,MAAMmC,GAASA,EAAQ,EAAI,MAC3BnC,MAAMoC,GAAOA,EAAM,MACnBpC,MAAMqC,GAASA,EAAQ,MACvBrC,MAAMwC,GAAWA,EAAU,MAK9B,GAAI1D,EAAKyB,WAAa,IAAM4B,EAAO,CACjC,MACR,CAEM,OAAOrD,CACb,CACA,EAEE,MAAM2D,EAAgB,CACpB5D,OAAQ,SAAUC,EAAMC,EAAO,YAC7B,MAAM2D,EAAc,IACf9C,EAAQb,MACPnC,OAAOC,gBAAgB+C,QAAQb,IAAS,IAG9C,UAAW2D,EAAY7D,SAAW,SAAU,CAC1C,OAAOiB,EAAgB4C,EAAY7D,OAAQC,EACnD,KAAa,CACL,OAAO4D,EAAY7D,OAAOC,EAClC,CACA,EACIS,MAAO,SAAUoC,EAAO5C,EAAO,YAC7B,MAAM2D,EAAc,IACf9C,EAAQb,MACPnC,OAAOC,gBAAgB+C,QAAQb,IAAS,IAG9C,UAAW2D,EAAYnD,QAAU,SAAU,CACzC,OAAOmC,EAAagB,EAAYnD,MAAOoC,EAC/C,KAAa,CACL,OAAOe,EAAYnD,MAAMoC,EACjC,CACA,EACIlC,WAAY,SAAUX,EAAMY,EAAOX,EAAO,YACxC,IAAI4D,EAAgB7D,EACpB,IAAI8D,EAAiBlD,EAErB,GAAIZ,aAAgBiB,OAASC,MAAMlB,EAAKmB,WAAY,CAClD0C,EAAgBE,KAAKhE,OAAOC,EAAMC,EAC1C,CAEM,GAAIW,aAAiBK,OAASC,MAAMN,EAAMO,WAAY,CACpD2C,EAAiBC,KAAKhE,OAAOa,EAAOX,EAC5C,CAEM,IAAI+D,EAAQjD,EAAQkD,UAEpB,GAAIhE,EAAKiE,WAAW,QAAS,CAC3BF,EAAQjD,EAAQoD,SACxB,CAEM,OACEN,GACCC,MACEA,aAA0B7C,OAAU6C,aAA0B7C,OAASC,MAAMlB,EAAKmB,YACjF6C,EAAQF,EACR,GAEZ,EACIjD,UAAW,SAAUH,EAAQT,GAC3B,IAAI+D,EAAQjD,EAAQkD,UAEpB,GAAIhE,EAAKiE,WAAW,QAAS,CAC3BF,EAAQjD,EAAQoD,SACxB,CAEM,MAAMC,EAAQ1D,EAAO2D,MAAML,GAC3B,MAAMhE,EAAO+D,KAAKtD,MAAM2D,EAAM,GAAInE,GAClC,MAAMW,EAAQmD,KAAKtD,MAAM2D,EAAM,GAAInE,GAEnC,MAAO,CAACD,EAAMY,EAAOoD,EAC3B,GAGE,OAAOL,CACT,CAEO,SAASW,EAAUC,GACxB,MAAMC,EAAiBD,EAAQE,QAAQ,UACvC,MAAMC,EAASF,GAAkBA,EAAeG,KAAKN,MAAM,KAAK,GAEhE,GAAIvG,OAAOC,eAAe6G,iBAAiBpH,QAAQkH,MAAa,IAAMA,EAAQ,CAC5E,OAAO5G,OAAOC,eAAe8G,aACjC,KAAS,CACL,OAAOH,CACX,CACA,CAEOI,eAAeC,EAAkBC,EAAMC,GAC5C,MAAMP,EAASJ,EAAUU,GACzB,MAAME,EAAuBC,KAAK1E,MAChC2E,eAAeC,QAAQ,mBAAmBvH,OAAOC,eAAeuH,gBAAgBZ,MAGlF,GAAI5G,OAAOC,eAAewH,mBAAqBL,GAAwBM,OAAOC,KAAKP,GAAsBQ,OAAS,EAAG,CACnH,MAAO,IACDR,EAAqBD,IAAc,GACvC3E,SAAU4E,EAAqB5E,SAC/BqF,QAAST,EAAqBU,MAC9BvF,SAAU6E,EAAqB7E,SAC/BwF,YAAaX,EAAqBW,YAClCC,eAAgBZ,EAAqBY,eAE3C,CAEE,IACE,MAAMC,QAAeC,MAAM,GAAGlI,OAAOC,eAAekI,oBAAoBvB,UAExE,GAAIqB,EAAOG,GAAI,CACb,MAAMC,QAAaJ,EAAOK,OAC1BhB,eAAeiB,QAAQ,mBAAmBvI,OAAOC,eAAeuH,gBAAgBZ,IAAUS,KAAKmB,UAAUH,IACzG,MAAO,IACDA,EAAKlB,IAAc,GACvB3E,SAAU6F,EAAK7F,SACfqF,QAASQ,EAAKP,MACdvF,SAAU8F,EAAK9F,SACfwF,YAAaM,EAAKN,YAClBC,eAAgBK,EAAKL,eAE7B,CACA,CAAI,MAAOS,GACPpG,QAAQqG,MAAM,yBAAyB9B,IAAU6B,EACrD,CACA,C,0JC3QEzI,OAAOC,eAAiByH,OAAAiB,OAAAjB,OAAAiB,OAAA,CAAA5B,cAAA,KAAA6B,UAAA,IAAAT,iBAAA,IAAAV,kBAAA,KAAAzE,QAAA,GAAAZ,aAAA,KAAAlC,aAAA,KAAAQ,aAAA,MAAAV,OAAAC,gBAAA,KAAAuH,UAAAV,iBAAA,YAAA+B,UACxB,GAAI7I,OAAOC,eAAcmC,eAAA,MACvBpC,OAAOC,eAAA6I,oBAAA7B,EAAAnH,SAAA2B,iBAAAsH,MAAA3G,IACLpC,OAAOC,eAAAmC,cAAA,IACN4G,OAAOC,IACR5G,QAAQqG,MAAM,8BAAAO,EAAA,GAEpB,CACEpI,IACAE,GACF,CCdY,MAACmI,EAAgBC,S"}

package/dist/stzh-components/{p-6f0cf6e3.entry.js → p-d97fbf1f.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as s,h as i,a as e,g as r}from"./p-c7bfac7a.js";import{a as o}from"./p-16892790.js";import{a as h}from"./p-9b063923.js";import{VBZ as a}from"./index.esm.js";const c=".sc-stzh-vbz-majorticker-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-vbz-majorticker-h,[stzh-hidden].sc-stzh-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{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-vbz-majorticker-h .has-focus.sc-stzh-vbz-majorticker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker{outline-style:none !important}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker::-moz-focus-inner{border:0 !important}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--stzh-base-invert-color:var(--stzh-color-black);--color:var(--stzh-color-black);--background-color:var(--stzh-color-coral)}";const n=class{constructor(i){t(this,i);this.stzhDisturbanceFetched=s(this,"stzhDisturbanceFetched",7);this.disturbance=null;this.onGhettoboxOpen=()=>{this.ghettoboxShown=true};this.onGhettoboxClose=()=>{this.ghettoboxShown=false};this.api="https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";this.data="";this.moreInfoLink="https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";this.dateAdapter=undefined;this.localization=undefined;this.showCloseKey=undefined;this.ghettoboxShown=true}async getGhettoboxShown(){return this.ghettoboxShown}async getDisturbance(){return this.disturbance}async apiWatcher(t){if(!t){return}let s=this.api.replace(/\{lang\}/,this.localization.$locale);s=s+(s.includes("?")?"&":"?")+Date.now();const{data:i}=await o.get(s);this.data=i}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}async dataWatcher(t){var s,i;if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}const e=(i=(s=this._data)===null||s===void 0?void 0:s.Message)===null||i===void 0?void 0:i.find((t=>t.category===a.DISTURBANCE_INFORMATION&&t.baseType===a.BASE_TYPE_GLOBAL));if(e){const t=e.channel.filter((t=>t.name===a.CHANNEL_TICKER&&t.url)).map((t=>t.url)).reduce(((t,s)=>t.concat(s)),[]);const s=t.find((t=>t.url.indexOf(a.CHANNEL_INFO_URL_FILTER)!==-1));this.disturbance={id:e.id,head:e.head,text:h(e.text),startDate:new Date(`${e.sDate}T${e.sTime}+02:00`),endDate:new Date(`${e.eDate}T${e.eTime}+02:00`),altStart:e.altStart,altEnd:e.altEnd,infoUrl:s}}this.stzhDisturbanceFetched.emit({component:"stzh-vbz-majorticker",disturbance:this.disturbance})}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"vbz-majorticker")}this.dateAdapterWatcher(this.dateAdapter);if(this.data){await this.dataWatcher(this.data)}else{await this.apiWatcher(this.api)}}render(){const t={"stzh-vbz-majorticker":true};return i(e,{hidden:!this.disturbance||!this.ghettoboxShown},i("div",{class:t},this.disturbance&&i("stzh-show",{mikro:true,closeKey:this.showCloseKey,showFromDate:this.disturbance.startDate},i("stzh-ghettobox",{onStzhOpen:this.onGhettoboxOpen,onStzhClose:this.onGhettoboxClose,class:"stzh-vbz-majorticker__ghettobox",hideClose:true,mainTitle:this.disturbance.head},i("stzh-richtext",{innerHTML:this.disturbance.text}),this.disturbance.infoUrl?i("stzh-button",{slot:"button",href:this.disturbance.infoUrl.url},this.disturbance.infoUrl.name):i("stzh-button",{slot:"button",target:"_blank",href:this.moreInfoLink.replace(/\{lang\}/,this.localization.$locale).replace(/\{id\}/,this.disturbance.id)},this.localization.moreInfo)))))}get element(){return r(this)}static get watchers(){return{api:["apiWatcher"],dateAdapter:["dateAdapterWatcher"],data:["dataWatcher"]}}};n.style=c;export{n as stzh_vbz_majorticker};
-//# sourceMappingURL=p-6f0cf6e3.entry.js.map
+import{r as t,c as s,h as i,a as e,g as r}from"./p-c7bfac7a.js";import{a as o}from"./p-345a1e99.js";import{a as h}from"./p-9b063923.js";import{VBZ as a}from"./index.esm.js";const c=".sc-stzh-vbz-majorticker-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-vbz-majorticker-h,[stzh-hidden].sc-stzh-vbz-majorticker-h{display:none}.sc-stzh-vbz-majorticker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::before,.sc-stzh-vbz-majorticker-h *.sc-stzh-vbz-majorticker::after{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-vbz-majorticker-h .has-focus.sc-stzh-vbz-majorticker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker{outline-style:none !important}.sc-stzh-vbz-majorticker-h .stzh-fylingfocus-focused.sc-stzh-vbz-majorticker::-moz-focus-inner{border:0 !important}.stzh-vbz-majorticker__ghettobox.sc-stzh-vbz-majorticker{--stzh-base-invert-color:var(--stzh-color-black);--color:var(--stzh-color-black);--background-color:var(--stzh-color-coral)}";const n=class{constructor(i){t(this,i);this.stzhDisturbanceFetched=s(this,"stzhDisturbanceFetched",7);this.disturbance=null;this.onGhettoboxOpen=()=>{this.ghettoboxShown=true};this.onGhettoboxClose=()=>{this.ghettoboxShown=false};this.api="https://fpbe.zvv.ch/restproxy/himsearch?format=json&accessId=unic&channels=ticker&additionalfields=tickers:VBZ&orderBy=LMOD_DESC&lang={lang}";this.data="";this.moreInfoLink="https://zvv.ch/zvv/{lang}/fahrplan/vl.html?himIds={id}";this.dateAdapter=undefined;this.localization=undefined;this.showCloseKey=undefined;this.ghettoboxShown=true}async getGhettoboxShown(){return this.ghettoboxShown}async getDisturbance(){return this.disturbance}async apiWatcher(t){if(!t){return}let s=this.api.replace(/\{lang\}/,this.localization.$locale);s=s+(s.includes("?")?"&":"?")+Date.now();const{data:i}=await o.get(s);this.data=i}dateAdapterWatcher(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}async dataWatcher(t){var s,i;if(typeof t==="string"){this._data=JSON.parse(t)}else{this._data=t}const e=(i=(s=this._data)===null||s===void 0?void 0:s.Message)===null||i===void 0?void 0:i.find((t=>t.category===a.DISTURBANCE_INFORMATION&&t.baseType===a.BASE_TYPE_GLOBAL));if(e){const t=e.channel.filter((t=>t.name===a.CHANNEL_TICKER&&t.url)).map((t=>t.url)).reduce(((t,s)=>t.concat(s)),[]);const s=t.find((t=>t.url.indexOf(a.CHANNEL_INFO_URL_FILTER)!==-1));this.disturbance={id:e.id,head:e.head,text:h(e.text),startDate:new Date(`${e.sDate}T${e.sTime}+02:00`),endDate:new Date(`${e.eDate}T${e.eTime}+02:00`),altStart:e.altStart,altEnd:e.altEnd,infoUrl:s}}this.stzhDisturbanceFetched.emit({component:"stzh-vbz-majorticker",disturbance:this.disturbance})}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"vbz-majorticker")}this.dateAdapterWatcher(this.dateAdapter);if(this.data){await this.dataWatcher(this.data)}else{await this.apiWatcher(this.api)}}render(){const t={"stzh-vbz-majorticker":true};return i(e,{hidden:!this.disturbance||!this.ghettoboxShown},i("div",{class:t},this.disturbance&&i("stzh-show",{mikro:true,closeKey:this.showCloseKey,showFromDate:this.disturbance.startDate},i("stzh-ghettobox",{onStzhOpen:this.onGhettoboxOpen,onStzhClose:this.onGhettoboxClose,class:"stzh-vbz-majorticker__ghettobox",hideClose:true,mainTitle:this.disturbance.head},i("stzh-richtext",{innerHTML:this.disturbance.text}),this.disturbance.infoUrl?i("stzh-button",{slot:"button",href:this.disturbance.infoUrl.url},this.disturbance.infoUrl.name):i("stzh-button",{slot:"button",target:"_blank",href:this.moreInfoLink.replace(/\{lang\}/,this.localization.$locale).replace(/\{id\}/,this.disturbance.id)},this.localization.moreInfo)))))}get element(){return r(this)}static get watchers(){return{api:["apiWatcher"],dateAdapter:["dateAdapterWatcher"],data:["dataWatcher"]}}};n.style=c;export{n as stzh_vbz_majorticker};
+//# sourceMappingURL=p-d97fbf1f.entry.js.map

package/dist/stzh-components/p-fa4595c8.entry.js

@@ -0,0 +1,2 @@
+import{r as s,f as t,h as e,a as i,g as r}from"./p-c7bfac7a.js";import{m as h,a,r as o}from"./p-10e2901a.js";const n=".sc-stzh-progressbar-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-progressbar-h,[stzh-hidden].sc-stzh-progressbar-h{display:none}.sc-stzh-progressbar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-progressbar-h *.sc-stzh-progressbar,.sc-stzh-progressbar-h *.sc-stzh-progressbar::before,.sc-stzh-progressbar-h *.sc-stzh-progressbar::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-progressbar-h .has-focus.sc-stzh-progressbar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar{outline-style:none !important}.sc-stzh-progressbar-h .stzh-fylingfocus-focused.sc-stzh-progressbar::-moz-focus-inner{border:0 !important}.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.6875rem * 2)}@media screen and (min-width: 600px){.sc-stzh-progressbar-h{min-width:calc(var(--steps) * 1.9375rem * 2)}}.stzh-progressbar.sc-stzh-progressbar{position:relative;z-index:0;overflow:hidden}.stzh-progressbar__items.sc-stzh-progressbar{display:flex;flex-wrap:nowrap}.stzh-progressbar__item.sc-stzh-progressbar{flex-grow:1;flex-shrink:1;flex-basis:0}";const c=class{constructor(t){s(this,t);this.setCurrentSteps=()=>{if(h("ultra").matches&&this.stepsUltra){this.currentSteps=this.stepsUltra}else if(h("large").matches&&this.stepsLarge){this.currentSteps=this.stepsLarge}else if(h("medium").matches&&this.stepsMedium){this.currentSteps=this.stepsMedium}else if(h("small").matches&&this.stepsSmall){this.currentSteps=this.stepsSmall}else{this.currentSteps=this.steps}};this.localization=undefined;this.data=[];this.index=0;this.steps=5;this.stepsSmall=6;this.stepsMedium=0;this.stepsLarge=0;this.stepsUltra=0;this.clickDisabled=false;this.currentSteps=undefined}async getItemData(){return this._data.map(((s,t)=>Object.assign(Object.assign({},s),this.getItemAttributes(t))))}onIndexChange(){this.indexWatcher(this.index);this.setCurrentSteps();t(this.element)}indexWatcher(s){if(typeof s==="string"){this.index=JSON.parse(s)}else{this.index=s}}stepsWatcher(){this.setCurrentSteps()}dataWatcher(s){if(typeof s==="string"){this._data=JSON.parse(s)}else{this._data=s}this.lastItemIndex=this._data.length-1;this.maxStepIndex=this.currentSteps-1;this.withinLastFewSteps=this.index>=this._data.length-this.maxStepIndex}getItemAttributes(s){const t={};t.step=s+1;t.first=s===0;t.last=s===this.lastItemIndex;t.current=s===this.index;t.passed=s<this.index;const e=this._data[s];t.incomplete=e.incomplete;if(this._data.length>this.currentSteps){if(s===this.lastItemIndex&&!this.withinLastFewSteps){t.dotted=true}if(this.index<2){t.hide=s>this.maxStepIndex-1&&s<this.lastItemIndex}else{if(s===0){t.dotted=true}let e=this.index;if(this.withinLastFewSteps){e=this._data.length-this.maxStepIndex}t.hide=s>0&&s<e||s>this.index+(this.currentSteps-3)&&s<this.lastItemIndex}}return t}async componentWillLoad(){this.dataWatcher(this.data);this.indexWatcher(this.index);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"progressbar")}}async componentShouldUpdate(){this.dataWatcher(this.data);this.indexWatcher(this.index)}async componentDidUpdate(){this.dataWatcher(this.data);this.indexWatcher(this.index)}connectedCallback(){this.setCurrentSteps();a(this.setCurrentSteps)}disconnectedCallback(){o(this.setCurrentSteps)}render(){const s={"stzh-progressbar":true,[`stzh-progressbar--index-${this.index}`]:!!this.index};return e(i,{style:{"--steps":this.currentSteps?this.currentSteps.toString():null}},e("div",{class:s},e("div",{class:"stzh-progressbar__items",role:"list","aria-label":this.localization.label},this._data.map(((s,t)=>e("stzh-progressbar-item",Object.assign({},this.getItemAttributes(t),{icon:s.icon,disabled:s.disabled,label:s.label,"click-disabled":s.clickDisabled!==undefined?s.clickDisabled:this.clickDisabled,class:"stzh-progressbar__item"})))),e("slot",null))))}get element(){return r(this)}static get watchers(){return{index:["onIndexChange"],steps:["stepsWatcher"],stepsSmall:["stepsWatcher"],stepsMedium:["stepsWatcher"],stepsLarge:["stepsWatcher"],stepsUltra:["stepsWatcher"],data:["dataWatcher"]}}};c.style=n;export{c as stzh_progressbar};
+//# sourceMappingURL=p-fa4595c8.entry.js.map

package/dist/stzh-components/p-fa4595c8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhProgressbarCss","StzhProgressbar","this","setCurrentSteps","media","matches","stepsUltra","currentSteps","stepsLarge","stepsMedium","stepsSmall","steps","getItemData","_data","map","step","index","Object","assign","getItemAttributes","onIndexChange","indexWatcher","forceUpdate","element","newIndex","JSON","parse","stepsWatcher","dataWatcher","newValue","lastItemIndex","length","maxStepIndex","withinLastFewSteps","itemIndex","item","first","last","current","passed","stepItemFromData","incomplete","dotted","hide","substract","componentWillLoad","data","localization","window","stzhComponents","utils","fetchTranslations","componentShouldUpdate","componentDidUpdate","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","h","Host","style","toString","class","role","label","icon","disabled","clickDisabled","undefined"],"sources":["src/components/stzh-progressbar/stzh-progressbar.scss?tag=stzh-progressbar&encapsulation=scoped","src/components/stzh-progressbar/stzh-progressbar.tsx"],"sourcesContent":[":host {\n  min-width: calc(var(--steps) * #{$progressbarItemDottedSize} * 2);\n\n  @include mq($from: small) {\n    min-width: calc(var(--steps) * #{$progressbarItemDottedSizeSmallUp} * 2);\n  }\n}\n\n.stzh-progressbar {\n  position: relative;\n  z-index: 0; // create new stacking context\n\toverflow: hidden;\n\n  &__items {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  &__item {\n    /* flex the bullets to always have the same size */\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: 0;\n  }\n}\n","import {\n  Component,\n  forceUpdate,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Watch,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarDataItem\n} from '../../index';\n\nimport { addMediaChangeListener, removeMediaChangeListener, media } from \"../../utils/media-utils\";\nimport { StzhProgressbarLocalizedText } from \"./stzh-progressbar.localization\"\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n  tag: \"stzh-progressbar\",\n  styleUrl: \"stzh-progressbar.scss\",\n  scoped: true\n})\nexport class StzhProgressbar {\n  /** Translation strings */\n  @Prop() localization: StzhProgressbarLocalizedText;\n\n  /**\n   * Step data (JSON array with objects that have `label` attribute and optional:\n   * - `disabled`, if step should be disabled\n   * - `icon`, if icon instead of step number should be displayed):\n   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)\n   *\n   * ```\n   * {\n   *   \"label\": \"Step Label\"\n   *   \"icon\": \"clock\",\n   *   \"disabled\": true\n   * }\n   * ```\n   */\n  @Prop() data: StzhProgressbarDataItem[] | string = [];\n  private _data: StzhProgressbarDataItem[];\n\n  /** Index of the item that be active */\n  @Prop({ reflect: true }) index: number = 0;\n\n  /** Number of steps to show below small breakpoint */\n  @Prop() steps: number = 5;\n\n  /** Number of steps to show above small breakpoint */\n  @Prop() stepsSmall: number = 6;\n\n  /** Number of steps to show above medium breakpoint */\n  @Prop() stepsMedium: number = 0;\n\n  /** Number of steps to show above large breakpoint */\n  @Prop() stepsLarge: number = 0;\n\n  /** Number of steps to show above ultra breakpoint */\n  @Prop() stepsUltra: number = 0;\n\n  /** Whether all the progressbar-items are clickable (overrides item.clickDisabled in data property). */\n  @Prop() clickDisabled: boolean = false;\n\n  @State() currentSteps: number;\n\n  @Element() element: HTMLStzhProgressbarElement;\n\n  /**\n   * Return infos about rendered progressbar items.\n   * Array of objects including: hide (whether step is hidden)\n   * / passed (whether step has been passed)\n   * / current (whether step is currently active)\n   * / dotted (whether step has dotted style active)\n   * / first|last (whether step is first or last)\n   * / label\n   */\n  @Method()\n  async getItemData() {\n    return this._data.map((step, index) => {\n      return {\n        ...step,\n        ...this.getItemAttributes(index)\n      }\n    });\n  }\n\n  @Watch(\"index\")\n  onIndexChange() {\n    this.indexWatcher(this.index);\n    this.setCurrentSteps();\n    forceUpdate(this.element);\n  }\n\n  indexWatcher(newIndex: string | number) {\n    if (typeof newIndex === \"string\") {\n      this.index = JSON.parse(newIndex);\n    }\n    else {\n      this.index = newIndex;\n    }\n  }\n\n  @Watch(\"steps\")\n  @Watch(\"stepsSmall\")\n  @Watch(\"stepsMedium\")\n  @Watch(\"stepsLarge\")\n  @Watch(\"stepsUltra\")\n  stepsWatcher() {\n    this.setCurrentSteps();\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    }\n    else {\n      this._data = newValue;\n    }\n\n    this.lastItemIndex = this._data.length - 1;\n    this.maxStepIndex = this.currentSteps - 1;\n    this.withinLastFewSteps = this.index >= this._data.length - this.maxStepIndex;\n  }\n\n  private lastItemIndex: number;\n  private maxStepIndex: number;\n  private withinLastFewSteps: boolean;\n\n  private getItemAttributes(itemIndex: number): any {\n    const item = {} as HTMLStzhProgressbarItemElement;\n\n    item.step = itemIndex + 1;\n    item.first = itemIndex === 0;\n    item.last = itemIndex === this.lastItemIndex;\n    item.current = itemIndex === this.index;\n    item.passed = itemIndex < this.index;\n\n    const stepItemFromData = this._data[itemIndex];\n    item.incomplete = stepItemFromData.incomplete;\n\n    // hide overflowings if more items than max steps in DOM\n    if (this._data.length > this.currentSteps) {\n      // add dots to last item if current index is below the last few items\n      if (itemIndex === this.lastItemIndex && !this.withinLastFewSteps) {\n        item.dotted = true;\n      }\n\n      if (this.index < 2) {\n        // hide overflowing items on the right\n        item.hide = itemIndex > this.maxStepIndex - 1 && itemIndex < this.lastItemIndex;\n      } else {\n        // add dots to first item if current item is third or above\n        if (itemIndex === 0) {\n          item.dotted = true;\n        }\n\n        let substract = this.index;\n\n        // if is within the last elements, calculate how much previous\n        // should be shown to stay on 5 visible elements\n        if (this.withinLastFewSteps) {\n          substract = this._data.length - this.maxStepIndex;\n        }\n\n        // hide overflowing items on left and right side\n        item.hide = itemIndex > 0 && itemIndex < substract\n          || itemIndex > this.index + (this.currentSteps - 3) && itemIndex < this.lastItemIndex;\n      }\n    }\n\n    return item;\n  }\n\n  private setCurrentSteps = () => {\n    if (media(\"ultra\").matches && this.stepsUltra) {\n      this.currentSteps = this.stepsUltra;\n    } else if (media(\"large\").matches && this.stepsLarge) {\n      this.currentSteps = this.stepsLarge;\n    } else if (media(\"medium\").matches && this.stepsMedium) {\n      this.currentSteps = this.stepsMedium;\n    } else if (media(\"small\").matches && this.stepsSmall) {\n      this.currentSteps = this.stepsSmall;\n    } else {\n      this.currentSteps = this.steps;\n    }\n  }\n\n  async componentWillLoad() {\n    this.dataWatcher(this.data);\n    this.indexWatcher(this.index);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"progressbar\");\n    }\n  }\n\n  async componentShouldUpdate() {\n    this.dataWatcher(this.data);\n    this.indexWatcher(this.index);\n  }\n\n  async componentDidUpdate() {\n    this.dataWatcher(this.data);\n    this.indexWatcher(this.index);\n  }\n\n  connectedCallback() {\n    this.setCurrentSteps();\n    addMediaChangeListener(this.setCurrentSteps);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.setCurrentSteps);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar\": true,\n      [`stzh-progressbar--index-${this.index}`]: !!this.index\n    };\n\n    return (\n      <Host\n        style={{\n          '--steps': this.currentSteps ? this.currentSteps.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div\n            class=\"stzh-progressbar__items\"\n            role=\"list\"\n            aria-label={this.localization.label}\n          >\n            {this._data.map((step, index) =>\n              <stzh-progressbar-item\n                {...this.getItemAttributes(index)}\n                icon={step.icon}\n                disabled={step.disabled}\n                label={step.label}\n                click-disabled={step.clickDisabled !== undefined ? step.clickDisabled : this.clickDisabled}\n                class=\"stzh-progressbar__item\"\n              ></stzh-progressbar-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-fcc75797.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as e,F as i,a as h,g as c}from"./p-c7bfac7a.js";import{S as r}from"./p-fc692303.js";const l=".sc-stzh-chipselect-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-chipselect-h,[stzh-hidden].sc-stzh-chipselect-h{display:none}.sc-stzh-chipselect-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipselect-h *.sc-stzh-chipselect,.sc-stzh-chipselect-h *.sc-stzh-chipselect::before,.sc-stzh-chipselect-h *.sc-stzh-chipselect::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-chipselect-h .has-focus.sc-stzh-chipselect{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect{outline-style:none !important}.sc-stzh-chipselect-h .stzh-fylingfocus-focused.sc-stzh-chipselect::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-chipselect-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-chipselect__marker-symbol.sc-stzh-chipselect{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-chipselect__marker-text.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect__description-wrapper.sc-stzh-chipselect{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect__description.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chipselect__error.sc-stzh-chipselect{color:var(--stzh-color-error60)}.stzh-chipselect__error-list.sc-stzh-chipselect{list-style:none;margin:0;padding:0}.stzh-chipselect__description.sc-stzh-chipselect{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-chipselect__description-long.sc-stzh-chipselect{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-chipselect__description-long.sc-stzh-chipselect{margin-top:0}}.stzh-chipselect__description-long-popover.sc-stzh-chipselect{--width:auto;--max-width:27.3125rem}.stzh-chipselect__description-long-button.sc-stzh-chipselect{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-chipselect.sc-stzh-chipselect stzh-icon.stzh-chipselect__description-long-icon.sc-stzh-chipselect{--size:var(--stzh-icon-size-xsmall)}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xxxsmall)}.stzh-chipselect__label.sc-stzh-chipselect{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-heading-color);display:block;margin-bottom:var(--stzh-space-xsmall)}.stzh-chipselect__label.sc-stzh-chipselect:empty{display:none}.stzh-chipselect__marker.sc-stzh-chipselect{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-chipselect__chips.sc-stzh-chipselect{display:flex;align-items:center;flex-wrap:wrap;border-radius:var(--stzh-button-border-radius);gap:var(--stzh-space-medium)}.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chips.sc-stzh-chipselect:focus-within .is-focused[active].sc-stzh-chipselect{--background-color:Canvas}}.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:var(--stzh-color-secondary40)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-chipselect__chip.is-focused.sc-stzh-chipselect{--background-color:Highlight}}.stzh-chipselect--has-error.sc-stzh-chipselect .stzh-chipselect__error.sc-stzh-chipselect,.stzh-chipselect--has-description.sc-stzh-chipselect .stzh-chipselect__description.sc-stzh-chipselect{margin-top:var(--stzh-space-xsmall)}.stzh-chipselect--has-label-hidden.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__chips.sc-stzh-chipselect,.stzh-chipselect--is-disabled.sc-stzh-chipselect .stzh-chipselect__label.sc-stzh-chipselect{cursor:not-allowed}";let o=0;const n=class{constructor(e){s(this,e);this.stzhChange=t(this,"stzhChange",7);this._data=[];this._value=[];this.handleReset=async()=>{this.value=this.defaultValue};this.handleChipClick=async(s,t)=>{if(this.multiple){if(s.value===""&&this._value.length>0&&!(this._value.length===1&&this._value[0]==="")){this.value=[]}else if(s.value!==""){this.value=this._value.includes(s.value)?this._value.filter((t=>t!==s.value)):[...this._value,s.value]}}else{this.value=s.value}this.activeFocusOptionIndex=t;await this.waitForNextRender();this.stzhChange.emit({component:"stzh-chipselect",value:this.multiple?this._value:this._value[0]})};this.handleKeydown=s=>{let t=null;const e=this.activeFocusOptionIndex;if(s.key==="ArrowUp"||s.key==="ArrowLeft"){s.preventDefault();if(e>0){t=e-1}}else if(s.key==="ArrowDown"||s.key==="ArrowRight"){s.preventDefault();if(e<this._data.length-1){t=e+1}}else if(s.key===" "||s.key==="Enter"){s.preventDefault();if(this.multiple){if(this._data[e].value===""&&this._value.length>0&&!(this._value.length===1&&this._value[0]==="")){this.value=[]}else if(this._data[e].value!==""){this.value=this._value.includes(this._data[e].value)?this._value.filter((s=>s!==this._data[e].value)):[...this._value,this._data[e].value]}}else{this.value=this._data[e].value}this.stzhChange.emit({component:"stzh-chipselect",value:this.value})}if(t!==null){this.activeFocusOptionIndex=t}};this.localization=undefined;this.data=[];this.name=undefined;this.label="";this.labelHidden=false;this.multiple=false;this.value="";this.defaultValue="";this.description=undefined;this.descriptionLong=undefined;this.descriptionLongTitle=undefined;this.error=undefined;this.invalid=false;this.required=false;this.disabled=false;this.hideOptional=false;this.a11yDescribedby="";this.activeFocusOptionIndex=0}resetListener(s){if(s.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}valueWatcher(s){if(typeof s==="string"){try{const t=JSON.parse(s);if(Array.isArray(t)){this._value=t}else{this._value=s?[s]:[]}}catch(t){this._value=s?[s]:[]}}else{this._value=s?s:[]}}dataWatcher(s){if(typeof s==="string"){this._data=JSON.parse(s)}else{this._data=s}this._data.map((s=>{if(typeof s.value!=="string"){throw new TypeError(`${s.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`)}}))}errorWatcher(s){if(typeof s==="string"){try{this._error=JSON.parse(s)}catch(t){if(s){this._error=[s]}else{this._error=[]}}}else if(s){this._error=s}else{this._error=[]}}waitForNextRender(){return new Promise((s=>this.renderPromiseResolve=s))}componentDidRender(){if(this.renderPromiseResolve){this.renderPromiseResolve()}}async componentWillLoad(){this.id=`stzh-chipselect-${o++}`;this.dataWatcher(this.data);this.errorWatcher(this.error);this.valueWatcher(this.value);this.defaultValue=this.defaultValue||this.value;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"chipselect")}}render(){const s=!!this.description;const t=!!this.descriptionLong;const c=!!this.error;const l={"stzh-chipselect":true,"stzh-chipselect--has-description":s,"stzh-chipselect--has-description-long":t,"stzh-chipselect--has-error":c,"stzh-chipselect--is-invalid":this.invalid||c,"stzh-chipselect--is-disabled":this.disabled,"stzh-chipselect--is-required":this.required,"stzh-chipselect--has-label-hidden":this.labelHidden};return e(h,{"is-invalid":this.invalid||c},e("div",{class:l},this.multiple?e(i,null,this._value.map((s=>e("input",{type:"hidden",name:this.name,value:s})))):e("input",{type:"hidden",name:this.name,value:this.value}),e("label",{class:"stzh-chipselect__label",htmlFor:this.id},this.label?this.label:e("slot",null),!this.hideOptional&&e("span",{class:"stzh-chipselect__marker"},e("span",{class:"stzh-chipselect__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),e("span",{class:"stzh-chipselect__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),this._data.length>0&&e(i,null,e("div",{id:this.id,class:"stzh-chipselect__chips",role:"listbox",tabindex:"0","aria-multiselectable":this.multiple?"true":"false","aria-activedescendant":`${this.id}-option-${this.activeFocusOptionIndex}`,"aria-describedby":`${this.id}-description ${this.a11yDescribedby}`,onKeyDown:this.handleKeydown},this._data.map(((s,t)=>e("stzh-chip",{role:"option",class:{"stzh-chipselect__chip":true,"is-focused":this.activeFocusOptionIndex===t},label:s.label,counter:s.counter,icon:s.icon,type:s.type,inverted:s.inverted,variant:s.variant,size:s.size||"small",disabled:this.disabled||s.disabled,active:this._value.includes(s.value)||!this.multiple&&!s.value&&(this._value.length===0||this._value[0]==="")||!s.value&&this.multiple&&(this._value.length===0||this._value.length===1&&this._value[0]===""),"aria-selected":this._value.includes(s.value)||!this.multiple&&!s.value&&(this._value.length===0||this._value[0]==="")||!s.value&&this.multiple&&(this._value.length===0||this._value.length===1&&this._value[0]==="")?"true":"false",id:`${this.id}-option-${t}`,a11yTabindex:"-1",onClick:()=>this.handleChipClick(s,t)})))),e(r,{classPrefix:"stzh-chipselect",id:`${this.id}-description`,error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongTitle:this.descriptionLongTitle,descriptionLongUsed:t,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))))}get element(){return c(this)}static get watchers(){return{value:["valueWatcher"],data:["dataWatcher"],error:["errorWatcher"]}}};n.style=l;export{n as stzh_chipselect};
+//# sourceMappingURL=p-fcc75797.entry.js.map

package/dist/stzh-components/p-fcc75797.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhChipselectCss","chipselectCounter","StzhChipselect","this","_data","_value","handleReset","async","value","defaultValue","handleChipClick","data","index","multiple","length","includes","filter","activeFocusOptionIndex","waitForNextRender","stzhChange","emit","component","handleKeydown","event","newActiveIndex","activeOptionIndex","key","preventDefault","resetListener","target","contains","element","requestAnimationFrame","valueWatcher","newValue","parsedValue","JSON","parse","Array","isArray","ex","dataWatcher","map","dataEntry","TypeError","errorWatcher","_error","e","Promise","resolve","renderPromiseResolve","componentDidRender","componentWillLoad","id","error","localization","window","stzhComponents","utils","fetchTranslations","render","descriptionUsed","description","descriptionLongUsed","descriptionLong","errorUsed","classes","invalid","disabled","required","labelHidden","h","Host","class","Fragment","type","name","htmlFor","label","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","role","tabindex","a11yDescribedby","onKeyDown","counter","icon","inverted","variant","size","active","a11yTabindex","onClick","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":[":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-chipselect {\n  @include input-description;\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('micro');\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space('xsmall');\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    gap: space('medium');\n\n    &:focus-within {\n      .is-focused[active] {\n        --background-color: #{$colorPrimary90};\n\n        @include highContrast() {\n          --background-color: Canvas;\n        }\n      }\n    }\n  }\n\n  &__chip {\n    &.is-focused {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n  }\n\n  // &__dropdown {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space('xsmall');\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State,\n  Fragment,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        const parsedValue = JSON.parse(newValue); // since parsing a number like string (i.e. \"1\") will return a number and parsing a boolean like string (i.e. \"true\") will return a boolean we need to check if the parsed value is indeed an array.\n        if (Array.isArray(parsedValue)) {\n          this._value = parsedValue;\n        }\n        else {\n          this._value = newValue ? [newValue] : [];\n        }\n      } catch (ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._data.map((dataEntry) => {\n      if (typeof dataEntry.value !== \"string\"){\n        throw new TypeError(`${dataEntry.value} is not a string. The data prop only accepts arrays (or stringified arrays), where the value property is a string. Consult the StzhChipselectItem type definition for more information.`);\n      }\n    });\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = data.value;\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value : this._value[0]\n    });\n  }\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      if (this.multiple) {\n        if (this._data[activeOptionIndex].value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n          this.value = [];\n        } else if (this._data[activeOptionIndex].value !== \"\") {\n          this.value = this._value.includes(this._data[activeOptionIndex].value)\n            ? this._value.filter(value => value !== this._data[activeOptionIndex].value)\n            : [...this._value, this._data[activeOptionIndex].value];\n        }\n      } else {\n        this.value = this._data[activeOptionIndex].value; //HERE\n      }\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple\n            ?\n            <Fragment>\n              {this._value.map((value) =>\n                <input type=\"hidden\" name={this.name} value={value} />\n              )}\n            </Fragment>\n            :\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n            />\n          }\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional &&\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </label>\n\n          {this._data.length > 0 &&\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value)\n                      || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\"))\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value)\n                      || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\"))\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\" : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}