@oiz/stzh-components 4.0.0-beta3 → 4.0.0

package/dist/components/{p-8123a294.js.map → p-87537095.js.map}

@@ -1 +1 @@
-{"file":"p-8123a294.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y+rCAAy+rC,CAAC;AAClgsC,2BAAe,eAAe;;ACE9B,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;MAUpD,YAAY;;;;;;;oCAWgB,0CAA0C;gCAG9C,eAAe;;IAM1C,oBAAoB;QAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY;YACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;YAGhD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,sBAAsB,EAAE,CAAC,EAAE;gBAC7D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gBACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;gBAC1E,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;aACxC;;YAGD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,2BAA2B,EAAE,CAAC,EAAE;gBAClE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;gBAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;gBAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAE9B,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;aACvC;SACF,CAAC,CAAC;KACJ;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACnG;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,QACE,EAAC,IAAI,gFACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx"],"sourcesContent":[":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-87537095.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,y+rCAAy+rC,CAAC;AAClgsC,2BAAe,eAAe;;ACE9B,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;AAC3D,MAAM,sBAAsB,GAAG,iCAAiC,CAAC;MAUpD,YAAY;;;;;;;oCAWgB,0CAA0C;gCAG9C,eAAe;;IAM1C,oBAAoB;QAC1B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,YAAY;YACrC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;;YAGhD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,sBAAsB,EAAE,CAAC,EAAE;gBAC7D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACxD,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gBACvD,gBAAgB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAAC;gBAC1E,YAAY,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;aACxC;;YAGD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,2BAA2B,EAAE,CAAC,EAAE;gBAClE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBACnD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;gBAEvD,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;gBACjD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;gBAClC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAE9B,YAAY,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;aACvC;SACF,CAAC,CAAC;KACJ;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;SACnG;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;QAC1F,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe,EAAE,IAAI;SACtB,CAAC;QAEF,QACE,EAAC,IAAI,gFACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DAAa,CACT,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-richtext/stzh-richtext.scss?tag=stzh-richtext&encapsulation=scoped","src/components/stzh-richtext/stzh-richtext.tsx"],"sourcesContent":[":host {\n  @include richtext-host;\n\n  --display: var(--stzh-richtext-display, block);\n\n  --grid-template-areas: var(\n    --stzh-richtext-grid-template-areas,\n    \"text text text text\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-richtext-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  @include mq($from: small) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(\n      --stzh-richtext-grid-template-areas,\n      \"text text text text text text text text\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-richtext-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  ::slotted(*) {\n    @include richtext-slotted;\n  }\n\n  &[has-hidden-first-margin] ::slotted(*:first-child) {\n    margin-top: 0 !important;\n  }\n\n  &[has-hidden-last-margin] ::slotted(*:last-child) {\n    margin-bottom: 0 !important;\n  }\n}\n\n.stzh-richtext {\n  @include gridGutter;\n  display: var(--display);\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__text {\n    grid-area: text;\n    display: grid;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nconst CLASS_EXTERNAL_LINK = \"stzh-richtext__external-link\";\nconst CLASS_EXTERNAL_ICON_WRAPPER = \"stzh-richtext__external-icon-wrapper\";\nconst CLASS_EXTERNAL_ICON = \"stzh-richtext__external-icon\";\nconst CLASS_EXTERNAL_VHIDDEN = \"stzh-richtext__external-vhidden\";\n\n/**\n * @slot - Text content that should be styled\n */\n@Component({\n  tag: \"stzh-richtext\",\n  styleUrl: \"stzh-richtext.scss\",\n  scoped: true,\n})\nexport class StzhRichtext {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether first top margin of first child should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Selector to recognize external link and attach an icon */\n  @Prop() externalLinkSelector: string = 'a[rel*=\"external\"], a.external, a.extern';\n\n  /** Icon used for marking external links */\n  @Prop() externalLinkIcon: string = \"external-link\";\n\n  @Element() element: HTMLStzhRichtextElement;\n\n  private externalLinks: HTMLElement[];\n\n  private addExternalLinkIcons() {\n    this.externalLinks.forEach(externalLink => {\n      externalLink.classList.add(CLASS_EXTERNAL_LINK);\n\n      // Check if screenreaderText already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_VHIDDEN}`)) {\n        const screenreaderText = document.createElement(\"span\");\n        screenreaderText.classList.add(CLASS_EXTERNAL_VHIDDEN);\n        screenreaderText.innerText = this.localization.$globals.externalLinkLabel;\n        externalLink.prepend(screenreaderText);\n      }\n\n      // Check if iconWrapper already exists\n      if (!externalLink.querySelector(`.${CLASS_EXTERNAL_ICON_WRAPPER}`)) {\n        const iconWrapper = document.createElement(\"span\");\n        iconWrapper.classList.add(CLASS_EXTERNAL_ICON_WRAPPER);\n\n        const icon = document.createElement(\"stzh-icon\");\n        icon.classList.add(CLASS_EXTERNAL_ICON);\n        icon.name = this.externalLinkIcon;\n        iconWrapper.appendChild(icon);\n\n        externalLink.appendChild(iconWrapper);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"richtext\");\n    }\n  }\n\n  componentDidRender() {\n    this.externalLinks = Array.from(this.element.querySelectorAll(this.externalLinkSelector));\n    if (this.externalLinks && this.externalLinks.length > 0) {\n      this.addExternalLinkIcons();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-richtext\": true,\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div class={classes}>\n          <div class=\"stzh-richtext__text\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-1ee94681.js → p-877e658f.js}

@@ -2,8 +2,8 @@ import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { c as camelCase, h as hasSlot } from './p-d1f98854.js';
 import { S as StzhInputDescription } from './p-6393ca35.js';
 import { d as defineCustomElement$3 } from './p-8d12a95f.js';
-import { d as defineCustomElement$2 } from './p-3d24141a.js';
-import { d as defineCustomElement$1 } from './p-adc06dc4.js';
+import { d as defineCustomElement$2 } from './p-7eced0db.js';
+import { d as defineCustomElement$1 } from './p-ae7adee7.js';
 
 const stzhRadiogroupCss = ".sc-stzh-radiogroup-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-radiogroup-h,[stzh-hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::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-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h{--legend-color:var(--stzh-radio-group-legend-color, var(--stzh-heading-color))}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--legend-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--is-invalid.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup,.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup--is-disabled.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{color:var(--stzh-color-grey60)}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);column-gap:var(--stzh-space-xxlarge)}";
 const StzhRadiogroupStyle0 = stzhRadiogroupCss;
@@ -255,4 +255,4 @@ function defineCustomElement() {
 
 export { StzhRadiogroup as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-1ee94681.js.map
+//# sourceMappingURL=p-877e658f.js.map

package/dist/components/{p-1ee94681.js.map → p-877e658f.js.map}

@@ -1 +1 @@
-{"file":"p-1ee94681.js","mappings":"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","names":[],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space('medium');\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('micro');\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space('medium');\n    column-gap: space('xxlarge');\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(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(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\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  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-877e658f.js","mappings":"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","names":[],"sources":["src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  --legend-color: var(--stzh-radio-group-legend-color, #{$headingColor});\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    gap: space('medium');\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('micro');\n    color: var(--legend-color);\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--is-invalid &__legend,\n  &--has-error &__legend {\n    color: $colorError60;\n  }\n\n  &--is-disabled &__legend {\n    color: $colorGrey60;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-wrap: wrap;\n    flex-direction: row;\n    row-gap: space('medium');\n    column-gap: space('xxlarge');\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, Watch } from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = \"stzh-radio, stzh-button[type=radio], stzh-card\";\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true,\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(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(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\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  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"disabled\") {\n        // Only set the disabled if the radio is not already disabled\n        if (!radio.disabled) {\n          radio.disabled = value;\n        }\n      } else if (prop === \"name\" || this._preventUpdateProperties.indexOf(prop) === -1) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private get errorUsed(): boolean {\n    return hasSlot(this.element, \"error\") || this._error?.length > 0;\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  };\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"hide-optional\", true);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n    this.updateRadiosProperty(\"invalid\", this.invalid || this.errorUsed);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchRequired(this.required);\n  };\n\n  componentDidLoad() {\n    this.defaultValue = this.defaultValue ? this.defaultValue : this.value;\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"radiogroup\");\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": this.errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid || this.errorUsed,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || this.errorUsed}>\n        <fieldset class={classes}>\n          {this.legend && (\n            <legend class=\"stzh-radiogroup__legend\">\n              {this.legend}\n              {!this.hideOptional && (\n                <span class=\"stzh-radiogroup__marker\">\n                  <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker}\n                  </span>\n                  <span class=\"stzh-radiogroup__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText}\n                  </span>\n                </span>\n              )}\n            </legend>\n          )}\n          <div class=\"stzh-radiogroup__fields\">\n            <slot></slot>\n          </div>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-radiogroup\"\n              id={`${this.radiogroupId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-0c5f315f.js → p-8c4ca44f.js}

@@ -4,8 +4,8 @@ import { S as StzhInputDescription } from './p-6393ca35.js';
 import { d as defineCustomElement$5 } from './p-26f6521e.js';
 import { d as defineCustomElement$4 } from './p-f57f18a3.js';
 import { d as defineCustomElement$3 } from './p-8d12a95f.js';
-import { d as defineCustomElement$2 } from './p-3d24141a.js';
-import { d as defineCustomElement$1 } from './p-adc06dc4.js';
+import { d as defineCustomElement$2 } from './p-7eced0db.js';
+import { d as defineCustomElement$1 } from './p-ae7adee7.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, var(--stzh-color-secondary50));--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right] stzh-popover,.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{background-clip:text}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{text-overflow:clip;white-space:normal;overflow:visible}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";
 const StzhInputStyle0 = stzhInputCss;
@@ -318,4 +318,4 @@ function defineCustomElement() {
 
 export { StzhInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-0c5f315f.js.map
+//# sourceMappingURL=p-8c4ca44f.js.map

package/dist/components/{p-0c5f315f.js.map → p-8c4ca44f.js.map}

@@ -1 +1 @@
-{"file":"p-0c5f315f.js","mappings":"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","names":[],"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(--stzh-input-hover-border-color, #{$formHoverBorderColor});\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  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  width: 100%;\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: 0px;\n  right: 0px;\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 ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --color: var(--button-right-color);\n  --background-color: transparent;\n  --border-color: transparent;\n\n  --hover-color: var(--button-right-color);\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\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 ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger 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.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\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('micro');\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    width: auto;\n    max-width: 100%;\n    margin-bottom: space('xxxsmall');\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    }\n\n    &:empty {\n      display: none;\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  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Clearable / Search input / Password  */\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  /* 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\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\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\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: StzhLocaleComponent;\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  /** 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 truncate 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  @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  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\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 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          <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></slot>}\n            {!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          <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) &&\n              (this.type === \"search\" || this.type === \"password\") ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.type === \"search\" ? \"search\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\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                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-8c4ca44f.js","mappings":"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","names":[],"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(--stzh-input-hover-border-color, #{$formHoverBorderColor});\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  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  width: 100%;\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: 0px;\n  right: 0px;\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 ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --color: var(--button-right-color);\n  --background-color: transparent;\n  --border-color: transparent;\n\n  --hover-color: var(--button-right-color);\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\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 ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger 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.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\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('micro');\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    width: auto;\n    max-width: 100%;\n    margin-bottom: space('xxxsmall');\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    }\n\n    &:empty {\n      display: none;\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  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Clearable / Search input / Password  */\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  /* 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\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\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\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: StzhLocaleComponent;\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  /** 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 truncate 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  @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  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\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 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          <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></slot>}\n            {!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          <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) &&\n              (this.type === \"search\" || this.type === \"password\") ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.type === \"search\" ? \"search\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\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                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(this._error?.length > 0 || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-70aa77ed.js → p-978466ee.js}

@@ -5,9 +5,9 @@ import { d as defineCustomElement$7 } from './p-f57f18a3.js';
 import { d as defineCustomElement$6 } from './p-8d12a95f.js';
 import { d as defineCustomElement$5 } from './p-18d44ffb.js';
 import { d as defineCustomElement$4 } from './p-0310b26a.js';
-import { d as defineCustomElement$3 } from './p-3d24141a.js';
-import { d as defineCustomElement$2 } from './p-adc06dc4.js';
-import { d as defineCustomElement$1 } from './p-da29e441.js';
+import { d as defineCustomElement$3 } from './p-7eced0db.js';
+import { d as defineCustomElement$2 } from './p-ae7adee7.js';
+import { d as defineCustomElement$1 } from './p-a518f263.js';
 
 const stzhActionsetCss = ".sc-stzh-actionset-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-actionset-h,[stzh-hidden].sc-stzh-actionset-h{display:none}.sc-stzh-actionset-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actionset-h *.sc-stzh-actionset,.sc-stzh-actionset-h *.sc-stzh-actionset::before,.sc-stzh-actionset-h *.sc-stzh-actionset::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-actionset-h .has-focus.sc-stzh-actionset{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset{outline-style:none !important}.sc-stzh-actionset-h .stzh-fylingfocus-focused.sc-stzh-actionset::-moz-focus-inner{border:0 !important}.stzh-actionset__actions.sc-stzh-actionset{display:flex;align-items:center}.stzh-actionset__actions-wrapper.sc-stzh-actionset{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-right:var(--stzh-space-xsmall)}.stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:0}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{opacity:1}.stzh-actionset--has-collapsed-items.sc-stzh-actionset .stzh-actionset__action-popover.sc-stzh-actionset{--width:auto}@media screen and (min-width: 900px){.stzh-actionset--overflow.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__actions-wrapper.sc-stzh-actionset{flex-direction:column;align-items:stretch}}@media screen and (min-width: 600px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset{--white-space:nowrap}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action.sc-stzh-actionset:not(:last-child){margin-bottom:var(--stzh-space-xsmall);margin-right:0}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{margin-top:var(--stzh-space-xsmall)}}@media screen and (max-width: 599px){.stzh-actionset--stack.sc-stzh-actionset:not(.stzh-actionset--has-collapsed-items) .stzh-actionset__action-popover-wrapper.sc-stzh-actionset{display:none}}";
 const StzhActionsetStyle0 = stzhActionsetCss;
@@ -236,4 +236,4 @@ function defineCustomElement() {
 
 export { StzhActionset as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-70aa77ed.js.map
+//# sourceMappingURL=p-978466ee.js.map

package/dist/components/{p-70aa77ed.js.map → p-978466ee.js.map}

@@ -1 +1 @@
-{"file":"p-70aa77ed.js","mappings":"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","names":[],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {    \n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space('xsmall');\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent\n    });\n  }\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null\n    });\n\n    let newActionsVisible = 0;\n\n    if (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  }\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                    :\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )\n              ))}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? this.localization.actions : \"\")}\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={this.popoverButtonVariant !== \"\"\n                    ? this.popoverButtonVariant\n                    : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                  size={this.popoverButtonSize !== \"\"\n                    ? this.popoverButtonSize\n                    : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : (!this.isMedium ? this.localization.actions : \"\")}\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={(e) => { this.actionClick(action, e) }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-978466ee.js","mappings":";;;;;;;;;;;AAAA,MAAM,gBAAgB,GAAG,g4FAAg4F,CAAC;AAC15F,4BAAe,gBAAgB;;MCmClB,aAAa;;;;;QAsBhB,aAAQ,GAAwB,EAAE,CAAC;QAyBnC,gBAAW,GAAG,CAAC,MAAyB,EAAE,aAAyB;YACzE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;gBACxB,SAAS,EAAE,gBAAgB;gBAC3B,MAAM;gBACN,aAAa;aACd,CAAC,CAAC;SACJ,CAAA;QAEO,WAAM,GAAG;YACf,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;YAExC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,OAAO;aACR;YAED,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;gBACvC,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,IAAI;aACb,CAAC,CAAC;YAEH,IAAI,iBAAiB,GAAG,CAAC,CAAC;YAE1B,IACE,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ;mBACzC,IAAI,CAAC,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,OAAO,EAC3C;gBACA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;gBAE3B,IAAI,gBAAgB,GAAG,CAAC,CAAC;gBACzB,IAAI,eAAe,GAAG,CAAC,CAAC;;gBAGxB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAkB;;oBAElE,IAAI,KAAK,CAAC,SAAS,KAAK,CAAC,EAAE;wBACzB,iBAAiB,EAAE,CAAC;wBAEpB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;wBAExD,MAAM,KAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;wBACtC,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;wBAC9C,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;wBAChD,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;wBAC5C,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;wBAElD,MAAM,UAAU,GAAG,KAAK,GAAG,UAAU,GAAG,WAAW,CAAC;wBACpD,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAC;wBAEtD,IAAI,gBAAgB,GAAG,WAAW,EAAE;4BAClC,gBAAgB,GAAG,WAAW,CAAC;yBAChC;wBAED,eAAe,GAAG,eAAe,GAAG,UAAU,CAAC;qBAChD;iBACF,CAAC,CAAC;gBAEH,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;oBACvC,KAAK,EAAE,GAAG,eAAe,IAAI;oBAC7B,MAAM,EAAE,GAAG,gBAAgB,IAAI;iBAChC,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAE5B,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE;oBAC/B,iBAAiB,GAAG,CAAC,CAAC;iBACvB;qBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;oBACnC,iBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;iBAC1E;aACF;YAED,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;SAChE,CAAA;QAEO,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;aAClD;YAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1D,CAAA;QAEO,uBAAkB,GAAG;YAC3B,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;YAC3B,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACpC,CAAA;;uBA/HwD,OAAO;oCAG2B,EAAE;iCAGb,EAAE;gCAG3B,YAAY;uBAOnB,EAAE;gCAiBD,EAAE;;;;;IARnD,cAAc,CAAC,QAAsC;QACnD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SACtC;aAAM;YACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;SAC1B;KACF;IAkGD,MAAM,iBAAiB;QACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAElC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;SACpG;KACF;IAED,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEhD,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAC3C;IAED,oBAAoB;QAClB,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEnD,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;SAClC;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,EAAE,CAAC;KACf;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;;YAEtB,qCAAqC,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC;YACvE,CAAC,mBAAmB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SACpD,CAAC;QAEF,MAAM,MAAM,GAAG,CAAC,MAAyB,EAAE,cAAuB,MAChE,oEACE,YAAY,EAAE,cAAc,GAAG,IAAI,GAAG,IAAI,EAC1C,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,WAAW,EAAE,IAAI;aAClB,EACD,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,YAAY,EAAE,MAAM,CAAC,YAAY,EACjC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO;kBACnB,MAAM,CAAC,OAAO;mBACb,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC,EACzD,IAAI,EAAE,MAAM,CAAC,IAAI;kBACb,MAAM,CAAC,IAAI;mBACV,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,EACjD,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA,EAAE,GAClC,CAChB,CAAC;QAEF,QACE,EAAC,IAAI,4EAAsB,IAAI,CAAC,gBAAgB,CAAC,MAAM,GAAG,CAAC,IACzD,4DAAK,KAAK,EAAE,OAAO,IACjB,4DAAK,KAAK,EAAC,yBAAyB,EAAC,IAAI,EAAC,OAAO,IAC/C,4DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAiB,CAAC,EACtD,KAAK,EAAC,iCAAiC,IAEtC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,KACvB,CAAC,IAAI,CAAC,cAAc;gBACd,CAAC,IAAI,CAAC,cAAc;gBACtB,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;;iBAE9C,MAAM,CAAC,cAAc;;wBAEpB,oBACE,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,MAAM,CAAC,cAAc,IAE7B,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CACrE;;wBAEf,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAClF,CACJ,CAAC,CACE,EAEN,4DAAK,KAAK,EAAC,wCAAwC,IACjD,qEACE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;kBAC3B,IAAI,CAAC,YAAY,CAAC,cAAc;mBAC/B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC,EACrD,QAAQ,EAAC,OAAO,EAChB,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAChC,KAAK,EAAC,gCAAgC,IAEtC,oEACE,SAAS,QACT,QAAQ,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAC5C,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAE,IAAI,CAAC,oBAAoB,KAAK,EAAE;kBACrC,IAAI,CAAC,oBAAoB;mBACxB,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,WAAW,GAAG,UAAU,CAAC,EACzD,IAAI,EAAE,IAAI,CAAC,iBAAiB,KAAK,EAAE;kBAC/B,IAAI,CAAC,iBAAiB;mBACrB,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,EACjD,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,YAAY,GAAG,eAAe,EAC/D,QAAQ,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,EACtD,YAAY,EAAC,OAAO,EACpB,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;kBAC3B,IAAI,CAAC,YAAY,CAAC,cAAc;mBAC/B,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,EAAE,CAAC,EACrD,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,GACtD,EACf,kEAAW,IAAI,EAAC,SAAS,IACtB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,KAC/B;;YAEE,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA,EAAE;WAE9C,MAAM,CAAC,KAAK,CACE,CAClB,CAAC,CACQ,CACC,CACX,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-actionset/stzh-actionset.scss?tag=stzh-actionset&encapsulation=scoped","src/components/stzh-actionset/stzh-actionset.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-actionset {\n  &__actions {\n    display: flex;\n    align-items: center;\n  }\n\n  &__actions-wrapper {\n    position: relative;\n    display: flex;\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  &__action {\n    &:not(:last-child) {\n      margin-right: space('xsmall');\n    }\n  }\n\n  &__action-popover-wrapper {\n    opacity: 0;\n  }\n\n  &--has-collapsed-items &__action-popover-wrapper {\n    opacity: 1;\n  }\n\n  &--has-collapsed-items &__action-popover {\n    --width: auto;\n  }\n\n  /* Overflow variant */\n\n  &--overflow &__action {\n    @include mq($from: medium) {\n      --white-space: nowrap;\n    }\n  }\n\n  /* Stack variant */\n\n  &--stack &__actions {\n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__actions-wrapper {    \n    @include mq($to: small) {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n\n  &--stack &__action {\n    @include mq($from: small) {\n      --white-space: nowrap;\n    }\n\n    &:not(:last-child) {\n      @include mq($to: small) {\n        margin-bottom: space('xsmall');\n        margin-right: 0;\n      }\n    }\n  }\n\n  &--stack &__action-popover-wrapper {\n    @include mq($to: small) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  // Hide more action popover on small if it has no collapsed items\n\n  &--stack:not(#{&}--has-collapsed-items) &__action-popover-wrapper {\n    @include mq($to: small) {\n      display: none;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Element,\n  Watch,\n  Event,\n  EventEmitter,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhActionsetItem,\n  StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n  Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n  tag: \"stzh-actionset\",\n  styleUrl: \"stzh-actionset.scss\",\n  scoped: true\n})\nexport class StzhActionset {\n  /** Translation strings */\n  @Prop() localization: StzhActionsetLocalizedText;\n\n  /** Variant determining what position the action buttons are */\n  @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n  /** Button variant of popover button (button thats holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"tertiary\" = \"\";\n\n  /** Button size of popover button (button that holds collapsed actions) */\n  @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n  /** Popover placement of button that holds collapsed actions */\n  @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n  /**\n   * Card header actions.\n   * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n   * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n   */\n  @Prop() actions: StzhActionsetItem[] | string = [];\n  private _actions: StzhActionsetItem[] = [];\n\n  /** Header action click event */\n  @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n  @Element() element: HTMLStzhActionsetElement;\n\n  @Watch(\"actions\")\n  actionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._actions = JSON.parse(newValue);\n    } else {\n      this._actions = newValue;\n    }\n  }\n\n  @State() actionsCollapsed: StzhActionsetItem[] = [];\n  @State() dynamicActions: boolean;\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n\n  private actionsElement: HTMLElement;\n  private debounceResize: number;\n  private resizeObserver: ResizeObserver;\n\n  private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n    this.stzhActionClick.emit({\n      component: \"stzh-actionset\",\n      action,\n      originalEvent\n    });\n  }\n\n  private update = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n\n    if (!this.actionsElement) {\n      return;\n    }\n\n    Object.assign(this.actionsElement.style, {\n      width: null,\n      height: null\n    });\n\n    let newActionsVisible = 0;\n\n    if (\n      this.variant === \"overflow\" && this.isMedium\n      || this.variant === \"stack\" && this.isSmall\n    ) {\n      this.dynamicActions = true;\n\n      let newActionsHeight = 0;\n      let newActionsWidth = 0;\n\n      // update height and width\n      Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n        // check which item is visible and\n        if (child.offsetTop === 0) {\n          newActionsVisible++;\n\n          const { width, height } = child.getBoundingClientRect();\n\n          const style = getComputedStyle(child);\n          const marginLeft = parseInt(style.marginLeft);\n          const marginRight = parseInt(style.marginRight);\n          const marginTop = parseInt(style.marginTop);\n          const marginBottom = parseInt(style.marginBottom);\n\n          const childWidth = width + marginLeft + marginRight;\n          const childHeight = height + marginTop + marginBottom;\n\n          if (newActionsHeight < childHeight) {\n            newActionsHeight = childHeight;\n          }\n\n          newActionsWidth = newActionsWidth + childWidth;\n        }\n      });\n\n      Object.assign(this.actionsElement.style, {\n        width: `${newActionsWidth}px`,\n        height: `${newActionsHeight}px`\n      });\n    } else {\n      this.dynamicActions = false;\n\n      if (this.variant === \"overflow\") {\n        newActionsVisible = 0;\n      } else if (this.variant === \"stack\") {\n        newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n      }\n    }\n\n    this.actionsCollapsed = this._actions.slice(newActionsVisible);\n  }\n\n  private handleResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.update);\n  }\n\n  private mediaChangeHandler = () => {\n    this.actionsCollapsed = [];\n    requestAnimationFrame(this.update);\n  }\n\n  async componentWillLoad() {\n    this.actionsWatcher(this.actions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n\n    this.resizeObserver = new ResizeObserver(this.handleResize);\n    this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.mediaChangeHandler);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad() {\n    this.update();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-actionset\": true,\n      // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n      \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n      [`stzh-actionset--${this.variant}`]: !!this.variant\n    };\n\n    const Action = (action: StzhActionsetItem, disableTabbing: boolean) => (\n      <stzh-button\n        a11yTabindex={disableTabbing ? \"-1\" : null}\n        class={{\n          \"stzh-actionset__action\": true,\n          \"is-button\": true\n        }}\n        label={action.label}\n        icon={action.icon}\n        iconPosition={action.iconPosition}\n        iconOnly={action.iconOnly}\n        badge={action.badge}\n        variant={action.variant\n          ? action.variant\n          : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n        size={action.size\n          ? action.size\n          : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n        badgePosition=\"icon\"\n        onClick={(e) => { this.actionClick(action, e) }}\n      ></stzh-button>\n    );\n\n    return (\n      <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n        <div class={classes}>\n          <div class=\"stzh-actionset__actions\" role=\"group\">\n            <div\n              ref={(el) => (this.actionsElement = el as HTMLElement)}\n              class=\"stzh-actionset__actions-wrapper\"\n            >\n              {this._actions.map(action => (\n                (this.dynamicActions\n                  || (!this.dynamicActions &&\n                    this.actionsCollapsed.indexOf(action) === -1))\n                &&\n                  (action.tooltipContent\n                    ?\n                    <stzh-tooltip\n                      strategy=\"fixed\"\n                      content={action.tooltipContent}\n                    >\n                      {Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)}\n                    </stzh-tooltip>\n                    :\n                    Action(action, this.dynamicActions && this.actionsCollapsed.indexOf(action) > -1)\n                  )\n              ))}\n            </div>\n\n            <div class=\"stzh-actionset__action-popover-wrapper\">\n              <stzh-popover\n                label={this.variant === \"stack\"\n                  ? this.localization.furtherActions\n                  : (!this.isMedium ? this.localization.actions : \"\")}\n                strategy=\"fixed\"\n                placement={this.popoverPlacement}\n                class=\"stzh-actionset__action-popover\"\n              >\n                <stzh-button\n                  fullwidth\n                  disabled={this.actionsCollapsed.length === 0}\n                  class=\"stzh-actionset__action is-further\"\n                  variant={this.popoverButtonVariant !== \"\"\n                    ? this.popoverButtonVariant\n                    : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n                  size={this.popoverButtonSize !== \"\"\n                    ? this.popoverButtonSize\n                    : (this.variant === \"stack\" ? \"small\" : \"tiny\")}\n                  icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n                  iconOnly={this.variant === \"overflow\" && this.isMedium}\n                  iconPosition=\"right\"\n                  label={this.variant === \"stack\"\n                    ? this.localization.furtherActions\n                    : (!this.isMedium ? this.localization.actions : \"\")}\n                  a11yLabel={this.variant === \"overflow\" && this.localization.actions}\n                ></stzh-button>\n                <stzh-menu slot=\"content\">\n                  {this.actionsCollapsed.map(action => (\n                    <stzh-menu-item\n                      // class=\"hide-medium show-when-collapsed\"\n                      icon={action.icon}\n                      badge={action.badge}\n                      badgeEmpty={action.badgeEmpty}\n                      badgeType={action.badgeType}\n                      onClick={(e) => { this.actionClick(action, e) }}\n                    >\n                      {action.label}\n                    </stzh-menu-item>\n                  ))}\n                </stzh-menu>\n              </stzh-popover>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-043132df.js → p-9c27b812.js}

@@ -5,7 +5,7 @@ import { d as defineCustomElement$5 } from './p-5d65de9f.js';
 import { d as defineCustomElement$4 } from './p-982f7927.js';
 import { d as defineCustomElement$3 } from './p-8d12a95f.js';
 import { d as defineCustomElement$2 } from './p-499f5b56.js';
-import { d as defineCustomElement$1 } from './p-adc06dc4.js';
+import { d as defineCustomElement$1 } from './p-ae7adee7.js';
 
 const stzhPoicardCss = ".sc-stzh-poicard-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-poicard-h,[stzh-hidden].sc-stzh-poicard-h{display:none}.sc-stzh-poicard-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h *.sc-stzh-poicard,.sc-stzh-poicard-h *.sc-stzh-poicard::before,.sc-stzh-poicard-h *.sc-stzh-poicard::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-poicard-h .has-focus.sc-stzh-poicard{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard{outline-style:none !important}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard::-moz-focus-inner{border:0 !important}.sc-stzh-poicard-h{--background-color:var(--stzh-color-grey10);--hover-background-color:var(--stzh-color-grey20);--title-color:var(--stzh-color-primary70);--title-hover-color:var(--stzh-color-primary80);--title-background-color:var(--stzh-color-secondary20);--title-hover-background-color:var(--stzh-color-secondary30)}.stzh-poicard.sc-stzh-poicard{display:block;background-color:var(--background-color);text-decoration:none;height:100%}.stzh-poicard.sc-stzh-poicard:hover{--title-color:var(--title-hover-color);--title-background-color:var(--title-hover-background-color);--background-color:var(--hover-background-color)}.stzh-poicard__content.sc-stzh-poicard{display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-poicard__content-with-icon.sc-stzh-poicard,.stzh-poicard__content-with-badge.sc-stzh-poicard{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-badge.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-grey80)}.stzh-poicard__content-head.sc-stzh-poicard{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);--color:var(--title-color);background-color:var(--title-background-color)}.stzh-poicard__content-head.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary)}.stzh-poicard__content-title.sc-stzh-poicard{width:100%;--color:var(--stzh-color-grey80)}.stzh-poicard.sc-stzh-poicard:hover .stzh-poicard__content-title.sc-stzh-poicard{--color:var(--stzh-color-black)}.stzh-poicard__content-body.sc-stzh-poicard{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}";
 const StzhPoicardStyle0 = stzhPoicardCss;
@@ -106,4 +106,4 @@ function defineCustomElement() {
 
 export { StzhPoicard as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-043132df.js.map
+//# sourceMappingURL=p-9c27b812.js.map

package/dist/components/{p-043132df.js.map → p-9c27b812.js.map}

@@ -1 +1 @@
-{"file":"p-043132df.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,iiGAAiiG,CAAC;AACzjG,0BAAe,cAAc;;MCUhB,WAAW;;;;QAsBd,SAAI,GAAG;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC7B,CAAC;oBApB2C,EAAE;;IAI/C,WAAW,CAAC,QAAsC;QAChD,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACnC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;aACxB;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;KACF;IAMD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,0DAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,4BAA4B,IACrC,uEAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,4DAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,IAAI,EAAC,KAAK,GAAa,EAClC,oEAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,oEAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;YAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,4DAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,kEAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,kEACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-9c27b812.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,iiGAAiiG,CAAC;AACzjG,0BAAe,cAAc;;MCUhB,WAAW;;;;QAsBd,SAAI,GAAG;YACb,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SAC7B,CAAC;oBApB2C,EAAE;;IAI/C,WAAW,CAAC,QAAsC;QAChD,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;SACxB;aAAM,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YACvC,IAAI;gBACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;aACnC;YAAC,OAAO,CAAC,EAAE;gBACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;aACxB;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;SACvB;KACF;IAMD,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;SACrB,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,0DAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,MAAM,EAAC,QAAQ,IACtD,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,4BAA4B,IACrC,uEAAe,IAAI,CAAC,KAAK,CAAC,KAAK,CAAgB,CAC3C,EACN,4DAAK,KAAK,EAAC,4BAA4B,IACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,KAClB,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,IAAI,EAAC,KAAK,GAAa,EAClC,oEAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAa,CACxC,CACP,EAEA,IAAI,CAAC,KAAK,CAAC,IAAI,KACd,4DAAK,KAAK,EAAC,iCAAiC,IAC1C,kEAAW,IAAI,EAAC,aAAa,GAAa,EAC1C,oEAAY,IAAI,CAAC,KAAK,CAAC,IAAI,CAAa,CACpC,CACP,EAEA,CAAC,IAAI,CAAC,KAAK,CAAC,oBAAoB;YAC/B,IAAI,CAAC,KAAK,CAAC,aAAa,MACxB,4DAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,aAAa,KACvB,kEAAW,IAAI,EAAC,OAAO,IACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CACf,CACb,EACA,IAAI,CAAC,KAAK,CAAC,oBAAoB,KAC9B,kEACE,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,EAAE,EACP,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,OAAO,EAC9C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,oBAAoB,GAC3B,CACd,CACG,CACP,CACG,CACF,CACJ,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n  --background-color: var(--stzh-color-grey10);\n  --hover-background-color: var(--stzh-color-grey20);\n  --title-color: var(--stzh-color-primary70);\n  --title-hover-color: var(--stzh-color-primary80);\n  --title-background-color: var(--stzh-color-secondary20);\n  --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n  display: block;\n  background-color: var(--background-color);\n  text-decoration: none;\n  height: 100%;\n\n  &:hover {\n    --title-color: var(--title-hover-color);\n    --title-background-color: var(--title-hover-background-color);\n    --background-color: var(--hover-background-color);\n  }\n\n  /* Content */\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-small);\n  }\n\n  &__content-with-icon,\n  &__content-with-badge {\n    display: flex;\n    align-items: center;\n    gap: var(--stzh-space-xxsmall);\n  }\n\n  &__content-with-icon stzh-text {\n    width: auto;\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-icon stzh-icon {\n    --color: var(--stzh-color-primary70);\n  }\n\n  &__content-with-badge stzh-text {\n    width: auto;\n    --color: var(--stzh-color-grey80);\n  }\n\n  /* Content head */\n\n  &__content-head {\n    display: flex;\n    align-items: center;\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n    --color: var(--title-color);\n    background-color: var(--title-background-color);\n  }\n\n  &__content-head stzh-icon {\n    --color: var(--stzh-color-primary);\n  }\n\n  &__content-title {\n    width: 100%;\n    --color: var(--stzh-color-grey80);\n  }\n\n  &:hover &__content-title {\n    --color: var(--stzh-color-black);\n  }\n\n  /* Content Body */\n\n  &__content-body {\n    padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n    display: flex;\n    flex-direction: column;\n    gap: var(--stzh-space-xsmall);\n  }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n  tag: \"stzh-poicard\",\n  styleUrl: \"stzh-poicard.scss\",\n  scoped: true,\n})\nexport class StzhPoicard {\n  @Element() element: HTMLStzhPoicardElement;\n\n  /** Socialmediastream item */\n  @Prop() item: StzhPoiCardItemData | string = \"\";\n  private _item: StzhPoiCardItemData | undefined;\n\n  @Watch(\"item\")\n  itemWatcher(newValue: StzhPoiCardItemData | string) {\n    if (!newValue) {\n      this._item = undefined;\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._item = JSON.parse(newValue);\n      } catch (e) {\n        this._item = undefined;\n      }\n    } else {\n      this._item = newValue;\n    }\n  }\n\n  private init = () => {\n    this.itemWatcher(this.item);\n  };\n\n  connectedCallback() {\n    this.init();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-poicard\": true,\n    };\n\n    return (\n      <Host>\n        <a class={classes} href={this._item.url} target=\"_blank\">\n          <div class=\"stzh-poicard__content\">\n            <div class=\"stzh-poicard__content-head\">\n              <stzh-heading>{this._item.title}</stzh-heading>\n            </div>\n            <div class=\"stzh-poicard__content-body\">\n              {this._item.distance && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"pin\"></stzh-icon>\n                  <stzh-text>{this._item.distance}</stzh-text>\n                </div>\n              )}\n\n              {this._item.temp && (\n                <div class=\"stzh-poicard__content-with-icon\">\n                  <stzh-icon name=\"thermometer\"></stzh-icon>\n                  <stzh-text>{this._item.temp}</stzh-text>\n                </div>\n              )}\n\n              {(this._item.statusMessageContent ||\n                this._item.statusMessage) && (\n                <div class=\"stzh-poicard__content-with-badge\">\n                  {this._item.statusMessage && (\n                    <stzh-text size=\"milli\">\n                      {this._item.statusMessage}\n                    </stzh-text>\n                  )}\n                  {this._item.statusMessageContent && (\n                    <stzh-chip\n                      variant=\"tag\"\n                      size=\"small\"\n                      inverted={true}\n                      icon=\"\"\n                      type={this._item.success ? \"default\" : \"error\"}\n                      label={this._item.statusMessageContent}\n                    ></stzh-chip>\n                  )}\n                </div>\n              )}\n            </div>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}