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

package/dist/components/stzh-message.js

@@ -1,95 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './stzh-badge2.js';
-import { d as defineCustomElement$3 } from './stzh-button2.js';
-import { d as defineCustomElement$2 } from './stzh-icon2.js';
-
-const stzhMessageCss = ".sc-stzh-message-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-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";
-
-const StzhMessage$1 = /*@__PURE__*/ proxyCustomElement(class StzhMessage extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.stzhOpen = createEvent(this, "stzhOpen", 7);
-    this.stzhClose = createEvent(this, "stzhClose", 7);
-    this.onCloseButtonClick = () => {
-      this.hide();
-    };
-    this.label = "";
-    this.description = "";
-    this.type = "info";
-    this.hideClose = false;
-    this.localization = undefined;
-    this.open = true;
-  }
-  async show() {
-    this.open = true;
-    this.stzhOpen.emit({
-      component: "stzh-message"
-    });
-  }
-  async hide() {
-    this.open = false;
-    this.stzhClose.emit({
-      component: "stzh-message"
-    });
-  }
-  async componentWillLoad() {
-    if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "message");
-    }
-  }
-  render() {
-    const classes = {
-      "stzh-message": true,
-      "stzh-message--has-close-hidden": this.hideClose,
-      [`stzh-message--type-${this.type}`]: !!this.type,
-    };
-    return (h(Host, { hidden: !this.open }, h("div", { class: classes }, h("div", { class: "stzh-message__content" }, h("div", { class: "stzh-message__icon-wrapper" }, h("stzh-icon", { class: "stzh-message__icon", name: this.type === 'info' && "info-help-filled"
-        || this.type === 'success' && "checkmark-circle-filled"
-        || this.type === 'warning' && "important-warning-filled"
-        || this.type === 'error' && "warning-filled" })), h("div", { class: "stzh-message__text-wrapper" }, h("div", { class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-message__link" }, h("slot", { name: "link" })))), !this.hideClose &&
-      h("stzh-button", { class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))));
-  }
-  get element() { return this; }
-  static get style() { return stzhMessageCss; }
-}, [6, "stzh-message", {
-    "label": [1],
-    "description": [1],
-    "type": [513],
-    "hideClose": [4, "hide-close"],
-    "localization": [16],
-    "open": [32],
-    "show": [64],
-    "hide": [64]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["stzh-message", "stzh-badge", "stzh-button", "stzh-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "stzh-message":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, StzhMessage$1);
-      }
-      break;
-    case "stzh-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "stzh-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "stzh-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { S as StzhMessage$1, d as defineCustomElement$1 } from './stzh-message2.js';
 
 const StzhMessage = StzhMessage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/stzh-message.js.map

@@ -1 +1 @@
-{"file":"stzh-message.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,q3OAAq3O;;MC0B/3OA,aAAW;;;;;;IA2Cd,uBAAkB,GAAG;MAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAA;iBA3CuB,EAAE;uBAGI,EAAE;gBAG0C,MAAM;qBAGnD,KAAK;;gBAcT,IAAI;;EAG7B,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,gCAAgC,EAAE,IAAI,CAAC,SAAS;MAChD,CAAC,sBAAsB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACjD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,iBACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB;WACvC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAyB;WACpD,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,0BAA0B;WACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,gBAAgB,GAEnC,CACT,EACN,WAAK,KAAK,EAAC,4BAA4B,IACrC,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD,EACN,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,eAAa,CAChD,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF,EAEL,CAAC,IAAI,CAAC,SAAS;MACd,mBACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,WAAW,GACH,CAEb,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhMessage"],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-message.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/{esm/stzh-message.entry.js → components/stzh-message2.js}

@@ -1,10 +1,14 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './stzh-badge2.js';
+import { d as defineCustomElement$2 } from './stzh-button2.js';
+import { d as defineCustomElement$1 } from './stzh-icon2.js';
 
 const stzhMessageCss = ".sc-stzh-message-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-message-h{display:none}.sc-stzh-message-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-message-h *.sc-stzh-message,.sc-stzh-message-h *.sc-stzh-message::before,.sc-stzh-message-h *.sc-stzh-message::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-message-h .has-focus.sc-stzh-message{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message{outline-style:none !important}.sc-stzh-message-h .stzh-fylingfocus-focused.sc-stzh-message::-moz-focus-inner{border:0 !important}.sc-stzh-message-h{--background-color:var(--stzh-color-grey20);--icon-color:var(--stzh-color-info70);--close-color:var(--stzh-color-grey90);--label-color:var(--stzh-color-info70);--description-color:var(--stzh-color-grey90)}[type=success].sc-stzh-message-h{--label-color:var(--stzh-color-success70);--icon-color:var(--stzh-color-success70);--background-color:var(--stzh-color-success20)}[type=warning].sc-stzh-message-h{--label-color:var(--stzh-color-warning90);--icon-color:var(--stzh-color-warning90);--background-color:var(--stzh-color-warning20)}[type=error].sc-stzh-message-h{--label-color:var(--stzh-color-error70);--icon-color:var(--stzh-color-error70);--background-color:var(--stzh-color-error20)}.stzh-message.sc-stzh-message{position:relative;display:flex;box-shadow:var(--stzh-box-shadow-message);background-color:var(--background-color);border-radius:var(--stzh-button-border-radius)}.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-right:var(--stzh-space-xlarge);gap:var(--stzh-space-small);display:flex;flex-direction:column;flex-grow:1;padding-left:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__content.sc-stzh-message{gap:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-message__content.sc-stzh-message{flex-direction:row;align-items:flex-start}}@media screen and (min-width: 900px){.stzh-message__content.sc-stzh-message{padding-left:var(--stzh-space-large)}}.stzh-message__icon-wrapper.sc-stzh-message{display:flex;flex-shrink:0}.stzh-message__icon.sc-stzh-message{--size:var(--stzh-icon-size-large);color:var(--icon-color)}@media screen and (min-width: 600px){.stzh-message__text-wrapper.sc-stzh-message{flex-grow:1}}.stzh-message__label.sc-stzh-message{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--label-color)}@media screen and (min-width: 600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-message__label.sc-stzh-message{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-message__label.sc-stzh-message:not(:empty){margin-bottom:var(--stzh-space-large)}}.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--description-color)}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-message__description.sc-stzh-message:not(:empty)+.stzh-message__link.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxlarge)}}.stzh-message__close[variant=tertiary].sc-stzh-message{--color:var(--close-color);position:absolute;top:0;right:0}.stzh-message.sc-stzh-message:has(.stzh-message__description:empty):has(.stzh-message__link:empty) .stzh-message__label.sc-stzh-message:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-bottom:0}";
 
-const StzhMessage = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const StzhMessage = /*@__PURE__*/ proxyCustomElement(class StzhMessage extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
     this.stzhOpen = createEvent(this, "stzhOpen", 7);
     this.stzhClose = createEvent(this, "stzhClose", 7);
     this.onCloseButtonClick = () => {
@@ -46,10 +50,47 @@ const StzhMessage = class {
         || this.type === 'error' && "warning-filled" })), h("div", { class: "stzh-message__text-wrapper" }, h("div", { class: "stzh-message__label" }, this.label ? this.label : h("slot", { name: "label" })), h("div", { class: "stzh-message__description" }, this.description ? this.description : h("slot", null)), h("div", { class: "stzh-message__link" }, h("slot", { name: "link" })))), !this.hideClose &&
       h("stzh-button", { class: "stzh-message__close", onClick: this.onCloseButtonClick, a11yLabel: this.localization.close, variant: "tertiary", size: "small", iconOnly: true, icon: "close-big" }))));
   }
-  get element() { return getElement(this); }
-};
-StzhMessage.style = stzhMessageCss;
+  get element() { return this; }
+  static get style() { return stzhMessageCss; }
+}, [6, "stzh-message", {
+    "label": [1],
+    "description": [1],
+    "type": [513],
+    "hideClose": [4, "hide-close"],
+    "localization": [16],
+    "open": [32],
+    "show": [64],
+    "hide": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["stzh-message", "stzh-badge", "stzh-button", "stzh-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "stzh-message":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, StzhMessage);
+      }
+      break;
+    case "stzh-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "stzh-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "stzh-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
 
-export { StzhMessage as stzh_message };
+export { StzhMessage as S, defineCustomElement as d };
 
-//# sourceMappingURL=stzh-message.entry.js.map
+//# sourceMappingURL=stzh-message2.js.map

package/dist/components/stzh-message2.js.map

@@ -0,0 +1 @@
+{"file":"stzh-message2.js","mappings":";;;;;AAAA,MAAM,cAAc,GAAG,q3OAAq3O;;MC0B/3O,WAAW;;;;;;IA2Cd,uBAAkB,GAAG;MAC3B,IAAI,CAAC,IAAI,EAAE,CAAC;KACb,CAAA;iBA3CuB,EAAE;uBAGI,EAAE;gBAG0C,MAAM;qBAGnD,KAAK;;gBAcT,IAAI;;EAG7B,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;MACjB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAGD,MAAM,IAAI;IACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;MAClB,SAAS,EAAE,cAAc;KAC1B,CAAC,CAAC;GACJ;EAMD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;KAClG;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,gCAAgC,EAAE,IAAI,CAAC,SAAS;MAChD,CAAC,sBAAsB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KACjD,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,MAAM,EAAE,CAAC,IAAI,CAAC,IAAI,IACtB,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,uBAAuB,IAChC,WAAK,KAAK,EAAC,4BAA4B,IACrC,iBACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EACF,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,kBAAkB;WACvC,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,yBAAyB;WACpD,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,0BAA0B;WACrD,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,gBAAgB,GAEnC,CACT,EACN,WAAK,KAAK,EAAC,4BAA4B,IACrC,WAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjD,EACN,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,eAAa,CAChD,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACF,CACF,EAEL,CAAC,IAAI,CAAC,SAAS;MACd,mBACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,EAClC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,IAAI,EAAC,WAAW,GACH,CAEb,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-message/stzh-message.scss?tag=stzh-message&encapsulation=scoped","src/components/stzh-message/stzh-message.tsx"],"sourcesContent":[":host {\n  --background-color: #{$colorGrey20};\n  --icon-color: #{$colorInfo70};\n  --close-color: #{$colorGrey90};\n  --label-color: #{$colorInfo70};\n  --description-color: #{$colorGrey90};\n\n  &[type=\"success\"] {\n    --label-color: #{$colorSuccess70};\n    --icon-color: #{$colorSuccess70};\n    --background-color: #{$colorSuccess20};\n  }\n\n  &[type=\"warning\"] {\n    --label-color: #{$colorWarning90};\n    --icon-color: #{$colorWarning90};\n    --background-color: #{$colorWarning20};\n  }\n\n  &[type=\"error\"] {\n    --label-color: #{$colorError70};\n    --icon-color: #{$colorError70};\n    --background-color: #{$colorError20};\n  }\n}\n\n.stzh-message {\n  position: relative;\n  display: flex;\n  box-shadow: $boxShadowMessage;\n  background-color: var(--background-color);\n  border-radius: #{$buttonBorderRadius};\n\n  &__content {\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    @include spaceCurve('padding-right', 'medium');\n    @include spaceCurve('gap', 'small');\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding-left: space('medium');\n\n    @include mq($from: small) {\n      flex-direction: row;\n      align-items: flex-start;\n    }\n\n    @include mq($from: medium) {\n      padding-left: space('large');\n    }\n  }\n\n  &__icon-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  &__icon {\n    --size: #{iconSize('large')};\n    color: var(--icon-color);\n  }\n\n  &__text-wrapper {\n    @include mq($from: small) {\n      flex-grow: 1;\n    }\n  }\n\n  &__label {\n    @include font('title');\n    @include fontCurve('h4', 'heading');\n    color: var(--label-color);\n\n    &:not(:empty) {\n      @include spaceCurve('margin-bottom', 'small');\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    color: var(--description-color);\n  }\n\n  &__description:not(:empty) + &__link:not(:empty) {\n    @include spaceCurve('margin-top', 'regular');\n  }\n\n  &__close[variant=\"tertiary\"] {\n    --color: var(--close-color);\n\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  /* Only label variant */\n\n  &:has(#{&}__description:empty):has(#{&}__link:empty) &__label:not(:empty) {\n    margin-top: space('xxsmall');\n    margin-bottom: 0;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Method,\n  State\n} from \"@stencil/core\";\n\nimport { StzhMessageOpenEvent, StzhMessageCloseEvent } from \"../../index\";\n\nimport { StzhMessageLocalizedText } from \"./stzh-message.localization\"\n\n/**\n * @slot - Slot for description content (use instead of description property)\n * @slot label - Slot for label (use as alternative for property)\n * @slot link - Slot for optional stzh-link element\n */\n@Component({\n  tag: \"stzh-message\",\n  styleUrl: \"stzh-message.scss\",\n  scoped: true\n})\nexport class StzhMessage {\n  /** Label (slot can also be used as alternative) */\n  @Prop() label: string = \"\";\n\n  /** Description (use instead of default slot) */\n  @Prop() description: string = \"\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: \"info\" | \"success\" | \"warning\" | \"error\" = \"info\"\n\n  /** Whether to hide close button */\n  @Prop() hideClose: boolean = false;\n\n  /** Translation strings. */\n  @Prop() localization: StzhMessageLocalizedText;\n\n  /** Message open event */\n  @Event() stzhOpen: EventEmitter<StzhMessageOpenEvent>;\n\n  /** Message close event */\n  @Event() stzhClose: EventEmitter<StzhMessageCloseEvent>;\n\n  @Element() element: HTMLStzhMessageElement;\n\n  /** Open state */\n  @State() open: boolean = true;\n\n  @Method()\n  async show() {\n    this.open = true;\n    this.stzhOpen.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  @Method()\n  async hide() {\n    this.open = false;\n    this.stzhClose.emit({\n      component: \"stzh-message\"\n    });\n  }\n\n  private onCloseButtonClick = () => {\n    this.hide();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"message\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-message\": true,\n      \"stzh-message--has-close-hidden\": this.hideClose,\n      [`stzh-message--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host hidden={!this.open}>\n        <div class={classes}>\n          <div class=\"stzh-message__content\">\n            <div class=\"stzh-message__icon-wrapper\">\n              <stzh-icon\n                class=\"stzh-message__icon\"\n                name={\n                  this.type === 'info' && \"info-help-filled\"\n                  || this.type === 'success' && \"checkmark-circle-filled\"\n                  || this.type === 'warning' && \"important-warning-filled\"\n                  || this.type === 'error' && \"warning-filled\"\n                }\n              ></stzh-icon>\n            </div>\n            <div class=\"stzh-message__text-wrapper\">\n              <div class=\"stzh-message__label\">\n                {this.label ? this.label : <slot name=\"label\"></slot>}\n              </div>\n              <div class=\"stzh-message__description\">\n                {this.description ? this.description : <slot></slot>}\n              </div>\n              <div class=\"stzh-message__link\">\n                <slot name=\"link\"></slot>\n              </div>\n            </div>\n          </div>\n\n          {!this.hideClose &&\n            <stzh-button\n              class=\"stzh-message__close\"\n              onClick={this.onCloseButtonClick}\n              a11yLabel={this.localization.close}\n              variant=\"tertiary\"\n              size=\"small\"\n              iconOnly={true}\n              icon=\"close-big\"\n            ></stzh-button>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-microsite-teaserlist.js

@@ -1,14 +1,13 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as axios } from './axios.js';
-import { d as defineCustomElement$j } from './stzh-actionset2.js';
-import { d as defineCustomElement$i } from './stzh-badge2.js';
-import { d as defineCustomElement$h } from './stzh-button2.js';
-import { d as defineCustomElement$g } from './stzh-card2.js';
-import { d as defineCustomElement$f } from './stzh-cardlist2.js';
-import { d as defineCustomElement$e } from './stzh-chip2.js';
-import { d as defineCustomElement$d } from './stzh-chipselect2.js';
-import { d as defineCustomElement$c } from './stzh-clamp2.js';
-import { d as defineCustomElement$b } from './stzh-dropdown2.js';
+import { d as defineCustomElement$i } from './stzh-actionset2.js';
+import { d as defineCustomElement$h } from './stzh-badge2.js';
+import { d as defineCustomElement$g } from './stzh-button2.js';
+import { d as defineCustomElement$f } from './stzh-card2.js';
+import { d as defineCustomElement$e } from './stzh-cardlist2.js';
+import { d as defineCustomElement$d } from './stzh-chip2.js';
+import { d as defineCustomElement$c } from './stzh-chipselect2.js';
+import { d as defineCustomElement$b } from './stzh-clamp2.js';
 import { d as defineCustomElement$a } from './stzh-icon2.js';
 import { d as defineCustomElement$9 } from './stzh-link2.js';
 import { d as defineCustomElement$8 } from './stzh-menu2.js';
@@ -32,7 +31,7 @@ const StzhMicrositeTeaserlist$1 = /*@__PURE__*/ proxyCustomElement(class StzhMic
     this._showMoreLink = false;
     this.handleChange = (event) => {
       this.showItems = this._initialShowItems;
-      this.activeFilter = event.detail.value;
+      this.activeFilter = typeof event.detail.value === "string" ? event.detail.value : event.detail.value[0] || "";
     };
     this.handleMoreClick = () => {
       this.showItems = this.showItems + this.stepItems;
@@ -93,7 +92,7 @@ const StzhMicrositeTeaserlist$1 = /*@__PURE__*/ proxyCustomElement(class StzhMic
       "stzh-microsite-teaserlist": true,
     };
     return (h(Host, null, h("div", { class: classes }, this._tagChips.length > 0 &&
-      h("stzh-chipselect", { "hide-optional": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-cardlist", { layout: "teasers" }, this._filteredSlicedItems.map((item) => h("stzh-card", { href: item.link }, item.image &&
+      h("stzh-chipselect", { "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-cardlist", { layout: "teasers" }, this._filteredSlicedItems.map((item) => h("stzh-card", { href: item.link }, item.image &&
       h("stzh-ratio", { slot: "image" }, h("img", { src: item.image })), item.title &&
       h("div", { slot: "heading" }, item.title), item.description &&
       h("div", { slot: "content" }, item.description)))), this._showMoreLink &&
@@ -127,7 +126,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["stzh-microsite-teaserlist", "stzh-actionset", "stzh-badge", "stzh-button", "stzh-card", "stzh-cardlist", "stzh-chip", "stzh-chipselect", "stzh-clamp", "stzh-dropdown", "stzh-icon", "stzh-link", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-ratio", "stzh-sortable", "stzh-text", "stzh-tooltip"];
+  const components = ["stzh-microsite-teaserlist", "stzh-actionset", "stzh-badge", "stzh-button", "stzh-card", "stzh-cardlist", "stzh-chip", "stzh-chipselect", "stzh-clamp", "stzh-icon", "stzh-link", "stzh-menu", "stzh-menu-item", "stzh-popover", "stzh-ratio", "stzh-sortable", "stzh-text", "stzh-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "stzh-microsite-teaserlist":
       if (!customElements.get(tagName)) {
@@ -135,46 +134,41 @@ function defineCustomElement$1() {
       }
       break;
     case "stzh-actionset":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "stzh-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }
       break;
-    case "stzh-button":
+    case "stzh-badge":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "stzh-card":
+    case "stzh-button":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }
       break;
-    case "stzh-cardlist":
+    case "stzh-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "stzh-chip":
+    case "stzh-cardlist":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "stzh-chipselect":
+    case "stzh-chip":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "stzh-clamp":
+    case "stzh-chipselect":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "stzh-dropdown":
+    case "stzh-clamp":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }

package/dist/components/stzh-microsite-teaserlist.js.map

@@ -1 +1 @@
-{"file":"stzh-microsite-teaserlist.js","mappings":"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","names":["StzhMicrositeTeaserlist"],"sources":["src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.scss?tag=stzh-microsite-teaserlist&encapsulation=scoped","src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-microsite-teaserlist {\n  &__filter {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';\n\nimport {\n  StzhMicrositeTeaserlistTag,\n  StzhMicrositeTeaserlistItem,\n  StzhChipselectItem,\n  StzhChipselectChangeEvent\n} from \"../../index\";\n\n/**\n * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n */\n@Component({\n  tag: \"stzh-microsite-teaserlist\",\n  styleUrl: \"stzh-microsite-teaserlist.scss\",\n  scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n  /** Translation strings */\n  @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  /** Tags */\n  @Prop() tags: string | StzhMicrositeTeaserlistTag[] = [];\n  private _tags: StzhMicrositeTeaserlistTag[] = [];\n  private _tagChips: StzhChipselectItem[] = [];\n\n  /** Numbers of items currently shown */\n  @Prop({ mutable: true }) showItems: number = 6;\n  private _initialShowItems: number;\n\n  /** Numbers of item shown with each load more action */\n  @Prop() stepItems: number = 6;\n\n  @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n  /** Active filter */\n  @State() activeFilter: string = \"\";\n\n  @State() items: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n  private _showMoreLink: boolean = false;\n\n  @Watch(\"items\")\n  @Watch(\"showItems\")\n  @Watch(\"activeFilter\")\n  async filterHandler() {\n    this._filteredItems = this.items\n      .filter((item) => {\n        // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n        return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n      });\n\n    this._filteredSlicedItems = this._filteredItems\n      .slice(0, this.showItems)\n\n    this._showMoreLink = this.showItems < this._filteredItems.length;\n  }\n\n  @Watch(\"items\")\n  @Watch(\"tags\")\n  async tagsWatcher() {\n    if (typeof this.tags === \"string\") {\n      this._tags = JSON.parse(this.tags);\n    } else {\n      this._tags = this.tags;\n    }\n\n    this._tagChips = this._tags.map((tag) => ({\n      \"label\": tag.name,\n      \"value\": tag.id,\n      \"variant\": \"filter\",\n      \"counter\": ((tag.id)\n        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n        : this.items.length).toString()\n    }));\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.items = data.items;\n    this.showItems = this._initialShowItems;\n  }\n\n  private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n    this.showItems = this._initialShowItems;\n    this.activeFilter = event.detail.value;\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.showItems + this.stepItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n    }\n\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-microsite-teaserlist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._tagChips.length > 0 &&\n            <stzh-chipselect\n              hide-optional\n              class=\"stzh-microsite-teaserlist__filter\"\n              label={this.localization.tagsLabel}\n              data={this._tagChips}\n              onStzhChange={this.handleChange}\n            ></stzh-chipselect>\n          }\n\n          <stzh-cardlist layout=\"teasers\">\n            {this._filteredSlicedItems.map((item) =>\n              <stzh-card href={item.link}>\n                {item.image &&\n                  <stzh-ratio slot=\"image\">\n                    <img src={item.image} />\n                  </stzh-ratio>\n                }\n                {item.title &&\n                  <div slot=\"heading\">{item.title}</div>\n                }\n                {/* <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> */}\n                {item.description &&\n                  <div slot=\"content\">{item.description}</div>\n                }\n                {/* <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n              </stzh-card>\n            )}\n          </stzh-cardlist>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-microsite-teaserlist__show-more\">\n              <stzh-button\n                variant=\"secondary\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-microsite-teaserlist.js","mappings":"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","names":["StzhMicrositeTeaserlist"],"sources":["src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.scss?tag=stzh-microsite-teaserlist&encapsulation=scoped","src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-microsite-teaserlist {\n  &__filter {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';\n\nimport {\n  StzhMicrositeTeaserlistTag,\n  StzhMicrositeTeaserlistItem,\n  StzhChipselectItem,\n  StzhChipselectChangeEvent\n} from \"../../index\";\n\n/**\n * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n */\n@Component({\n  tag: \"stzh-microsite-teaserlist\",\n  styleUrl: \"stzh-microsite-teaserlist.scss\",\n  scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n  /** Translation strings */\n  @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  /** Tags */\n  @Prop() tags: string | StzhMicrositeTeaserlistTag[] = [];\n  private _tags: StzhMicrositeTeaserlistTag[] = [];\n  private _tagChips: StzhChipselectItem[] = [];\n\n  /** Numbers of items currently shown */\n  @Prop({ mutable: true }) showItems: number = 6;\n  private _initialShowItems: number;\n\n  /** Numbers of item shown with each load more action */\n  @Prop() stepItems: number = 6;\n\n  @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n  /** Active filter */\n  @State() activeFilter: string = \"\";\n\n  @State() items: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n  private _showMoreLink: boolean = false;\n\n  @Watch(\"items\")\n  @Watch(\"showItems\")\n  @Watch(\"activeFilter\")\n  async filterHandler() {\n    this._filteredItems = this.items\n      .filter((item) => {\n        // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n        return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n      });\n\n    this._filteredSlicedItems = this._filteredItems\n      .slice(0, this.showItems)\n\n    this._showMoreLink = this.showItems < this._filteredItems.length;\n  }\n\n  @Watch(\"items\")\n  @Watch(\"tags\")\n  async tagsWatcher() {\n    if (typeof this.tags === \"string\") {\n      this._tags = JSON.parse(this.tags);\n    } else {\n      this._tags = this.tags;\n    }\n\n    this._tagChips = this._tags.map((tag) => ({\n      \"label\": tag.name,\n      \"value\": tag.id,\n      \"variant\": \"filter\",\n      \"counter\": ((tag.id)\n        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n        : this.items.length).toString()\n    }));\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.items = data.items;\n    this.showItems = this._initialShowItems;\n  }\n\n  private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n    this.showItems = this._initialShowItems;\n    this.activeFilter = typeof event.detail.value === \"string\" ? event.detail.value : event.detail.value[0] || \"\";\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.showItems + this.stepItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n    }\n\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-microsite-teaserlist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._tagChips.length > 0 &&\n            <stzh-chipselect\n              hide-optional\n              label-hidden\n              class=\"stzh-microsite-teaserlist__filter\"\n              label={this.localization.tagsLabel}\n              data={this._tagChips}\n              onStzhChange={this.handleChange}\n            ></stzh-chipselect>\n          }\n\n          <stzh-cardlist layout=\"teasers\">\n            {this._filteredSlicedItems.map((item) =>\n              <stzh-card href={item.link}>\n                {item.image &&\n                  <stzh-ratio slot=\"image\">\n                    <img src={item.image} />\n                  </stzh-ratio>\n                }\n                {item.title &&\n                  <div slot=\"heading\">{item.title}</div>\n                }\n                {/* <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> */}\n                {item.description &&\n                  <div slot=\"content\">{item.description}</div>\n                }\n                {/* <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n              </stzh-card>\n            )}\n          </stzh-cardlist>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-microsite-teaserlist__show-more\">\n              <stzh-button\n                variant=\"secondary\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-pagebottom.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './stzh-share2.js';
 import { d as defineCustomElement$3 } from './stzh-text2.js';
 import { d as defineCustomElement$2 } from './stzh-tooltip2.js';
 
-const stzhPagebottomCss = ".sc-stzh-pagebottom-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-pagebottom-h{display:none}.sc-stzh-pagebottom-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagebottom-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::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-pagebottom-h .has-focus.sc-stzh-pagebottom{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom{outline-style:none !important}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom::-moz-focus-inner{border:0 !important}@media print{.sc-stzh-pagebottom-h{display:none}}.stzh-pagebottom__wrapper.sc-stzh-pagebottom{display:grid}.stzh-pagebottom__left.sc-stzh-pagebottom{display:flex;flex-direction:column;flex-wrap:wrap;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagebottom__left.sc-stzh-pagebottom{flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-left:auto;margin-top:var(--stzh-space-medium);--stzh-button-white-space:nowrap}@media screen and (min-width: 600px){.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-top:0}}.stzh-pagebottom__print.sc-stzh-pagebottom,.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{flex-shrink:0}.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:-0.625rem}@media screen and (min-width: 600px){.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:0}}@media screen and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xbig)}}.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:auto}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:minmax(0, 1fr) calc(6.875rem + 2.75rem + var(--stzh-space-small) + var(--stzh-space-medium))}}";
+const stzhPagebottomCss = ".sc-stzh-pagebottom-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-pagebottom-h{display:none}.sc-stzh-pagebottom-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagebottom-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagebottom-h *.sc-stzh-pagebottom,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::before,.sc-stzh-pagebottom-h *.sc-stzh-pagebottom::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-pagebottom-h .has-focus.sc-stzh-pagebottom{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom{outline-style:none !important}.sc-stzh-pagebottom-h .stzh-fylingfocus-focused.sc-stzh-pagebottom::-moz-focus-inner{border:0 !important}@media print{.sc-stzh-pagebottom-h{display:none}}.stzh-pagebottom__wrapper.sc-stzh-pagebottom{display:grid}.stzh-pagebottom__left.sc-stzh-pagebottom{display:flex;flex-direction:column;flex-wrap:wrap;row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pagebottom__left.sc-stzh-pagebottom{flex-direction:row}}.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pagebottom__share-title.sc-stzh-pagebottom{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-left:auto;margin-top:var(--stzh-space-medium);--stzh-button-white-space:nowrap}@media screen and (min-width: 600px){.stzh-pagebottom__sticky-actions.sc-stzh-pagebottom{margin-top:0}}.stzh-pagebottom__print.sc-stzh-pagebottom,.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{flex-shrink:0}.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:-0.625rem}@media screen and (min-width: 900px){.stzh-pagebottom__share-wrapper.sc-stzh-pagebottom{margin-left:0}}@media screen and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 600px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-pagebottom__print.sc-stzh-pagebottom{margin-right:var(--stzh-space-xbig)}}.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:auto}@media screen and (min-width: 600px){.stzh-pagebottom.sc-stzh-pagebottom:has(.stzh-pagebottom__sticky-actions:not(:empty)) .stzh-pagebottom__wrapper.sc-stzh-pagebottom{grid-template-columns:minmax(0, 1fr) calc(6.875rem + 2.75rem + var(--stzh-space-small) + var(--stzh-space-medium))}}";
 
 const StzhPagebottom$1 = /*@__PURE__*/ proxyCustomElement(class StzhPagebottom extends HTMLElement {
   constructor() {

package/dist/components/stzh-pagebottom.js.map

@@ -1 +1 @@
-{"file":"stzh-pagebottom.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;MCqB3vHA,gBAAc;;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACb,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClB,WAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAEN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhPagebottom"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n  @media print {\n    display: none;\n  }\n\n  // ::slotted([slot=\"logo\"]) {\n  //   height: 38px;\n  // }\n}\n\n.stzh-pagebottom {\n  &__wrapper {\n    display: grid;\n  }\n\n  &__left {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    row-gap: space('xsmall');\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__share-title {\n    @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n  }\n\n  &__sticky-actions {\n    margin-left: auto;\n    margin-top: space('medium');\n\n    --stzh-button-white-space: nowrap;\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__print,\n  &__share-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__share-wrapper {\n    margin-left: -10px;\n\n    @include mq($from: small) {\n      margin-left: 0;\n    }\n  }\n\n  &__print {\n    @include mq($from: small) {\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      @include spaceCurve('margin-right', 'big');\n    }\n  }\n\n  // &__logo {\n  //   @include mq($from: small) {\n  //     margin-left: auto;\n  //   }\n  // }\n\n  // &__logo-link {\n  //   &:not(:empty) {\n  //     display: block;\n  //     margin-top: space('xlarge');\n\n  //     @include mq($from: small) {\n  //       margin-top: 0;\n  //       margin-left: space('xlarge');\n  //     }\n  //   }\n  // }\n\n  &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n    grid-template-columns: auto;\n\n    @include mq($from: small) {\n      grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/**\n * @slot logo - Slot for a logo image\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /**  Translation strings. */\n  @Prop() localization: StzhPagebottomLocalizedText;\n\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop({ reflect: true }) shareDisabled: boolean;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to show print button */\n  @Prop({ reflect: true }) withPrint: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute of the print button element.\n   */\n  @Prop() printAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  // @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n    }\n  }\n\n  render() {\n    // const printUsed: boolean = hasSlot(this.element, \"print\");\n    // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagebottom__wrapper\">\n            <div class=\"stzh-pagebottom__left\">\n              {this.withPrint &&\n                <div class=\"stzh-pagebottom__print\">\n                  <stzh-print>\n                    <stzh-button\n                      label={this.localization.printLabel}\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      noPaddingRight={true}\n                      analyticsId={this.printAnalyticsId}\n                    ></stzh-button>\n                  </stzh-print>\n                </div>\n              }\n\n              {!this.shareDisabled &&\n                <div class=\"stzh-pagebottom__share-wrapper\">\n                  {this.shareTitle &&\n                    <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n                  }\n                  <stzh-share\n                    url={this.shareUrl}\n                    services={this.shareServices}\n                    mailSubject={this.shareMailSubject}\n                    mailBody={this.shareMailBody}\n                  ></stzh-share>\n                </div>\n              }\n            </div>\n\n            <div class=\"stzh-pagebottom__sticky-actions\">\n              <slot name=\"sticky-actions\"></slot>\n            </div>\n          </div>\n\n          {/* {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          } */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pagebottom.js","mappings":";;;;;;;;;AAAA,MAAM,iBAAiB,GAAG,8uHAA8uH;;MCqB3vHA,gBAAc;;;;;sBAKI,EAAE;;;;;;oBAqBJ,8BAA8B;;;;EAoBzD,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;KACrG;GACF;EAED,MAAM;;;IAIJ,MAAM,OAAO,GAAG;MACd,iBAAiB,EAAE,IAAI;MACvB,SAAS,EAAE,IAAI;KAChB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,0BAA0B,IACnC,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,SAAS;MACb,WAAK,KAAK,EAAC,wBAAwB,IACjC,sBACE,mBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,UAAU,EACnC,OAAO,EAAC,gBAAgB,EACxB,IAAI,EAAC,OAAO,EACZ,aAAa,EAAE,IAAI,EACnB,cAAc,EAAE,IAAI,EACpB,WAAW,EAAE,IAAI,CAAC,gBAAgB,GACrB,CACJ,CACT,EAGP,CAAC,IAAI,CAAC,aAAa;MAClB,WAAK,KAAK,EAAC,gCAAgC,IACxC,IAAI,CAAC,UAAU;QACd,WAAK,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,UAAU,CAAO,EAEnE,kBACE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,aAAa,GAChB,CACV,CAEJ,EAEN,WAAK,KAAK,EAAC,iCAAiC,IAC1C,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CAaF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhPagebottom"],"sources":["src/components/stzh-pagebottom/stzh-pagebottom.scss?tag=stzh-pagebottom&encapsulation=scoped","src/components/stzh-pagebottom/stzh-pagebottom.tsx"],"sourcesContent":[":host {\n  @media print {\n    display: none;\n  }\n\n  // ::slotted([slot=\"logo\"]) {\n  //   height: 38px;\n  // }\n}\n\n.stzh-pagebottom {\n  &__wrapper {\n    display: grid;\n  }\n\n  &__left {\n    display: flex;\n    flex-direction: column;\n    flex-wrap: wrap;\n    row-gap: space('xsmall');\n\n    @include mq($from: small) {\n      flex-direction: row;\n    }\n  }\n\n  &__share-title {\n    @include fontCurve('caption');\n\t\tmargin-bottom: space('small');\n  }\n\n  &__sticky-actions {\n    margin-left: auto;\n    margin-top: space('medium');\n\n    --stzh-button-white-space: nowrap;\n\n    @include mq($from: small) {\n      margin-top: 0;\n    }\n  }\n\n  &__print,\n  &__share-wrapper {\n    flex-shrink: 0;\n  }\n\n  &__share-wrapper {\n    margin-left: -10px;\n\n    @include mq($from: medium) {\n      margin-left: 0;\n    }\n  }\n\n  &__print {\n    @include mq($from: small) {\n      margin-right: space('xxlarge');\n    }\n\n    @include mq($from: medium) {\n      @include spaceCurve('margin-right', 'big');\n    }\n  }\n\n  // &__logo {\n  //   @include mq($from: small) {\n  //     margin-left: auto;\n  //   }\n  // }\n\n  // &__logo-link {\n  //   &:not(:empty) {\n  //     display: block;\n  //     margin-top: space('xlarge');\n\n  //     @include mq($from: small) {\n  //       margin-top: 0;\n  //       margin-left: space('xlarge');\n  //     }\n  //   }\n  // }\n\n  &:has(#{&}__sticky-actions:not(:empty)) &__wrapper {\n    grid-template-columns: auto;\n\n    @include mq($from: small) {\n      grid-template-columns: minmax(0, 1fr) calc(110px + 44px + #{space('small')} + #{space('medium')});\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport { ShareService } from \"../../index\";\n// import { hasSlot } from \"../../utils/utils\";\n\nimport { StzhPagebottomLocalizedText } from \"./stzh-pagebottom.localization\";\n\n/**\n * @slot logo - Slot for a logo image\n */\n@Component({\n  tag: \"stzh-pagebottom\",\n  styleUrl: \"stzh-pagebottom.scss\",\n  scoped: true\n})\nexport class StzhPagebottom {\n  /**  Translation strings. */\n  @Prop() localization: StzhPagebottomLocalizedText;\n\n  /** Share Title */\n  @Prop() shareTitle: string = \"\";\n\n  /** URL of current site (uses full URL by default) */\n  @Prop() shareUrl: string;\n\n  /**\n   * Array of enabled share buttons.\n   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`\n   */\n  @Prop() shareServices: ShareService[] | string;\n\n  /** Whether to show share */\n  @Prop({ reflect: true }) shareDisabled: boolean;\n\n  /** Overwrite share mail subject translation */\n  @Prop() shareMailSubject: string;\n\n  /** Overwrite share mail body translation */\n  @Prop() shareMailBody: string;\n\n  /** Logo href */\n  @Prop() logoHref: string = \"https://www.stadt-zuerich.ch\";\n\n  /** Whether to show print button */\n  @Prop({ reflect: true }) withPrint: boolean;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute of the print button element.\n   */\n  @Prop() printAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the logo link element.\n   * Default value will be \"Footer Logo\"\n   */\n  // @Prop() logoAnalyticsId: string;\n\n  @Element() element: HTMLStzhPagebottomElement;\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagebottom\");\n    }\n  }\n\n  render() {\n    // const printUsed: boolean = hasSlot(this.element, \"print\");\n    // const logoUsed: boolean = hasSlot(this.element, \"logo\");\n\n    const classes = {\n      \"stzh-pagebottom\": true,\n      \"rs_skip\": true // will prevent component being read by readspeaker\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-pagebottom__wrapper\">\n            <div class=\"stzh-pagebottom__left\">\n              {this.withPrint &&\n                <div class=\"stzh-pagebottom__print\">\n                  <stzh-print>\n                    <stzh-button\n                      label={this.localization.printLabel}\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      noPaddingRight={true}\n                      analyticsId={this.printAnalyticsId}\n                    ></stzh-button>\n                  </stzh-print>\n                </div>\n              }\n\n              {!this.shareDisabled &&\n                <div class=\"stzh-pagebottom__share-wrapper\">\n                  {this.shareTitle &&\n                    <div class=\"stzh-pagebottom__share-title\">{this.shareTitle}</div>\n                  }\n                  <stzh-share\n                    url={this.shareUrl}\n                    services={this.shareServices}\n                    mailSubject={this.shareMailSubject}\n                    mailBody={this.shareMailBody}\n                  ></stzh-share>\n                </div>\n              }\n            </div>\n\n            <div class=\"stzh-pagebottom__sticky-actions\">\n              <slot name=\"sticky-actions\"></slot>\n            </div>\n          </div>\n\n          {/* {logoUsed &&\n            <div class=\"stzh-pagebottom__logo\">\n              <a\n                href={this.logoHref}\n                class=\"stzh-pagebottom__logo-link\"\n                s-object-id={this.logoAnalyticsId || \"Footer Logo\"}\n              >\n                <slot name=\"logo\"></slot>\n              </a>\n            </div>\n          } */}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-radio2.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 import { d as defineCustomElement$1 } from './stzh-text2.js';
 
-const stzhRadioCss = ".sc-stzh-radio-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-radio-h{display:none}.sc-stzh-radio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::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-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{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-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{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);position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:\"\"}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary90)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary90)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}";
+const stzhRadioCss = ".sc-stzh-radio-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-radio-h{display:none}.sc-stzh-radio-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::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-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}[disabled].sc-stzh-radio-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radio.sc-stzh-radio{display:grid}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{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-radio__description-long.sc-stzh-radio{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radio__description-long.sc-stzh-radio{margin-top:0}}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-button.sc-stzh-radio{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{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);position:relative;display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:\"\"}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{--stzh-base-color:initial;display:inline-block;color:var(--stzh-base-color);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary90)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary70)}.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary90)}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error60)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-grey60)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-grey50)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-grey20)}";
 
 let radioCounter = 0;
 const StzhRadio = /*@__PURE__*/ proxyCustomElement(class StzhRadio extends HTMLElement {

package/dist/components/stzh-radio2.js.map

@@ -1 +1 @@
-{"file":"stzh-radio2.js","mappings":"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","names":[],"sources":["src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: $colorPrimary90;\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: $colorPrimary90;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 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 */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\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 element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: 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  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\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-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\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    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-radio2.js","mappings":"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","names":[],"sources":["src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-radio {\n  @include input-description;\n  display: grid;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: $colorPrimary90;\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary70;\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: $colorPrimary90;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 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 */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\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 element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: 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  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\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-radio\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent('blur', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\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    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid || errorUsed,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\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        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}