@oiz/stzh-components 4.13.0-beta2 → 4.13.0-beta3

package/dist/components/{p-Cgv50ptD.js → p-C8WcT7h2.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 
 const stzhButtongroupCss = () => `.sc-stzh-buttongroup-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-buttongroup-h,[stzh-hidden].sc-stzh-buttongroup-h{display:none}.sc-stzh-buttongroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::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-buttongroup-h .has-focus.sc-stzh-buttongroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-buttongroup-h .stzh-fylingfocus-focused.sc-stzh-buttongroup{outline-style:none !important}.sc-stzh-buttongroup-h .stzh-fylingfocus-focused.sc-stzh-buttongroup::-moz-focus-inner{border:0 !important}[fullwidth].sc-stzh-buttongroup-h .stzh-buttongroup.sc-stzh-buttongroup{width:100%;flex-wrap:wrap}.stzh-buttongroup.sc-stzh-buttongroup{position:relative;z-index:auto;display:flex;gap:var(--stzh-space-xsmall)}`;
 
@@ -144,6 +144,6 @@ function defineCustomElement() {
 }
 
 export { StzhButtongroup as S, defineCustomElement as d };
-//# sourceMappingURL=p-Cgv50ptD.js.map
+//# sourceMappingURL=p-C8WcT7h2.js.map
 
-//# sourceMappingURL=p-Cgv50ptD.js.map
+//# sourceMappingURL=p-C8WcT7h2.js.map

package/dist/components/{p-Cgv50ptD.js.map → p-C8WcT7h2.js.map}

@@ -1 +1 @@
-{"file":"p-Cgv50ptD.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,i4CAAi4C,CAAC;;MCYv5C,eAAe,iBAAAA,kBAAA,CAAA,MAAA,eAAA,SAAAC,CAAA,CAAA;AAL5B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAS2B,QAAA,IAAI,CAAA,IAAA,GAAmB,SAAS;AAmHjD,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,cAAc,EAAE;AACvB,SAAC;AAeF;;AAvHS,IAAA,UAAU,CAAC,QAAgB,EAAA;AACjC,QAAA,OAAO,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC;;;IAIzD,gBAAgB,CAAC,GAAY,EAAE,QAAgB,EAAA;QACrD,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC;QAC1C,MAAM,OAAO,GAAI,GAAW,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAA+B;QAErF,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS;QACzD,MAAM,OAAO,GAAG,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;QAC9D,OAAO,OAAO,IAAI,OAAO;;AAGnB,IAAA,qBAAqB,CAAC,GAAY,EAAE,QAAgB,EAAE,QAAyB,EAAA;QACrF,IAAI,QAAQ,KAAK,SAAS;YAAE;;AAE5B,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC;YAAE;;QAG1C,IAAI,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;AAC3C,YAAA,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC;;;IAIhC,uBAAuB,CAAC,GAAY,EAAE,QAAkB,EAAA;QAC9D,IAAI,QAAQ,KAAK,IAAI;YAAE;QAEvB,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,WAAW,CAAC;AAC7C,QAAA,MAAM,OAAO,GAAI,GAAW,CAAC,SAAgC;;;QAI7D,MAAM,OAAO,GAAG,OAAO;AACvB,QAAA,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI;;QAGhC,IAAI,OAAO,IAAI,OAAO;YAAE;;AAGxB,QAAA,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;;IAG3B,qBAAqB,CAAC,GAAY,EAAE,QAAkB,EAAA;;QAE5D,IAAI,QAAQ,KAAK,IAAI;YAAE;QAEvB,MAAM,OAAO,GAAG,GAAG,CAAC,YAAY,CAAC,SAAS,CAAC;AAC3C,QAAA,MAAM,OAAO,GAAI,GAAW,CAAC,OAA8B;;;QAI3D,MAAM,OAAO,GAAG,OAAO;AACvB,QAAA,MAAM,OAAO,GAAG,OAAO,KAAK,IAAI;;QAGhC,IAAI,OAAO,IAAI,OAAO;YAAE;;AAGxB,QAAA,GAAG,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC;;AAGjC,IAAA,MAAM,gBAAgB,GAAA;;AAEpB,QAAA,MAAM,cAAc,CAAC,WAAW,CAAC,aAAa,CAAC;QAC/C,IAAI,CAAC,cAAc,EAAE;QACrB,qBAAqB,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;;IAQpD,YAAY,GAAA;QACV,IAAI,CAAC,cAAc,EAAE;;IAIvB,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,EAAE;;IAIvB,eAAe,GAAA;QACb,IAAI,CAAC,cAAc,EAAE;;IAGf,cAAc,GAAA;QACpB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,aAAa,CAAC;AAC5D,QAAA,OAAO,CAAC,OAAO,CAAC,GAAG,IAAG;YACpB,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;YAClD,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC;YAC/D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAC7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC;YAE7D,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE,IAAI,CAAC,OAAO,CAAC;YAC7C,IAAI,CAAC,uBAAuB,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC;AACnD,SAAC,CAAC;;IAOJ,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,kBAAkB,EAAE,IAAI;SACzB;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,YAAY,EAAS,CAAA,CAC1C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space(\"xsmall\");\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\nimport { StzhButtonSize } from \"../../index\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */\n  @Prop({ reflect: true }) rounded?: boolean;\n\n  // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"fullwidth\");\n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute(\"fullwidth\", \"\");\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n    // Rounded only true if group has rounded property true\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"rounded\");\n    const propVal = (btn as any).rounded as boolean | undefined;\n\n    // Check if property rounded exists on button and if it is true or false\n    // If property is true button property rounded ovverided buttonsgroups property rounded\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // Button > Buttongroup\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default rounded attribute\n    btn.setAttribute(\"rounded\", \"\");\n  }\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch(\"size\")\n  @Watch(\"sizeSmall\")\n  @Watch(\"sizeMedium\")\n  @Watch(\"sizeLarge\")\n  @Watch(\"sizeUltra\")\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"fullwidth\")\n  onFullwidthChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"rounded\")\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach(btn => {\n      this.applyDefaultIfMissing(btn, \"size\", this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\", this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\", this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\", this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-C8WcT7h2.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  // ::slotted(stzh-button) {\n  //   z-index: 1;\n  //   margin-right: -1px;\n\n  //   &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n  //     z-index: 0;\n  //   }\n\n  //   &:first-child {\n  //     --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n  //     // --border-width: 1px 0px 1px 1px;\n  //   }\n\n  //   &:last-child {\n  //     --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n  //     // --border-width: 1px 1px 1px 0px;\n  //     margin-right: 0;\n  //   }\n\n  //   // only one button\n  //   &:first-child:last-child {\n  //     // --border-width: 1px;\n  //     --border-radius: #{$buttonBorderRadius};\n  //     margin: 0;\n  //   }\n\n  //   // when only two buttons\n  //   &:first-child + stzh-button:last-child {\n  //     // --border-width: 1px;\n  //   }\n\n  //   // buttons in the middle\n  //   &:not(:first-child):not(:last-child) {\n  //     --border-radius: 0px;\n  //   }\n  // }\n}\n\n:host([fullwidth]) .stzh-buttongroup {\n  width: 100%;\n  flex-wrap: wrap;\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n  gap: space(\"xsmall\");\n}\n","import { Component, Host, h, Prop, Watch, Element } from \"@stencil/core\";\n\nimport { StzhButtonSize } from \"../../index\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true,\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  /** Size variant (above all breakpoints) only valid for buttons without own size property */\n  @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n  @Prop({ reflect: true }) sizeSmall?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeMedium?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeLarge?: StzhButtonSize;\n  @Prop({ reflect: true }) sizeUltra?: StzhButtonSize;\n\n  /** Whether buttongroup is full width */\n  @Prop({ reflect: true }) fullwidth?: boolean;\n\n  /** Whether buttongroup is rounded */\n  @Prop({ reflect: true }) rounded?: boolean;\n\n  // \"size-small\" -> \"sizeSmall\"\n  private toPropName(attrName: string): string {\n    return attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());\n  }\n\n  // If button has its own size property, do not override this property\n  private buttonHasOwnSize(btn: Element, attrName: string): boolean {\n    const attrVal = btn.getAttribute(attrName);\n    const propVal = (btn as any)[this.toPropName(attrName)] as StzhButtonSize | undefined;\n\n    const attrOwn = attrVal !== null && attrVal !== \"default\";\n    const propOwn = propVal !== undefined && propVal !== \"default\";\n    return attrOwn || propOwn;\n  }\n\n  private applyDefaultIfMissing(btn: Element, attrName: string, groupVal?: StzhButtonSize) {\n    if (groupVal === undefined) return;\n    // If button has own size property, do not override this property\n    if (this.buttonHasOwnSize(btn, attrName)) return;\n\n    // Otherwise set default size attribute (works directly, also before hydration)\n    if (btn.getAttribute(attrName) !== groupVal) {\n      btn.setAttribute(attrName, groupVal);\n    }\n  }\n\n  private applyFullwidthIfMissing(btn: Element, groupVal?: boolean) {\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"fullwidth\");\n    const propVal = (btn as any).fullwidth as boolean | undefined;\n\n    // Exists property fullwidth buttons overrides buttongroup property fullwidth\n    // Property fullwidth === true (button has fullwidth)\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // If button has own fullwidth property, do not override this property\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default fullwidth attribute\n    btn.setAttribute(\"fullwidth\", \"\");\n  }\n\n  private applyRoundedIfMissing(btn: Element, groupVal?: boolean) {\n    // Rounded only true if group has rounded property true\n    if (groupVal !== true) return;\n\n    const hasAttr = btn.hasAttribute(\"rounded\");\n    const propVal = (btn as any).rounded as boolean | undefined;\n\n    // Check if property rounded exists on button and if it is true or false\n    // If property is true button property rounded ovverided buttonsgroups property rounded\n    const attrOwn = hasAttr;\n    const propOwn = propVal === true;\n\n    // Button > Buttongroup\n    if (attrOwn || propOwn) return;\n\n    // Otherwise set default rounded attribute\n    btn.setAttribute(\"rounded\", \"\");\n  }\n\n  async componentDidLoad() {\n    // Propagate, if button is defined\n    await customElements.whenDefined(\"stzh-button\");\n    this.propagateSizes();\n    requestAnimationFrame(() => this.propagateSizes());\n  }\n\n  @Watch(\"size\")\n  @Watch(\"sizeSmall\")\n  @Watch(\"sizeMedium\")\n  @Watch(\"sizeLarge\")\n  @Watch(\"sizeUltra\")\n  onSizeChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"fullwidth\")\n  onFullwidthChange() {\n    this.propagateSizes();\n  }\n\n  @Watch(\"rounded\")\n  onRoundedChange() {\n    this.propagateSizes();\n  }\n\n  private propagateSizes() {\n    const buttons = this.element.querySelectorAll(\"stzh-button\");\n    buttons.forEach(btn => {\n      this.applyDefaultIfMissing(btn, \"size\", this.size);\n      this.applyDefaultIfMissing(btn, \"size-small\", this.sizeSmall);\n      this.applyDefaultIfMissing(btn, \"size-medium\", this.sizeMedium);\n      this.applyDefaultIfMissing(btn, \"size-large\", this.sizeLarge);\n      this.applyDefaultIfMissing(btn, \"size-ultra\", this.sizeUltra);\n\n      this.applyRoundedIfMissing(btn, this.rounded);\n      this.applyFullwidthIfMissing(btn, this.fullwidth);\n    });\n  }\n\n  private onSlotChange = () => {\n    this.propagateSizes();\n  };\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.onSlotChange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B85c63Jz.js → p-CBCQoVcu.js}

@@ -1,9 +1,9 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 import { a as api } from './p-Cpg2gH_9.js';
-import { d as defineCustomElement$4 } from './p-Cl1gEXQY.js';
-import { d as defineCustomElement$3 } from './p-XwB7D2_o.js';
-import { d as defineCustomElement$2 } from './p-DSXTn_9y.js';
-import { d as defineCustomElement$1 } from './p-DdYpx2_6.js';
+import { d as defineCustomElement$4 } from './p-BC5CKnR0.js';
+import { d as defineCustomElement$3 } from './p-kc3jagy9.js';
+import { d as defineCustomElement$2 } from './p-C5BMqKn_.js';
+import { d as defineCustomElement$1 } from './p-DP0n1_w_.js';
 
 const stzhToastbarCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}:host{z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}`;
 
@@ -204,6 +204,6 @@ function defineCustomElement() {
 }
 
 export { StzhToastbar as S, defineCustomElement as d };
-//# sourceMappingURL=p-B85c63Jz.js.map
+//# sourceMappingURL=p-CBCQoVcu.js.map
 
-//# sourceMappingURL=p-B85c63Jz.js.map
+//# sourceMappingURL=p-CBCQoVcu.js.map

package/dist/components/{p-B85c63Jz.js.map → p-CBCQoVcu.js.map}

@@ -1 +1 @@
-{"file":"p-B85c63Jz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CBCQoVcu.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","Cookie"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n  @include spaceCurve(\"bottom\", \"regular\");\n  z-index: $zIndexOverlay;\n  position: fixed;\n  pointer-events: none;\n  left: $containerMargin;\n  right: $containerMargin;\n  bottom: calc(\n    var(--stzh-pagetitle-disturber-stuck-height, 0px) +\n      var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n  );\n\n  @include mq($from: small) {\n    left: $containerMarginSmall;\n    right: auto;\n    max-width: 429px;\n  }\n\n  @include mq($from: medium) {\n    left: $containerMarginMedium;\n    max-width: 440px;\n  }\n\n  @include mq($from: large) {\n    left: $containerMarginLarge;\n    max-width: 485px;\n  }\n\n  @include mq($from: ultra) {\n    left: calc(\n      (100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2\n    );\n    max-width: 554px;\n  }\n\n  ::slotted(*:not([hidden]):not([slot])) {\n    margin-bottom: space(\"small\");\n  }\n}\n\n.stzh-toastbar {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n\n  @include mq($from: small) {\n    align-items: flex-start;\n  }\n}\n","import { Component, Host, h, Element, Prop, Method, Watch } from \"@stencil/core\";\n\nimport { StzhToastbarInitialToast, StzhToastType } from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/**\n * @slot - Slot for stzh-toast elements\n */\n@Component({\n  tag: \"stzh-toastbar\",\n  styleUrl: \"stzh-toastbar.scss\",\n  shadow: true,\n})\nexport class StzhToastbar {\n  /**\n   * Time after toasts are hidden (in seconds).\n   * Toasts with type `error` will stay, until the user closes them manually.\n   */\n  @Prop() hideAfter: number = 30;\n\n  /**\n   * Maximum of toasts allowed to be shown.\n   * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n   */\n  @Prop() max: number = 5;\n\n  /**\n   * Initial toasts.\n   *\n   * Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n   * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n   *\n   * If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n   * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n   */\n  @Prop() initialToasts: StzhToastbarInitialToast[] | string = [];\n  private _initialToasts: StzhToastbarInitialToast[] = [];\n\n  @Element() element: HTMLStzhToastbarElement;\n\n  /** Create new toast. */\n  @Method()\n  async toast(\n    label: string,\n    { type, link }: { type?: StzhToastType; link?: HTMLStzhButtonElement } = { type: \"info\" },\n  ): Promise<HTMLStzhToastElement> {\n    const toast = document.createElement(\"stzh-toast\");\n    toast.hidden = true;\n    toast.label = label;\n    toast.role = \"alert\";\n    toast.type = type || \"info\";\n    toast.initialOpenAnimation = true;\n\n    if (link) {\n      link.slot = \"link\";\n      link.size = \"small\";\n      toast.appendChild(link);\n    }\n\n    this.element.appendChild(toast);\n\n    return toast;\n  }\n\n  @Watch(\"initialToasts\")\n  initialToastsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._initialToasts = JSON.parse(newValue);\n    } else {\n      this._initialToasts = newValue;\n    }\n  }\n\n  private toastAppended(toast: HTMLStzhToastElement) {\n    if (toast.getAttribute(\"data-stzh-toastbar-managed\")) {\n      return;\n    }\n\n    toast.setAttribute(\"data-stzh-toastbar-managed\", \"\");\n\n    toast.addEventListener(\"stzhClosed\", () => {\n      toast.remove();\n    });\n\n    if (toast.type !== \"error\") {\n      let timeoutStarted = new Date().getTime();\n      let restTime = this.hideAfter * 1000;\n      let currentTimeout = window.setTimeout(() => {\n        toast.hide();\n      }, restTime);\n\n      toast.addEventListener(\"pointerenter\", () => {\n        if (currentTimeout) {\n          window.clearTimeout(currentTimeout);\n          const timePassed = new Date().getTime() - timeoutStarted;\n          restTime = restTime - timePassed;\n        }\n      });\n\n      toast.addEventListener(\"pointerleave\", () => {\n        timeoutStarted = new Date().getTime();\n        currentTimeout = window.setTimeout(() => {\n          toast.hide();\n        }, restTime);\n      });\n    }\n  }\n\n  private toastsAppended() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n      this.toastAppended(toast);\n    });\n  }\n\n  private hideOverflowingItems() {\n    const host = (this.element.getRootNode() as ShadowRoot)?.host || this.element;\n    const childCount = host.children.length;\n\n    Array.from(host.children)\n      .splice(0, childCount - this.max)\n      .forEach((toast: HTMLStzhToastElement) => {\n        toast.hide();\n      });\n  }\n\n  private handleSlotchange = () => {\n    this.toastsAppended();\n    this.hideOverflowingItems();\n  };\n\n  componentWillLoad() {\n    this.initialToastsWatcher(this.initialToasts);\n  }\n\n  componentDidLoad() {\n    this._initialToasts.forEach(async data => {\n      if (data.cookie) {\n        const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n        if (alreadyClosedBefore) {\n          return;\n        }\n      }\n\n      let link = data.link;\n\n      if (!(link instanceof HTMLElement)) {\n        const generatedLink = document.createElement(\"stzh-button\");\n        generatedLink.slot = \"link\";\n        generatedLink.size = \"small\";\n\n        Object.assign(generatedLink, data.link);\n        link = generatedLink;\n      }\n\n      const toast = await this.toast(data.label, {\n        type: data.type,\n        link: link as HTMLStzhButtonElement,\n      });\n\n      if (data.cookie) {\n        let cookieExpires = 365;\n\n        if (data.cookieExpires === 0) {\n          cookieExpires = null;\n        } else if (data.cookieExpires) {\n          cookieExpires = data.cookieExpires;\n        }\n\n        toast.addEventListener(\"stzhClosed\", () => {\n          Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, \"1\", {\n            expires: cookieExpires,\n          });\n        });\n      }\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-toastbar\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot onSlotchange={this.handleSlotchange}></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-DztW1SL5.js → p-CCyGg44V.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 
 const stzhRowCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{width:100%;--row-gap:var(--stzh-row-row-gap, 0px)}:host([span="1"]) ::slotted(stzh-cell:not([span])){--cell-width:8.3333333333%}:host([span="2"]) ::slotted(stzh-cell:not([span])){--cell-width:16.6666666667%}:host([span="3"]) ::slotted(stzh-cell:not([span])){--cell-width:25%}:host([span="4"]) ::slotted(stzh-cell:not([span])){--cell-width:33.3333333333%}:host([span="5"]) ::slotted(stzh-cell:not([span])){--cell-width:41.6666666667%}:host([span="6"]) ::slotted(stzh-cell:not([span])){--cell-width:50%}:host([span="7"]) ::slotted(stzh-cell:not([span])){--cell-width:58.3333333333%}:host([span="8"]) ::slotted(stzh-cell:not([span])){--cell-width:66.6666666667%}:host([span="9"]) ::slotted(stzh-cell:not([span])){--cell-width:75%}:host([span="10"]) ::slotted(stzh-cell:not([span])){--cell-width:83.3333333333%}:host([span="11"]) ::slotted(stzh-cell:not([span])){--cell-width:91.6666666667%}:host([span="12"]) ::slotted(stzh-cell:not([span])){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]) ::slotted(stzh-cell:not([span-small])){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]) ::slotted(stzh-cell:not([span-small])){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]) ::slotted(stzh-cell:not([span-small])){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]) ::slotted(stzh-cell:not([span-small])){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]) ::slotted(stzh-cell:not([span-small])){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]) ::slotted(stzh-cell:not([span-small])){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]) ::slotted(stzh-cell:not([span-small])){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]) ::slotted(stzh-cell:not([span-small])){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]) ::slotted(stzh-cell:not([span-small])){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]) ::slotted(stzh-cell:not([span-small])){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]) ::slotted(stzh-cell:not([span-small])){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]) ::slotted(stzh-cell:not([span-small])){--cell-width:100%}}@media screen and (min-width: 900px){:host([span-medium="1"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:8.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="2"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:16.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="3"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:25%}}@media screen and (min-width: 900px){:host([span-medium="4"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:33.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="5"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:41.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="6"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:50%}}@media screen and (min-width: 900px){:host([span-medium="7"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:58.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="8"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:66.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="9"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:75%}}@media screen and (min-width: 900px){:host([span-medium="10"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:83.3333333333%}}@media screen and (min-width: 900px){:host([span-medium="11"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:91.6666666667%}}@media screen and (min-width: 900px){:host([span-medium="12"]) ::slotted(stzh-cell:not([span-medium])){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]) ::slotted(stzh-cell:not([span-large])){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]) ::slotted(stzh-cell:not([span-large])){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]) ::slotted(stzh-cell:not([span-large])){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]) ::slotted(stzh-cell:not([span-large])){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]) ::slotted(stzh-cell:not([span-large])){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]) ::slotted(stzh-cell:not([span-large])){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]) ::slotted(stzh-cell:not([span-large])){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]) ::slotted(stzh-cell:not([span-large])){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]) ::slotted(stzh-cell:not([span-large])){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]) ::slotted(stzh-cell:not([span-large])){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]) ::slotted(stzh-cell:not([span-large])){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]) ::slotted(stzh-cell:not([span-large])){--cell-width:100%}}@media screen and (min-width: 1600px){:host([span-ultra="1"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:8.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="2"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:16.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="3"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:25%}}@media screen and (min-width: 1600px){:host([span-ultra="4"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:33.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="5"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:41.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="6"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:50%}}@media screen and (min-width: 1600px){:host([span-ultra="7"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:58.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="8"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:66.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="9"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:75%}}@media screen and (min-width: 1600px){:host([span-ultra="10"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:83.3333333333%}}@media screen and (min-width: 1600px){:host([span-ultra="11"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:91.6666666667%}}@media screen and (min-width: 1600px){:host([span-ultra="12"]) ::slotted(stzh-cell:not([span-ultra])){--cell-width:100%}}.stzh-row{display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:var(--row-gap);margin-left:calc(var(--stzh-grid-gutter) / -2);margin-right:calc(var(--stzh-grid-gutter) / -2)}@media screen and (min-width: 600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-small) / -2);margin-right:calc(var(--stzh-grid-gutter-small) / -2)}}@media screen and (min-width: 900px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-medium) / -2);margin-right:calc(var(--stzh-grid-gutter-medium) / -2)}}@media screen and (min-width: 1260px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-large) / -2);margin-right:calc(var(--stzh-grid-gutter-large) / -2)}}@media screen and (min-width: 1600px){.stzh-row{margin-left:calc(var(--stzh-grid-gutter-ultra) / -2);margin-right:calc(var(--stzh-grid-gutter-ultra) / -2)}}.stzh-row{}.stzh-row--justify-end{justify-content:flex-end}.stzh-row--justify-center{justify-content:center}.stzh-row--justify-between{justify-content:space-between}.stzh-row--justify-around{justify-content:space-around}.stzh-row--justify-evenly{justify-content:space-evenly}.stzh-row{}.stzh-row--items-end{align-items:flex-end}.stzh-row--items-center{align-items:center}.stzh-row--items-baseline{align-items:baseline}.stzh-row--items-stretch{align-items:stretch}.stzh-row{}.stzh-row--content-end{align-content:flex-end}.stzh-row--content-center{align-content:center}.stzh-row--content-between{align-content:space-between}.stzh-row--content-around{align-content:space-around}.stzh-row--content-evenly{align-content:space-evenly}`;
 
@@ -50,6 +50,6 @@ function defineCustomElement() {
 }
 
 export { StzhRow as S, defineCustomElement as d };
-//# sourceMappingURL=p-DztW1SL5.js.map
+//# sourceMappingURL=p-CCyGg44V.js.map
 
-//# sourceMappingURL=p-DztW1SL5.js.map
+//# sourceMappingURL=p-CCyGg44V.js.map

package/dist/components/{p-DztW1SL5.js.map → p-CCyGg44V.js.map}

@@ -1 +1 @@
-{"file":"p-DztW1SL5.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,mxSAAmxS,CAAC;;MCYjyS,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;AAkB3D;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;AACtD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CCyGg44V.js","mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,mxSAAmxS,CAAC;;MCYjyS,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAkB2B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;;AAGjC,QAAA,IAAK,CAAA,KAAA,GAAiB,OAAO;;AAG7B,QAAA,IAAO,CAAA,OAAA,GAAmB,OAAO;AAkB3D;IAhBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;gBACrD,CAAC,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAC/C,CAAC,CAAA,kBAAA,EAAqB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;AACtD,aAAA,EAAA,EAED,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-row/stzh-row.scss?tag=stzh-row&encapsulation=shadow","src/components/stzh-row/stzh-row.tsx"],"sourcesContent":[":host {\n  width: 100%;\n\n  --row-gap: var(--stzh-row-row-gap, 0px);\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"])\n        ::slotted(stzh-cell:not([span-#{$breakpoint}])) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{calc(100% / ($gridCells/ $i))};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) ::slotted(stzh-cell:not([span])) {\n        --cell-width: #{calc(100% / calc($gridCells / $i))};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-row {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  row-gap: var(--row-gap);\n  margin-left: calc(#{$gridGutter} / -2);\n  margin-right: calc(#{$gridGutter} / -2);\n\n  @include mq($from: small) {\n    margin-left: calc(#{$gridGutterSmall} / -2);\n    margin-right: calc(#{$gridGutterSmall} / -2);\n  }\n\n  @include mq($from: medium) {\n    margin-left: calc(#{$gridGutterMedium} / -2);\n    margin-right: calc(#{$gridGutterMedium} / -2);\n  }\n\n  @include mq($from: large) {\n    margin-left: calc(#{$gridGutterLarge} / -2);\n    margin-right: calc(#{$gridGutterLarge} / -2);\n  }\n\n  @include mq($from: ultra) {\n    margin-left: calc(#{$gridGutterUltra} / -2);\n    margin-right: calc(#{$gridGutterUltra} / -2);\n  }\n\n  /* Justify content variants */\n\n  &--justify-end {\n    justify-content: flex-end;\n  }\n\n  &--justify-center {\n    justify-content: center;\n  }\n\n  &--justify-between {\n    justify-content: space-between;\n  }\n\n  &--justify-around {\n    justify-content: space-around;\n  }\n\n  &--justify-evenly {\n    justify-content: space-evenly;\n  }\n\n  /* Align items variants */\n\n  &--items-end {\n    align-items: flex-end;\n  }\n\n  &--items-center {\n    align-items: center;\n  }\n\n  &--items-baseline {\n    align-items: baseline;\n  }\n\n  &--items-stretch {\n    align-items: stretch;\n  }\n\n  /* Align content variants */\n\n  &--content-end {\n    align-content: flex-end;\n  }\n\n  &--content-center {\n    align-content: center;\n  }\n\n  &--content-between {\n    align-content: space-between;\n  }\n\n  &--content-around {\n    align-content: space-around;\n  }\n\n  &--content-evenly {\n    align-content: space-evenly;\n  }\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-cell` elements\n */\n@Component({\n  tag: \"stzh-row\",\n  styleUrl: \"stzh-row.scss\",\n  shadow: true,\n})\nexport class StzhRow {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cells are positioned along a container's main axis */\n  @Prop({ reflect: true }) justify: Layout.Justify = \"start\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) items: Layout.Items = \"start\";\n\n  /** Utilities for controlling how rows are positioned in multi-row flex containers. */\n  @Prop({ reflect: true }) content: Layout.Justify = \"start\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-row\": true,\n            [`stzh-row--justify-${this.justify}`]: !!this.justify,\n            [`stzh-row--items-${this.items}`]: !!this.items,\n            [`stzh-row--content-${this.content}`]: !!this.content,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-ClSK_zhJ.js → p-CFAM9BEK.js}

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 import { a as hasDefaultSlotContent, h as hasSlot } from './p-Dk-EHN3E.js';
-import { S as StzhInputDescription } from './p-CBGywK9s.js';
-import { d as defineCustomElement$5 } from './p-Cl1gEXQY.js';
-import { d as defineCustomElement$4 } from './p-XwB7D2_o.js';
-import { d as defineCustomElement$3 } from './p-DSXTn_9y.js';
-import { d as defineCustomElement$2 } from './p-cy07BSqU.js';
-import { d as defineCustomElement$1 } from './p-v5danKU8.js';
+import { S as StzhInputDescription } from './p-u_QxrpaB.js';
+import { d as defineCustomElement$5 } from './p-BC5CKnR0.js';
+import { d as defineCustomElement$4 } from './p-kc3jagy9.js';
+import { d as defineCustomElement$3 } from './p-C5BMqKn_.js';
+import { d as defineCustomElement$2 } from './p-DSIwFDJz.js';
+import { d as defineCustomElement$1 } from './p-CgQ_cBIG.js';
 
 const stzhInputCss = () => `.sc-stzh-input-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-input-h,[stzh-hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::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-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-input-color, var(--stzh-color-secondary60));--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-input-label-color, var(--stzh-color-primary));--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-input-hover-color, var(--stzh-color-secondary60));--hover-border-color:var(
     --stzh-input-hover-border-color,
@@ -364,6 +364,6 @@ function defineCustomElement() {
 }
 
 export { StzhInput as S, defineCustomElement as d };
-//# sourceMappingURL=p-ClSK_zhJ.js.map
+//# sourceMappingURL=p-CFAM9BEK.js.map
 
-//# sourceMappingURL=p-ClSK_zhJ.js.map
+//# sourceMappingURL=p-CFAM9BEK.js.map

package/dist/components/{p-ClSK_zhJ.js.map → p-CFAM9BEK.js.map}

@@ -1 +1 @@
-{"file":"p-ClSK_zhJ.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\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:host {\n  --text-align: left;\n  --color: var(--stzh-input-color, #{$formColor});\n  --border-color: #{$formBorderColor};\n  --border-radius: #{$formInputBorderRadius};\n  --background-color: #{$formBackgroundColor};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --height: #{$formInputHeight};\n  --input-width: 100%;\n  --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n  --placeholder-color: #{$formInputPlaceholderColor};\n  --button-right-color: #{$colorGrey80};\n\n  --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n  --hover-border-color: var(\n    --stzh-input-hover-border-color,\n    #{$formHoverBorderColor}\n  );\n  --hover-background-color: #{$formHoverBackgroundColor};\n  --hover-button-right-color: #{$colorPrimary70};\n\n  --focus-color: #{$formFocusColor};\n  --focus-border-color: #{$formFocusBorderColor};\n  --focus-background-color: #{$formFocusBackgroundColor};\n  --focus-button-right-color: #{$colorPrimary70};\n\n  --text-selection-background-color: #{$colorSecondary30};\n\n  width: 100%;\n\n  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  /* Filled */\n\n  &[is-filled]:not([is-filled=\"false\"]) {\n    --button-right-color: #{$colorPrimary70};\n    --hover-button-right-color: #{$colorPrimary70};\n    --focus-button-right-color: #{$formFocusColor};\n  }\n\n  /* Invalid */\n\n  &[is-invalid] {\n    --color: #{$colorError60};\n    --border-color: #{$colorError60};\n    --background-color: #{$colorWhite};\n    --label-color: #{$colorError60};\n    --placeholder-color: #{$colorError60};\n    --button-right-color: #{$colorError60};\n\n    --hover-color: #{$colorError60};\n    --hover-border-color: #{$colorError60};\n    --hover-background-color: #{$colorWhite};\n    --hover-button-right-color: #{$colorError60};\n\n    --focus-color: #{$colorError60};\n    --focus-border-color: #{$colorError60};\n    --focus-background-color: #{$colorWhite};\n    --focus-button-right-color: #{$colorError60};\n  }\n\n  &[readonly]:not([readonly=\"false\"]),\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$formDisabledColor};\n    --border-color: #{$formDisabledBorderColor};\n    --background-color: #{$formDisabledBackgroundColor};\n    --label-color: #{$formDisabledColor};\n    --placeholder-color: #{$formDisabledColor};\n    --description-color: #{$formDisabledColor};\n    --button-right-color: #{$colorGrey70};\n\n    --hover-color: #{$formDisabledColor};\n    --hover-border-color: #{$formDisabledBorderColor};\n    --hover-background-color: #{$formDisabledBackgroundColor};\n    --hover-button-right-color: #{$colorGrey70};\n\n    --focus-color: #{$formDisabledColor};\n    --focus-border-color: #{$formDisabledBorderColor};\n    --focus-background-color: #{$formDisabledBackgroundColor};\n    --focus-button-right-color: #{$colorGrey70};\n  }\n\n  /* Internal (Hover / Focus) */\n\n  &:is(:has(.stzh-input__input:hover)) {\n    --button-right-color: var(--hover-button-right-color);\n  }\n\n  &:is(:has(.stzh-input__input:focus)) {\n    --button-right-color: var(--focus-button-right-color);\n  }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n  display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n  ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --x: 0; // Strangely, at least one statement is necessary, so that the media query below is also written\n\n  @media (forced-colors: none) {\n    --color: var(--button-right-color);\n    --border-color: transparent;\n    --background-color: transparent;\n\n    --hover-color: var(--button-right-color);\n    --hover-border-color: transparent;\n    --hover-background-color: transparent;\n  }\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n//   --hover-color: #{$colorGrey80};\n// }\n\n:host\n  ::slotted(\n    stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n        [icon-only=\"false\"]\n      )\n  ),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__button-right {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__field-wrapper:hover\n  .stzh-input__button-right,\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__input:focus\n  + .stzh-input__button-right {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.stzh-input {\n  @include input-description;\n\n  ::selection {\n    background: var(--text-selection-background-color);\n  }\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n    width: var(--input-width);\n  }\n\n  &__input {\n    @include font;\n    @include fontSize(\"milli\");\n    border: 2px solid var(--border-color);\n    transition-property: color, border-color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: var(--border-radius);\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    margin: 0;\n    width: 100%;\n    color: var(--color);\n    background-color: var(--background-color);\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &:hover {\n      color: var(--hover-color);\n      border-color: var(--hover-border-color);\n      background-color: var(--hover-background-color);\n    }\n\n    &:focus {\n      color: var(--focus-color);\n      border-color: var(--focus-border-color);\n      background-color: var(--focus-background-color);\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: var(--height);\n    }\n\n    /* Textarea */\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-bottom: space(\"xxxsmall\");\n    width: 100%;\n    min-width: 0;\n    min-height: auto;\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    min-width: 0;\n    flex: 0 1 auto;\n    max-width: 100%;\n    margin-bottom: 0;\n    // position: absolute;\n    // top: calc(#{$formInputHeight} / 2);\n    // // padding-left (medium) + border-left\n    // left: calc(#{space('medium')} + 1px);\n    // max-width: calc(100% - #{space('medium')} * 2);\n    // transform: translateY(-50%);\n    // transition: all $baseTransitionAnimationSpeed;\n    // pointer-events: none;\n\n    &.no-label-truncate {\n      @include resetTruncate;\n      white-space: normal;\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  // &::before {\n  //   content: '';\n  //   display: none;\n  //   background: $colorWhite;\n  //   position: absolute;\n  //   width: 100%;\n  //   z-index: -1;\n  //   left: 0;\n  //   top: 50%;\n  //   // prevent white line not fully overlaping border of input\n  //   margin-top: -0.5px;\n  //   height: 2px;\n  // }\n  &__label:not(.no-label-truncate) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__label.no-label-truncate {\n    max-width: none;\n    white-space: normal;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Clearable / Search input / Password  */\n  &__label-wrapper > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label-wrapper &__error,\n  &__label-wrapper &__description-text {\n    display: none;\n  }\n\n  &__label-wrapper &__description {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label-wrapper &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n  }\n\n  &__label-wrapper &__description-long-popover,\n  &__label-wrapper &__description-long-button {\n    height: 20px;\n    line-height: 1;\n  }\n\n  &__label-wrapper &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n  }\n\n  &__label-wrapper stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__description-wrapper {\n    flex: 0 0 auto;\n  }\n\n  &--type-password#{&}--is-not-filled &__button-right,\n  &--type-password#{&}--is-readonly &__button-right,\n  &--type-password#{&}--is-disabled &__button-right,\n  &--type-search#{&}--is-not-clearable &__button-right,\n  &--type-search#{&}--is-not-filled &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  &--type-search &__button-right {\n    width: var(--height);\n    height: var(--height);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n\n    @media (forced-colors: active) {\n      transition: none;\n      color: ButtonBorder;\n    }\n  }\n\n  &--type-search:hover &__button-right {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  /* Styles for floating label */\n\n  // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-fixed-label &__label,\n  // &--is-filled &__label,\n  // &--is-readonly &__label,\n  // &--is-disabled &__label,\n  // &--is-invalid &__label {\n  //   display: block;\n  //   top: 0;\n  //   // padding-left (input field medium) - padding-left\n  //   left: calc(#{space('medium')} - #{space('xxsmall')});\n  //   height: 20px; // dividable by two (so before element is always positioned correctly)\n  //   line-height: 20px;\n  //   padding: 0 space('xxsmall');\n  //   max-width: calc(100% - #{space('small')} * 2);\n  //   pointer-events: all;\n\n  //   &:not(:empty)::before {\n  //     display: block;\n  //   }\n  // }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: var(--height);\n  }\n\n  // &--has-button-right &__label {\n  //   // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  // }\n\n  // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-button-right#{&}--has-fixed-label &__label,\n  // &--has-button-right#{&}--is-filled &__label,\n  // &--has-button-right#{&}--is-readonly &__label,\n  // &--has-button-right#{&}--is-disabled &__label,\n  // &--has-button-right#{&}--is-invalid &__label {\n  //   // 100% - left distance to text + 1px border + padding label right side - icon button width\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  // }\n\n  /* Size variants */\n\n  &--size-small &__input {\n    @include fontSize(\"micro\");\n  }\n\n  // &--size-small &__label {\n  //   top: calc(#{$formInputHeightSmall} / 2);\n  // }\n\n  // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--is-filled &__label,\n  // &--size-small#{&}--is-readonly &__label,\n  // &--size-small#{&}--is-disabled &__label,\n  // &--size-small#{&}--is-invalid &__label {\n  //   top: 0;\n  // }\n\n  // &--size-small#{&}--has-button-right &__label {\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  // }\n\n  // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  // }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=\"number\"] {\n      appearance: textfield;\n    }\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-disabled &__input,\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n  // &--is-readonly &__label,\n  // &--is-disabled &__label {\n  //   &::before {\n  //     background: transparent;\n  //   }\n  // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\n\nimport { StzhInputLocalizedText } from \"./stzh-input.localization\";\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\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 * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true,\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhInputLocalizedText;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" =\n    \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label should be truncated or not */\n  @Prop() noLabelTruncate: boolean = false;\n\n  /** Whether label should be visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\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  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  /** Whether to show the password or not */\n  @State() showPassword: boolean;\n\n  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input changed event */\n  @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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) {\n    this.filled = newValue !== \"\";\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  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private onClearClick = async (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onTogglePasswordVisibilityClick = async () => {\n    this.showPassword = !this.showPassword;\n  };\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n    // we also update value, since render doesn't get executed sometimes\n    this.input.value = this.defaultValue;\n\n    // TODO: check if we need own reset event or trigger the change event\n    // (custom browser behaviour doesn't send change event, when reset is executed)\n    // this.stzhChange.emit({\n    //   component: \"stzh-input\",\n    //   originalEvent: event,\n    //   value: this.value\n    // });\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onChange = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-input\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\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-input\",\n      originalEvent: event,\n    });\n  };\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={el => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={el => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.showPassword ? \"text\" : this.type}\n        name={this.name}\n        value={this.value}\n        defaultValue={this.defaultValue}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-input\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\":\n        buttonRightSlotUsed ||\n        this.type === \"search\" ||\n        (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid || errorUsed,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-not-filled\": !this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--is-not-clearable\": !this.clearable,\n      \"stzh-input--has-label-hidden\": this.labelHidden,\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host\n        is-invalid={this.invalid || errorUsed}\n        tabindex={this.disabled ? null : \"-1\"}\n        onFocus={this.onRootFocus}\n        is-filled={this.filled}\n      >\n        <div class={classes}>\n          {labelWrapperUsed && (\n            <div class=\"stzh-input__label-wrapper\">\n              <label\n                class={{\n                  \"stzh-input__label\": true,\n                  \"no-label-truncate\": this.noLabelTruncate,\n                }}\n                htmlFor={this.inputId}\n              >\n                {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n                {labelUsed && !this.hideOptional && (\n                  <span class=\"stzh-input__marker\">\n                    <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldMarker\n                        : this.localization.$globals.optionalFieldMarker}\n                    </span>\n                    <span class=\"stzh-input__marker-text\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldText\n                        : this.localization.$globals.optionalFieldText}\n                    </span>\n                  </span>\n                )}\n              </label>\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-input\"\n                  id={`${this.inputId}-description-long`}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          )}\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            {this.clearable || this.type === \"search\" || this.type === \"password\" ? (\n              (!this.clearable || this.disabled || this.readonly || !this.filled) && this.type === \"search\" ? (\n                <stzh-icon class=\"stzh-input__button-right\" name=\"search\"></stzh-icon>\n              ) : this.type === \"password\" ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.showPassword ? \"view-hidden\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\n                  a11yLabel={\n                    this.type === \"password\"\n                      ? this.showPassword\n                        ? this.localization.$globals.passwordToggleButtonHideLabel\n                        : this.localization.$globals.passwordToggleButtonShowLabel\n                      : undefined\n                  }\n                ></stzh-button>\n              ) : this.filled ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon=\"close\"\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onClearClick}\n                  a11yLabel={this.localization.$globals.clearButtonLabel}\n                  aria-controls={this.inputId}\n                  a11yTabindex=\"-1\"\n                  aria-hidden={this.clearable ? \"true\" : undefined}\n                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CFAM9BEK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\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:host {\n  --text-align: left;\n  --color: var(--stzh-input-color, #{$formColor});\n  --border-color: #{$formBorderColor};\n  --border-radius: #{$formInputBorderRadius};\n  --background-color: #{$formBackgroundColor};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --height: #{$formInputHeight};\n  --input-width: 100%;\n  --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n  --placeholder-color: #{$formInputPlaceholderColor};\n  --button-right-color: #{$colorGrey80};\n\n  --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n  --hover-border-color: var(\n    --stzh-input-hover-border-color,\n    #{$formHoverBorderColor}\n  );\n  --hover-background-color: #{$formHoverBackgroundColor};\n  --hover-button-right-color: #{$colorPrimary70};\n\n  --focus-color: #{$formFocusColor};\n  --focus-border-color: #{$formFocusBorderColor};\n  --focus-background-color: #{$formFocusBackgroundColor};\n  --focus-button-right-color: #{$colorPrimary70};\n\n  --text-selection-background-color: #{$colorSecondary30};\n\n  width: 100%;\n\n  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  /* Filled */\n\n  &[is-filled]:not([is-filled=\"false\"]) {\n    --button-right-color: #{$colorPrimary70};\n    --hover-button-right-color: #{$colorPrimary70};\n    --focus-button-right-color: #{$formFocusColor};\n  }\n\n  /* Invalid */\n\n  &[is-invalid] {\n    --color: #{$colorError60};\n    --border-color: #{$colorError60};\n    --background-color: #{$colorWhite};\n    --label-color: #{$colorError60};\n    --placeholder-color: #{$colorError60};\n    --button-right-color: #{$colorError60};\n\n    --hover-color: #{$colorError60};\n    --hover-border-color: #{$colorError60};\n    --hover-background-color: #{$colorWhite};\n    --hover-button-right-color: #{$colorError60};\n\n    --focus-color: #{$colorError60};\n    --focus-border-color: #{$colorError60};\n    --focus-background-color: #{$colorWhite};\n    --focus-button-right-color: #{$colorError60};\n  }\n\n  &[readonly]:not([readonly=\"false\"]),\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$formDisabledColor};\n    --border-color: #{$formDisabledBorderColor};\n    --background-color: #{$formDisabledBackgroundColor};\n    --label-color: #{$formDisabledColor};\n    --placeholder-color: #{$formDisabledColor};\n    --description-color: #{$formDisabledColor};\n    --button-right-color: #{$colorGrey70};\n\n    --hover-color: #{$formDisabledColor};\n    --hover-border-color: #{$formDisabledBorderColor};\n    --hover-background-color: #{$formDisabledBackgroundColor};\n    --hover-button-right-color: #{$colorGrey70};\n\n    --focus-color: #{$formDisabledColor};\n    --focus-border-color: #{$formDisabledBorderColor};\n    --focus-background-color: #{$formDisabledBackgroundColor};\n    --focus-button-right-color: #{$colorGrey70};\n  }\n\n  /* Internal (Hover / Focus) */\n\n  &:is(:has(.stzh-input__input:hover)) {\n    --button-right-color: var(--hover-button-right-color);\n  }\n\n  &:is(:has(.stzh-input__input:focus)) {\n    --button-right-color: var(--focus-button-right-color);\n  }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0;\n  right: 0;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n  display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n  ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --x: 0; // Strangely, at least one statement is necessary, so that the media query below is also written\n\n  @media (forced-colors: none) {\n    --color: var(--button-right-color);\n    --border-color: transparent;\n    --background-color: transparent;\n\n    --hover-color: var(--button-right-color);\n    --hover-border-color: transparent;\n    --hover-background-color: transparent;\n  }\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n//   --hover-color: #{$colorGrey80};\n// }\n\n:host\n  ::slotted(\n    stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n        [icon-only=\"false\"]\n      )\n  ),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__button-right {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__field-wrapper:hover\n  .stzh-input__button-right,\n:host([clearable]:not([clearable=\"false\"])[is-filled]:not([is-filled=\"false\"]))\n  .stzh-input__input:focus\n  + .stzh-input__button-right {\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n.stzh-input {\n  @include input-description;\n\n  ::selection {\n    background: var(--text-selection-background-color);\n  }\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n    width: var(--input-width);\n  }\n\n  &__input {\n    @include font;\n    @include fontSize(\"milli\");\n    border: 2px solid var(--border-color);\n    transition-property: color, border-color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: var(--border-radius);\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    margin: 0;\n    width: 100%;\n    color: var(--color);\n    background-color: var(--background-color);\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &:hover {\n      color: var(--hover-color);\n      border-color: var(--hover-border-color);\n      background-color: var(--hover-background-color);\n    }\n\n    &:focus {\n      color: var(--focus-color);\n      border-color: var(--focus-border-color);\n      background-color: var(--focus-background-color);\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: var(--height);\n    }\n\n    /* Textarea */\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    margin-bottom: space(\"xxxsmall\");\n    width: 100%;\n    min-width: 0;\n    min-height: auto;\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    min-width: 0;\n    flex: 0 1 auto;\n    max-width: 100%;\n    margin-bottom: 0;\n    // position: absolute;\n    // top: calc(#{$formInputHeight} / 2);\n    // // padding-left (medium) + border-left\n    // left: calc(#{space('medium')} + 1px);\n    // max-width: calc(100% - #{space('medium')} * 2);\n    // transform: translateY(-50%);\n    // transition: all $baseTransitionAnimationSpeed;\n    // pointer-events: none;\n\n    &.no-label-truncate {\n      @include resetTruncate;\n      white-space: normal;\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  // &::before {\n  //   content: '';\n  //   display: none;\n  //   background: $colorWhite;\n  //   position: absolute;\n  //   width: 100%;\n  //   z-index: -1;\n  //   left: 0;\n  //   top: 50%;\n  //   // prevent white line not fully overlaping border of input\n  //   margin-top: -0.5px;\n  //   height: 2px;\n  // }\n  &__label:not(.no-label-truncate) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &__label.no-label-truncate {\n    max-width: none;\n    white-space: normal;\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Clearable / Search input / Password  */\n  &__label-wrapper > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label-wrapper &__error,\n  &__label-wrapper &__description-text {\n    display: none;\n  }\n\n  &__label-wrapper &__description {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label-wrapper &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n  }\n\n  &__label-wrapper &__description-long-popover,\n  &__label-wrapper &__description-long-button {\n    height: 20px;\n    line-height: 1;\n  }\n\n  &__label-wrapper &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n  }\n\n  &__label-wrapper stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__description-wrapper {\n    flex: 0 0 auto;\n  }\n\n  &--type-password#{&}--is-not-filled &__button-right,\n  &--type-password#{&}--is-readonly &__button-right,\n  &--type-password#{&}--is-disabled &__button-right,\n  &--type-search#{&}--is-not-clearable &__button-right,\n  &--type-search#{&}--is-not-filled &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  &--type-search &__button-right {\n    width: var(--height);\n    height: var(--height);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n\n    @media (forced-colors: active) {\n      transition: none;\n      color: ButtonBorder;\n    }\n  }\n\n  &--type-search:hover &__button-right {\n    @media (forced-colors: active) {\n      color: Highlight;\n    }\n  }\n\n  /* Styles for floating label */\n\n  // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-fixed-label &__label,\n  // &--is-filled &__label,\n  // &--is-readonly &__label,\n  // &--is-disabled &__label,\n  // &--is-invalid &__label {\n  //   display: block;\n  //   top: 0;\n  //   // padding-left (input field medium) - padding-left\n  //   left: calc(#{space('medium')} - #{space('xxsmall')});\n  //   height: 20px; // dividable by two (so before element is always positioned correctly)\n  //   line-height: 20px;\n  //   padding: 0 space('xxsmall');\n  //   max-width: calc(100% - #{space('small')} * 2);\n  //   pointer-events: all;\n\n  //   &:not(:empty)::before {\n  //     display: block;\n  //   }\n  // }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: var(--height);\n  }\n\n  // &--has-button-right &__label {\n  //   // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  // }\n\n  // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-button-right#{&}--has-fixed-label &__label,\n  // &--has-button-right#{&}--is-filled &__label,\n  // &--has-button-right#{&}--is-readonly &__label,\n  // &--has-button-right#{&}--is-disabled &__label,\n  // &--has-button-right#{&}--is-invalid &__label {\n  //   // 100% - left distance to text + 1px border + padding label right side - icon button width\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  // }\n\n  /* Size variants */\n\n  &--size-small &__input {\n    @include fontSize(\"micro\");\n  }\n\n  // &--size-small &__label {\n  //   top: calc(#{$formInputHeightSmall} / 2);\n  // }\n\n  // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--is-filled &__label,\n  // &--size-small#{&}--is-readonly &__label,\n  // &--size-small#{&}--is-disabled &__label,\n  // &--size-small#{&}--is-invalid &__label {\n  //   top: 0;\n  // }\n\n  // &--size-small#{&}--has-button-right &__label {\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  // }\n\n  // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  // }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=\"number\"] {\n      appearance: textfield;\n    }\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-disabled &__input,\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n  // &--is-readonly &__label,\n  // &--is-disabled &__label {\n  //   &::before {\n  //     background: transparent;\n  //   }\n  // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\n\nimport { StzhInputLocalizedText } from \"./stzh-input.localization\";\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\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 * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true,\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhInputLocalizedText;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" =\n    \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label should be truncated or not */\n  @Prop() noLabelTruncate: boolean = false;\n\n  /** Whether label should be visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\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  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  /** Whether to show the password or not */\n  @State() showPassword: boolean;\n\n  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input changed event */\n  @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\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) {\n    this.filled = newValue !== \"\";\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  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private onClearClick = async (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onTogglePasswordVisibilityClick = async () => {\n    this.showPassword = !this.showPassword;\n  };\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n    // we also update value, since render doesn't get executed sometimes\n    this.input.value = this.defaultValue;\n\n    // TODO: check if we need own reset event or trigger the change event\n    // (custom browser behaviour doesn't send change event, when reset is executed)\n    // this.stzhChange.emit({\n    //   component: \"stzh-input\",\n    //   originalEvent: event,\n    //   value: this.value\n    // });\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onChange = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-input\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\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-input\",\n      originalEvent: event,\n    });\n  };\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={el => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={el => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.showPassword ? \"text\" : this.type}\n        name={this.name}\n        value={this.value}\n        defaultValue={this.defaultValue}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-input\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\":\n        buttonRightSlotUsed ||\n        this.type === \"search\" ||\n        (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid || errorUsed,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-not-filled\": !this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--is-not-clearable\": !this.clearable,\n      \"stzh-input--has-label-hidden\": this.labelHidden,\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host\n        is-invalid={this.invalid || errorUsed}\n        tabindex={this.disabled ? null : \"-1\"}\n        onFocus={this.onRootFocus}\n        is-filled={this.filled}\n      >\n        <div class={classes}>\n          {labelWrapperUsed && (\n            <div class=\"stzh-input__label-wrapper\">\n              <label\n                class={{\n                  \"stzh-input__label\": true,\n                  \"no-label-truncate\": this.noLabelTruncate,\n                }}\n                htmlFor={this.inputId}\n              >\n                {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n                {labelUsed && !this.hideOptional && (\n                  <span class=\"stzh-input__marker\">\n                    <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldMarker\n                        : this.localization.$globals.optionalFieldMarker}\n                    </span>\n                    <span class=\"stzh-input__marker-text\">\n                      {this.required\n                        ? this.localization.$globals.requiredFieldText\n                        : this.localization.$globals.optionalFieldText}\n                    </span>\n                  </span>\n                )}\n              </label>\n\n              {descriptionLongUsed && (\n                <StzhInputDescription\n                  classPrefix=\"stzh-input\"\n                  id={`${this.inputId}-description-long`}\n                  description={this.description}\n                  descriptionLong={this.descriptionLong}\n                  descriptionLongTitle={this.descriptionLongTitle}\n                  descriptionLongUsed={descriptionLongUsed}\n                  moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                  showError={false}\n                  showDescriptionText={false}\n                />\n              )}\n            </div>\n          )}\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            {this.clearable || this.type === \"search\" || this.type === \"password\" ? (\n              (!this.clearable || this.disabled || this.readonly || !this.filled) && this.type === \"search\" ? (\n                <stzh-icon class=\"stzh-input__button-right\" name=\"search\"></stzh-icon>\n              ) : this.type === \"password\" ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.showPassword ? \"view-hidden\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\n                  a11yLabel={\n                    this.type === \"password\"\n                      ? this.showPassword\n                        ? this.localization.$globals.passwordToggleButtonHideLabel\n                        : this.localization.$globals.passwordToggleButtonShowLabel\n                      : undefined\n                  }\n                ></stzh-button>\n              ) : this.filled ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon=\"close\"\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onClearClick}\n                  a11yLabel={this.localization.$globals.clearButtonLabel}\n                  aria-controls={this.inputId}\n                  a11yTabindex=\"-1\"\n                  aria-hidden={this.clearable ? \"true\" : undefined}\n                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-XxEa8k1C.js → p-CM8WZSVV.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 import { c as createBaseFocusTrapOptions } from './p-BzugsqyR.js';
 import { c as createFocusTrap } from './p-CBUfcdIy.js';
 
@@ -114,6 +114,6 @@ function defineCustomElement() {
 }
 
 export { StzhOverlay as S, defineCustomElement as d };
-//# sourceMappingURL=p-XxEa8k1C.js.map
+//# sourceMappingURL=p-CM8WZSVV.js.map
 
-//# sourceMappingURL=p-XxEa8k1C.js.map
+//# sourceMappingURL=p-CM8WZSVV.js.map

package/dist/components/{p-XxEa8k1C.js.map → p-CM8WZSVV.js.map}

@@ -1 +1 @@
-{"file":"p-XxEa8k1C.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,u6DAAu6D,CAAC;;ACQt8D,MAAM,eAAe,GAAG,mBAAmB;MAU9B,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;;AAO2B,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;;AAGtC,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;;AAGO,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AA6H1D;AAlHC,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;AACjB,YAAA,SAAS,EAAE,cAAc;AAC1B,SAAA,CAAC;;AAIJ,IAAA,MAAM,IAAI,GAAA;AACR,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,YAAA,SAAS,EAAE,cAAc;AAC1B,SAAA,CAAC;;IAOI,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;AAC1B,YAAA,OAAO,EAAE;;QAGX,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,KAAK,IAAI,CAAC,OAAO,CAAC;;IAGnF,eAAe,GAAA;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,IAAG;AACnC,YAAA,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC;AAC7C,SAAC,CAAC;;IAGI,cAAc,GAAA;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,OAAO,IAAG;AACnC,YAAA,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC;AACxC,SAAC,CAAC;;IAGI,WAAW,GAAA;QACjB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC;QAC5C,IAAI,CAAC,eAAe,EAAE;AAEtB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;;;IAIhB,YAAY,GAAA;QAClB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;QAC/C,IAAI,CAAC,cAAc,EAAE;AAErB,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;;;IAI1B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,EAAE;YAC9D,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;;QAGzC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa;;IAGpD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE;;IAGtD,kBAAkB,GAAA;QAChB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC;;IAGjD,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,GAAG,eAAe,CAAC,IAAI,CAAC,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACtC,aAAa,EAAE,IAAI,CAAC,aAAa,IAC9B,0BAA0B,EAAE,EAC/B;AAEF,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,WAAW,EAAE;;;IAItB,oBAAoB,GAAA;QAClB,IAAI,CAAC,YAAY,EAAE;;IAGrB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,cAAc,EAAE,IAAI;YACpB,uBAAuB,EAAE,IAAI,CAAC,IAAI;SACnC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAA,EACjB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wBAAwB,EAAO,CAAA,EAC1C,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,aAAa,GAAG,EAAoB,CAAC,EACtD,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,QAAQ,EAAA,YAAA,EACD,IAAI,CAAC,SAAS,IAAI,IAAI,EAAA,aAAA,EACrB,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,EAAA,EAEzC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-CM8WZSVV.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stzh-overlay/stzh-overlay.scss?tag=stzh-overlay&encapsulation=scoped","src/components/stzh-overlay/stzh-overlay.tsx"],"sourcesContent":["/**\n * @prop --backdrop-opacity: Opacity of overlay backdrop\n * @prop --backdrop-background-color: Background color of overlay backdrop\n *\n * @prop --stzh-overlay-backdrop-opacity: **Global**: Opacity of backdrops\n * @prop --stzh-overlay-backdrop-background-color: **Global**: Background color of backdrops\n */\n\n:host {\n  --backdrop-opacity: #{$overlayBackdropOpacity};\n  --backdrop-background-color: #{$overlayBackdropBackgroundColor};\n}\n\n.stzh-overlay {\n  display: none;\n  z-index: $zIndexOverlay;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  justify-content: stretch;\n  align-items: stretch;\n\n  &__backdrop {\n    z-index: 1;\n    background-color: var(--backdrop-background-color);\n    opacity: var(--backdrop-opacity);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n    flex-grow: 1;\n    overflow: auto;\n  }\n\n  &__content-inner {\n    // center content vertically\n    margin-top: auto;\n    margin-bottom: auto;\n    outline: none;\n  }\n\n  &--is-open {\n    display: flex;\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from \"@stencil/core\";\n\nimport { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from \"../../index\";\n\nimport { createBaseFocusTrapOptions } from \"../../utils/overlay-utils\";\n\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-overlay\",\n  styleUrl: \"stzh-overlay.scss\",\n  scoped: true,\n})\nexport class StzhOverlay {\n  /** Whether overlay is open */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /** Stay in original position (true) or move to body (false) */\n  @Prop() stay: boolean = true;\n\n  /** Accessible label for dialog */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string = \"\";\n\n  /** Dialog open event */\n  @Event() stzhOpen: EventEmitter<StzhOverlayOpenEvent>;\n\n  /** Dialog close event */\n  @Event() stzhClose: EventEmitter<StzhOverlayCloseEvent>;\n\n  @Element() element: HTMLStzhOverlayElement;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-overlay\",\n    });\n  }\n\n  private trap: FocusTrap;\n  private containerElement: HTMLElement;\n  private dialogElement: HTMLDivElement;\n\n  private getSiblings() {\n    if (!this.containerElement) {\n      return [];\n    }\n\n    return Array.from(this.containerElement.children).filter(child => child !== this.element);\n  }\n\n  private disableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.setAttribute(\"aria-hidden\", \"true\");\n    });\n  }\n\n  private enableSiblings() {\n    this.getSiblings().forEach(sibling => {\n      sibling.removeAttribute(\"aria-hidden\");\n    });\n  }\n\n  private dialogShown() {\n    document.body.classList.add(CLASS_BODY_OPEN);\n    this.disableSiblings();\n\n    if (this.trap) {\n      this.trap.activate();\n    }\n  }\n\n  private dialogHidden() {\n    document.body.classList.remove(CLASS_BODY_OPEN);\n    this.enableSiblings();\n\n    if (this.trap) {\n      this.trap.deactivate();\n    }\n  }\n\n  connectedCallback() {\n    if (!this.stay && this.element.parentElement !== document.body) {\n      document.body.appendChild(this.element);\n    }\n\n    this.containerElement = this.element.parentElement;\n  }\n\n  componentDidRender() {\n    this.open ? this.dialogShown() : this.dialogHidden();\n  }\n\n  componentDidUpdate() {\n    this.trap.updateContainerElements(this.element);\n  }\n\n  componentDidLoad() {\n    this.trap = createFocusTrap(this.element, {\n      fallbackFocus: this.dialogElement,\n      ...createBaseFocusTrapOptions(),\n    });\n\n    if (this.open) {\n      this.dialogShown();\n    }\n  }\n\n  disconnectedCallback() {\n    this.dialogHidden();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-overlay\": true,\n      \"stzh-overlay--is-open\": this.open,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-overlay__backdrop\"></div>\n          <div class=\"stzh-overlay__content\">\n            <div\n              class=\"stzh-overlay__content-inner\"\n              ref={el => (this.dialogElement = el as HTMLDivElement)}\n              tabindex=\"-1\"\n              role=\"dialog\"\n              aria-label={this.a11yLabel || null}\n              aria-hidden={this.open ? \"false\" : \"true\"}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-B2fPjAf_.js → p-CRQRuJiQ.js}

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-kwBmMJ76.js';
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, e as Host, t as transformTag } from './p-Ct0XU0Xj.js';
 import { h as hasSlot } from './p-Dk-EHN3E.js';
-import { d as defineCustomElement$2 } from './p-Cl1gEXQY.js';
-import { d as defineCustomElement$1 } from './p-DSXTn_9y.js';
+import { d as defineCustomElement$2 } from './p-BC5CKnR0.js';
+import { d as defineCustomElement$1 } from './p-C5BMqKn_.js';
 
 const stzhMenuItemCss = () => `.sc-stzh-menu-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-menu-item-h,[stzh-hidden].sc-stzh-menu-item-h{display:none}.sc-stzh-menu-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-menu-item-h *.sc-stzh-menu-item,.sc-stzh-menu-item-h *.sc-stzh-menu-item::before,.sc-stzh-menu-item-h *.sc-stzh-menu-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-menu-item-h .has-focus.sc-stzh-menu-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item{outline-style:none !important}.sc-stzh-menu-item-h .stzh-fylingfocus-focused.sc-stzh-menu-item::-moz-focus-inner{border:0 !important}.sc-stzh-menu-item-h{--height:var(--stzh-menu-item-height);--color:var(--stzh-color-black);--background-color:transparent;--icon-size:var(--stzh-icon-size-small);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--hover-color:var(--stzh-popover-item-hover-color, var(--stzh-color-black));--hover-background-color:var(--stzh-popover-item-hover-bg, var(--stzh-color-grey20))}@media (forced-colors: active){.sc-stzh-menu-item-h:where(:has(button)){--color:ButtonText;--hover-color:Highlight;--hover-background-color:transparent}}[size=large].sc-stzh-menu-item-h{--icon-size:var(--stzh-icon-size);--height:var(--stzh-menu-large-item-height);--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge)}[variant=secondary].sc-stzh-menu-item-h{--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-secondary30)}@media (forced-colors: active){[variant=secondary].sc-stzh-menu-item-h:where(:has(button)){--color:ButtonText;--hover-color:Highlight;--hover-background-color:transparent}}[active].sc-stzh-menu-item-h:not([active=false]){--color:var(--stzh-color-primary70);--hover-color:var(--stzh-color-primary70);--hover-background-color:var(--stzh-color-grey20)}@media (forced-colors: active){[active].sc-stzh-menu-item-h:not([active=false]){--color:SelectedItemText;--background-color:SelectedItem;--hover-color:SelectedItemText;--hover-background-color:SelectedItem}}[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--hover-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10)}@media (forced-colors: active){[disabled].sc-stzh-menu-item-h:not([disabled=false]){--color:GrayText;--background-color:Gray;--hover-color:GrayText;--hover-background-color:Gray}}.stzh-menu-item.sc-stzh-menu-item{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;display:flex;gap:var(--stzh-space-small);align-items:center;justify-content:stretch;appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;border:none;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);width:100%;height:var(--height);line-height:var(--height);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}@media (forced-colors: active){.stzh-menu-item.sc-stzh-menu-item{transition:none}}.stzh-menu-item.sc-stzh-menu-item:hover{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-menu-item__icon-wrapper.sc-stzh-menu-item{--stzh-icon-size:var(--icon-size);position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:auto;height:1em}.stzh-menu-item__badge.sc-stzh-menu-item{position:absolute;z-index:1;top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-menu-item__text-wrapper.sc-stzh-menu-item{display:flex;gap:var(--stzh-space-xsmall)}.stzh-menu-item__counter.sc-stzh-menu-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-menu-item__text.sc-stzh-menu-item{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@media (forced-colors: active){.stzh-menu-item__text.sc-stzh-menu-item{forced-color-adjust:preserve-parent-color}}.stzh-menu-item--size-large.sc-stzh-menu-item{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);gap:var(--stzh-space-medium)}.stzh-menu-item--is-disabled.sc-stzh-menu-item{cursor:not-allowed}`;
 
@@ -141,6 +141,6 @@ function defineCustomElement() {
 }
 
 export { StzhMenuItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-B2fPjAf_.js.map
+//# sourceMappingURL=p-CRQRuJiQ.js.map
 
-//# sourceMappingURL=p-B2fPjAf_.js.map
+//# sourceMappingURL=p-CRQRuJiQ.js.map